Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular
Code

Angular và React: So Sánh 7 Tính Năng Quan Trọng

by
Length:LongLanguages:

Vietnamese (Tiếng Việt) translation by Andrea Ho (you can also view the original English article)

Angular vs React

Angular so với React là một tranh luận phổ biển giữa các nhà phát triển Front-End JavaScript, thông thường, cuộc tranh luận kết luận nghiêng về một trong hai bên công nghệ. Được phát triển trực tiếp bởi Google và Facebook, Angular và React là hai công nghệ phổ biến được sử dụng để xây dựng các ứng dụng tương tác 1 trang.

Một so sánh toàn diện giữa Angular và React sắp xảy ra bởi vì có nhiều chỗ cả hai đang có sự trùng lấp đáng kể với những gì mà chúng cung cấp, ví dụ như xây dựng front-end view cho ứng dụng và những chức năng vẫn còn chưa hoàn chỉnh trừ phi có sự bổ sung của thư viên bên thứ ba. Chấp nhận chọn một công nghệ thay vì một cái khác là một câu hỏi liệu Angular hoặc React giải quyết vấn đề của bạn tốt hơn và kèm chút trực giác. Trong bài viết này, chúng tôi sẽ so sánh và đối chiếu sự tương phản 7 tính năng nổi bật khác biệt của Angular và React.

Tôi là một người ủng hộ hăng hái của cách tiếp cận code-first (thường nói: code đáng tin hơn lời nói). Hãy ghi nhớ điều này. Tôi đã thêm các ví dụ code của Angular và React để bạn có thể hình dung và quyết định xem cái nào sẽ đáp ứng được cho bạn và cái nào không. Vậy hãy bắt đầu nào.

Framework vs Library (thư viện)

Angular là một framework, trong khi React là một thư viện.

Vậy nó có ý nghĩa gì? React bản thân sẽ không giúp bạn tạo ra ứng dụng web bởi vì nó được thiết kế để tạo ra views (chữ V trong MVC). React dùng để xây dựng view dựa trên đối tượng cho dữ liệu có thể được đưa đến cho các view con. Để lấp khoảng trống này, Facebook đã phát triển Flux, là một kiến trúc giúp bổ trợ cho React. Kiến trúc Flux, khi kết đôi với React, mang lại kịch bản sau đây:

  1. Người dùng click vào một thành phần React.
  2. Một hành động được gọi lên. Hành động này gửi đến một Store thông qua một thư viện Dispatcher.
  3. Store sẽ theo dõi trạng thái của ứng dụng và các phương pháp lấy dữ liệu. Bất kỳ thay đổi nào của trạng thái cũng được phản ánh trong views, và điều này giúp view nhất quán với trạng thái của ứng dụng.

Bạn chưa hiểu lắm? Hình minh hoạ này sẽ giúp bạn hiểu rõ.

An image that depicts how the Flux architecture complements React
Flux bổ trợ cho React và triển khai khái niệm luồng dữ liệu Unidirectional (một chiều).
Angular là một framework để xây dựng các ứng dụng.

AngularJS được xây dựng vững chắc trên mô hình MVC, tách biệt ứng dụng thành 3 phần layer khác nhau. Sự kết hợp của model, view và controller cộng với sự phức tạp ảnh hưởng đến việc thuần thục directives, factories và services và những components khác để tạo ra ứng dụng một trang đã thúc đẩy các nhà phát triển ở Google chuyển hướng sang kiến trúc component-based.

Nhưng khi ứng dụng của bạn bắt đầu tăng trưởng, thật quan trọng khi có một kiến trúc vững chãi để tách biệt phần logic của ứng dụng ra khỏi các đối tượng. Là một framework, Angular cho phép bạn thực hiện tổ chức có cấu trúc bằng cách đưa những quy tắc business vào một domain model (kết hợp các lớp và dịch vụ model) và đưa model vào các components của bạn thông qua dependence injection (các phần bổ sung phụ thuộc).

Đây là một ví dụ mã nguồn để minh hoạ cho việc business logic được đóng gói trong một model User và một service User ra sao, và tách biệt ra khỏi các component.

Cách tiếp cận component-based

