Ajax

React vs Angular vs Vue: mèo nào cắn mỉu nào?

Khi bạn học lập trình Web trong những năm gần đây, sau khi được giới thiệu về HTML + CSS + JS cơ bản, và dựng một vài trang web cơ bản bằng HTML thuần, thì đều bước sang JavaScript frameworks như React hoặc Angular hay Vue. Và ở thời điểm hiện tại, nếu bạn chí ít không biết được một trong ba cái tên trên thì bạn khó lòng mà xin được việc trong bộ phận làm front-end web. Vậy, câu hỏi đặt ra cho các bạn chuẩn bị “vào ngành” là nên chọn cái tên nào trong ba “ông lớn” trên. Và trước khi bắt đầu, tôi muốn nói trước là cá nhân tôi không chỉ ra cái nào là tốt nhất, bởi đó phụ thuộc rất nhiều vào trình độ và cách tư duy của mỗi người.

1. React

React thực chất chỉ là một library nhưng tất cả các “thầy” mà tôi học hỏi từ thì luôn nhất trí đồng ý là cái tầm của React phải ngang hàng với hai cái tên còn lại là frameworks mới đúng. Điều duy nhất ngăn cản React trở thành một framework thực thụ có lẽ là do bản thân nó không được tích hợp nhiều chức năng, chẳng hạn như form validation – điều mà anh Maximilian Schwarzmüller cảm thấy tiếc nhất. Khi sử dụng React thì bạn ít nhiều phải tích hợp thêm nhiều gói hỗ trợ từ cộng đồng, mà gói phổ biến nhất, được khuyên dùng nhất chính là Redux để quản lí state toàn cục.

Cái hay của React là định nghĩa về state, và Facebook – tập đoàn chịu trách nhiệm phát triển React – đã đem hướng tư duy đó sang cả việc viết native apps cho di động với React Native, và Google đã học hỏi ít nhiều để tạo ra Flutter. Bạn thay đổi một member trong setState thì toàn bộ những gì đang “dính dáng” tới member đó sẽ được thay đổi theo. Chẳng hạn, một thẻ <p> đang hiển thị nội dung “Hello World” từ một member có tên là pie, thì khi bạn thay đổi giá trị của pie với setState, <p> cũng sẽ tự thay đổi theo, bạn không cần thiết phải làm bất kì công việc nào buộc <p> cập nhật bằng tay cả.

Cũng như Angular và Vue, React app được tổ chức theo hướng các thành phần (components), thành phần mẹ chứa thành phần con, và ngay cả phần nội dung chính của ứng dụng cũng là một thành phần. Mỗi thành phần sẽ có hai yếu tố then chốt để quản lí nội dung bên trong, là stateprops. Nói ngắn gọn, thì một component quản lí các giá trị của các biến bên trong nó qua state, và nhận/giao tiếp với component chứa nó qua props. Đa phần các bạn sẽ khó làm quen với kiểu code theo state và props này, nhưng khi quen rồi thì sẽ thấy nó rất logic và muốn gắn bó với nó hơn là các code thông thường, phải cập nhật từng member một.

Một điểm quan trọng nữa làm nên sự phổ biến của React là cộng đồng rất mạnh. Bạn cần một tính năng nào đó thì cứ đi tìm gói cung cấp phù hợp từ cộng đồng. Bạn cảm thấy việc phải tự mình tổng hợp các state của các components con cháu về chung một nơi để quản lí gây quá nhiều khó khăn thì hãy dùng Redux. React không có sẵn phần form validation? Hãy chọn react-form-validator-core hoặc bộ đôi react-validation + validator hoặc bất kì các gói nào khác mà bạn muốn. Một điều khá thú vị là nhiều khi các gói của cộng đồng cung cấp các tính năng còn tốt và dễ dùng hơn cả hàng chính chủ được tích hợp sẵn trong bộ thư viện React.

