Tìm hiểu về Angular 2.0

November 27, 2015

Xin chào các bạn, đã rất lâu để có một bài chia sẻ cùng các bạn, hiện tôi đang cập nhật kiến thức về lập trình client side, và mối quan tâm hàng đầu của tôi hiện là angular. Nhưng trong khi chưa thông về angular 1.x thì tôi nhận được tin bản angular 2.0 sắp tới sẽ rất khác biệt, và đó là lý do tôi tìm hiểu và cố gắng chia sẻ những kiến thức gom lượm được về nó cùng các bạn.

Phiên bản mới nhất hiện tại của NG là : 2.0.0-alpha.46 (xem tại https://code.angularjs.org/) , còn nhóm hiện đang làm việc tích cực cho bản beta trước khi có bản release chính thức. Nếu bạn quan tâm sự phát triển core, theo dõi tại https://github.com/angular/angular .

Những thay đổi chính là gì?

Component sẽ là một khái niệm trung tâm; nghe vài nhận định rằng web component là tương lai của web, và Angular 2 được xây dựng trước cho sự tương thích này.
Với những người đã biết NG 1 thì nhiều khái niệm cũ như ng-app, scope, controller, jqLite sẽ không còn nữa.
Xây dựng trên nền ES6, chuẩn công nghệ javascript mới nhất được thông qua, khiến javascript trở nên mạnh và quen thuộc hơn với nhiều lập trình viên với việc bổ xung class, kế thừa , hay hỗ trợ một số cấu trúc dữ liệu phổ biến như map, set.. ES6 vẫn còn là tương lai, do đó khi dùng ng2 bạn nên tìm hiểu về TypeScript . Hiện nhiều trình duyệt chưa hỗ trợ ES6 thì bạn đã có thể code theo chuẩn ES 6 thoải mái trên Typescript và engine sẽ compile ra phiên bản tương thích như ES5 cho nhiều trình duyệt.
Mobility: hỗ trợ mạnh hơn cho việc xây dựng các ứng dụng mobile. Xem video trên youtube thấy người của Ionic đứng cùng Angular giới thiệu về material design trong angular js cho thấy sự kết nối mobility của nó. Mình cũng rất quan tâm đến bộ 3 angular – ionic – phonegap trong xây dựng các ứng dụng hybrid trên mobile. Đó là một lý do chính mình muốn học angular.
Nâng cao về performance: là một nhiệm vụ trọng tâm dẫn đến nhiều thay đổi như về cách binding dữ liệu, nghe nói performance tốt hơn 5- 10 lần. NG1 $watch nhiều quá do binding tự động 2 chiều, điều này đã được điều chỉnh trong NG2.
Cải tiến về DI, modular, testability, binding.. những chi tiết kĩ thuật này sẽ được bạn cảm nhận qua thực hành.
Migration path với NG1: hiện cũng có chiến lược cho việc hỗ trợ cho các ứng dụng trên NG1 có thể chuyển đổi lên NG2, về cơ bản đó là việc xây dựng phiên bản trung gian cho phép chạy lẫn kiểu code của cả hai phiên bản.

Bạn đã sẵn sàng để trải nghiệm?

Bạn cần chuẩn bị gì không? NG2 phát triển hướng chuẩn ES6 bằng TypeScript, một bản mở rộng của JS được Microsoft phát triển cung cấp khả năng lập trình với các type mạnh mẽ và chức năng hướng đối tượng. Nó thuộc về morden JS nên đừng ngại ngùng dành chút thời gian để cập nhật, nó chỉ mới với JS chứ không mới với các lập trình viên có kinh nghiệm với các ngôn ngữ có kiểu chặt chẽ và hướng đối tượng như Java, Scala, C#.. . Bạn có thể bắt đầu ở đây: http://www.typescriptlang.org/Handbook
Nếu bạn đã sẵn sàng trải nghiệm, nên bắt đầu với ứng dụng Hello World được chính các kĩ sư NG2 thiết kế. Trong ứng dụng này các bạn được làm quen với component, typescript, cài đặt live-server, cấu trúc một ứng dụng large-scale với sự hỗ trợ của npm, cấu hình package.json, tsconfig.json .. Rất thú vị, bạn nên thử ngay:
- https://angular.io/docs/ts/latest/quickstart.html
- Đây là địa chỉ chính thức cho angular 2 của nhóm phát triển với nhiều hướng dẫn, api, link tham khảo..
Bên cạnh đó, với người mới (về JS) như mình thì những giới thiệu của Victo Savkin về core concept trong NG2 là rất hữu ích. Anh là một thành viên của Google trong nhóm phát triển Angular với nhiều chia sẻ .

Về Component

Rõ ràng khái niệm mới mẻ nhất có lẽ là Component, với việc kiến trúc lại hướng component đã làm thay đổi NG2 hoàn toàn. Điều này làm một số lập trình viên đã quen NG 1 tỏ ra ái ngại, nhưng khi hiểu rằng component định hướng tương lai của web, và chúng ta có thể bắt đầu cho tương lai ngay từ hôm nay với angular thì thấy sự thay đổi thật đáng giá. Mỗi component có thể chạy như một ứng dụng độc lập, có tính module hóa rất cao, dễ dàng sử dụng mọi nơi. Nên mình nghĩ sẽ rất nhanh chóng có nhiều web component rất là amazing được chia sẻ từ NG2, như mình thấy thư viện material design của họ cũng đang chuyển sang NG2 và code có vẻ sáng hơn nhiều.

Ví dụ như với md-switch của material, source code được phát triển trên NG2 sẽ như này.Trong đó switch.ts là file mã nguồn typescript :
```
import {Component, View, ViewEncapsulation, Attribute} from 'angular2/angular2';
import {MdCheckbox} from "../checkbox/checkbox";

// TODO(jelbourn): add gesture support
// TODO(jelbourn): clean up CSS.

@Component({
  selector: 'md-switch',
  inputs: ['checked', 'disabled'],
  host: {
    'role': 'checkbox',
    '[attr.aria-checked]': 'checked',
    '[attr.aria-disabled]': 'disabled_',
    '(keydown)': 'onKeydown($event)',
  }
})
@View({
  templateUrl: 'package:angular2_material/src/components/switcher/switch.html',
  directives: [],
  encapsulation: ViewEncapsulation.None
})
export class MdSwitch extends MdCheckbox {
  constructor(@Attribute('tabindex') tabindex: string) {
    super(tabindex);
  }
}
```
Bổ xung một số thành phần cơ bản trong component :
- Về cấu trúc, Component có 2 phần, phần thông tin meta để hướng dẫn Angular biên dịch và phần điều khiển chính là một ES6 class quy định việc xử lý các hành vi của component.
- @ : là một “decorator”, một tính năng của typescript để tạo dữ liệu meta về class
- “selector” chỉ định lựa chọn “host element”, như là tên element, hay là class, thuộc tính.
- một component có thuộc tính input và output, là public api của một component, dùng khi khởi tạo.
- @input: là dữ liệu nhận vào component
- @output: là dữ liệu xuất ra từ component
- template: mô tả cách mà component được render ra trên trang; bên cạnh đó cần khai báo các directives được sử dụng
- Provider: cung cấp các dịch vụ để các component con có thể sử dụng.

Hiện mình mới chỉ dừng lại ở các khái niệm lý thuyết, kế hoạch tiếp của mình là có một ứng dụng trên NG2 + Ionic + Cordova hi vọng sẽ có nhiều chia sẻ chuyên sâu hơn cùng các bạn. Hi vọng bài viết phần nào cung cấp các thông tin khái quát về NG2 và cho bạn một chút cảm hứng để bản có thể tìm hiểu tiếp.