Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Bắt đầu thảo luận Ember.js

by
Difficulty:IntermediateLength:LongLanguages:

Vietnamese (Tiếng Việt) translation by Andrea Ho (you can also view the original English article)

Có rất nhiều thư viện JavaScript có sẵn và hầu hết đều thực sự tốt trong việc cung cấp các tương tác truyền thống lấy DOM làm trung phù hợp với nhu cầu của những website điển hình. Nhưng khi đến thời điểm cần xây dựng một nền tảng code có thể quản lý cho ứng dụng một trang, khi đó một bộ những framework toàn diện khiến mọi việc thật dễ dàng.

Câu nói cũ luôn đúng: "Hãy dùng công cụ tốt nhất cho công việc."

Không phải những thư viện truyền thống như jQuery không thể giúp bạn xây dựng những trải nghiệm giống như desktop, chỉ là không phải trường hợp sử dụng thích hợp và đang thiếu những thứ như data-binding, event routing (điều hướng sự kiện) và state management (quản lý trạng thái). Chắc rồi, bạn có thể tập hợp lại nhiều plugin để đạt được một số chức năng, nhưng bắt đầu với một framework được xây dựng đặc biệt từ ban đầu để giải quyết những vấn đề cụ thể, theo ý của tôi thì sẽ tốt hơn. Câu nói cũ luôn đúng: "Hãy dùng công cụ tốt nhất cho công việc."

Gần đây tôi có một cuộc phỏng vấn với nhóm Ember.js; tôi bị thúc đẩy bởi việc muốn tìm hiểu về cái mà tôi gọi là "sự hấp dẫn mới": Ember.js.

Ember phù hợp với điều tôi vừa mô tả bên trên, và hoạt động theo cách gợi nhớ đến cách jQuery cho phép các nhà phát triển bắt đầu công việc thật nhanh chóng. Nhóm này đã có chủ định từng bước đúc kết rất nhiều điều phức tạp kế thừa được trong thiết kế và xây dựng các ứng dụng theo Model/View/Controller bằng cách sử dụng nhiều năm chuyên môn và kiến thức thu thập được từ việc xây dựng các ứng dụng có quy mô lớn.

Điều tôi muốn làm là giúp bạn nhanh chóng bắt đầu với Ember.js, thông qua loạt bài nhiều phần này sẽ dần giới thiệu bạn các khái niệm của framework này. Chúng ta sẽ bắt đầu phần giới thiệu thường thấy, và sau đó tăng lên dần dần đến việc xây dựng một ứng dụng hoàn chỉnh. Điều tuyệt vời là nó cũng giúp tôi củng cố các khái niệm mà tôi đã học, và có lẽ có thêm được vài kỹ thuật mới kèm theo! Tôi sẽ cố gắng hết sức nhờ nhóm Ember.js duyệt lại bài viết này để bảo đảm tính chính xác.

Trước khi chúng ta bắt đầu, cảnh báo: Ember.js khiến bạn thấy kỳ lạ. Có rất nhiều lần bạn sẽ nhìn vào code và bảo "Hả?" Nó đã làm thế nào vậy? Tôi đã trải qua và tôi sẽ cố gắng hết sức để trình bày những điều quan trọng nhất, nhưng tôi sẽ không đào sâu vào cốt lõi phần code của Ember. Thay vào đó, tôi sẽ thảo luận làm thế nào bạn có thể tận dụng công cụ và API của nó để xây dựng ứng dụng.

Vậy hãy bắt đầu nào.


Khái niệm cốt lõi

Ember.js không phải là framework để xây dựng website truyền thống.

Điều đầu tiên cần ghi nhớ là Ember.js không phải là framework để xây dựng các website truyền thống. Các thư viện như jQuery và MooTools phù hợp nhất để thực hiện việc đó. Nếu bạn đang cân nhắc dùng Ember.js, vậy thì giả thiết rằng bạn đang tìm kiếm xây dựng trải nghiệm giống như trên desktop - đặc biệt cho ứng dụng có thể mở rộng. Thực sự, khẩu hiệu của framework là "một framework dùng để phát triển các ứng dụng web đầy tham vọng", điều đó cho biết đây rõ ràng không phải thư viện JavaScript dành cho Ba của bạn.

