Ember js và Project đầu tiên

Chào các bạn, nay mình sẽ giới thiệu về một framework để xây dựng một trang web. Nó sẽ là một trải nghiệm tuyệt vời với bất kỳ một developer nào.

Mình biết đến framwork này là khi tìm hiểu về một ứng dụng web mã nguồn mở hospital. Mình thực sự bị cuốn hút bỏi công nghệ tạo dựng trang web này vì vậy có tìm hiểu và biết tới nó được xây dựng bởi Emberjs.

Theo nhận xét của bản thân thì Ember là một framework rất dễ hiểu khi bạn có kiến thức về js, vì nó được viết dựa theo ES2015 modules và ES2015 syntax.

Theo định nghĩa tại trang trủ của Ember thì ember là một framework tạo ứng dụng web ambitious. Với ember:

• Viết code ngắn gọn hơn, tự động cập nhật dữ liệu khi thay đổi

• Dễ dàng tạo ứng dụng api.

• Tạo dựng một ừng dụng load từng component thay vì toan bộ trang, giúp tốc độ load trang.

Cài đặt

NPM

• Ember sử dụng môi trường là npm vì vậy để bắt cài đặt bạn cần có NPM.

Ember

npm install -g ember-cli@2.10

Sử dụng commanline chạy lệnh trên để cài đặt ember.

Tạo mới một app với Ember

Khi bạn đã cài đặt ember, tại giao diện terminal bạn có thê chạy lệnh new app.

ember new [app_name]

Ví dụ: ember new ember-project

Sau khi chạy lệnh new app. bạn nhận được một thư mục ember-project.

Tiếp theo: di chuyển tới thư mục ember-project và khởi động server.

cd ember-project
ember server

Nếu chương trình thành công, bạn có thể thấy được kết quả:

Livereload server on http://localhost:49152
Serving on http://localhost:4200/

Cũng giống như ruby hoặc expressjs để stop chương trình dùng tổ hợp phím Ctrl + C

Định nghĩa route

Đàu tiên xây dựng một đường dẫn thể hiện một danh sách users. Bước đầu tiên cần tạo một router. Ember hỗ trợ tạo một route bằng terminal bằng câu lệnh:

ember generate route users

Kết quả sau khi chạy lệnh trên:

installing route
  create app/routes/users.js
  create app/templates/users.hbs
updating router
  add route users
installing route-test
  create tests/unit/routes/users-test.js

Điều này cho thấy ember đã tạo được:

• Tạo được một đối tượng route là users được nối với template.

• Tạo một template users hiển thị nội dung html.

• Cập nhập nội dung file route vào file routes. Khai báo sử dụng route.

• Tạo một unit test.

Mở mẫu template app/templates/users.hbs bạn sẽ thấy file này định nghĩa nội dung là thẻ html.

<h2>List of Users</h2>

Sử dụng trình duyệt, bạn vào link sau: [http://localhost:4200/users]

Điều đặc biệt khi dùng ember là khi bạn đã vào link trên, mà bạn sửa nội dung trong file app/templates/users.hbs thì bạn không cần F5 thì nội dung trang cũng thay đổi. Đó là điều tuyệt vời của emberjs mà làm tôi rát hứng thú khám phá.

Bây giờ bạn có thể tạo một dữ liệu mẫu hay còn gọi là model mẫu:

Tại file app/routes/users.js bạn tạo một dữ liệu dạng như sau:

import Ember from 'ember';
export default Ember.Route.extend({
  model() {
    return ['Marie Curie', 'Mae Jemison', 'Albert Hofmann'];
  }
});

Bạn thây là có một model là mẫu và để hiển thị mẫu anfy ra view, bạn có thể edit file app/templates/users.hbs với nội dung:

<h2>List of Users</h2>

<ul>
  {{#each model as |user|}}
    <li>{{user}}</li>
  {{/each}}
</ul>

Cấu trúc một thư mục ứng dụng Ember js

Khi tạo một thư mục mới với Ember, bạn nhận được một cấu trúc thư mục có dạng sau:

|--app
|--bower_components
|--config
|--dist
|--node_modules
|--public
|--tests
|--tmp
|--vendor

bower.json
ember-cli-build.js
package.json
README.md
testem.js

Trong đó ta thấy rằng:

App: đây là thư mục chưa các models, components, routes, templates and styles được lưu trữ. Đa số tất cả code của một developer sẽ được phát triển trong thư mục này.

bower_components / bower.json: bower là một thư viện quản lý suorce code phụ thuộc của thư viện js(phần này bạn có thể so sánh như composer trong PHP hoặc file gem trong ruby on rails). Tất cả các install sẽ được lưu trong thư mục bower_components. và để cài đặt bạn khai báo trong file bower.json. Để tìm hiểu thêm bạn nên tìm kiếm nội dung về bower để tham khảo (trong phân này mình không nhắc đến nhiều vì nó thực sự ko liên quan nhiều).

config: file này config môi trường cho ứng dụng ember.

dist: khi bạn xây dựng một ứng dung web, thì tất cả các file đầu ra của bạn sẽ được lưu trong thư mục này.

node_modules / package.json: như đã nói thì ember js là một framwork chạy trên nền tảng nodejs vì vậy khi thấy thư mục này bạn sẽ không thấy gì lạ. Nó là thư mục quản lý tất cả thư viện của nodejs.

public: thư mục này chưa tất cả phần liên quan tới fonts, images, ....

vendor: thư mục này chứa các file như javascript, css mà không được quản lý bỏi bower.

tests / testem.js: thư mục chưa các output của phần auto test trong ember.

tmp: nơi chưa các tập tin tạm thời.

ember-cli-build.js: tập tin mô tả ember CLI tạo dưng một ứng dụng Ember.(Hiện tại tôi vẫn chưa hiểu file này cho lắm).

Kết luận

Cám ơn bạn đã theo dõi phần bài viết của tôi về framwork emberjs. Đây là một tìm hiểu đơn giản của tôi để hiểu hơn về cấu trúc của emberjs nhằm phục vụ khai phá được open source của ứng dụng hospital. Tôi hy vọng nó sẽ đem lại những thứ cơ bản nhất cho bạn đọc để phát triển web theo hướng mới, không bị giới hạn bởi những thứ sẵn có.

Cám ơn bạn đã đọc bài viết này của tôi ^_^. thank you.

       *** Công nghệ mới nên được lắm bắt để đồng bộ kỹ năng bản thân theo thời đại ***