Báo cáo web thế hệ mới

Giới thiệu - Angular là một bộ Javascript Framework rất mạnh và thường được sử dụng để xây dựng project Single Page Application SPA.. Đây là một Framework mã nguồn mở hoàn toàn miễn phí

I Giới thiệu web thế hệ mới

- Ngày nay smartphone, điện thoại di động ngày càng nhiều , và giá thành

rẻ khiến cho số lượng người sử dụng Smartphone và điện thoại di động thay vì dùng desktop/laptop để truy cập web ngày càng tăng Thêm vào

đó sử dụng điện thoại để lướt web rất tiện với những người hay phải di chuyển thường xuyên.

- Chính vì vậy nếu thiết kế website hiển thị tốt trên điện thoại di động giúp tăng trải nghiệm cho người dùng thì chắc chắn sẽ thu hút được một lượng người tiêu dùng khá lớn.

- Vì vậy công nghệ Responsive Web Design ra đời, được hiểu ngắn gọn là khi một trang website được thiết kế phải có khả năng tự động điều chỉnh

để hiển thị trên những thiết bị có kích thước màn hình khác nhau bằng cách áp dụng nhiều bố cục cho từng loại kích cỡ màn hình khác nhau.

- Và để tăng được tương tác với người dùng, Thật sự nếu không có

Javascript thì có lẽ đã không có thế hệ Web 2.0 cùng với xu hướng cải thiện tương tác website như hiện nay Như các bạn cũng biết, môi trường web thuần túy (không nói Flash, Silverlight…) chỉ có CSS và HTML thì

sự tương tác cực kỳ nghèo nàn Cách thức người dùng tương tác với website chẳng khác gì cách đây 20 năm Do đó, để làm sống động

website thì các Developer cần phải nghiên cứu và áp dụng các kỹ thuật Javascript khác nhau lên website để tăng cường hiệu quả tương tác Một trong những kỹ thuật cho tới ngày nay vẫn phát huy tác dụng đó là

AJAX Ngoài ra còn một số mã nguồn mở khác trong xu hướng web hiện nay như: AngularJS, Backbone, Bootstrap

II Các công nghệ web phổ biến

1 AngularJS

a Giới thiệu

- Angular là một bộ Javascript Framework rất mạnh và thường được sử

dụng để xây dựng project Single Page Application (SPA) Nó hoạt động

dựa trên các thuộc tính mở rộng HTML (các atributes theo quy tắc của Angular) Đây là một Framework mã nguồn mở hoàn toàn miễn phí và được hàng ngàn các lập trình viên trên thế giới ưa chuộng và sử dụng.

b Đặc tính của angularJS

AngularJS có các đặc tính:

- AngularJS là một Framwork phát triển dựa trên Javascript để tạo các ứng dụng web phong phú

- AngularJS thường dùng để phát triển frontend (giao diện khách hàng) thông qua các API để gọi data, sử dụng mô hình MVC rất mạnh mẽ

- Mã nguồn AngularJS tự động fix với các trình duyệt khác nhau nên bạn không cần phải lo vấn đề tương thích trình duyệt

- Angular là mã nguồn mở, hoàn toàn miễn phí và được phát triển bởi hàng ngàn các lập trình viên trên thế giới.

- Chung quy lại có thể hiểu khi làm việc với AngularJS giống như là đang làm việc với Ajax, sử dụng cớ chế bind data, hoạt động theo mô hình MVC và sử dụng service để tương tác với dữ liệu từ server

c Tính năng cốt lõi của AngularJS

- Sau đây là các tính năng cốt lõi quan trọng trong AngularJS

o Data-binding: (liên kết dữ liệu) tự động đồng bộ dữ liệu giữa model

và view

o Scope: (Phạm vi) Đây là những đối tượng kết nối giữa Controller và

View

o Controller: Đây là những hàm javascript xử lý kết hợp với bộ điều

khiển Scope

o Service: Như tôi đề cập ở trên, AngularJS sử dụng các API được xây

dựng từ các web service (PHP, ASP) để thao tác với DB.

o Filters: Bộ lọc lọc ra các thành phẩn của một mảng và trả về mảng

mới

o Directives: đánh dấu vào các yếu tố của DOM, nghĩa là sẽ tạo ra các