React tuyệt vời như vậy nhưng nó cũng có nhiều thứ làm giảm tính hấp dẫn của nó. Chẳng hạn, nó không có ràng buộc dữ liệu hai chiều (two-way data binding) tự động. Bạn phải tự cấu hình bằng tay với các eventsetState kèm với props nếu cần. Mặt khác, các hướng dẫn chính chủ của ReactJS viết khá cẩu thả, và hầu như tất cả các vấn đề của tôi chỉ được giải quyết khi đọc thông tin hay các bài viết từ những nơi khác với trang tài liệu của họ.

Một trong những điểm mà đa số các “thầy” đánh giá kém ở React nhưng bản thân tôi thì không cảm thấy ngại ngùng gì là việc sử dụng JSX, tức là (xem như) HTML trực tiếp trong JavaScript (không phải dạng String), ví dụ:

Bạn thấy ngay trong dấu ngoặc ở return là một dãy như HTML tags mà không có dấu nháy kép nào. Tuy nhiên, đi kèm với nó là một số hạn chế nhỏ: Một số từ khóa của HTML cũng là từ khóa của JavaScript, chẳng hạn như “class” hay “for”, vì vậy, để “tránh né” thì bạn phải “lái” sang các từ khóa thay thế như “className” hay “htmlFor”. Nhiều devs cảm thấy khó chịu với chúng nhưng cá nhân tôi và chí ít là anh Shaun Pelling thì thấy bình thường.

Quan trọng hơn hết là React không thay đổi APIs như xoành xoạch. Một API bị đánh dấu deprecated vẫn được duy trì trong bộ thư viện chí ít cũng khá lâu trước khi bị loại bỏ hoàn toàn. Vì vậy, có thể nói React tương đối ổn định, và khi cập nhật project lên phiên bản React mới, bạn vẫn có khá nhiều thời gian để chuyển đổi dần sang các API mới. Và nếu bạn đã rành rẽ về React, việc chuyển sang mảng di động với React Native là điều diễn ra trong vài nốt nhạc: Hướng tư duy hoàn toàn tương tự, bạn chỉ phải học cách thay đổi các thẻ HTML sang các React Native Components mà thôi, chẳng hạn như <div> thành <View>, hay <p> thành <Text> mà thôi, chí ít đó là cách tôi tiếp cận React Native.

Vậy, trong năm 2019 này, “tôi có nên học React không?”, thì câu trà lời là “Nên, thử ngay luôn đi cho nóng”.

2. Angular

Angular2 là câu trả lời của Google cho React. Nếu AngularJS chỉ là một library thì Angular2 trở thành hẳn một framework với sự thay đổi bên trong là gần như hoàn toàn, dù phần bên ngoài vẫn có sự giống nhau đôi chút. Hiện tại “Dầu cù là” đã tới phiên bản 7 (không có bản số 3) và đi kèm với sự phát triển đó là tình cảm của những nhà phát triển Web. Bản thân Angular mang theo rất nhiều gói tính năng “trất’s vồn’s” chẳng hạn như form validation và http client nên đa số các devs đều sử dụng những gói này thay vì phụ thuộc nhiều vào cộng đồng như React.

Điểm làm nên sức mạnh của Angularràng buộc dữ liệu hai chiều (two-way data binding). Nếu như bạn phải tự cấu hình giá trị của từng thành viên trong các React.Component bằng tay với event, state và props, thì với các Angular Component, bạn chỉ cần có vài thao tác gõ phím là xong. Điều này xảy ra trong tik tok, và tự nó liên kết, do đó bạn không phải nhờ tới bất kì event nào cả. Ngoài ra, việc giao tiếp giữa các Components cũng không quá phức tạp và cấu hình bằng tay nhiều như React. Đồng thời, những directives như ngFor, ngIf, ngShow giúp ích rất nhiều cho các devs khi thao tác với các Components khi chỉ tốn vài dòng còm trực tiếp trong phần HTML template là xong. Trong khi để có được điều tương tự với React thì bạn phải tự định nghĩa nhiều thứ trong render, mà thường gặp nhất là Array.map, Array.filter hay if (aBooleanStateIsTrue), tức là thay đổi component được return dựa trên một state member dạng boolean.

