Vue-Native - nền tảng di động của Vue.js bị phân tán

So sánh Vue.js và React.js là một chủ đề rất hay. Vue.js đã vượt qua React.js về số lượng sao ở Github, với 140k so với 130k, chắc chắn là sẽ tạo cuộc đua hấp dẫn. Nên chọn cái nào bây giờ? Có khi mình phải nhận dự án làm Vue.js nên dù chưa có kinh nghiệm về Vue.js, cũng cố gắng nhiên cứu xem 2 bạn này phù hợp với từng dự án ra sao nhé. Bài viết này giới thiệu một góc nhìn tổng quát nhưng cũng đầy đủ về 2 nền tảng/hệ sinh thái này.

Angular.js thì sao?

Cuộc đua đã ngã mũ với Angular.js khi hiện tại chỉ đạt gần 50k sao ở Github và đà tăng trưởng về sao cũng chậm lại khá rõ khi cách đây 2 năm đã ở ngưỡng ~35k.

Thử nhìn đoạn mã sau trong “Getting Started” của Angular 8:

<h2>Products</h2>
 <div *ngFor="let product of products">
  <h3>
    <a ="product.name + ' details'">
      {{ product.name }}
    </a>
  </h3>
  <p *ngIf="product.description">
    Description: {{ product.description }}
  </p>
   <button (click)="share()">
    Share
  </button>
</div>

Đoạn mã này trình bày 5 ý:

• *ngFor
• *ngIf
• Interpolation {{ }}
• Property binding [ ]
• Event binding ( )

Thăm dò của Scotch.io về Angular

Với kết quả thăm dò của Scotch.io cho câu hỏi “Lần cuối bạn sử dụng Angular (bất kể phiên bản nào) để tạo 1 dự án mới là khi nào?”, hơn 50% trả lời là hơn 1 năm

So sánh Vue.js và React.js qua các con số thống kê

Tần suất phát hành phiên bản mới

Với sự hình thành đã lâu không khó để hiểu React.js vượt trội về số lượng commit và pull request. Tuy nhiên cũng nhìn nhận 1 điều là số lần release của Vue.js lại gấp đôi React.js, có thể kết luận về tính stable của dự án thì React.js hơn hẳn. Vì sao? Vì commit code ít nhưng lại release nhiều, mình nghi ngờ về chất lượng release, không tin à, nhìn hình sau nhé:

Trong 1 ngày mà release xong fix bug muối mặt luôn, còn React.js thì bản nào release mình thấy rất an tâm mà cập nhật ngay, còn với Vue.js thì chắc là không.

Mức độ thịnh hành

Mục này mình xét các thông số: được sử dụng, fork, và số người đóng góp.

React.js rõ ràng được sử dụng rộng rãi hơn khi được sử dụng ở 2 triệu dự án, so với khoảng gần 900k với Vue.js. Mặc dù vậy, cũng có thể do React.js được ra đời sớm nên được sử dụng nhiều hơn? Còn Vue.js ra đời sau nhưng đã đạt 900k thì quả thực rất ấn tượng.

Fork về có kết quả tương đương, React.js nhỉnh hơn 1 chút với 24k, so với 20k của Vue.js, nhưng số người đóng góp lại khá chênh lệch 1297/276 ~ gấp 5 lần. Có thể suy ra fork vue.js về cho vui :D. Tính tương quan về số lượng pull requests/forks và người đóng góp/forks thì lần lượt React.js đạt 33% và 5%, còn Vue.js đạt 7.5% và1.4%. Đây là tỉ lệ khá chênh lệch, và có thể nói rằng người dùng React.js giỏi hơn (?), có khả năng đóng góp, chịu khó đóng góp hơn người dùng Vue.js.

Kết quả về tỉ lệ pull requests/forks và contributes/forks này, mình không cho là vì React.js có trước Vue.js có sau, vì rõ ràng số lượng forks của Vue.js rất cao. Ý nghĩa về việc forks của mỗi người thì cũng khó biết, tuy nhiên chỉ gói gọn trong 2 mục đích:

• Lưu giữ làm của riêng (sợ mất, mình cũng có khi có suy nghĩ đó :D)
• Đóng góp cho cộng đồng, kết quả này cho thấy cộng đồng React.js phát triển hơn, có khả năng đóng góp và phát triển nền tảng hơn hẳn Vue.js.

Phát triển ứng dụng di động, native

Đối thủ lớn Flutter