thẻ HTML tùy chỉnh

o Templates: hiển thị thông tin từ controller, đây là một thành phần của

views

o Routing: chuyển đổi giữa các action trong controller

o MVC: Mô hình chia thành phần riêng biệt thành Model, View,

Controller Đây là một mô hình khá hay nhưng trong Angular thì nó được chế biến lại một chút gần giốn với MVVM (Model View View Model)

o Deep Linking: Liên kết sâu, cho phép bạn mã hóa trạng thái của ứng

dụng trong các URL để nó có thể đánh dấu được với công cụ tìm kiếm.

o Dependency Injection: Angular giúp các nhà phát triển tạo ứng dụng

dễ dàng hơn để phát triển, hiểu và thử nghiệm dễ dàng.

d Các Components chính trong AngularJS

Angular JS được chia làm ba thành phần chính sau đây:

o ng-app: định nghĩa này chỉ thị một kết nối ứng dụng Angular JS tới

HTML

o ng-model: chỉ thị này liên kết với dữ liệu của ứng dụng Angular

o ng-bind: chỉ thị này dùng đưa dữ liệu vào HTML tags

2 Twitter Bootstrap

a Bootstrap là gì?

- Bootstrap là một Font-end Framework được viết bằng SASS và biên dịch thành CSS, nó là một bộ thư viện mạnh mẽ được tích hợp nhiều CSS có sẵn giúp cho việc lập trình HTML & CSS trở nên đơn giản và dễ dàng hơn Thông thường khi chúng ta lập trình bằng CSS thuần thì công việc kiểm tra tính tương thích trên các trình duyệt khác nhau và trên các thiết bị di động khác nhau rất là khó khăn, nhưng với Bootstrap thì lập trình viên không cần phải tốn nhiều công sức nữa vì mọi thứ đã có người tạo nên Bootstrap lo.

- Bootstrap chia layout của một trang web ra thành 960 Grid và gồm 12 cột, mỗi cột 80Grid và đây chính lả chuẩn thiết kế HTML & CSS của Bootstrap

Nó có hỗ trợ hầu hết các module của một trang web như menu, tabs, tooltip, popup, Ngoài ra nó còn sử dụng thêm Javascript để xử lý các hiệu ứng cấp cao, code javascript của nó sử dụng jquery nên để sử dụng được bắt buộc bạn phải bổ sung thêm thư viện jQuery nữa.

b Các lợi ích khi sử dụng Bootstrap

- Phát triển giao diện nhanh chóng : Bạn dễ dàng phát riển giao diện website một cách rất nhanh, nếu một trang bình thường thì bạn có thể cắt xong trong một ngày hoặc chưa tới một ngày Chưa kể đến tính tương thích với các trình duyệt và thiets bị di động

- Dễ học, dễ sử dụng : Cộng đồng đông đúc và tài liệu tham khảo rõ ràng

chính là sức mạnh của Bootstrap.

- Javascript: Hỗ trợ Javacript sử dụng jQuery, vì vậy bạn dễ dàng Custom làm theo ý của riêng mình mà không sợ bị đụng code JS.

- SASS: Trước đây Bootstrap sử dụng LESS để xây dựng, tuy nhiện hiện nay Version mới nhất là 4.x người ta đã thay thế LESS bằng SASS nhằm mục đích tối ưu CSS và giúp cho nó hoạt động hiệu quả hơn.

- Hỗ trợ SEO tốt : Đây là lý do quan trọng nhất bởi vì hiện nay Google đã cập nhật thuật toán tìm kiếm và Responsive là một yếu tố rất quan trọng

để đưa từ khóa lên top.

3 Backbone

a Backbone là gì ?

- Backbone là một javascript framework giúp cho việc code hiệu quả hơn,

và tạo ra một ứng dụng js đẹp, tốt và có cấu trúc hơn Nó cung cấp rất nhiều API giúp phát triển ứng dụng nhanh hơn.

- BackboneJs là một thư viện/framework hỗ trợ lập trình viên tổ chức code

tốt hơn, lập trình với dữ liệu và các DOM nhanh chóng, tiện lợi và có tổ chức hơn, Nó cho phép viết một client-app có cấu trúc, đẹp và gọn hơn với khá nhiều API giúp việc lập trình web application trở nên nhanh chóng và dễ dàng.