Component là những block xây dựng cơ bản nhất của một UI (giao diện người dùng) trong ứng dụng Angular. Một ứng dụng Angular là một biểu đồ hình cây của các components của Angular.

Các components là gì? Trong Angular, components là các lớp TypeScript có một ký hiệu @Component được đánh dấu trên chúng. Hơn nữa, bên trong những ký hiệu này, chúng ta có thể xác định những dữ liệu meta mà Angular gọi, chúng gồm có các template, styles, selectors và nhiều thức khác.

Phân cấp component trong Angular được thiết kế theo cách như vậy để bạn có thể tương tác cấu trúc và chức năng dưới một entity đơn lẻ. Đây là một tổng quan kiến trúc của các components và cách nó liên kết với những thứ khác trong Angular.

The architecture of Angular
Kiến trúc của Angular. Component là trung tâm, và tất cả các thứ khác xoay xung quanh nó.

Có khả năng chia sẻ dữ liệu giữa những component bằng cách lồng ghép những component, như ví dụ minh hoạ bên dưới:

Khái niệm component được bám sâu trong React, cũng như Angular. Facebook gọi React là một thư viện component-based cho phép bạn xây dựng các giao diện người dùng có tính tương tác. Tuy vậy, không giống Angular, React component là những hàm JavaScript với một số lượng tuỳ ý các inputs và một output. Code bên dưới trình bày một component được định nghĩa bởi một hàm JavaScript và sử dụng ES6.

Từ nay chúng ta sẽ bám chặt vào tiêu chuẩn ES6 để tạo ra các components bởi vì đó là điều Facebook khuyến khích. Mỗi React component chấp nhận một lượng inputs, chúng được lưu bên trong một đối tượng object có tên là props.

Chúng cũng có phương thức render, và như tên gọi của nó, phương thức này xác định cái gì sẽ được render khi component được gọi đến. Mỗi component duy trì một trạng thái nội tại (qua this.state), và mỗi lần trang thái thay đổi, chức năng render của đối tượng đó được gọi lại.

Đặc tính ngôn ngữ: TypeScript vs ES6

Ứng dụng Angular được viết bằng TypeScript - là một superset của ECMA2015 và dùng một transpiler để biên dịch file .ts thành file .js. TypeScripts mang lại sự mở rộng của ngôn ngữ được thiết kế để viết JavaScript dễ dàng hơn, và nó tương tác loại thông tin với JavaScript entity để thúc ép kiểm tra loại dữ liệu và gia tăng quá trình phát triển.

Vài tính năng trọng yếu của TypeScript gồm có static typing và hỗ trợ cho interface, class và decorator. Decorator là những hàm bắt đầu bằng '@' và theo sau đó là từ khoá class, các tham số (parameter), hoặc một thuộc tính (property)

Hãy đào sâu vào React, okay? Một trong những tính năng quan trọng trong React là hiển nhiên trong đoạn mã ví dụ này.

Không quá tuyệt sao? React để cho bạn nhúng các thẻ XML/HTML vào trong file JavaScript, và điều này được thực hiện qua JSX, JSX cho phép khả năng mở rộng cú pháp cho JavaScript. Chúng ta cần phải sử dụng một trình biên dịch như Babel, để giúp biên dịch mã JSX thành JavaScript mà trình duyệt có thể đọc hiểu. Phần code phía trên sẽ được biên dịch như sau:

Mặc dù khuyến khích sử dụng JSX, bạn vẫn có thể sử dụng React.createElement() nếu bạn không ủng hộ ý tưởng nhúng mã HTML vào trong JavaScript.

Ngoài ra, bạn cũng có thể dùng chuẩn ES6 hoặc JavaScript truyền thống trong khi làm việc với React. Dù ES6 tương đối mới, nhưng nó bổ sung rất nhiều tính năng như class, hàm arrow (=>), template literals, destructing, và sử dụng let và const. Điềm trừ duy nhất tôi thấy là nó bổ sử một ít code mẫu như là cần phải gọi super() mỗi lần bạn gọi một constructor(), và nó không tự động gán các phương thức gán sự kiện với this.

Type Checking trong Angular và PropTypes trong React