Kể từ Angular4 trở đi thì xem như RxJs trở thành một bộ phận chính thức, tức là bản thân Angular được xây dựng ít nhiều từ RxJs, và bạn cũng được khuyến khích sử dụng RxJs trong project, qua đó phần code của bạn sẽ ngắn đi ít nhiều so với cách truyền thống, và cũng dễ nhìn, dễ hiểu hơn. Bên cạnh đó, cũng không thể không kể tới tốc độ build production của Angular là rất nhanh, đối với những project nhỏ thì chỉ tính bằng giây, còn project lớn cũng chỉ vài phút là cùng. Một điểm cộng khác là việc xây dựng Angular project được thực hiện theo mô hình MVVM (Model-View-ViewModel) cho phép các lập trình viên dễ dàng thi công song song các phần khác nhau của một project với một tổ hợp dữ liệu cho trước.

Tuy nhiên, phàm là vậy nhưng Angular cũng không phải là không có nhược điểm. Mặt khác, những nhược điểm đôi khi còn gây ức chế rất nhiều, và nếu bạn đã quen với React và Vue thì bạn có thể sẽ không muốn gắn bó với Angular tẹo nào. Ngay cả những người “thầy” mà tôi học Angular từ họ cũng ít nhiều lắc đầu ngao ngán trước những điểm chưa tốt sau:

Thứ nhất, Angular thay APIs như thay áo. Ngay cả anh Maximilian Schwarzmüller là fan ruột của Angular cũng ít nhất một lần khó chịu với những thay đổi. Với cá nhân tôi, tôi bắt đầu học Angular2 chỉ một tháng trước khi Angular4 trở nên ổn định. Vậy là xong A2 xong tôi học tiếp A4. Và hỡi ôi, có nhiều thứ thay đổi, chẳng hạn như cấu trúc project, một số thay đổi về directives… và xem như tôi phải học lại một nửa kiến thức vừa mới học xong. Còn theo anh Max, thì Angular APIs có những thay đổi lớn ngay cả khi đó là những phiên bản Release Candidate, tức là sắp trở thành bản Stable để phát hành chính thức – một điều khá tối kị – và tôi hi vọng là tình trạng này không còn xảy ra trong tương lai. Do vậy, theo tôi, bạn nên hạn chế việc cập nhật phiên bản Angular cho project của bạn vì sẽ có rất nhiều thay đổi dẫn tới những lỗi gây hoang mang không biết sửa chữa như nào.

Thứ hai, cấu trúc tập tin một Component khá phiền phức khi có ba tập tin riêng rẽ gồm template, styles, và script nằm riêng. Do đó, mỗi Component là một thư mục thay vì một tập tin duy nhất như React hay Vue. Mỗi lần bạn muốn thay đổi template và script là mỗi lần bạn phải chuyển tab. Dẫu thao tác này chỉ mất chưa tới một giây, nhưng lỡ như bạn đang mở nhiều Component trong Text Editor, việc chuyển tab liên tục có thể làm bạn nổi điên, nhất là khi bạn chuyển nhầm tab.

Thứ ba, dù các hướng dẫn chính chủ khá chi tiết, tuy nhiên, một điểm chung của Angular và Flutter là việc docs ở trang chính viết “trên trời” và hiển nhiên không phải dành cho người mới bắt đầu. Do đó, cá nhân tôi khuyên các bạn khi học Angular, bạn nên bắt đầu với một khóa học trên YouTube, Udemy, Udacity hoặc ở trung tâm tin học nào đó trước, để có kinh nghiệm, tạo được một app đơn giản rồi thì hãy đọc các docs của họ sau.