- Có thể bạn đã biết đến AJAX, và các mô hình đại loại có thể mô tả là

“cập nhật dữ liệu mà không refresh trang” hay có cách nói dí dỏm là

“web động mà không động” Bạn có thể hình dung là chúng ta sẽ sử dụng javascript để trao đổi dữ liệu giữa client và server Theo chiều từ client-server, thì các đoạn script ở client sẽ thu thập thông tin từ các input và truyền về cho server, đồng thời thay đổi cấu trúc html trên trang hiện tại Giờ là chiều từ server-client, Server sẽ tiếp nhận dữ liệu, xử lý và trả dữ liệu về cho client, script trên client sẽ nhận dữ liệu và tổ chức, fill vào các đoạn code html và hiển thị cho người dùng Như vậy, toàn bộ hai quá trình đề không hề tải lại các tài nguyên như css, html và js, giúp giảm thời gian chờ của người dùng, thời gian đáp ứng của server và tăng độ

“đẹp” của UX.

- Backbone hỗ trợ ta làm điều này một cách dễ dàng và gọn nhẹn hơn Nó cung cấp một vài khái niệm như : model dùng để map với data trao đổi giữa server-client, View là các đoạn hml dùng để show ra trang web, khung sường để hiển thị dữ liệu Đồng thời cũng cho phép đồng bộ dữ liệu giữa clien và server Rất nhanh chóng và tiện lợi Vì nó đã viết sẵn các phương thức cần thiết, ta chỉ việc … ăn thôi.

b Các class tiêu biểu

- Model : Giống như linh hồn của app, model chứa dữ liệu, những dữ liệu

này được dùng để trao đổi với server, được fill vào các View và show ra trang html, cũng như tính toán dữ liệu đề dựa trên nó.

- View : Nếu model là linh hồn, thì view chính là thể xác, là phần da bọc

bên ngoài, nó cho phép kết nối giữa model và html bên ngoài, fill dữ từ model vào các template, tạo thành code hml rồi show nó.

- Collection : Có model thì cũng cần phải có cái gì đó để chứa và xử lý

một danh sách các model này chứ đúng không, Collection được tạo ra là

để làm điều đó.

- Event : Backbone cũng là javascript, và nó hỗ trợ Event, cho phép bạn

gọi thực hiện các thao tác trên model, view hoặc collection khi một sự kiện nào đó được gọi, bên cạnh các sự kiện bình thường như click, move,

…, bạn cũng có thể tạo các event mới tùy ý.

- Sync : Đây có lẽ là không thể thiếu đúng không, nó cho phép đồng bộ dữ

liệu giữa client và server chỉ với phương thức save() Ta chỉ việc khai báo endpoint, và gọi phương thức save() là được Mà không cần phải sử dụng ajax ở khắp nơi nữa.

III Ứng dụng thử nghiệm

Triển khai một ứng dụng Web Responsive sử dụng Bootstrap và tối ưu load với Backbone

1 Sử dụng Bootstrap

- Sau khi cài đặt, ta thêm vào html các mã nguồn của bootstrap:

@media (min-width: 1210px)

…

@media (max-width: 980px)

…

@media (min-width: 768px) and (max-width:

980px)

…

@media (min-width: 480px) and (max-width:

768px)

- Thử nghiệm hiển thị với các kích thước màn hình khác nhau:

Với màn hình 1316x886

Với màn hình 645x779

2 Sử dụng Backbone

- Với backbone, ta thiết kế trang web theo mô hình MVC

a Chèn backbone vào trang html

<script src="lib/jquery-1.7.1.min.js"></script

<script src="lib/underscore-min.js"></script>

<script src="lib/backbone-min.js"></script>

<script src="js/myScript.js"></script>

b Model

- Ta tạo model cho sản phẩm với các thuộc tính và hàm như sau:

