Chắc hẳn đổi với các front-end developer đều rất quen thuộc với Angular framework do Google đỡ đầu, một trong những framework javascript rất đầy đủ về cả chức năng lẫn tài liệu, và Angular cũng là một trong những yêu cầu hàng đầu đối với rất nhiều nhà tuyển dụng hiện nay.
Với sự nổi lên của React do Facebook phát hành, Angular cũng chuyển mình thay đổi với một phiên bản mới hoàn toàn kèm với nhiều sự thay đổi cũng như những tích hợp mới để trở nên mạnh mẽ hơn nữa với lời hứa của Google:
- Hiệu năng cao hơn.
- Dễ sử dụng hơn.
- Tương thích với ES6.
- Dùng theo tiêu chuẩn web (web standards).
Bài viết này sẽ là điểm của phiên bản Angular 2 mới sắp phát hành.
Component-Based
Tạm biệt Controller và $scope, những thứ quen thuộc trong Angular 1. Angular 2 hoàn toàn là các Component và Directive. Mỗi Component là các chỉ dẫn tới các template tương ứng. Để hình dung rõ hơn có thể nhìn đoạn code ví dụ, ta sẽ thấy component này sẽ gọi trong file HTML với tag <angularComponent> và thực hiện các logic bên trong class AngularComponent.
/// <reference path="typings/tsd.d.ts" />
import {Component, View, bootstrap} from 'angular2/angular2';
// Annotation section
@Component({
selector: 'angularComponent'
})
@View({
templateUrl: 'component.html'
})
class AngularComponent {
constructor() {
// Do something...
}
}
bootstrap(AngularComponent);
Lưu ý: tất cả các component được sử dụng phải được khai báo trong bootstrap.
Directives
Directive trong Angular 2 cũng đã được đơn giản hoá đáng kể, chỉ cần gõ @Directive là một directive đã được khai báo. Bên dưới là một ví dụ về khai báo một Directive, thậm chí trong block ‘host listeners’, có thể thấy chúng ta có thể liên kết các stardard funtion với mục đích riêng.
/// <reference path="typings/tsd.d.ts" />
import {Directive} from 'angular2/angular2';
@Directive({
selector: '[hover]',
properties: ['text: hover'],
hostListeners: {
hostListeners: {
'onmouseenter': 'onMouseEnter()',
'onmouseleave': 'onMouseLeave()'
}
}
})
export class Hover {
constructor() {
console.debug("constructed");
}
set text(value: string) {
console.debug(value);
}
}
Dependency Injection
Bao gồm 3 phần thực hiện:
- Injector, gồm các API dùng để inject các dependency và làm chúng hoạt động.
- Bindings, giúp định nghĩa các dependency dưới một tên biến để sử dụng.
- Cuối cùng, các dependency thực sẽ được khởi tạo và có thể được inject.
Một object có thể được truyền thông qua constructor nên ta chỉ cần sử dụng injector view để thực hiện việc inject đơn giản.
// Annotation section
@Component({
selector: 'my-app',
viewInjector: [MessageList, httpInjectables]
// Something else ...
})
TypeScript và lợi ích của ECMAScript 6
EcmaScript 6 ta có các class, điều này thực sự rất ý nghĩa.
class Person {
name: string;
constructor(name: string) {
this.name = name;
}
}
Ở các phiên bản ES trước, mọi thứ đều phải định nghĩa qua prototype. Giờ ta có thể sử dụng Class giống như các ngôn ngữ hướng đối tượng khác một cách rất dễ dàng. Và TypeScript chính là một phần mở rộng của ES6, thực tế cho thấy:
TypeScript = ES6 + Types + Annotations
TypeScript bắt nguồn từ Microsoft nên được hỗ trợ rất nhiều và nó cũng nổi tiếng trong cộng đồng .NET Developers. TypeScript tuy viết dưới khuôn mẫu hướng đối tượng gồm class, kế thừa,… đầy đủ những có thể được biên dịch ra Javascript, vì vậy tính tương thích rất cao. Với việc sử dụng TypeScript nên Angular 2 đồng thời cũng hoàn toàn có thể sử dụng các thư viện dành cho TypeScript một cách dễ dàng.
Tất cả điều đó đã giúp việc hiểu những logic code cực kỳ nhanh và hiệu quả nhờ sự quen thuộc.
Generics
Đây là một khái niệm khá nổi tiếng và có phần hơi khó nắm bắt trong C#, tuy nhiên khi hiểu thì việc sử dụng nó rất hiệu quả, và TypeScript đã đưa generics lên front-end. Ví dụ bên dưới minh hoạ cho việc ẩn giấu của generics khi cùng một lớp Person nhưng dường như việc chuẩn bị thức ăn sẽ cho ra kết quả khác nhau.
export class Person {
prepareFood() {
return new Food("what to prepare");
}
}
export class Food {
typeOfFood: string;
constructor(typeOfFood: string) {
this.typeOfFood = typeOfFood;
}
}
export class Female extends Person {
prepareFood() {
return new Food("yummie");
}
}
export class Male extends Person {
prepareFood() {
return new Food("raw");
}
}
Trong Angular, mọi class hoặc directive được sử dụng đều phải được import vào component trước khi chúng thực sự được dùng. Ví dụ bên dưới ta có thể thấy NgFor là directive đã được import để sử dụng cho tất cả các generic (được tao ra từ function prepareFood).
/// <reference path="typings/tsd.d.ts" />
import {Component, View, NgFor, boostrap} from 'angular2/angular2';
import {Person, Male, Female, Food} from 'person';
@Component({
selector: 'food-preparation'
})
@View({
templateUrl: 'food.html',
directives: [NgFor]
})
class FoodPreparationComponent {
foods: Array<string>;
constructor() {
this.foods = [];
this.foods.push(prepareFood(new Male()));
this.foods.push(prepareFood(new Female()));
}
}
function prepareFood<T extends Person>(cooker: T): string {
return cooker.prepareFood().typeOfFood;
}
boostrap(FoodPreparationComponent);
Cuối cùng ta chỉ việc show ra HTML, trong đó kiểu T sẽ tự nhận biệt đối tượng và function tương ứng cần thực hiện.
<p>Dishes:</p>
<ul>
<li *ng-for="#food of foods">
{{ food }}
</li>
</ul>
Lambdas với TypeScript
Một kiểu khai báo thú vị nữa tiếp tục được đưa vào sử dụng với TypeScript, có thể hiểu Lambdas expression sẽ định nghĩa một anonymous function, một cách khai báo đẹp và nhanh gọn. Nếu bạn đã sử dụng C# hoặc Scala thì sẽ cảm nhận rõ hơn sự thú vị của nó.
pushMessage(...messageStrings: Array<String>) {
this.messages.push(
...messageStrings.map((m) => {
return new Message(m, new Date(), "Sender name");
})
);
}
Kết luận
Hiện tại Angular 2 đã thoát khỏi beta và chạy chính thức được một thời gian, có thể thấy Angular 2 có một sự lột xác cực kỳ mạnh mẽ khi thay đổi kiến thức và sử dụng TypeScript, tạo một cơ hội lớn để sử dụng lập trình hướng đối tượng ở phía front-end. Ngoài ra việc Component hoá kém Directive + một loạt việc ứng dụng các thư viện Javasciprt từ TypeScript giúp việc phát triển trở nên nhanh chóng mà vẫn đảm bảo khi bảo trì sản phẩm.
Hãy cũng sử dụng Angular 2 và cảm nhận nhé!
