Tìm hiểu về Flux

Flux là gì?


Flux là kiến trúc ứng dụng Facebook dùng để xây dựng các ứng dụng phía client. Kiến trúc này bổ sung khả năng thiết lập dữ liệu theo một hướng cho view của component trong Reactjs.

Flux là một cấu trúc mở rộng của pattern chứ không phải là framework chính thức.

Hiện tại không có nhiều tài liệu về Flux vì Facebook chỉ sử dụng nội bộ. Vậy nên cũng không có mã nguồn trên Github làm cho việc tìm hiểu về Flux cực kỳ cực kỳ khó khăn. Trên Github, Facebook chỉ công bố một thư viện tên là Dispatcher tại địa chỉ này.

Về cơ bản, Flux sẽ tận dụng thư viện Dispatcher này, kết hợp với các module EventEmitter của NodeJS của để thiết lập một hệ thống sự kiện giúp quản lý trạng thái ứng dụng.

Flux có 4 thành phần, để dễ hiểu hơn ta xem qua khái niệm của 4 thành phần này:


  • Actions: Thằng này đảm nhiệm việc truyền dữ liệu đến Dispatcher. Có thể nói Actions là một helper, bất cứ khi nào có dữ liệu cần thay đổi, nó sẽ tạo ra một action và gửi nó đến cho Dispatcher. Nên nó có tên là Actions 😎. Cứ tạm hiểu Actions chính là con bé xinh xinh ngồi ở chực ở bưu điện. Ai gửi cũng nhận, nhận xong đóng dấu rồi đưa cho thằng vận chuyển.
  • Dispatcher: Nhận action từ Actions và truyền đến các callbacks đã đăng ký trước. Các callbacks đăng ký với logic riêng, Dispatcher sẽ phân loại action nào phù hợp với logic nào và truyền đến cho callbacks có logic đó. Thằng này giống transporter của bưu điện, vận chuyển hàng theo địa chỉ trên hàng thôi.
  • Store: Lưu giữ trạng thái và logic ứng dụng. Điểm đặc biệt của store này là nếu muốn thay đổi dữ liệu bên trong nó phải thông qua Actions rồi đi qua Dispatcher.
  • View: View chỉ là lấy dữ liệu từ store và show hàng ra mà thôi. Nếu dữ liệu từ người dùng có thay đổi, ví dụ như submit một form hay gì đó, view không hiển thị lên ngay mà phải gửi về Actions rồi chạy 1 vòng qua những thằng bên trên để lưu vào store, rồi view lại móc ra để render.
Như vậy quy trình sẽ là:

Actions -> Dispatcher -> Store -> View

Tại sao phải xài Flux?

Tui thề là đầy người đọc bài này hỏi cái câu đó. Tự dưng đang xài MVC ngon lành cành đào không thích lại đi mày mò ba cái thứ chạy vòng vòng này làm gì cho mất công.

Xin thưa với các bạn rằng MVC cũng có nhược điểm của nó, nhược điểm không thể khắc phục được luôn, chẳng qua các bạn chưa gặp thôi.

Có lẽ trong số chúng ta chưa ai được dạy về cấu trúc một ứng dụng Front-End, thay vào đó lại đi học về jQuery, Angular, Backbone... Vấn đề lưu lượng dữ liệu cho Front-End thì lại càng nằm ngoài tầm hiểu biết, nên gặp cái mớ quá chi là phức tạp này thì cũng thấy nó không cần thiết.

Flux ra đời từ cái thời 2014 thì phải, hay là trước đó nữa. Đúng ra với những thứ đã có từ lâu này thì tui không có hứng thú viết về nó. Nhưng về Flux thì vẫn phải viết và khuyên các bạn nên tìm hiểu kỹ về nó, bởi vì bài sau tôi sẽ mượn Flux của Facebook vốn dành cho Reactjs để áp dụng vào Angular 2

Angular và TypeScript: Tạo component

Trước khi đọc bài này, bạn cần phải đọc và làm theo hướng dẫn trong bài Cài đặt và chạy ứng dụng demo. Bởi vì chúng ta sẽ sử dụng ứng dụng demo trong bài đó để viết component.



