NộI Dung
- 01. Góc
- 02. Phản ứng
- 03. Vue
- So sánh cú pháp của các khuôn khổ như thế nào?
- Mức độ phổ biến và thị trường
- Phát triển ứng dụng di động
- Các khuôn khổ khác cần chú ý vào năm 2020
- Phần kết luận
Vào năm 2020, chúng tôi may mắn có một số khuôn khổ và thư viện để giúp chúng tôi phát triển web. Nhưng không phải lúc nào cũng có nhiều loại như vậy. Trở lại năm 2005, một ngôn ngữ viết kịch bản mới có tên là Mocha được tạo ra bởi một người tên là Brendan Eich. Vài tháng sau khi được đổi tên thành LiveScript, tên này lại được đổi thành JavaScript. Kể từ đó, JavaScript đã đi được một chặng đường dài.
Vào năm 2010, chúng tôi đã chứng kiến sự ra đời của Backbone và Angular là những khung JavaScript đầu tiên và đến năm 2016, 92% tất cả các trang web đã sử dụng JavaScript. Trong bài viết này, chúng ta sẽ xem xét ba trong số các khung JavaScript chính (Angular, React và Vue) và trạng thái của chúng trong thập kỷ tới. Muốn tạo trang web của riêng bạn? Hãy thử danh sách các nhà xây dựng trang web này.
Để có một số tài nguyên tuyệt vời, hãy xem danh sách các công cụ thiết kế web hàng đầu, tổng hợp các dịch vụ lưu trữ web của chúng tôi và danh sách các phần mềm kiểm tra người dùng tuyệt vời này nữa.
01. Góc
AngularJS được phát hành vào năm 2010 nhưng đến năm 2016 nó được viết lại hoàn toàn và phát hành với tên Angular 2. Angular là một web framework toàn diện được phát triển bởi Google, được sử dụng bởi Wix, Upwork, The Guardian, HBO và hơn thế nữa.
Ưu điểm:
- Hỗ trợ đặc biệt cho TypeScript
- MVVM cho phép các nhà phát triển phân tách công việc trên cùng một phần ứng dụng bằng cách sử dụng cùng một bộ dữ liệu
- Tài liệu xuất sắc
Nhược điểm:
- Có một chút đường cong học tập
- Việc di chuyển từ phiên bản cũ có thể khó khăn.
- Các bản cập nhật được giới thiệu khá thường xuyên có nghĩa là các nhà phát triển cần phải thích ứng với chúng
Cái gì tiếp theo?
Trong Angular 9, Ivy là trình biên dịch mặc định. Nó được đưa ra để giải quyết nhiều vấn đề xung quanh hiệu suất và kích thước tệp. Nó sẽ làm cho các ứng dụng nhỏ hơn, nhanh hơn và đơn giản hơn.
Khi bạn so sánh các phiên bản trước của Angular với React và Vue,
kích thước gói cuối cùng lớn hơn rất nhiều khi sử dụng Angular. Ivy cũng có thể làm cho Progressive Hydration, đó là điều mà nhóm Angular đã thể hiện tại I / O 2019. Progressive Hydration sử dụng Ivy để tải dần dần trên máy chủ và máy khách. Ví dụ: khi người dùng bắt đầu tương tác với một trang, mã của các thành phần cùng với bất kỳ thời gian chạy nào sẽ được tìm nạp từng phần một.
Ivy có vẻ như là trọng tâm lớn trong tương lai đối với Angular và hy vọng là sẽ cung cấp nó cho tất cả các ứng dụng. Sẽ có một tùy chọn không tham gia trong phiên bản 9, cho đến Angular 10.
02. Phản ứng
React ban đầu được phát hành vào năm 2013 bởi Facebook và được sử dụng để xây dựng các giao diện web tương tác. Nó được Netflix, Dropbox, PayPal và Uber sử dụng để đặt tên cho một số.
Ưu điểm:
- React sử dụng DOM ảo, có tác động tích cực đến hiệu suất
- JSX rất dễ viết
- Các bản cập nhật không ảnh hưởng đến sự ổn định
Nhược điểm:
- Một trong những trở ngại chính là cần thư viện của bên thứ ba để tạo các ứng dụng phức tạp hơn
- Các nhà phát triển bị bỏ lại trong bóng tối về cách tốt nhất để phát triển
Cái gì tiếp theo?
Tại React Conf 2019, nhóm React đã đề cập đến một số thứ mà họ đã và đang làm. Đầu tiên là Selective Hydration, đây là nơi React sẽ tạm dừng bất cứ thứ gì nó đang hoạt động để ưu tiên các thành phần mà người dùng đang tương tác. Khi người dùng tương tác với một phần cụ thể, khu vực đó sẽ được hydrat hóa. Nhóm cũng đang làm việc trên Suspense, là hệ thống của React để sắp xếp việc tải mã, dữ liệu và hình ảnh. Điều này cho phép các thành phần đợi một thứ gì đó trước khi chúng hiển thị.
Cả Hydrat hóa có chọn lọc và Hồi hộp đều có thể thực hiện được nhờ Chế độ đồng thời, cho phép các ứng dụng phản hồi nhanh hơn bằng cách cung cấp cho React khả năng tham gia các khối lớn công việc có mức độ ưu tiên thấp hơn để tập trung vào điều gì đó có mức độ ưu tiên cao hơn, chẳng hạn như phản hồi thông tin đầu vào của người dùng. Nhóm cũng đề cập đến khả năng tiếp cận như một lĩnh vực khác mà họ đang xem xét, bằng cách tập trung vào hai chủ đề cụ thể - quản lý tiêu điểm và giao diện đầu vào.
03. Vue
Vue được phát triển vào năm 2014 bởi Evan You, một cựu nhân viên của Google. Nó được sử dụng bởi Xiaomi, Alibaba và GitLab. Vue đã cố gắng giành được sự phổ biến và sự ủng hộ từ các nhà phát triển trong một khoảng thời gian ngắn và không có sự hậu thuẫn của một thương hiệu lớn.
Ưu điểm:
- Kích thước rất nhẹ
- Thân thiện với người mới bắt đầu - dễ học
- Cộng đồng tuyệt vời
Nhược điểm:
- Không được hỗ trợ bởi một công ty lớn, như React với Facebook và Angular với Google
- Không có cấu trúc thực
Cái gì tiếp theo?
Vue đã tự đặt ra mục tiêu là nhanh hơn, nhỏ hơn, dễ bảo trì hơn và giúp các nhà phát triển nhắm mục tiêu gốc dễ dàng hơn (nếu bạn gặp khó khăn trong việc duy trì, hãy xem xét dịch vụ lưu trữ web). Bản phát hành tiếp theo (3.0) sẽ ra mắt vào quý 1 năm 2020, bao gồm ghi lại DOM ảo để có hiệu suất tốt hơn cùng với Hỗ trợ TypeScript được cải thiện. Ngoài ra còn có sự bổ sung của API thành phần, cung cấp cho các nhà phát triển một cách mới để tạo các thành phần và tổ chức chúng theo tính năng thay vì hoạt động.
Những Vue đang phát triển cũng đang bận rộn làm việc với Suspense, tính năng này sẽ tạm dừng kết xuất thành phần của bạn và hiển thị thành phần dự phòng cho đến khi đáp ứng được điều kiện.
Một trong những điều tuyệt vời với các bản cập nhật của Vue là chúng duy trì khả năng tương thích ngược. Họ không muốn bạn phá vỡ các dự án Vue cũ của bạn. Chúng tôi đã thấy điều này trong quá trình di chuyển từ 1.0 sang 2.0, trong đó 90% API giống nhau.
So sánh cú pháp của các khuôn khổ như thế nào?
Cả ba khung đều đã trải qua những thay đổi kể từ khi phát hành nhưng một điều quan trọng cần hiểu là cú pháp và sự khác biệt của nó. Hãy xem cú pháp so sánh như thế nào khi nói đến ràng buộc sự kiện đơn giản:
Vue: Các v-on Chỉ thị được sử dụng để đính kèm các trình nghe sự kiện gọi các phương thức trên các cá thể Vue. Chỉ thị có tiền tố là v- để chỉ ra rằng chúng là các thuộc tính đặc biệt do Vue cung cấp và áp dụng hành vi phản ứng đặc biệt cho DOM được hiển thị. Các trình xử lý sự kiện có thể được cung cấp nội tuyến hoặc dưới dạng tên của phương thức.
template> button v-on: click = ”clickHandler”> Nhấp vào tôi / button> / template> script> xuất mặc định {name: “HelloWorld”, các phương thức: {clickHandler: function () {console.log (“Tôi đã được nhấp! ”); }}}; / script>
Phản ứng: React đưa ra đánh dấu và logic trong JS và JSX, một phần mở rộng cú pháp cho JavaScript. Với JSX, hàm được chuyển làm trình xử lý sự kiện. Việc xử lý các sự kiện với các phần tử React rất giống với việc xử lý các sự kiện trên các phần tử DOM. Nhưng có một số khác biệt về cú pháp; ví dụ: các sự kiện React được đặt tên bằng camelCase thay vì chữ thường.
function Button () {function clickHandler (e) {console.log (“Tôi đã được nhấp”); } nút quay lại onClick = {clickHandler}> Nhấp vào tôi! / button>; }
Góc cạnh: Cú pháp ràng buộc sự kiện bao gồm tên sự kiện đích trong dấu ngoặc đơn ở bên trái dấu bằng và câu lệnh mẫu được trích dẫn ở bên phải. Ngoài ra, bạn có thể sử dụng trên- tiền tố, được gọi là biểu mẫu chuẩn.
@Component ({selector: “app-click-me”, template: `button (click) =” onClickMe () ”> Click me! / Button>`}) xuất lớp ClickMeComponent {onClickMe () {console.log (“ Bạn đã kích tôi! ”); }}
Mức độ phổ biến và thị trường
Hãy bắt đầu bằng cách xem xét bức tranh tổng thể về ba khuôn khổ liên quan đến phần còn lại của web bằng cách kiểm tra số liệu thống kê từ W3Techs. Angular hiện được 0,4% tất cả các trang web sử dụng, với thị phần thư viện JavaScript là 0,5%. React được 0,3% tất cả các trang web sử dụng và 0,4% thị phần thư viện JavaScript và Vue có 0,3% cho cả hai. Điều này có vẻ khá đồng đều và bạn sẽ thấy những con số tăng lên.
Xu hướng Google: Trong 12 tháng qua, React là phổ biến nhất trong các cụm từ tìm kiếm, theo sau là Angular. Vue.js còn khá xa; tuy nhiên, cần nhớ một điều là Vue vẫn còn trẻ so với hai người còn lại.
Tìm kiếm việc làm: Tại thời điểm viết bài, React và Angular khá khớp nhau về danh sách việc làm trên Indeed với Vue còn một chặng đường dài phía sau. Tuy nhiên, trên LinkedIn, dường như có nhiều nhu cầu hơn đối với các nhà phát triển Vue.
Tràn ngăn xếp: Nếu bạn nhìn vào kết quả Khảo sát dành cho nhà phát triển Stack Overflow cho năm 2019, thì React và Vue.js đều là những framework web được yêu thích và mong muốn nhất. Angular xếp ở vị trí thứ 9 cho người được yêu thích nhất nhưng lại được mong muốn thứ ba.
GitHub: Vue có số sao nhiều nhất với 153k nhưng lại có số người đóng góp ít nhất (283). Mặt khác, React có 140k sao và 1.341 người đóng góp. Angular chỉ có 59,6k sao nhưng có số lượng người đóng góp cao nhất trong số 3 người với 1.579.
Xu hướng NPM: Hình ảnh trên hiển thị số liệu thống kê trong 12 tháng qua, nơi bạn có thể thấy React có số lượt tải xuống mỗi tháng cao hơn so với Angular và Vue.
Phát triển ứng dụng di động
Một trọng tâm chính của ba công ty lớn là triển khai trên thiết bị di động. React có React Native, đã trở thành một lựa chọn phổ biến để xây dựng ứng dụng iOS và Android không chỉ cho người dùng React mà còn cho cộng đồng phát triển ứng dụng rộng lớn hơn. Các nhà phát triển Angular có thể sử dụng NativeScript cho các ứng dụng gốc hoặc Ionic cho các ứng dụng di động kết hợp, trong khi các nhà phát triển Vue có thể lựa chọn NativeScript hoặc Vue Native. Do sự phổ biến của các ứng dụng di động, đây vẫn là lĩnh vực đầu tư quan trọng.
Các khuôn khổ khác cần chú ý vào năm 2020
Nếu bạn muốn thử một cái gì đó mới vào năm 2020, hãy xem các khung JavaScript này.
Ember: Một khuôn khổ mã nguồn mở để xây dựng các ứng dụng web hoạt động dựa trên mẫu MVVM. Nó được sử dụng bởi một số công ty lớn như Microsoft, Netflix và LinkedIn.
Sao băng: Một nền tảng JavaScript đầy đủ để phát triển các ứng dụng web và di động hiện đại. Nó dễ học và có một cộng đồng rất ủng hộ.
Phần kết luận
Cả ba khuôn khổ đang liên tục được cải thiện, đó là một dấu hiệu đáng khích lệ. Mọi người đều có quan điểm riêng và giải pháp ưa thích của họ về việc họ nên sử dụng cái nào nhưng nó thực sự phù hợp với quy mô của dự án và điều này khiến bạn cảm thấy thoải mái hơn.
Khía cạnh quan trọng nhất là sự hỗ trợ liên tục của các cộng đồng của họ, vì vậy nếu bạn đang có kế hoạch bắt đầu một dự án mới và chưa bao giờ sử dụng bất kỳ dự án nào trong số ba phương pháp này trước đây, thì tôi tin rằng bạn đang ở trong tay an toàn với tất cả họ. Nếu bạn chưa có cơ hội tìm hiểu bất kỳ khung nào trong ba khuôn khổ, thì tôi khuyên bạn nên đặt nó vào giải pháp năm mới của bạn để bắt đầu học. Tương lai sẽ xoay quanh ba điều này.
Nội dung này ban đầu xuất hiện trên tạp chí net.