Trước đó tôi đã đề cập rằng Ember tận dụng mô hình MVC để thúc đẩy việc quản lý và tổ chức code đúng đắn. Nếu bạn chưa từng phát triển với MVC, bạn dĩ nhiên nên đọc qua nó. Nettuts+ có một bài viết rất hay về chủ đề này ở đây. Với những ai đã quen thuộc với khái niệm này, bạn sẽ thấy thoải mái. Một điều tôi thường nghe thấy là thay đổi từ Backbone sang Ember.js là thực sự dễ bởi Ember đảm nhận những việc khó khăn cho bạn, trong khi vẫn duy trì mô hình tổ chức code mà những nhà phát triển này đã quen thuộc.

Ember cũng dựa vào những template ở phía máy khách...rất nhiều. Ember sử dụng thư viện template Handlebars để cung cấp những biểu thức cho phép bạn tạo ra những template HTML động. Một nhà phát triển Ember có thể gán data vào những biểu thức này và thay đổi hiển thị trên ứng dụng của họ ngay lập tức. Ví dụ tôi có thể tạo một template có thể nhận một mảng people và hiển thị trong một danh sách không có thứ tự:

Chú ý biểu thức "#each" hoạt động như một vòng lặp, liệt kê tất các phần tử của mảng "people" và thay thế biểu thức "{{name}}" bằng giá trị thực sự. Quan trọng cần ghi nhớ là dấu "{{ }}" là dấu hiệu được Handlebar sử dụng để xác định biểu thức. Đây là một ví dụ nhỏ, và chúng ta sẽ đào sâu vào chi tiết sau.

Handlebars là một cơ chế template cực kỳ mạnh mẽ phía client và tôi khuyến khích bạn nên xem hướng dẫn của Emberwebsite của Handlebar để nắm bắt đầy đủ những chọn lựa khả dĩ. Bạn sẽ sử dụng nó một chút.


Thiết lập Ember

Ember.js dựa vào những thư viện bổ sủng, vì thế bạn cần tải bản copy của jQueryHandlebars. Nhưng khoan đã, có phải tôi đã nói rằng jQuery và Embers hoạt động ở không gian khác nhau? Vâng tôi đã nói thế, nhưng nhóm Ember không dự định phát minh lại bánh xe. Họ chọn jQuery để làm việc nó tốt nhất: làm việc với DOM. Và đó là một việc tốt, vì jQuery thực sự làm rất tốt. Đó cũng là lý do họ chọn Handlebars, đây là một thư viện template xuất sắc do Yehuda Katz viết, anh ấy cũng là một thành viên nòng cốt của nhóm Ember.

Cách dễ nhất để lấy các file bạn cần là tải về Starter Kit từ Github repo của Ember.js. Đó là một template mẫu mực để bạn bắt đầu. Tại thời điểm của viết bài này, template này gồm:

  • Ember 1.0 RC1
  • Handlerbars 1.0 RC3
  • jQuery 1.9.1

Cũng có một template HTML cơ bản code sẵn bao gồm tất cả thư viện liên quan (jQuery, Ember, v.v) và một ví dụ đi kèm của template Handlebars và "app.js", ví dù này gồm code để nhanh chóng bắt đầu một ứng dụng Ember cơ bản.

Lưu ý rằng app.js không phải nằm trong framework. Đó là một file JavaScript thuần tuý; bạn có thể đặt tên nó theo ý thích. Và trong lúc ta sẽ dùng nó trong bài hướng dẫn này, trong tương lai bạn có thể sẽ phân chia JavaScript của bạn thành nhiều file như bạn từng làm cho những ứng dụng hoặc site khác. Đồng thời, Ember không yêu cầu một cấu trúc thư mục cụ thể cho các file của framework.

Khi bạn xem code của Starter Kit, nó sẽ trông giống như code của website điển hình. Trong một số khía cạnh, bạn đúng! Khi ta bắt đầu tổ chức mọi thứ, bạn sẽ thấy việc xây dựng một ứng dụng Ember có khác biệt ra sao.


Cách sắp đặt của Ember

Trước khi bạn bắt đầu bẻ khoá phần code, bạn cận hiểu cách Ember.js hoạt động và những phần tạo nên một ứng dụng Ember. Hãy xem qua những phần này và mối liên hệ giữa chúng.


Template