Sau khi tải ứng dụng demo xong, bây giờ các bạn vào thư mục helloworld\app và tìm file app.component.ts, đây là file chứa component và chúng ta sẽ sửa lại file này. Hãy mở nó lên bằng IDE của các bạn và bắt đầu.

Template


Trong cấu hình template hiện tại của component đang là `Hello {{name}}`, bây giờ các bạn sửa lại như sau:



Template này sẽ dùng một vòng "for" để in ra tất cả phần tử có trong biến friend.

Styles


Tiếp theo đến cấu hình styles, các bạn cấu hình theo mẫu css sau:



Khi chạy styles này sẽ được ném vào header của web, nhưng chỉ có tác dụng với template trong component này thôi nên sẽ không ảnh hưởng đến styles của toàn bộ web.

Lập trình component


Vậy thôi là xong phần cấu hình, bây giờ đi vào phần code chính. Code như sau:



Biến componentName sẽ được đưa vào{{componentName}}của template, còn biến friends sẽ đưa vào for

Kết quả


Kết quả chương trình sẽ chạy như sau, cảm ơn các bạn đã đọc bài.



Angular 2 từ A-Z về component

Sau bài Cài đặt và tải ứng dụng demo là bài khởi đầu cho serial về tutorial Angular 2. Bài này viết này là bài được ưu tiên viết kế tiếp. Trong Angular có rất nhiều thứ quan trọng, nhưng tôi chọn viết về component trước bởi vì nó là thư quan trọng nhất. Tập hợp controller, directive, router... đều nằm trong component.



"Everything is a component"


Tất cả mọi thứ là conponent. Vâng, chính xác là như vậy. Component chính là thứ chúng ta cần xây dựng và xác định các yếu tố cần thiết cũng như logic của trang. Nếu bạn đã từng học Angular 1, biết rõ về directive thì nhìn hình trên bạn sẽ hiểu được component.

Đi sâu về khái niệm


Một component cơ bản là chỉ là một phần tử HTML tùy chỉnh phù hợp với tên của một component được code ở một nơi khác. Một component thường có input và output. Các input và output này được xác định bằng các thuộc tính trên phần tử HTML.

Đọc một lần thôi, có đọc đi đọc lại mấy dòng đó vài lần cũng chỉ thêm rối chứ chẳng hiểu hơn được đâu. Tôi đã cố viết theo cách dễ hiểu nhất rồi á. Giờ xem ví dụ sẽ hiểu rõ ngay thôi:




Giả sử chúng ta có một phần tử HTML như trên, nó đã được tùy chỉnh để phù hợp với một component được định nghĩa như sau:



Ok, giải thích thêm tí về ví dụ. Phần tử HTML có tên là my-confirmation. Và tên của component là MyConfirmation. Nó ở dòng số 14, class MyConfirmation chính là tên component. Như vậy là bạn đã hiểu câu "một phần tử HTML tùy chỉnh phù hợp với tên của một component được code ở một nơi khác" rồi chứ. Trong MyComfirmation, chữ "C" sau chữ "My" được viết hoa, khi đó Angular sẽ hiểu bên phía HTML trước chữ C sẽ có dấu "-".

Trong phần tử HTML trên có hai thuộc tính là [message] và (ok) tương ứng với inputs và outputs trong component. Như vậy trên HTML dấu [] có nghĩa là inputs và dấu () có nghĩa là outputs. Vấn đề này đã được nói rõ trong bài Cú pháp template trong Angular 2 - Phần 1, đọc lại nếu bạn không nhớ.


Component trong component


Rất nhiều bạn khi bắt đầu với Angular hay có suy nghĩ là làm thế nào để code một website bao gồm một giao diện layout chung ở ngoài, rồi trong đó có các thứ như header, footer, menu giữ nguyên còn các phần khác thì thay đổi ở từng trang như code băng PHP. Hầu hết các bạn đều lo lắng Angular sẽ không đáp ứng được điều đó vì ngay cả hướng dẫn lẫn ứng dụng mẫu của Angular đều không nói đến.

Đừng lo lắng, Angular và các framework javascript khác thừa sức làm điều đó. Như hình sau:


Cứ từ từ theo dõi blog của tôi sẽ làm được hết, ahihi.

Cấu hình (Configuration)


Hầu hết các bạn đều biết khai báo cấu hình cho một component thường có cấu hình selector, trong ví dụ trên của tôi có thêm inputs, outputs, trong các ứng dụng trên angular.io có thêm template.