Việc được sử dụng rộng rãi hơn cũng do React Native sử dụng React, còn Vue.js thì không có nền tảng di động chính thức mà chỉ có đối tác là Weex hoặc Vue-Native, sự tồn tại và phát triển của Weex sẽ gặp thách thức khá lớn khi Flutter đã chứng tỏ được khả năng và sự thống trị của React Native.

Mình thấy Flutter rất tuyệt (Xem thêm Flutter là gì), tuy rằng theo mình sẽ rất khó ăn hiếp được Reat Native, nhưng với Weex thì khả năng cạnh tranh được với Flutter là cực khó. Bằng chứng là số sao của Flutter gấp 5 lần Weex, mặc dù Flutter cũng mới ra mắt cách đây không lâu.

Hơn nữa, Flutter là nền tảng được hỗ trợ chính thức bởi Google (Google I/O), và hỗ trợ đa nền tảng. Có thể dùng Flutter để tạo Web, Mobile, Desktop và cả hệ thống nhúng. Thực sự là Flutter rất khủng, điểm khó của Flutter là dùng ngôn ngữ Dart.

Một điều cần lưu tâm là động thái Alibaba chuyển giao Weex cho tổ chức Apache, và đồng thời tạo ra ứng dụng “Xianyu” bằng Flutter, với 50M download (showcase của Flutter ngay trên trang chủ của Flutter). Không chắc là Alibaba chuyển qua sử dụng Flutter hẳn luôn hay không, nhưng rõ ràng họ không mặn mà gì với Weex cả.

Weex hoàn toàn bị lép vế so với Flutter!

React Native Windows

React Native có thể được sử dụng cho việc phát triển ứng dụng trên Windows với React Native Windows được hỗ trợ chính thức bởi Microsoft. Bạn có thể sử dụng React Native Windows để phát triển cho toàn bộ hệ sinh thái của Microsoft: desktop, tablet, xbox. Còn gì tuyệt vời hơn?

Ngoài ra, Microsoft còn có nền tảng Xamarin cũng mạnh mẽ không kém. Việc hỗ trợ React Native cho Windows trong khi đã có Xamarin là bước đi thông minh của Microsoft, vì hiện tại Javascript đang rất nóng và có nhiều lập trình viên theo đuổi hơn bao giờ hết.

Nền tảng di động của Vue.js bị phân tán

Không hỗ trợ chính thức nền tảng phát triển ứng dụng di động mà còn có sự phân mảnh. Bản thân trong chính Weex cũng hỗ trợ cả Vue.js và Rax (React.js), nghĩa rằng Vue.js được hỗ trợ để trong Weex, không có Vue.js thì Weex vẫn sống. Đây thực sự là điều đáng lưu ý, khi một nền tảng bị phân mảnh thì rõ ràng cộng đồng phát triển không mạnh, không tập trung.

Ngoài Weex thì còn có Vue-Native, được tạo ra bởi nhóm GeekyAnts, nhóm đã tạo ra NativeBase cho React Native cũng khá nổi tiếng. Nhưng có lẽ Vue-Native cũng còn khá nhỏ, để có thể tạo nên đột phá, hay làm được gì. Và bản chất Vue-Native là dựa trên React Native và dùng Vue.js để viết codekết nối. Theo mình đây là cách cực kỳ nguy hiểm, không nên đi theo. Vì trong khi phát triển chắc chắn sẽ có vấn đề với React Native mà dựa trên đó là React, như vậy bạn có thể sẽ phải học cả 3 thứ: Vue, React, React Native.

NativeScript cũng là hình thái lai, khi dùng được cả Vue.js và Angular.js, cũng không phải bắt buộc dùng Vue.js nên nhận định cũng như Weex, không có Vue.js thì NativeScript vẫn sống.

Hơn nữa, như đã phân tích ở trên về tính stable của Vue.js, cái gốc đã không thực sự ngon, thì các nền tảng cho di động hay native cũng khó có thể có cuộc cách mạng được. Với lý do phân mảnh thì việc củng cố và phát triển nền tảng di động với Vue.js không khả quan cho lắm.

Rủi ro từ quan hệ Mỹ – Trung

Không thể không nói điều này, vì các đóng góp cho Vue.js cũng có phần lớn đến từ Alibaba với Weex do Alibaba tạo ra. Và các sản phẩm dùng Weex đa phần là của Trung Quốc