Kiểm tra Static type được thực hiện lúc biên dịch. Trình biên dịch cảnh báo bạn về những khác biệt tiềm ẩn của type và phát hiện những lỗi mà chưa được tìm thấy. Thêm vào đó, định nghĩa một thoã thuận trên một biến số, một thuộc tính hoặc một tham số của một hàm có làm tạo ra những đoạn code dễ đọc và dễ bảo trì.

Biến số và khai báo hàm sẽ gợi mở hơn bằng cách khai báo loại dữ liệu. Bạn có thể đọc nhiều hơn về loại dữ liệu cơ bản trong tài liệu của TypeScript.

Xác định các thông tin cần thiết của một API bằng cách dùng một interface làm cho đoạn code trở nên rõ hơn và dễ nắm bắt hơn. Interface đóng vai trò là một hướng dẫn để nhanh chóng bắt đầu với đoạn code và tiết kiệm thời gian đọc tài liệu hoặc triển khai thực sự của thư viện.

Từ khoá type trong TypeScript có thể được sử dụng để tạo ra một tham chiếu cho một type. Bạn có thể tạo ra những type mới, chúng là phần giao hoặc hợp của những type cơ bản.

React đã giới hạn phần type checking bởi vì ES6 cơ bản không hỗ trợ. Tuy vậy, bạn có thể triển khai type checking bằng thư viện prop-types phát triển bởi nhóm React. Type Checking props của một component để kiểm tra liệu nó là một string (chuỗi) được thực hiện như bên dưới.

Nhưng prop-types không giới hạn chỉ cho strings, numbers và boolean. Bạn có thể làm nhiều hơn thế, như mô tả trong tài liệu thư viện prop-types. Tuy nhiên, nếu bạn nghiêm túc làm việc với type checking, bạn nên dùng Flow, nó là một thư viện về static type-checker cho JavaScript.

Scaffolding: Angular CLI và create-react-app

Bắt đầu một dự án từ đầu có vẻ khá thú vị lúc đầu. Tuy nhiên, quá trình thiết lập cấu trúc thư mục, viết code boilerplate (các template cho code) cho các component, và khởi động một ứng dụng là một việc vô ích và thiếu hiệu quả. Chiến lược của bạn nên là làm việc nhanh nhất có thể và tập trung và phần phát triển thực thụ của ứng dụng. Cám ơn Google và Facebook, bạn có những công cụ có sẵn để tạo ra và hình thành ứng dụng của bạn dễ dàng.

Thiết lập Angular-CLI cho angular và create-react-app cho React bằng cách dùng npm.

Để tạo ra một ứng dụng Angular mới, bạn nên dùng lệnh sau đây.

Câu lệnh ng generate cho phép bạn tạo ra component, route, pipe, directive và service.

Angular CLI có thể làm nhiều hơn thế, như tạo ra một bản build cho ứng dụng Angular của bạn, các câu lệnh để chạy unit tests, và end-to-end testing. Bạn có thể đọc thêm vế chúng trên GitHub.

Mặt khác, create-react-app là cách chính thống để tạo ứng dụng React mà không cần bất kỳ file cấu hình nào.

$ npm install -g create-react-app

Câu lệnh này tạo một ứng dụng React với tất cả phần phụ thuộc của Babel và Webpack. Bạn có thể bắt đầu chạy ứng dụng trên trình duyệt sử dụng lệnh npm start.

Bạn có thể tìm thấy các đoạn script cho ứng dụng react trong file package.json

Data Binding: Two-way binding (2 chiều) và Unidirectional Binding (1 chiều)

Data Binding là một thuộc tính cho phép đồng bộ dữ liệu giữa trang thái của ứng dụng (model) và view. Ở hướng data-binding một chiều, bất kể thay đổi nào trong trạng thái của ứng dụng (model) sẽ giúp tự động cập nhật view. Ngược lại, data-binding 2 chiều gắn kết các property (thuộc tính) và event (sự kiện) vào một entity, ví dụ bất kỳ thay đổi nào của model sẽ làm view thay đổi và ngược lại cũng thế.

Trong React, các property được truyền xuống từ parent component (cấp cao) xuống các child component (cấp thấp), đây gọi là luống dữ liệu unidirectional hoặc là top-down (cao xuống thấp). Trạng thái (state) của một component được đóng gói và không thể truy cập cho những component khác trừ khi nó được đưa xuống các component cấp thấp ở dạng một prop. ví dụ trạng thái của một component trở thành prop của một component cấp thấp hơn.

