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

I II Giới thiệu web hệ - Ngày smartphone, điện thoại di động ngày nhiều , giá thành rẻ khiến cho số lượng người sử dụng Smartphone điện thoại di động thay dùng desktop/laptop để truy cập web ngày tăng Thêm vào sử dụng điện thoại để lướt web tiện với người hay phải di chuyển thường xuyên - Chính thiết kế website hiển thị tốt điện thoại di động giúp tăng trải nghiệm cho người dùng chắn thu hút lượng người tiêu dùng lớn - Vì công nghệ Responsive Web Design đời, hiểu ngắn gọn trang website thiết kế phải có khả tự động điều chỉnh để hiển thị thiết bị có kích thước hình khác cách áp dụng nhiều bố cục cho loại kích cỡ hình khác - Và để tăng tương tác với người dùng, Thật Javascript có lẽ không hệ Web 2.0 với xu hướng cải thiện tương tác website Như bạn biết, môi trường web túy (không nói Flash, Silverlight…) có CSS HTML tương tác nghèo nàn Cách thức người dùng tương tác với website chẳng khác cách 20 năm Do đó, để làm sống động website Developer cần phải nghiên cứu áp dụng kỹ thuật Javascript khác lên website để tăng cường hiệu tương tác Một kỹ thuật ngày phát huy tác dụng AJAX Ngoài số mã nguồn mở khác xu hướng web như: AngularJS, Backbone, Bootstrap Các công nghệ web phổ biến AngularJS a Giới thiệu - Angular Javascript Framework mạnh thường sử dụng để xây dựng project Single Page Application (SPA) Nó hoạt động dựa thuộc tính mở rộng HTML (các atributes theo quy tắc Angular) Đây Framework mã nguồn mở hoàn toàn miễn phí hàng ngàn lập trình viên giới ưa chuộng sử dụng b Đặc tính angularJS AngularJS có đặc tính: - AngularJS Framwork phát triển dựa Javascript để tạo ứ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 API để gọi data, sử dụng mô hình MVC mạnh mẽ - Mã nguồn AngularJS tự động fix với trình duyệt khác nên bạn không cần phải lo vấn đề tương thích trình duyệt - Angular mã nguồn mở, hoàn toàn miễn phí phát triển hàng ngàn lập trình viên giới - Chung quy lại hiểu làm việc với AngularJS giống làm việc với Ajax, sử dụng cớ chế bind data, hoạt động theo mô hình MVC sử dụng service để tương tác với liệu từ server c Tính cốt lõi AngularJS - Sau tính cốt lõi quan trọng AngularJS o Data-binding: (liên kết liệu) tự động đồng liệu model view o Scope: (Phạm vi) Đây đối tượng kết nối Controller View o Controller: Đây hàm javascript xử lý kết hợp với điều khiển Scope o Service: Như đề cập trên, AngularJS sử dụng API xây dựng từ web service (PHP, ASP) để thao tác với DB o Filters: Bộ lọc lọc thành phẩn mảng trả mảng o Directives: đánh dấu vào yếu tố DOM, nghĩa tạo thẻ HTML tùy chỉnh o Templates: hiển thị thông tin từ controller, thành phần views o Routing: chuyển đổi action controller o MVC: Mô hình chia thành phần riêng biệt thành Model, View, Controller Đây mô hình hay Angular chế biến lại 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 ứng dụng URL để đánh dấu với công cụ tìm kiếm o Dependency Injection: Angular giúp nhà phát triển tạo ứng dụng dễ dàng để phát triển, hiểu thử nghiệm dễ dàng d Các Components AngularJS Angular JS chia làm ba thành phần sau đây: o ng-app: định nghĩa thị kết nối ứng dụng Angular JS tới HTML o ng-model: thị liên kết với liệu ứng dụng Angular o ng-bind: thị dùng đưa liệu vào HTML tags Twitter Bootstrap a Bootstrap gì? - Bootstrap Font-end Framework viết SASS biên dịch thành CSS, thư viện mạnh mẽ 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 dễ dàng Thông thường lập trình CSS công việc kiểm tra tính tương thích trình duyệt khác thiết bị di động khác khó khăn, với Bootstrap lập trình viên không cần phải tốn nhiều công sức thứ có người tạo nên Bootstrap lo - Bootstrap chia layout trang web thành 960 Grid gồm 12 cột, cột 80Grid lả chuẩn thiết kế HTML & CSS Bootstrap Nó có hỗ trợ hầu hết module trang web menu, tabs, tooltip, popup, Ngoài sử dụng thêm Javascript để xử lý hiệu ứng cấp cao, code javascript sử dụng jquery nên để sử dụng bắt buộc bạn phải bổ sung thêm thư viện jQuery b Các lợi ích 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 cách nhanh, trang bình thường bạn cắt xong ngày chưa tới ngày Chưa kể đến tính tương thích với trình duyệt thiets bị di động - Dễ học, dễ sử dụng: Cộng đồng đông đúc tài liệu tham khảo rõ ràng sức mạnh Bootstrap - Javascript: Hỗ trợ Javacript sử dụng jQuery, bạn dễ dàng Custom làm theo ý riêng mà không sợ bị đụng code JS - SASS: Trước Bootstrap sử dụng LESS để xây dựng, nhiện Version 4.x người ta thay LESS SASS nhằm mục đích tối ưu CSS giúp cho hoạt động hiệu - Hỗ trợ SEO tốt: Đây lý quan trọng Google cập nhật thuật toán tìm kiếm Responsive yếu tố quan trọng để đưa từ khóa lên top Backbone a Backbone ? - Backbone javascript framework giúp cho việc code hiệu hơn, tạo ứng dụng js đẹp, tốt có cấu trúc Nó cung cấp nhiều API giúp phát triển ứng dụng nhanh - BackboneJs 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 liệu DOM nhanh chóng, tiện lợi có tổ chức hơn, Nó cho phép viết client-app có cấu trúc, đẹp gọn với nhiều API giúp việc lập trình web application trở nên nhanh chóng dễ dàng - Có thể bạn biết đến AJAX, mô hình mô tả “cập nhật liệu mà không refresh trang” hay có cách nói dí dỏm “web động mà không động” Bạn hình dung sử dụng javascript để trao đổi liệu client server Theo chiều từ clientserver, đoạn script client thu thập thông tin từ input truyền cho server, đồng thời thay đổi cấu trúc html trang Giờ chiều từ server-client, Server tiếp nhận liệu, xử lý trả liệu cho client, script client nhận liệu tổ chức, fill vào đoạn code html hiển thị cho người dùng Như vậy, toàn hai trình đề không tải lại tài nguyên css, html js, giúp giảm thời gian chờ người dùng, thời gian đáp ứng server tăng độ “đẹp” UX - Backbone hỗ trợ ta làm điều cách dễ dàng gọn nhẹn Nó cung cấp vài khái niệm : model dùng để map với data trao đổi server-client, View đoạn hml dùng để show trang web, khung sường để hiển thị liệu Đồng thời cho phép đồng liệu clien server Rất nhanh chóng tiện lợi Vì viết sẵn phương thức cần thiết, ta việc … ăn b Các class tiêu biểu - Model : Giống linh hồn app, model chứa liệu, liệu dùng để trao đổi với server, fill vào View show trang html, tính toán liệu đề dựa - View : Nếu model linh hồn, view thể xác, phần da bọc bên ngoài, cho phép kết nối model html bên ngoài, fill từ model vào template, tạo thành code hml show - Collection : Có model cần phải có để chứa xử lý danh sách model không, Collection tạo để làm điều - Event : Backbone javascript, hỗ trợ Event, cho phép bạn gọi thực thao tác model, view collection kiện gọi, bên cạnh kiện bình thường click, move, …, bạn tạo event tùy ý - Sync : Đây có lẽ thiếu không, cho phép đồng liệu client server với phương thức save() Ta việc khai báo endpoint, gọi phương thức save() Mà không cần phải sử dụng ajax khắp nơi III Ứng dụng thử nghiệm Triển khai ứng dụng Web Responsive sử dụng Bootstrap tối ưu load với Backbone Sử dụng Bootstrap - Sau cài đặt, ta thêm vào html mã nguồn bootstrap: - Trong có tương loại @media … @media … @media 980px) … @media 768px) (min-width: 1210px) (max-width: 980px) (min-width: 768px) and (max-width: (min-width: 480px) and (max-width: CSS thông số ứng với hình - Thử nghiệm hiển thị với kích thước hình khác nhau: Với hình 1316x886 Với hình 645x779 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 ? {isValid: true} : {isValid: false, message: "You must enter a name"}; }; this.validators.grapes = function (value) { return value.length > ? {isValid: true} : {isValid: false, message: "You must enter a grape variety"}; }; this.validators.country = function (value) { return value.length > ? {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) > ? {isValid: false, messages: messages} : {isValid: true}; }, //Tạo thông số mặc định cho sản phẩm defaults: { id: null, name: "", grapes: "", country: "USA", region: "California", year: "", description: "", picture: "generic.jpg" } }); window.WineCollection = Backbone.Collection.extend({ model: Wine, url: "api/wines" }); - Ở model kết nối tới API để lấy 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('

'); 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 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', 'alertsuccess'); }, 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({ routes: { "" : "list", "wines/page/:page" : "list", "wines/add" : "addWine", "wines/:id" : "wineDetails", "about" : "about" }, initialize: function () { this.headerView = new HeaderView(); $('.header').html(this.headerView.el); }, list: function(page) { var p = page ? parseInt(page, 10) : 1; var wineList = new WineCollection(); wineList.fetch({success: function(){ $("#content").html(new WineListView({model: wineList, page: p}).el); }}); this.headerView.selectMenuItem('home-menu'); }, wineDetails: function (id) { var wine = new Wine({id: id}); wine.fetch({success: function(){ $("#content").html(new WineView({model: wine}).el); }}); this.headerView.selectMenuItem(); }, addWine: function() { var wine = new Wine(); $('#content').html(new WineView({model: wine}).el); this.headerView.selectMenuItem('add-menu'); }, about: function () { if (!this.aboutView) { this.aboutView = new AboutView(); } $('#content').html(this.aboutView.el); this.headerView.selectMenuItem('about-menu'); } }); utils.loadTemplate(['HeaderView', 'WineView', 'WineListItemView', 'AboutView'], function() { app = new AppRouter(); Backbone.history.start(); }); - Với controller vậy, button click front-end truyền qua API để lấy liệu gửi trả lại cho view, cần chuyển view controller update phần view hiển thị không cần load lại toàn trang web chuyển trang e API lấy liệu ... Bootstrap lo - Bootstrap chia layout trang web thành 960 Grid gồm 12 cột, cột 80Grid lả chuẩn thiết kế HTML & CSS Bootstrap Nó có hỗ trợ hầu hết module trang web menu, tabs, tooltip, popup, Ngoài... API giúp việc lập trình web application trở nên nhanh chóng dễ dàng - Có thể bạn biết đến AJAX, mô hình mô tả “cập nhật liệu mà không refresh trang” hay có cách nói dí dỏm web động mà không động”... lợi ích 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 cách nhanh, trang bình thường bạn cắt xong ngày chưa tới ngày Chưa kể đến tính tương thích