Đó là các dữ liệu tùy chọn để cung cấp cho component, tuy nhiên ngoài những cấu hình đó ra thì còn những cấu hình khác mà các bạn ít biết như là providers, services, styles. 

Bây giờ tôi sẽ giải thích rõ từng cấu hình:
  • Selector: Cái này là khu vực làm việc của component trên DOM. Tên của phần tử HTML của các bạn là gì thì cứ copy y chang vào đây. Tương tự như ví dụ trên là my-confirmation
  • Providers: providers có thể trả về bất cứ thứ gì khi chạy một hàm. Ví dụ như bạn có thể dùng provider để xử lý ngôn ngữ hoặc parse dữ liệu json chẳng hạn, rồi sau đó trả về kết quả.
  • Services: Chịu trách nhiệm thực hiện một nhiệm vụ cụ thể, ví dụ như bạn có thể định nghĩa lại ajax trong này cũng được.
  • Template: thay vì khai báo trực tiếp View trong component. bạn có thể chỉ thẳng đến một file HTML nào đó trong này.
  • Styles: dùng để khai báo css nếu có.

Vậy là cơ bản đã xong về Component trong Angular 2. Các bạn nên nhớ kỹ để sau này làm việc với Angular 2 đỡ bối rối hơn. Cảm ơn các bạn đã đọc bài.

Angular 2 và TypeScript: Get started - Cài đặt và chạy ứng dụng demo

Tôi đang bắt đầu một serial viết tutorial cho Angular 2 với TypeScript theo yêu cầu của đệ tử. Trước đây tôi chỉ có ý định viết về ES6 chứ không viết về TypeScript vì ngôn ngữ này đã có tài liệu rất rõ trên angular.io rồi.



Cài đặt Nodejs


Để chạy được Angular 2 trước tiên cần phải có Nodejs, tại sao lại như vậy? Angular 2 dùng ngôn ngữ TypeScript nên cần có Nodejs để biên dịch và một số thư viện được Angular 2 mượn của Nodejs.

Để cài đặt các bạn vào nodejs.org tải phiên bản phù hợp với hệ điều hành của máy tính bạn rồi cài đặt theo hướng dẫn,

Cài đặt NPM


Mở command line lên và gõ
npm install npm@latest -g

Cài đặt Git


Vào https://git-scm.com/download để tải git theo hệ điều hành và cài đặt như hướng dẫn của nó.

Tạo và chay Angular demo


- Mở command line, di chuyển con trỏ làm việc vào trong thư mục nơi bạn muốn tạo ứng dụng helloworld vừa tạo bằng lệnh cd. Ví dụ:
cd E:/project/
 - Tiếp theo chạy lần lượt từng lệnh sau, đợi lệnh này chạy xong thì chạy lệnh tiếp theo:



Sau khi chạy xong lệnh cuối cùng là npm start,  trình duyệt sẽ tự động mở lên và chạy web. Nếu trình duyệt không tự mở bạn có thể mở bằng tay và chạy địa chỉ http://localhost:3000/

Chừng nào muốn ngừng máy chủ Nodejs thì ấn Ctrl+C. 


Tổng kết


Vậy là bạn đã có những thứ cần thiết để chạy ứng dụng Angular 2 và bộ khung của ứng dụng. Muốn làm ứng dụng khác to hơn thì chỉ cần code theo bộ khung này là được. Chúng ta sẽ đi sâu vào viết ứng dụng Angular 2 trong những bài tiếp theo. Cảm ơn các bạn đã đọc bài.

Cú pháp template trong Angular 2 - Phần 2


Nối tiếp phần 1 về cú pháp template trong Angular 2. Nếu các bạn chưa đọc thì nên đọc lại trước khi đọc bài này.

Nội suy (Interpolation)

Đơn giản là biến được đặt trong 2 cặp dấu ngoặc nhọn {{var}}. Khi render Angular sẽ thay bằng giá trị của nó. Như trong Angular 1.




Dùng các dấu ngoặc

Sử dụng dấu ngoặc giúp mã HTML của bạn ngắn gọn hơn, tuy nhiên cần phải biết mỗi loại ngoặc có chức năng gì đã.

