Trong thế giới Frontend dùng ngôn ngữ JavaScript, có rất rất nhiều Framework khác nhau, và hàng ngày các Framework mới lại tiếp tục được sinh ra. Lý do đằng sau việc có quá nhiều Framework như vậy là gì thì tôi không biết chắc, nhưng tôi đồ rằng nhiều người cảm thấy không thỏa mãn với những Framework hiện có và vì vậy họ thửa riêng cho mình một cái mới.
Tất nhiên bạn không cần phải quá lo lắng, bởi vì chỉ một vài Framework trong đó là phổ biến và bạn sẽ có một cộng đồng rất lớn hỗ trợ. Tỉ dụ như Angular là một Framework đầu bảng bởi đơn giản nó được chống lưng bởi Google (kẻ mà ai cũng biết là ai). Angular là con đẻ của ông lớn Google vì vậy nó được chăm chút rất kỹ. Google thậm chí đã dũng cảm đập đi xây lại Angular từ version 1 (AngularJS) sang version 2 (Angular 2+) đồng thời vẫn support cả 2. Tất nhiên để nắm bắt được một cách sâu sắc Angular không hề đơn giản, bởi nó hỗ trợ quá nhiều thứ và hướng cho Developer viết theo một chuẩn chung, khác hẳn với ReactJS khi nó chỉ là một thư viện và bạn có thể kết hợp và tùy chỉnh theo sở thích. Thực ra Angular không chỉ là một Framework, nó còn là một platform, một nền tảng phát triển rất đầy đủ với những công cụ mạnh mẽ như CLI, debug utilities, hay performance tools. Vì vậy bạn sẽ có trong tay một công cụ hoàn chỉnh để xây dựng các ứng dụng từ nhỏ đến lớn, dùng cho doanh nghiệp.
Do vậy mà dù là học Angular khá mất thời gian, điều đó lại rất có giá trị cho bạn.
Bắt đầu
Với người mới bắt đầu, và có thể là bạn đang cảm thấy choáng ngợp trước vô vàn những khái niệm mới, thì trước khi đọc sâu các tài liệu đó bạn có thể bắt đầu với tutorial này trong đó sẽ hướng dẫn bạn đi từng bước một để có thể xây dựng được một ứng dụng Angular hoàn chỉnh.
Còn nếu bạn đã từng dùng AngularJS và muốn update lên Angular 2+ thì bạn nên xem bảng so sánh AngularJS với Angular.
Một khi bạn đã nắm khá chắc về Angular, bạn có thể dùng cheatsheet này để tham khảo lại các cú pháp và tính năng trên một trang duy nhất.
Style guide
Khi bắt đầu với Angular, cái tôi cảm thấy thích thú là nó có một hướng dẫn về cú pháp và cách trình bày code theo các best practice gọi là style guide rất hoàn chỉnh. Đây là phần không thể bỏ qua với những người mới bắt đầu vì nó có thể giải thích cho những lựa chọn về design trong Framework này.
FAQ
Có một số câu hỏi thường xuyên xuất hiện khi người ta đào sâu tìm hiểu và sử dụng Angular. Vì vậy mà những chàng trai tại Angular đã tổng hợp thành một trang để giải đáp tất cả những câu hỏi này. Bạn có thể tham khảo tại đây
Tiếp tục đào sâu
Dù có thể là bạn không để ý nhưng Angular đã được thiết kế với những mẫu thiết kế design pattern nghe có vẻ lạ tai như reactive programming (không biết dịch thế nào?), unidirectional data flow (luồng dữ liệu đơn hướng), và centralized state management (quản lý trạng thái tập trung). Nói chung đây là những kiến thức khá chuyên sâu để có thể giải thích trong vài dòng. Tôi sẽ giới thiệu sơ qua để bạn tìm hiểu thêm sau nhé
Reactive programming
Về bản chất Angular đã được thiết kế theo kiểu reactive programming, do vậy mà tìm hiểu khái niệm này là cực kỳ quan trọng nếu bạn muốn nắm bắt Angular. Khi xây dựng trang web với Angular thì có một thứ hay được dùng tới đó là Observable – nó chính là Observable design pattern mà có thể bạn đã biết tới. Trong Angular thì Observable là một phần của RxJS.
Luồng dữ liệu đơn hướng
Chắc hẳn bạn đã quen thuộc với mô hình MVC: Model – View – Controller trong đó có khái niệm data binding tức là việc gắn kết (binding) các field observable ở View và Model. Data binding có thể là 1 chiều hoặc 2 chiều. Ở AngularJS thì data binding là 2 chiều, thoạt nhìn thì có vẻ thuận tiện vì update ở View sẽ tạo ra một update đồng thời trong Model và ngược lại. Tuy nhiên nó lại gây ra nhiều vấn đề phát sinh và những lỗi không lường trước đặc biệt với các ứng dụng phức tạp. Vì vậy mà Angular 2+ đã tuân theo kiểu luồng data một chiều như hình minh họa dưới đây
Có thể bạn sẽ thắc mắc, vì trong tài liệu của Angular có nhắc đến khái niệm two-way binding, có gì nhầm lẫn chăng? Thực ra nó chỉ là cách viết ngắn gọn để chỉ 2 binding một chiều gộp lại với nhau (một cái là property binding và cái kia là event binding), còn luồng dữ liệu vẫn là đơn hướng.
Quản lý trạng thái tập trung
Một vấn đề thường gặp phải là khi ứng dụng ngày càng tăng về tính năng và kích thước, thì việc kiểm soát các trạng thái của từng component và luồng dữ liệu ngày càng khó khăn. Quản lý trạng thái tập trung là cách để việc thay đổi trạng thái có thể dự đoán được bằng cách đưa vào các giới hạn trong việc lúc nào các update có thể xảy ra trong luồng dữ liệu đơn hướng. Nếu bạn từng làm việc với React thì có khả năng là bạn cũng biết Redux, một thư viện dùng để quản lý trạng thái cho React. Đối với Angular, các thư viện tương ứng có thể kể đến là NGXS hay @ngrx. Việc dùng hay không dùng một hệ thống quản lý trạng thái tập trung cuối cùng vẫn phụ thuộc vào bài toán bạn đang giải quyết. Nó có thể làm cuộc sống của bạn dễ chịu hơn nhưng cũng có thể khiến bạn đau đầu vì đã thêm một tầng nữa về độ phức tạp.
Những lời cuối
Angular là một Framework mạnh mẽ và được phát triển liên tục bởi đội ngũ phát triển của Google cùng với cộng đồng dev. Nếu bạn đang dùng Angular hay đang có ý định tìm hiểu về nó, thì khả năng cao là bạn đang đi đúng hướng. Có rất nhiều điều bạn có thể học từ thiết kế của Angular, và cơ hội công việc cho bạn cũng rất rộng mở.
Đam mê Code 