Cuối cùng, bạn sẽ phải khai báo rất nhiều thứ, rất nhiều dấu @ (decorator) gây khó hiểu cho những người chỉ vừa học xong JavaScript. Ngoài ra, cá nhân tôi cũng không thích TypeScript cho lắm vì tôi thích sự đơn giản của JavaScript. Nếu tôi làm việc với Angular, tôi sẽ thao tác với Angular Dart, tức là thay TypeScript bằng Dart.

Vậy, trong năm 2019 này, “tôi có nên học Angular không?”, thì cá nhân tôi sẽ gật đầu, đi kèm với những chia sẻ sau:

  • Bạn nên học phiên bản Angular mới nhất, học xong thì tạm dừng ở đó, đừng quá chạy theo các phiên bản mới nhất. Nếu bạn muốn cập nhật kiến thức, hãy nên bỏ qua một vài phiên bản, tức là lâu lâu lên luôn một phát tới bản mới nhất.
  • Hạn chế nâng cấp phiên bản Angular cho các project hiện tại, và chỉ nâng cấp khi kiến thức của bạn về phiên bản mới đã chắc chắn.

3. Vue:

Có thể nói những ai đã có kiến thức và ít nhiều kinh nghiệm về cả hai cái tên gạo cội bên trên đều có chung nhận xét: Vue là sự dung hòa của React và Angular và bản thân tôi cũng gật gù đồng tình. Anh Max đã từng hài hước khi cho rằng Vue là kết quả của quá trình “ấy ấy” giữa bộ đôi trên. Những điểm nổi bật đó là:

Thứ nhất, Vue cũng có các directives tương tự như ngIf, ngShow, ngModel là v-if, v-showv-bind, cùng nhiều directives khác, và với v-bind, bạn có ràng buộc dữ liệu hai chiều (two-way data binding). Ngoài ra còn có slot để dễ dàng quyết định sẽ hiển thị component nào.

Thứ hai, Vue cũng có props như React để truyền dữ liệu từ Component ngoài vào trong, và phần truyền dữ liệu từ Component trong ra ngoài cũng tương tự như React với event và props.

Thứ ba, React có Redux, VueVuex để quản lí toàn cục các trạng thái chung của các biến.

Thứ tư, tương tự như React, bạn chỉ đơn giản gói gọn một Component trong một tập tin .vue duy nhất, bao gồm cả template, styles và script.

Thứ năm, việc khai báo Component ít rắc rối hơn so với Angular.

Những dung hòa trên có được là do anh Evan You, người tạo ra Vue, từng là một nhân viên của Google trong đội phát triển Angular nhưng có những bất đồng ý về sự phức tạp của đội đỏ và chịu ảnh hưởng ít nhiều bởi những ưu điểm đơn giản của React. Vì vậy, anh tạo ra Vue, và bạn có thể đoán được tuổi đời của Vue còn khá trẻ so với hai ông lớn R&A.

Phàm là Vue ngon, dễ tiếp cận, dễ học và dễ làm, song do tuổi đời của nó còn khá trẻ, ít người biết tới, cũng như docs của nó vẫn còn chưa thật sự tốt, và các doanh nghiệp lớn chưa dám mạo hiểm với đội Xanh lá, nên thị phần của Vue còn khá khiêm tốn. Dẫu vậy, nó đang thu hút được đa số các đối tượng mới làm quen với JavaScript frameworks/libraries và cộng đồng Vue ở Việt Nam hiện tại cũng không phải là nhỏ. Do đó, nếu bạn muốn làm việc với Vue thì các công ty khởi nghiệp – startups – sẽ là điểm đến tiềm năng hơn các doanh nghiệp lớn đã có tiếng tăm.

Vậy, trong năm 2019 này, “tôi có nên học Vue không?”, thì tôi xin cam đoan với bạn, là bạn sẽ thích nó.

Bâu nuýt: Dưới đây là biểu đồ tròn thống kê tỉ lệ yêu cầu sử dụng framework nào khi các công ty tiến hành tuyển dụng trong năm 2018:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.