Template là phần thiết yếu để định nghĩa giao diện người dùng. Như tôi đề cập trước đó, Handlebars là thư viện phía máy khách dùng trong Ember và cung cấp các biểu thức, chúng được sử dụng rộng rãi khi tạo UI cho ứng dụng của bạn. Đây là một ví dụ đơn giản:

Lưu ý rằng các biểu thức được kết hợp vào HTML markup của bạn, và thông qua Ember, sẽ thay đổi nội dung hiển thị trên trang. Trong trường hợp này, {{firstName}} và {{lastName}} sẽ được thay bằng data lấy được từ ứng dụng.

Handlebars rất mạnh mẽ thông qua một API linh hoạt. Rất quan trọng để bạn hiểu rõ Handlebar cung cấp.


Routing

Router của ứng dụng giúp quản lý trạng thái của ứng dụng.

Router của ứng dụng giúp quản lý trạng thái của ứng dụng và các tài nguyên cần thiết khi người dùng điều hướng ứng dụng. Việc này gồm các tác vụ chẳng hạn như yêu cầu data từ model, liên kết controller với view, hoặc hiển thị các template.

Bạn thực hiện việc này bằng cách tạo một route cho vị trí cụ thể trong ứng dụng của bạn. Các route xác định những phần của ứng dụng và URLs tương tác với chúng. URL là identifier chủ chốt mà Ember sử dụng để hiểu trạng thái ứng dụng nào cần hiển thị cho người dùng.

Behavior (hành vi) của một route (ví dụ yêu cầu data từ model) được quản lý thông qua các giá trị của đối tượng route của Ember và được kích hoạt khi một người dùng điều hướng đến một URL cụ thể. Một ví dụ yêu cầu data từ model, giống như sau:

Trường hợp này, khi người dùng di chuyển đến "/employees", route gửi một yêu cầu đến model để lấy danh sách tất cả ứng dụng.


Model

Đại diện cho đối tượng của dữ liệu

Model là đại diện của đối tượng liên quan đến data mà ứng dụng của bạn sẽ sử dụng. Nó có thể là một mảng đơn giản hoặc data động lấy được từ RESTful JSON API, thông qua một yêu cầu AJAX. Thư viện Ember Data cung cấp API để load, map, và update dữ liệu cho model trong ứng dụng của bạn.


Controller

Controller về cơ bản được dùng để lưu và trình bày dữ liệu và thuộc tính của model. Chúng hoạt động như một proxy, giúp bạn truy xuất vào các thuộc tính của model và cho phép template truy xuất các thuộc tính đó để xuất ra phần hiển thị. Đây là lý do template luôn được kết nối với controller.

Điều chủ yếu cần nhớ là khi model lấy data, một controller là thứ bạn sẽ sử dụng để miêu tả data đó cho những phần khác nhau của ứng dụng. Khi model và controller có vẻ gắn kết chặt chẽ với nhau, thực tế thì bản thân model không biết gì về những controller sẽ sử dụng nó.

Bạn có thể lưu các thuộc tính khác cần được duy trì của ứng dụng mà nhưng không cần lưu vào một máy chủ.


View

View trong Ember.js để quản lý sự kiện xung quanh tương tác của người dùng và chuyển chúng thành các sự kiện có ý nghĩa trong ứng dụng của bạn. Vậy nếu người dùng nhấp vào một nút để xoá một employee, view sẽ biên dịch sự kiện click của trình duyệt và xử lý nó theo cách phù hợp theo tình huống của trạng thái hiện tại của ứng dụng.


Quy tắc đặt tên

Môt trong những cách mà Ember.js giúp giảm thiểu lương code cần thiết và ngầm xử lý mọi thứ cho bạn là thông qua quy tắc đặt tên Cách bạn xác định và đặt tên các route (và các tài nguyên) ảnh hướng đến việc đặt tên của controller, model, view và template. Ví dụ: nếu tôi tạo một route, gọi là "employees":

Vậy tôi sẽ đặt tên các thành phần như sau:

  • Route object: App.EmployeesRoute
  • Controller: App.EmployeesController
  • Model: App.Employee
  • View: App.EmployeesView
  • Template: employees

