Team Dev ở công ty Holistics vừa migrate hệ thống của họ từ AngularJS 1.x qua VueJS. Anh Huy (CTO) có chia sẻ trên Facebook về quá trình chuyển qua. Mời các bạn đọc bài chia sẻ của anh Huy ở dưới nhé.


AngularJS -> VueJS

Gần đây mình thấy trên mạng share nhiều bài nói về ReactJS vs VueJS vs AngularJS quá. Team mình thì vừa chuyển từ AngularJS 1.x sang VueJS. Bon chen chia sẻ trải nghiệm của team trong quá trình chuyển 😂:

1- Background & xài những gì của Angular:
App AngularJS 1.x bắt đầu từ ~2014.

Xài những features gì: View model binding (controller, view + template engine), Dependency Injection, 3rd party components. Ngoài ra là pure inhouse JS code.

2- Problems

  • Two-way data flow làm cho việc handle logic cực kì khó, cả trong việc viết components lẫn việc viết view controller.
  • Dependency Injection làm càng lúc càng nhiều declaration, và khi ES6 ra thì cái này ko còn cần nữa.
  • Rendering performance tệ ($watch...). Đọc code khá rối và documentation rất tệ 😵

Lý do chọn Vue (mà ko chọn React hay các framework khác như EmberJS, Angular2, hay tại sao lại bỏ Angular1):

3- Không xài Angular2: Angular1 đã khó hiểu 2 càng khó hiểu hơn, và có nhiều changes quá (TS, templating syntax, no clear migration path, giống như ko ai chuyển từ Python2.7 lên 3.0 vậy :)) )

4- Không chọn React:

  • Vì migration effort rất lớn và không có clear direction for baby-step migration. AngularJS dựa trên templating system (HTML-based), còn React lại là JS-based JSX, rất khó để cho 2 thằng sống chung với nhau.
  • Còn lý do khách quan là thấy JSX hơi dài dòng.

6- Chọn VueJS:

  • Key: HTML Template engine giống Angular nên migrate qua dễ , sống chung vẫn khoẻ, và làm đến đâu migrate đến đó.
  • Fix 2-way data binding problem (cái này React cũng làm dc), 1-way data flow + Component-based approach (cái này React cũng làm dc)
  • Và cuối cùng nhưng quan trọng ko kém là documentation cực tốt

Nói chung là nó giải quyết 2 vấn đề bên mình gặp ở Angular và ko cần đổi syntax nhiều (ng-repeat chuyển thành v-for)

7- Không chọn EmberJS: Ember là nguyên cả framework cho SPA rồi ko phải JS library.

8- Migration Process & Results:

Nhìn chung thì AngularJS app bên mình có 2 vấn đề: messy control flow logic, và Angular (stated above).

Trong quá trình chuyển sang VueJS thì do cách VueJS viết (1-way data flow, component-based) đã ép mình phải refactor lại code và cũng giải quyết vấn đề 1 luôn. Nếu sau này thấy thích React và muốn chuyển qua thì lúc đó việc chuyển cũng sẽ rất nhẹ nhàng.

Bây giờ đã chuyển được 90% rồi (phew), chuyển đến đâu deploy đến đó (khách hàng chắc không hề nhận ra sự thay đổi).

Benefits After Migration:

  • Clean code, modular (component-based), dùng Vuex, Vue Store nên programming productivity cao hơn hẳn
  • Viết component tests khá tốt & chạy nhanh
  • UI Performance nhanh hơn hẳn

Cái chính ở Vue (hay React) thì mình nghĩ ko phải là các library, components, mà là cách structure của họ buộc ai dùng thì phải restructure code theo 1 hướng tiếp cận nhất định, từ đó đảm bảo được 3 thứ: reusability, testability and maintainability.