Xem ví dụ sau có dùng ngoặc:




Tương đương với:


References

Chẳng biết trong trường hợp này dịch ra là gì, giải thích thì hơi dài dòng. Xem ví dụ sau sẽ hiểu:



Ở hai ví dụ trên, tag đầu tiên có thuộc tính đứng sau dấu #. Angular sẽ hiểu đó như là id và tự động select nó. Lúc cần mình chỉ lấy ra và dùng thôi.

Cú pháp hoa thị (*) 

Phần này dài dòng mà angular.io đã nói rất rõ, các bạn xem tại đây



Cú pháp template trong Angular 2 - Phần 1


Bài này sẽ nói về một số cú pháp quy định trong Angular 2 để đưa dữ liệu vào template. Vấn đề này đã được nói rõ trong hướng dẫn chính thức của Angular trong trang Template Syntax vi vậy ở đây tôi không nói lại tất cả, chỉ nói những cái chưa rõ hay khó hiểu thôi.

Input - Output

Thuộc tính Input - Output là các API của Directive. Khi định nghĩa một directive thì luồng dữ liệu sẽ đi vào directive thông qua Input và đi ra qua Output. Tôi không nhớ Angular 1 có cái này không vì lâu rồi không còn đụng đến nữa. 

Với có thể cập nhật dữ liệu cho directive vào Input bằng cách bind  data, còn Output có thể dùng để bind event, ta sẽ lần lượt tìm hiểu sau đây.

Bind data


Nhìn vào ví dụ sau, giả sử ta có một component dùng để render một Toto:


Khi giá trị myToto thay đổi, ngay lập tức Angular sẽ tự động cập nhật giá trị mới bằng cách gọi setter của model.

Bind event

Không chỉ bind data, Angular còn bind cả event mà DOM có hỗ trợ như onClick, onChange, onComplete... Thậm chí là event tự định nghĩa luôn. Giờ sửa ví dụ trên thành:


Nếu sự kiện complete xãy ra. Angular sẽ gọi ngay đến hàm onCompletingTodo(todo). 

Bây giờ xem qua code của component cho dễ hiểu hơn:


Component đã được khai báo Input là model, còn Output là sự kiên complete.

Chỉ có Input mới được cập nhật dữ liệu bằng cách bind data,

Angular 2 sử dụng RxJs để giải quyết các event. EventEmitter là để hoàn thành observable và observer interfaces - nếu bạn vẫn chưa hiểu thì đọc lại bài các thư viện liên quan và định nghĩa trên github tại đây

Two-Way Bindings

Bind hai chiều rất cần thiết trong một số tình huống, nhất là để xử lý Input. Bind data được dùng để truyền dữ liệu từ thằng cha xuống thằng con, ngược lại bind event thì truyền từ thằng con lên thằng cha. Vì vậy kết hợp cả hai thành bind hai chiều (two-way bindings).

Dưới đây là ví dụ về Two-Way bindings:




Đây là ví dụ cực kỳ đơn giản để thực hiện bind dữ liệu hai chiều. Input sẽ cập nhật dữ liệu khi textfiel thay đổi, và thẻ textfiel thay đổi khi Input thay đổi.

Về cơ chế thì cũng giống Angular 1. Angular 2 chỉ thay đổi cú pháp chứ không có gì khác hơn.

Bài này tạm dừng ở đây, phần 2 tôi sẽ viết tiếp về những thứ còn lại. 

Tại sao Angular sử dụng TypeScript

Như đã biết Angular1 và hầu hết các framework JavaScript đều được viết bằng JavaScript, điều này là đương nhiên rồi. Vậy tại sao Angular2 lại phải viết bằng TypeScript? Thật là rắc rối khi học Angular lại phải học thêm một ngôn ngữ lập trình mới toanh. Cứ như là bạn đang code bằng CodeIgniter lại chuyển qua Diango trong khi chưa biết gì tới Python vậy.



Có thể viết Angular2 mà không phải viết bằng TypeScript?

Chắc chắn là được. Bạn có thể viết bằng Dart, ES5, ES6. Như tôi đã có bài hướng dẫn tạo bộ khung ứng dụng Angular trên ES6. Tuy nhiên rất không đơn giản vì tài liệu chính thống của Angular trên angular.io đều hướng dẫn trên TypeScript.

