Sự khác biệt giữa AngularJS, VueJS và ReactJS

8213

Ngày nay chúng ta có rất nhiều loại framework và thư viện JavaScript, nên để lựa ra framework hay thư viện nào để sử dụng cho dự án giữa vô vàn các lựa chọn ấy là một công việc rất khó khăn. Cùng tìm hiểu kỹ thêm về 3 loại JS này và giúp quá trình quyết định của bạn dễ dàng hơn nhé.

AngularJS là một trong những framework giành được rất nhiều sự ưa chuộng gần đây. Vì sao AngularJS được phổ biến đến vậy? Sự kết nối của cộng đồng, mã nguồn mở, sự quan tâm của Google team,v.v. AngularJS là một framework tốt và giải quyết rất nhiều vấn đề. Một trong những lợi thế của AngularJS là khả năng tạo ra nhiều ứng dụng trên một trang duy nhất. 

Việc chuyển đổi AngularJS 1 sang AngularJS 2 đã gây ra một chút phiền toán cho hầu hết các developer bởi vì không giống với các framework khác, quá trình thay đổi sẽ được áp dụng từ từ cho ứng dụng của bạn, nhưng đối với AngularJS, bạn giống như là viết lại từ đầu. Việc hỗ trợ cho Angular 1 vẫn sẽ được duy trì trong một thời gian dài như thể Angular 1 và AngularJS là hai framework thật sự khác nhau.

TopDev Techtalk: Javascript Night –  ReactJS, AngularJS, VueJS – Cuộc chiến vương quyền Front-end
*Hồ Chí Minh: 18h00 – 21h00 ngày 10/03/2017

9

Căn CỨ theo mức độ phức tạp, AngularJS khó học hơn so với các framework còn lại.

Trong tương lai có thể sẽ có rất nhiều công ty vẫn sử dụng AngularJS trong một khoảng thời gian. Mặc cho Angular vẫn đang trong giai đoạn duy trì còn ReactJS thì đang tăng trưởng. Nếu bây giờ bạn muốn bắt đầu sự nghiệp của mình hoặc bắt đầu một dự án mới, ReactJS sẽ là lựa chọn thích hợp nhất.

Khác với AngularJS, ReactJS không phải framework mà là một thư viện. Nó chịu trách nhiệm phần view, tập trung vào việc tạo ra reactive component cho Modern Web Interfaces. Mặc dù reactive component chỉ “linked” đến ReactJS, do tính “reactive” mà kỹ thuật/tính năng như quan sát một đối tượng JavaScript và phản ánh các thay đổi trên DOM của HTML chỉ xảy ra ở ReactJS.

  • Component gồm “các mẩu code” có markup, style và behavior (html, cssjavascript) và các component có thể compose các interfaces reusable.
  • Một trong những tính năng của web component là khả năng sử dụng chúng như các custom tag; dễ sử dụng; khả năng đọc và hiểu cách thức xây dựng component của 1 interface (screen) cũng đơn giản
Cùng tham gia cuộc chiến nào

ReactJS giải quyết toàn bộ client-side, tập trung tạo ra các declarative component và ReactJS được sử dụng cho Facebook và Instragram. Có thể React trở nên nổi tiếng trong năm nay nhờ vào việc tận dụng 1 số vấn đề trong Angular front-end side.  Team Facebook với ReactJS đã giải quyết những rắc rối này bằng Virtual DOM – object đã map toàn bộ tree của DOM. Tất cả mọi thay đổi được tạo ra ở tầng object này. Sau đó ReactJS sẽ map lại những vấn đề cần chỉnh sửa, nhờ đó hiệu suất hoạt động được nhanh hơn.   

Việc tạo các component với VueJS khá đơn giản. API trực quan và khách quan, hệ thống template của nó rất dễ sử dụng, đơn giản, dễ đoán. Như ReactJS, VueJS có các component đã được propose. VueJS cũng là một thư viện không cố giải quyết tất cả các vấn đề cùng một lúc.

Điểm khác biệt giữa ReactJS, VueJS AngularJS là mặc dù vẫn tập trung giải quyết các vấn đề liên quan đến component, VueJS ReactJS có hệ sinh thái riêng để tạo ra SPA, dần dần chúng ta có khả năng thêm vào “các plugins” để lập trình một ứng dụng. Nhưng Angular không hoạt động giống vậy, AngularJS có sẵn mọi thứ tất cả đều liên kết đan xen và phụ thuộc lẫn nhau. Mặc dù phần lớn thời gian chúng ta không sử dụng hết mọi thứ nhưng ví dụ khi bạn tìm được giải pháp tốt hơn để giải quyết vấn đề nhưng lại rất phức tạp dù chỉ remove 1 block duy nhất ra khỏi AngularJS side do các dependencies này.

Một câu hỏi khác liên quan đến ReactJS là liệu học Flux có cần thiết rồi mới học ReactJS hay không. Câu trả lời là không. Bạn hoàn toàn có thể viết một ứng dụng trên ReactJS mà không cần sử dụng đến Flux Redux.

Flux là một architecture được Facebook sử dụng trước Redux nhờ là 1 dòng dữ liệu đơn,  vì lúc bấy giờ Facebook đã gặp phải một số vấn đề với các MVC architecture. Do model của Facebook phức tạp nên thời gian cải tiến các tính năng tốn khá nhiều thời gian. Vì vậy Flux ra đời để khắc phục vấn đề này với một dòng dữ liệu duy nhất.

Về khả năng đo lường thời gian, có một số thứ rất phức tạp khi làm việc với Flux; vì lý do đó mà Redux ra đời nhằm để tối ưu hoá các ý tưởng và giải quyết những trở ngại mà Flux đã gặp phải.

TopDev Techtalk: Javascript Night –  ReactJS, AngularJS, VueJS – Cuộc chiến vương quyền Front-end
*Hồ Chí Minh: 18h00 – 21h00 ngày 10/03/2017

9

Trải nghiệm tuyệt vời dành cho mobile với các components native chính là với React Native. Bạn có thể tải app ở đây: http://www.reactnative.com/uiexplorer/. Tham khảo thêm: https://facebook.github.io/react-native/

Thực tế nói rằng bạn không cần thiết phải học thêm MVC, Flux, Redux, ReactJS, AngularJS… Tuỳ thuộc vào chức năng và mục tiêu của ứng dụng mà bạn sẽ biết cách sử dụng cái nào hay nên sử dụng tất cả cùng 1 lúc.

Nguồn: Techtalk via blog.hellojs.org