Sử dụng quy tắc đặt tên này có hai mục đích. Đầu tiên, nó cho bạn một mối quan hệ ngữ nghĩa giữa các thành phần. Thứ hai, Ember có thể tự động tạo ra các đối tượng cần thiết (có thể chưa tồn tại) chẳng hạn như đối tượng route hoặc controller, và sử dụng chúng trong ứng dụng của bạn. Đây là "ma thuật" mà tôi đã nhắc qua trước đó. Thực tế, đây là cụ thể là điều Ember thực hiện ở cấp Application toàn cục, khi bạn khởi tạo một đối tượng Application.

var App = Ember.Application.create();

Dòng này tạo một tham chiếu mặc định cho router, controller, view và template của ứng dụng.

  • Route object: App.ApplicationRoute
  • Controller: App.ApplicationController
  • View: App.ApplicationView
  • Template: application

Quay trở lại route "employees" mà tôi đã tạo ra phía trên, điều sẽ xảy ra là khi người dùng đến "/employees" trong ứng dụng của bạn, Ember sẽ tìm kiếm những đối tượng sau:

  • App.EmployeesRoute
  • App.EmployeesController
  • the employees template

Nếu nó không tìm thấy, nó sẽ tạo ra một giá trị cho mỗi đối tượng nhưng sẽ không xuất ra bất kỳ cái nào, khi bạn chưa chỉ định model để lấy dữ liệu hoặc template để hiển thị dữ liệu đó. Đây là lý do tại sao quy tắc đặt tên rất quan trọng. Nó giúp Ember biết làm sao để xử lý các công vụ tương tác với một route cụ thể, mà không cần bạn từ tay làm kết nối mọi thứ.

Chú ý rằng, trong ví dụ đầu tiên, tôi đã dùng tên số dạng số ít, "Employee", để định nghĩa model. Đó là mục đích. Bản chất của tên "Employees" cho biết rằng tôi có thể làm việc từ 0 đến nhiều nhân viên, ví thế rất quan trọng để xây dựng một model có thể cung cấp sự linh hoạt để trả về một hoặc tất cả nhân viên. Quy tắc đặt tên số ít của model này không bắt buộc cho Ember, khi bản thân model không biết controller nào sẽ sử dụng nó sau đó. Vậy bạn có thể linh hoạt đặt tên chúng, nhưng để nhất quán thì việc tuân thủ quy tắc này sẽ làm cho việc quản lý code của bạn dễ hơn nhiều.

Đồng thời, tôi chọn để sử dụng phương thức resource() để định nghĩa route của tôi, bởi vì trong tình huống này, tôi sẽ có thể có những route lồng ghép vào nhau để quản lý những trang chi tiết cho thông tin của thể của nhân viên. Chúng ta sẽ về nesting (tính lồng ghép) sau trong loạt bài này.

Điều quan trọng là bằng cách sử dụng một hệ thống đặt tên nhất quán, Ember có thể dễ dàng quản lý các hook để liên kết các thành phần này lại với nhau mà không cần phải xác định rõ ràng các mối quan hệ thông qua nhiều code.

Chi tiết đầy đủ cho quy tắc đặt tên của Ember được website của dự án cung cấp và bạn cần phải đọc.


Tiếp theo: Xây dựng một ứng dụng

Phần kế tiếp của loạt bài, chúng ta sẽ đi sâu vào code và tạo nền tảng cơ bản cho ứng dụng của chúng ta.

Chúng ta đã điểm qua các khái niệm cốt lõi của Ember và thảo luận những khía cạnh cao cấp chính yếu của framework. Phần kế tiếp của loạt bài, chúng ta sẽ đi sâu vào code và tạo nền tảng cơ bản cho ứng dụng của chúng ta. Tạm thời, tôi lần nữa khuyên bạn nên bắt đầu xem tài liệu của Handlebars để có cảm giác với cú pháp biểu thức. Đồng thời nếu bạn rất muốn bắt đầu với Ember, hãy đón chờ Tuts+ Premium, nó sẽ nhanh chóng mang lại một khoá học đầy đủ hướng dẫn bạn từng bước xây dựng một ứng dụng bằng Ember.

Như tôi đã lưu ý ở đầu bài viết, đội ngũ chủ chốt Ember.js do Yehuda KatzTom Dale dẫn dắt đã xét duyệt độ chính xác và đã chấp thuận. Nhóm Ember đã tán thành. Hẹn gặp lại bạn!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.