Giờ đi tìm hiểu nguyên nhân Angular2 viết trên TypeScript mà tại sao lại không phải là Dart. Trong khi Dart do chính Google phát triển còn TypeScript lại là của đối thủ Microsoft.

TypeScript có các công cụ tuyệt vời

Vấn đề quan trọng khi quyết định chọn một ngôn ngữ cho dự án của mình. Người ta thường phải tính đến các công cụ hỗ trợ. Nếu một ngôn ngữ không có công cụ hỗ trợ tốt, sau khi quy mô của dự án lớn lên sẽ rất tốn kém để phát triển tiếp cũng như đập bỏ dự án để thay đổi ngôn ngữ.

TypeScript có các công cụ tuyệt vời với các tính năng như gợi ý code, tự động điền, refactor... Đơn giản như việc đổi tên một biến trong dự án lớn. Bình thường bạn sẽ mất cả ngày, thậm chí vài ngày để tìm tất tần tật trong mới code hỗn độn thì với IntelliSense. Biến của bạn được đổi tên trong vòng một giây,

Dart và một số ngôn ngữ khác cũng như TypeScript, sau khi biên dịch kết quả cũng là JavaScript. Nhưng nó không có các công cụ tốt như TypeScript mà đơn thuần chỉ là trình biên dịch.

TypeScript là Siêu JavaScript

Có thể nói TypeScript là Siêu JavaScript, là phiên bản tối thượng của JavaScript. TypeScript làm cho việc lập trình JavaScript đơn giản hơn rất nhiều, theo cấu trúc OOP, kiểu biến của hàm...

Nếu bạn chưa từng học JavaScript thì có thể bỏ qua và học luôn TypeScript. Nếu bạn đã có dự án viết bằng JavaScript và muốn chuyển qua TypeScript nhưng sợ không đủ thời gian thì bạn cứ yên tâm. Việc cần làm chỉ là đổi đuôi .js sang .ts và chuyển code dần dần. Trong một file code vừa viết bằng TypeScript vừa viết bằng JavaScript cũng chạy ok.

TypeScript có khái niệm trừu tượng

Bạn đã bao giờ gặp các từ như interface, abstract, implement, extens... Nếu gặp thì bạn đã biết nó là gì rồi đúng không. Vậy làm sao để sử dụng nó trong JavaScript?. Chịu, có lẽ là không làm được.

TypeScript sẽ giải quyết vấn đề đó cho bạn. TypeScript cho phép định nghĩa các abstraction, protocol, hay role.

TypeScript dễ đọc và dễ hiểu code cũ hơn

Một trong những cơn ác mộng của JavaScript là đọc lại code cũ do thằng khác viết. Khi viết một hàm trong JavaScript, giá trị trả về, các đối số truyền vào đều không ràng buộc rõ ràng về kiểu và số lượng. Vì vậy người đọc không thể nhớ hết được.

TypeScript thì không như vậy, có thể ràng buộc kiểu dữ liệu trả về, kiểu dữ liệu và số lượng các đối số. Nhìn vào đoạn code dưới đây bạn sẽ thấy rõ điều đó




Như trên:

  • Đối số đầu tiên là kiểu String
  • Đối số thứ hai là giá trị trả về của một hàm tự định nghĩa
  • Kết quả trả về cũng là một hàm tự định nghĩa
Như vậy chúng ta có thể thấy sức mạnh của TypeScript đến cỡ nào. Điều quan trọng nữa là TypeScript không bắt buộc chúng ta phải làm như vậy, nhưng chúng ta nên làm để code rõ ràng hơn.

Tổng kết

Qua bài này bạn đã hiểu được vì sao Angular lại chọn TypeScript trong khi có nhiều ngôn ngữ khác như: ES5, ES6, Dart, PureScript, Elm, vv .. 

Mỗi tùy chọn này có ưu và khuyết điểm, nhưng tôi nghĩ TypeScript là một sự lựa chọn tuyệt vời cho hầu hết các dự án. TypeScript có đến 95% các điểm mà một ngôn ngữ bậc cao có. Và mang lại cảm giác như đang viết ES6. Dùng chung các thư viện chuẩn, các định nghĩa, các thư viện của bên thứ ba, các phần mềm phát triển (Như Chrome dev tools)...