JavaScript ngày càng trở nên phổ biến hơn trong những năm qua, cộng đồng đang phát triển nhanh chóng và các lập trình viên phát triển và xây dựng các công cụ cho ngôn ngữ này mỗi ngày.
Điều này khiến bạn cảm thấy choáng ngợp khi phải quyết định sử dụng công cụ/khuôn khổ/thư viện nào cho một tác vụ cụ thể, vì luôn có rất nhiều tùy chọn cho bất kỳ điều gì bạn muốn thực hiện trong JavaScript. Lúc đầu, thật khó để quyết định nên học thư viện hoặc framework nào.
Bài viết này tập trung vào việc giải thích các lợi ích của việc sử dụng một số khung/thư viện JavaScript giao diện người dùng và cuối cùng đưa ra một bức tranh rõ ràng hơn về chúng. Điều này là để tạo thuận lợi cho quá trình ra quyết định lựa chọn một.
phản ứng
React không phải là một framework mà là một thư viện JavaScript để xây dựng giao diện người dùng.
Nó là mã nguồn mở và được duy trì bởi Facebook và 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ộ của Facebook. Sau đó, nó đã được mở và phát hành ra công chúng vào năm 2013 và sau đó đã trở nên phổ biến rộng rãi.
Một số tính năng bao gồm những điều sau đây.
- Nó cung cấp các thành phần phản ứng, tùy biến và tái sử dụng
- Nó sử dụng một DOM ảo
- cực nhanh
- dựa trên thành phần
- Liên kết dữ liệu một chiều
- tái sử dụng mã
- Nó có một hệ sinh thái sôi động, thịnh vượng đằng sau nó
- Hỗ trợ quản lý nhà nước thuận tiện
Cài đặt/Sử dụng
React có thể được sử dụng trên UI theo hai cách khác nhau.
Theo CDN
Bạn có thể tham khảo trang web chính thức của họ để biết liên kết đến 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 liên kết dựa trên mục đích.
Ví dụ: nếu bạn đang sử dụng trong môi trường phát triển thì:
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
Và để sản xuất
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
Sử dụng Node.JS
Tôi cho rằng bạn đã cài đặt NodeJS. Để cài đặt React, chỉ cần gõ lệnh sau.
sudo npm i -g tạo-phản ứng-ứng dụng –save-dev
Sau khi cài đặt hoàn tất, hãy nhập lệnh sau
tạo-ứng dụng-phản ứng-ứng dụng đầu tiên của tôi-phản ứng
Lệnh trên sẽ cài đặt tất cả các thư viện cần thiết để React hoạt động bình thường, bao gồm máy chủ phát triển, gói web và babel.
Chuyển đến thư mục my-first-react-application và chạy lệnh sau
bắt đầu
Ở trên sẽ khởi động máy chủ phát triển trên cổng 3000. Và khi bạn truy cập vào địa chỉ IP của máy chủ có cổng 3000, bạn sẽ thấy một cái gì đó như bên dưới.
React đang trở nên phổ biến và có sẵn theo yêu cầu của nhiều tổ chức lớn. Nếu bạn quan tâm đến việc học, tôi khuyên bạn nên tham gia khóa học đầy đủ này.
Vue.js
Vue.js là một khung JavaScript tiến bộ để tạo giao diện người dùng tương tác và ứng dụng một trang. Nó là một khung xem mô hình với một thư viện cốt lõi, tập trung vào lớp xem. Vue phổ biến vì nó cho phép bạn lưu trữ 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ã nguồn mở và ban đầu được tạo bởi Evan You và phát hành ra công chúng vào tháng 2 năm 2014. Dưới đây là một số tính năng.
- Cung cấp các thành phần xem đáp ứng và tổng hợp.
- Nó sử dụng một DOM ảo
- Tập trung vào thư viện cốt lõi (tức là định tuyến và quản lý trạng thái)
- Phạm vi trong CSS được hỗ trợ mà không cần CSS-In-Js
- Liên kết một phía trong các cấu kiện.
- Hỗ trợ các tiện ích bổ sung cần thiết
- tái sử dụng mã
Cài đặt/Sử dụng
Bạn có thể sử dụng Vue.js trên giao diện người dùng thông qua CDN hoặc với Node.js
Để sử dụng cách CDN, bạn có thể thêm đoạn mã sau vào phần tiêu đề của trang HTML.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Tập lệnh trên phù hợp cho mục đích phát triển vì nó chứa thông báo bảng điều khiển quan trọng. Tuy nhiên, để sản xuất, bạn nên sử dụng như sau.
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Để sử dụng Nodejs, bạn có thể cài đặt bằng lệnh npm.
npm install vue
Tôi thực sự khuyên bạn nên xem tài liệu chính thức của Vue JS để tìm hiểu thêm hoặc cân nhắc đi theo con đường này.
góc cạnh
Angular là một khung JavaScript có cấu trúc dành cho các trang động. Nó cho phép sử dụng HTML làm ngôn ngữ khuôn mẫu và cho phép sử dụng cú pháp HTML để diễn đạt rõ ràng và chính xác các thành phần ứng dụng. Đây là một dự án mã nguồn mở do Google và những người đóng góp khác duy trì.
Cài đặt
Đảm bảo bạn đã cài đặt phần mềm Nodejs mới nhất. Điều đầu tiên chúng ta 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 sẽ 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 hoạt động bình thường.
Để chạy ứng dụng mới tạo, hãy chạy lệnh sau từ thư mục ứng dụng.
ng server
Điều này sẽ tự động khởi động máy chủ trên cổng 4200.
[[email protected] my-first-angular-app]# ng serve
10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html
chunk {main} main.js, main.js.map (main) 47.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 10 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.81 MB [initial] [rendered]
Date: 2019-12-28T12:08:20.138Z - Hash: 5d4b93c7bf9e61979c4d - Time: 12864ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.Đăng kí
Vì vậy, những gì bạn học được là sở thích cá nhân hơn là “cái gì tốt hơn”.
Tất cả các khung/thư viện được liệt kê ở trên đều tuyệt vời. Đây là một bản tóm tắt ngắn gọn;
- Bạn nên học Angular nếu bạn muốn có một Framework mà bạn muốn dựa vào mà không phải xử lý các phụ thuộc bên ngoài.
- Bạn nên học React nếu muốn xây dựng nhanh các ứng dụng PWA, Single Page và cảm thấy thoải mái với JSX.
- React có cộng đồng năng động nhất và nhiều cơ hội làm việc hơn nhờ cộng đồng lớn.
- React tương đối dễ bắt đầu.
- React có khả năng cấu hình cao và coi mọi phần tử giao diện người dùng là một thành phần.
- Vue có những ưu điểm giống như React nhưng không có JSX.
- Thị trường việc làm cho Vue không ngừng mở rộng.
Đây là một biểu đồ trong Google Xu hướng cho thấy tỷ lệ phổ biến của ba trong số chúng so sánh như thế nào.
Nếu bạn quan tâm đến phát triển front-end, bạn có thể xem khóa học này của Udemy.