Nhưng nếu bạn cần truyền dữ liệu lên qua cấu trúc component thì sao? Điều này được thực hiện thông qua sự kiện cấp thấp(child event) và các hàm callbacks cấp cao (parent callbacks). Tài liệu của React có một ví dụ điển hình cho kịch bản này.

Các kỹ thuật data binding có sẵn trong Angular là một trong số các tính năng mới tạo nên sự thú vị cho chính nó. Angular có các hỗ trợ đặc biệt cho interpolation, one-way binding, two-way binding và event binding.

Interpolation là cách đơn giản nhất để gán các proprty của component bên trong text giữa các thẻ HTML và việc gán các thuộc tính.

<p>Welcome back {{currentUser.name}}</p>

Gán kết thuộc tính - property binding tương tự là interpolation theo hình thức mà bạn có thể gán các thuộc tính (properties) của các thành phần view vào các thuộc tính của component. Property binding giúp các component giao tiếp và giống hệt như cách prop được truyền xuống trong React.

<img [src]="userImgUrl"> 

<user-child [user]="currentUser"></user-child>

Event binding cho phép dữ liệu chuyển đi theo hướng ngược lại, ví dụ, một thành phần đến một component. Click vào một event có chủ định, chúng ta có phương thức onSave() được gọi lên khi sự kiện xảy ra.

<button (click)="onSave()">Save</button> 

Nhưng tính năng quan trọng nhất là two-way binding sử dụng [(ngModel)]. Nó trộn lẫn property binding và event-binding vào trong một directive và đặc biệt hữu ích cho các form và input field (phần dữ liệu đầu vào).

Sever-side Rendering

Server-side rendering là kỹ thuật rendering truyền thống. Ở đây, server trả về toàn bộ file HTML theo yêu cầu, và trình duyệt chỉ còn công việc đơn giản là hiển thị cho người dùng. Client-side rendering, mặt khác trả về một tài liệu HTML bare-bone (khuôn mẫu), stylesheet, và một file JavaScript.

JavaScript làm những yêu cầu liền sau đó render phần còn lại của website bằng cách dùng một trình duyệt. React, Angular và tất cả những thư viện JavaScript khác cho Front-End là những ví dụ tốt cho client-side rendering. Bằng chứng là bạn có thể xem source code của các ứng dụng Angular/React.

Nhưng client-side rendering có những nhược điểm là không tốt cho SEO và nó trả về nội dung HTML không hoàn chỉnh khi chia sẻ trên các mạng xã hội. Angular có một giải pháp gọi là Angular Universal sẽ giải quyết cho việc làm cho ứng dụng của bạn thân thiện với bộ máy tìm kiếm và các mạng xã hội. Nó là một thư viện được xây dựng bởi nhóm Angular, và chắc chắn và rất đáng sử dụng.

Universal tận dụng kỹ thuật render trước, khi toàn toàn bộ trang web được render từ server trược tiên, và sau vài giây, người dùng sẽ chuyển nó về client-side rendering. Khi tất cả được xử lý ngầm, người dùng sẽ không nhận ra sự khác biệt.

Nếu bạn đang dùng React với Redux, tài liệu Redux có một phần hướng dẫn rất hay về cách thiết lập server rendering. Bạn cũng có thể cài đặt React để render từ server sử dụng component BrowserRouterStaticRouter có sẵn từ thư viện react-router. Bạn có thể đọc thêm về nó ở bài viết trên Medium này. Nhưng nếu bạn muốn vấn đề hiệu năng và tối ưu, bạn có thể thử next.js, là một thư viện cho SSR trong React.

Tổng kết 

So sánh một framework đang phát triển mạnh và nhiều tính năng nổi bật với một thư viện UI (giao diện người dùng) mạnh mẽ có thể không công bằng. Tuy nhiên, chúng đều là những công nghệ JavaScript cao cấp được sử dụng để tạo ra ứng dụng một trang có tính tương tác cao, và ở mặt này, bài viết giúp bạn quyết định chọn lựa một trong hai.

Bạn nghĩ thế nào về Angular và React? Hãy chia sẻ ở phần bình luận bên dưới.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.