3 khung / thư viện JavaScript tốt nhất để phát triển giao diện người dùng

JavaScript đã ngày càng trở nên phổ biến trong những năm qua, cộng đồng đang phát triển nhanh chóng và các nhà phát triển liên tục phát triển và xây dựng các công cụ cho ngôn ngữ hàng ngày.


Điều này làm cho nó trở nên quá sức khi quyết định sử dụng công cụ / khung / thư viện nào cho một tác vụ cụ thể vì luôn có nhiều tùy chọn cho bất kỳ thứ gì bạn muốn làm trong JavaScript. Lúc đầu, It vẫn còn khó khăn để quyết định nên học thư viện hoặc khung nào.

Bài viết này tập trung vào việc làm sáng tỏ lợi thế của việc sử dụng một số khung / thư viện giao diện người dùng JavaScript và cuối cùng đưa ra một bức tranh rõ ràng hơn về chúng. Nó được dự định để làm cho quá trình quyết định chọn một dễ dàng hơn.

Phản ứng

Phản ứng không phải là khung mà là thư viện JavaScript để xây dựng giao diện người dùng.

Nó là nguồn mở và được duy trì bởi Facebook và một cộng đồng các nhà phát triển cá nhân. React ban đầu được viết bởi Jordan Walke như một công cụ nội bộ tại Facebook. Sau đó, nó là nguồn mở và được phát hành ra công chúng vào năm 2013, và đã trở nên phổ biến rộng rãi sau đó.

Một số tính năng bao gồm như sau.

  • Cung cấp các thành phần Reactive, tùy biến và tái sử dụng
  • Sử dụng một DOM ảo
  • Cực nhanh
  • Dựa trên thành phần
  • Ràng buộc dữ liệu một chiều
  • Tái sử dụng mã
  • Nó có một hệ sinh thái phát triển mạnh mẽ đằng sau nó
  • Xử lý quản lý nhà nước thuận tiện

Cài đặt / Sử dụng

Phản ứng có thể được sử dụng trên frontend theo hai cách khác nhau.

  • Qua CDN
  • Sử dụng Node.JS

Qua CDN

Bạn có thể tham khảo trang điện tử chính thức để có được một liên kết tập lệnh mà bạn có thể đưa vào thẻ tiêu đề trong đánh dấu HTML của mình. Chọn các liên kết dựa trên mục đích.

Ví dụ: nếu sử dụng trong môi trường phát triển, thì:

Và, cho sản xuất

Sử dụng Node.JS

Tôi giả sử bạn đã cài đặt NodeJS. Để cài đặt React, chỉ cần gõ lệnh sau.

sudo npm i -g tạo-Reac-app –save-dev

Sau khi cài đặt xong, gõ lệnh sau

tạo-Reac-app my-First-Reac-application

Lệnh trên sẽ cài đặt tất cả các thư viện cần thiết để React chạy phù hợp, bao gồm máy chủ phát triển, webpack và babel.

Điều hướng đến thư mục ứng dụng phản ứng đầu tiên của tôi và chạy lệnh sau

bắt đầu

Ở trên sẽ khởi chạy một máy chủ phát triển trên cổng 3000. Và, khi bạn truy cập IP máy chủ của mình bằng cổng 3000 thì bạn sẽ thấy một cái gì đó như bên dưới.

React đang trở nên phổ biến và theo yêu cầu của một số tổ chức lớn. Nếu bạn quan tâm đến việc học, thì tôi khuyên bạn nên dùng cái này hoàn thành khóa học.

Vue.js

Vue.js là một khung JavaScript tiến bộ để xây dựng giao diện người dùng tương tác và các ứng dụng một trang. Nó là một khung nhìn mô hình với thư viện lõi, tập trung vào lớp khung nhìn. Vue là phổ biến, vì nó có khả năng cung cấp năng lượng cho các ứng dụng một trang. Không giống như React, Vue sử dụng HTML thô chứ không phải JSX.

Vue.js là một nguồn mở và ban đầu được tạo bởi Evan bạn và được phát hành công khai vào tháng 2 năm 2014. Sau đây là một số tính năng.

  • Nó cung cấp các thành phần xem Reactive và composable.
  • Sử dụng một DOM ảo
  • Duy trì sự tập trung vào thư viện cốt lõi (tức là, định tuyến và quản lý nhà nước)
  • Phạm vi trong CSS được xử lý mà không có CSS-In-Js
  •  Liên kết một chiều trong các thành phần.
  • Hỗ trợ các addons thiết yếu
  • Tái sử dụng mã