Mặc dù Weex đã chuyển giao sang cho tổ chức Apache, tuy nhiên chắc chắn sự đóng góp vào Weex sẽ đến phần lớn từ Trung Quốc, và tất nhiên cũng sẽ được sử dụng phần lớn từ Trung Quốc. Với quan hệ của Mỹ Trung xấu đi, các vấn đề liên quan đến công nghệ, học thuật của Trung Quốc đều bị hạn chế. Nó có thể là việc sử dụng Weex trên thế giới, cũng như sự đóng góp của cộng đồng trên toàn thế giới vào Weex có khả năng bị ảnh hưởng. Flutter cũng được lập trình viên Trung Quốc quan tâm và đóng góp, ví dụ là https://github.com/alibaba/flutter-go. Tuy nhiên, vị thế của Flutter khác hoàn toàn do Google chống lưng.

So sánh Vue.js và React.js trong mảng phát triển ứng dụng di động và native có kết quả quá khập khiễng khi kết quả nghiên hoàn toàn về React.js.

Khi nào nên sử dụng Vue.js

Nếu theo phân tích ở trên thì phần thắng nghiên hẳn về React.js với tỉ số 3-0. Tất nhiên, đây là góc nhìn có thể khác với nhiều người khác, nhưng mình nghĩ các con số thống kê không hề nói dối. Tuy nhiên, Vue.js có những điểm mạnh riêng mà mình cũng rất thích. Hãy cùng phân tích xem Vue.js phù hợp như thế nào nhé.

Như mình đã phân tích khá kỹ ở phần di động, native ở trên bạn không nên sử dụng Vue.js cho mục đích phát triển ứng dụng di động. Do vậy nhiệm vụ còn lại khả dĩ cho Vue.js là mảng web mà thôi.

Điểm mạnh của Vue.js hơn React.js là có thể sử dụng template và cả JSX. JSX có một điểm yếu khá lớn là phải biết javascript, rồi cách build khá phức tạp. Như vậy đã hạn chế 1 lượng lớn frontend developer, nhất là các bạn chỉ chuyên cắt html từ photoshop và làm template. Team mình từng thất bại 1 dự án sử dụng React.js vì vấn đề này. Từ design, cắt ra html, rồi import vào react là một quá trình phức tạp, tình huống là bạn code react.js không giỏi trong việc cắt html, hoặc trong dự án tách biệt giữa bạn mockup html và bạn code javascript:

• Có 1 khoảng cách khá lớn về việc kỹ năng cắt html và kỹ năng code javascript, nó có vẻ là có điểm chung nhưng thực tế không như kỳ vọng. Bạn cắt html không biết nhiều về javascript, cũng như ngược lại.
• Mất tài nguyên con người với việc thay đổi html/css trong JSX, phải sử dụng 2 người. Vì với Styled-component thì mỗi component nắm giữ style riêng. Nên khi thay đổi html, css thì cũng phải sửa lại component.

Việc sử dụng Vue.js khá dễ dàng vì có thể tách biệt được phần template và phần logic, sử dụng Vue.js ở cách này không khác gì cách dùng jQuery cả. Với vue.js thì template mockup và code javascript sẽ nằm chung trên 1 repo chứ không cần phải tách ra, và có thể 2 phía html mockup và javascript developer có thể làm chung trên cùng tập tin.

Bỏ qua sự so sánh về tốc độ, mình thực sự không quan tâm lắm, trừ khi quá chênh lệch. Và các vấn đề về kỹ thuật chi tiết giữa 2 nền tảng, thì có thể sử dụng Vue.js tốt nếu:

• Bạn không hề có ý định làm ứng dụng di động, ứng dụng native với Vue.js
• Team bạn thiên về graphics design và phụ thuộc khá nhiều vào html mockup.
• Làm phần dashboard, web application

Fullstack Station Tips

React từ 16.8 có Reack Hooks rất lợi hại, có thể thay đổi về cách viết React nhiều trong tương lai gần. React Hooks sẽ giúp cho dự án không phụ thuộc vào Component Class mà vẫn có các tính năng hay, tiện lợi của component class. Dù Vue.js cũng rất tuyệt để làm sản phẩm, nhưng với những ưu điểm của React, độ phổ biến của hệ sinh thái kết hợp với React Hooks sẽ tạo ra sức mạnh đáng kể cho React.js

Sự so sánh Vue.js và React.js, hay chọn lựa chỉ có giá trị trong dự án nhất định, còn về con đường lập trình thì mình nghiêng hẳn hoàn toàn về React.js.