1

React vs Vue Vs Angular: Nên chọn framework nào cho dự án của bạn ?

React không phải là framework, ở đây mình đang đề cập đến 2 framework Vue, Angular và React + hệ sinh thái của React. Cả 3 frameworks này đều dùng để xây dựng ứng dụng web (Single Page Application).

Việc xây dụng SPA sẽ giúp trải nghiệm người dùng trên 1 ứng dụng web sẽ nhanh hơn.

Ứng dụng web (SPA) giống như một ứng dụng di động vậy, trên mobile bạn cần phải tải file cài đặt về sau đó mới sử dụng, những lần sau bạn chỉ cần mở lên và sử dụng mà không cần phải cài đặt nữa.

Tương tự, với SPA bạn cần có 1 trình duyệt, bạn truy cập đến 1 trang web, server sẽ trả về cho bạn 1 file bundle ( file ứng dụng đã được đóng gói javascript lại ) rồi sau đó javascript engine sẽ compile file này ra và render ra thành 1 trang web. Lúc này bạn chỉ thao tác trên 1 trang này và không cần phải tải lại file bundle nữa.

Đương nhiên là nó sẽ chậm lúc đầu vì mọi thứ sẽ được tải xuống trong lần đầu tiên bạn request lên server sau đó trải nghiệm trên trang web sẽ rất nhanh.

✧ ✧ ✧

Trong bài viết này mình sẽ không so sánh về performance của React, Vue, hay Angular ( vì performance còn phụ thuộc rất nhiều vào người code, cách optimize, structure, cách sử dụng libs bla bla...) mà mình chỉ nói về vấn đề mà React, Angular, và Vue đang giải quyết.

https://nextlint.com

Angular

Được phát trển bới Google , release bản đầu tiên năm 2010, sau một thời gian rất ngắn sau khi ra mắt thì AngularJS làm king thời đó luôn, người người angular, nhà nhà angular.

Cho đến khi Google bỏ Javascript chuyển qua Typescript làm ngôn ngữ chính cho Angular thì mọi người không còn vào hứng nhiều vào Angular nữa. Tạo tiền đề cho sự phát triển của những framework sau này.

Cho đến nay phiên bản ổn định mới nhất là Angular 7. Trên github của angular hiện đang có 49,318 stars (tại thời điểm mình viết bài này)

https://nextlint.com

ReactJs

Phát triển bởi Facebook, phiển bản released đầu tiên vào năm 2013, cho đến nay phiên bản hiện tại  là React v16.8.6 . Facebook sử dụng React để phát triển UI của facebook. Trên github của React hiện tại có 131k stars

https://nextlint.com

VueJs

Sinh sau để muộn nhưng Vue hiện nay đang dẫn đầu về số sao trên github. Phiên bản đầu tiên released vào nằm 2014 và phiên bản mới nhất hiện tại Vue v2.6.10

https://nextlint.com

Được phát triển bởi  Evan you , từng làm nhân viên của google và làm việc trong dự án phát triển Angular của google. Vue đang có kế hoạch sẽ bỏ javascript và sử dụng typescript.

Vậy nên chọn stack nào?

Bạn là người mới : Vuejs

  • Vuejs khá là thích hợp với những người mới bắt đầu làm SPA vì syntax thân thiện (htm5, css, javascript )
  • Với Vuejs bạn có thể xây dụng 1 ứng dụng SPA hoàn chỉnh mà không cần phải cài đặt thêm packages hay config setup môi trường dev nữa
  • Coding convention, vì đi theo framework nên sẽ có 1 coding convention chuẩn của framework đưa ra, các bạn có thể bám theo trong lúc build ứng dụng cũng đã clean rồi.
  • Devtool của Vue cực kì xịn. Dễ dàng debugs.

Bạn muốn code của mình chất lượng:  Angular

  • Javascript là ngôn ngữ động, khi bạn khai báo 1 biên, javascript  không ràng buộc kiểu dữ liệu của biến đó ( khá là phiêu lưu =)) ). Typescript cho phép bạn gán kiểu dữ liệu cho 1 biến, function, class ..... 
  • Typescript quăng lỗi trong lúc code, compiler. Trong javascript bạn chỉ phát hiện lỗi bằng mắt hoặc khi code của bạn chạy lên fail mà thôi :(((
  • Giảm đáng kể giời gian fix bugs
  • Nếu ràng buộc code kĩ,  1 số function bạn sẽ không cần phải viết unit test :3

yup ! vậy hoy, vì là framework nên Angular cũng có thể build 1 ứng hoàn chỉnh với Angular  mà không cần cài đặt thêm package nào, angular cũng có coding convention đi theo.

Bạn muốn tự mình xây dừng viên gạch cho ứng dụng của mình: React 

  • Unlimited trong việc optimize ( sever-side-rending, code-split, render caching...)
  • Có thể build 1 ứng dụng theo phong cách của bạn, không muốn ràng buộc vào 1 framework.
  • Dễ dàng thay đổi hoặc upgrade project . Ví dụ bạn không muốn sử dụng redux-thunk thì bạn có thể dùng redux-saga, thấy redux chuối quá thì qua xài mobx, thấy mobx chuối quá thì qua xài react context. Không xài React lifecycle nữa thì xài React hook
  • Static type-checking: có thể chọn typescript hoặc flowjs. Nếu ràng buộc kỹ  thì chất lượng code không kém gì Angular.
  • Tuỳ chỉnh optimize development / production bằng webpack/babel hoặc Parcel.

Tại sao mình chỉ nhắc đến React, vì React chỉ là 1 view library dùng để xây dụng giao diện, không hơn không kém.

Mọi thứ trong React khá là ngẫu hứng, để xây được 1 ứng dụng với React bạn cần hiểu rõ về ecosystem của React như react-router-dom redux reselect react-redux  styled-components redux-thunk ......

Việc performance của ứng dụng có tốt hay không , structure project có scale được hay không ... Đều nằm trong tay bạn.

✧ ✧ ✧

Kết bài

Không có thằng nào tốt, xấu hay thừa ở đây cả, Cả React/Vue/Angular đều phuc vụ cho 1 mục đích khác nhau.

Nói Angular code chất lượng, không có nghĩa là Vuejs hay Reactjs code không chất lượng, nhưng so với Vue hay React thì Angular code vẫn chặt chẽ hơn vì dùng typescript là ngôn ngữ mặc định....

Đi đâu về đâu thì compile ra nó cũng chỉ là javascript thôi. Nếu bạn thật sự muốn code mình chất lượng thì bạn có thể tìm hiểu hoặc code để cho nó chất lượng, nếu bạn muốn performance cao thì hãy tìm hiểu để code sao cho performance.

Biết đâu được sau này bạn cũng có thể tự viết 1 compiler  cho riêng mình, input vào <codefun/> sau đó compile ra 1 cái trang web có giao diện đẹp lung linh thì sao :D .

#angularjs#reactjs#vuejs#framework
1
0
...