window.Wine = Backbone.Model.extend({

urlRoot: "api/wines",

initialize: function () {

this.validators = {};

this.validators.name = function (value) {

return value.length > 0 ? {isValid: true} : {isValid: false, message: "You must enter a name"};

};

this.validators.grapes = function (value) {

return value.length > 0 ? {isValid: true} : {isValid: false, message: "You must enter a grape variety"};

};

this.validators.country = function (value) {

return value.length > 0 ? {isValid: true} : {isValid: false,

message: "You must enter a country"};

};

}, validateItem: function (key) { return (this.validators[key]) ? this.validators[key](this.get(key)) : {isValid: true};

}, // TODO: Implement Backbone's standard validate() method instead validateAll: function () {

var messages = {};

for (var key in this.validators) { if(this.validators.hasOwnProperty(key)) { var check = this.validators[key](this.get(key));

if (check.isValid === false) { messages[key] = check.message;

} } } return _.size(messages) > 0 ? {isValid: false, messages: messages} : {isValid: true};

}, //Tạo thông số mặc định cho sản phẩm mới defaults: {

id: null, name: "", grapes: "", country: "USA", region: "California", year: "",

description: "", picture: "generic.jpg"

} });

window.WineCollection = Backbone.Collection.extend({

model: Wine, url: "api/wines"

});

- Ở đây model được kết nối tới API để lấy dữ liệu từ database

c View

- View hiển thị List sản phẩm:

window.WineListView = Backbone.View.extend({

initialize: function () { this.render();

}, render: function () { var wines = this.model.models;

var len = wines.length;

var startPos = (this.options.page - 1) * 8;

var endPos = Math.min(startPos + 8, len);

$(this.el).html('<ul class="thumbnails"></ul>');

for (var i = startPos; i < endPos; i++) { $('.thumbnails', this.el).append(new WineListItemView({model: wines[i]}).render().el); }

$(this.el).append(new Paginator({model: this.model, page:

this.options.page}).render().el);

return this;

} });

window.WineListItemView = Backbone.View.extend({

tagName: "li", className: "span3", initialize: function () { this.model.bind("change", this.render, this);

this.model.bind("destroy", this.close, this);

}, render: function () { $(this.el).html(this.template(this.model.toJSON()));

return this;

} });

Kết quả:

- View hiển thị chi tiết sản phẩm bao gồm cả Thêm, sửa, xóa sản phẩm

window.WineView = Backbone.View.extend({

initialize: function () { this.render();

}, render: function () { $(this.el).html(this.template(this.model.toJSON()));

return this;

}, events: { "change" : "change",

"click save" : "beforeSave",

"click delete" : "deleteWine",

"drop #picture" : "dropHandler"

},

change: function (event) {

// Remove any existing alert message

utils.hideAlert();

// Apply the change to the model

var target = event.target;

var change = {};

change[target.name] = target.value;

this.model.set(change);

// Run validation rule (if any) on changed item

var check = this.model.validateItem(target.id);

if (check.isValid === false) {

utils.addValidationError(target.id, check.message);

} else {

utils.removeValidationError(target.id);

}

},

beforeSave: function () {

var self = this;

var check = this.model.validateAll();

if (check.isValid === false) {

utils.displayValidationErrors(check.messages);

return false;

}

// Upload picture file if a new file was dropped in the drop area

if (this.pictureFile) {

this.model.set("picture", this.pictureFile.name);

utils.uploadFile(this.pictureFile,

function () {

self.saveWine();

}

);

} else {

this.saveWine();

}

return false;

},

saveWine: function () {

var self = this;

this.model.save(null, {

success: function (model) {

self.render();

app.navigate('wines/' + model.id, false);

utils.showAlert('Success!', 'Wine saved successfully', 'alert-success');

},

error: function () {

utils.showAlert('Error', 'An error occurred while trying to delete this item', 'alert-error');

}

});

},

deleteWine: function () { this.model.destroy({

success: function () { alert('Wine deleted successfully');

window.history.back();

} });

return false;

}, dropHandler: function (event) { event.stopPropagation();

event.preventDefault();

var e = event.originalEvent;

e.dataTransfer.dropEffect = 'copy';

this.pictureFile = e.dataTransfer.files[0];

// Read the image file from the local file system and display it in the img tag

var reader = new FileReader();

reader.onloadend = function () { $('#picture').attr('src', reader.result);

};

reader.readAsDataURL(this.pictureFile);

} });

Kết quả:

d Controller

var AppRouter = Backbone.Router.extend({