Cài đặt / Sử dụng

Bạn có thể sử dụng Vue.js ở mặt trước qua CDN hoặc với Node.js

Để sử dụng Cách CDN, bạn có thể thêm tập lệnh sau vào phần tiêu đề trang HTML của mình.

Kịch bản trên phù hợp cho mục đích phát triển vì nó bao gồm một thông điệp console quan trọng. Tuy nhiên, để sản xuất, bạn nên sử dụng cái dưới đây.

Và, để sử dụng với Nodejs, bạn có thể cài đặt nó bằng lệnh npm.

npm cài đặt vue

Illll khuyên bạn nên đọc Vue JS chính thức tài liệu để tìm hiểu thêm hoặc xem xét việc này con đường.

Góc cạnh

Góc cạnh là một khung JavaScript cấu trúc cho các trang động. Nó cho phép sử dụng HTML làm ngôn ngữ mẫu và cho phép sử dụng cú pháp HTML để diễn đạt thành phần ứng dụng rõ ràng và chính xác. Đây là một dự án nguồn mở được duy trì bởi Google và các cộng tác viên khác.

Cài đặt

Hãy chắc chắn rằng bạn đã cài đặt Nodejs mới nhất. Điều đầu tiên chúng tôi cần cài đặt là công cụ Angular CLI.

cài đặt npm -g @ angular / cli

Sau khi cài đặt, chúng ta có thể tạo một dự án mới bằng lệnh sau.

ng new my-First-angular-app

Thực hiện theo các hướng dẫn trên màn hình. Điều này tạo ra một số tệp và thư mục và sử dụng mô-đun npm để tải xuống các thư viện của bên thứ ba cần thiết để Angular chạy đúng.

Để khởi động ứng dụng vừa tạo, hãy chạy lệnh sau từ thư mục ứng dụng.

máy chủ ng

Điều này sẽ tự động khởi động máy chủ trên cổng 4200.

[[email được bảo vệ] ứng dụng đầu tiên của tôi] # ng phục vụ
10% xây dựng 3/3 mô-đun 0 active wds: Dự án đang chạy tại http: // localhost: 4200 / webpack-dev-server /
ℹ wds: đầu ra webpack được phục vụ từ /
ℹ wds: 404 sẽ chuyển về //index.html

chunk {main} main.js, main.js.map (main) 47.8 kB [ban đầu] [render]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [ban đầu] [kết xuất]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [render]
chunk {style} Styles.js, Styles.js.map (style) 10 kB [ban đầu] [kết xuất]
chunk {eller} eller.js, eller.js.map (nhà cung cấp) 3,81 MB [ban đầu] [kết xuất]
Ngày: 2019-12-28T12: 08: 20.138Z – Hash: 5d4b93c7bf9e61979c4d – Thời gian: 12864ms
** Máy chủ phát triển trực tiếp Angular đang nghe trên localhost: 4200, mở trình duyệt của bạn trên http: // localhost: 4200 / **
wdm: Biên dịch thành công.

Phần kết luận

Vì vậy, những gì bạn chọn để học là một sở thích cá nhân hơn là một điều tốt hơn.

Tất cả các khung / thư viện được liệt kê ở trên là tuyệt vời. Đây là một bản tóm tắt ngắn;

  • Bạn nên học Angular nếu bạn muốn một Framework mà bạn muốn dựa vào mà không phải đối phó với các phụ thuộc bên ngoài.
  • Bạn nên học React nếu bạn muốn xây dựng ứng dụng Trang đơn, PWA, Trang đơn nhanh và bạn cảm thấy thoải mái khi ở xung quanh JSX.
  • React có cộng đồng sôi động nhất và nhiều cơ hội việc làm hơn do cộng đồng lớn của nó.
  • React tương đối dễ dàng để bắt đầu với.
  • React có khả năng tùy biến cao và coi mỗi phần của UI là một thành phần.
  • Vue có những lợi thế tương tự như React nhưng không có JSX.
  • Thị trường việc làm cho Vue không ngừng tăng lên.

Dưới đây, một biểu đồ trên Google Xu hướng hiển thị so sánh tỷ lệ phổ biến của 3 người trong số họ.

Nếu phát triển front-end là mối quan tâm của bạn, thì bạn có thể kiểm tra điều này Khóa học của kẻ thù.

THẺ

  • Mã nguồn mở

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map