So sánh chi tiết giữa React và Angular

So sánh chi tiết giữa React và Angular

Bài viết này được cập nhật ngày 30 tháng 1 năm 2019 nhằm mục đích phản ánh được chính xác được cả hai hệ sinh thái công nghệ (ecosystem) là Angular và React.

Người dùng nên dùng cái nào, Angular hay React? Mỗi framework (khung phần mềm) đều có các ưu điểm riêng và việc chọn được một trong hai để sử dụng không hề dễ chút nào. Dù bạn là một lính mới, là một freelancer đang chuẩn bị cho dự án tiếp theo, hay là một kiến trúc sư của một tập đoàn lớn đang đề ra tầm nhìn chiến lược mới mẻ cho công ty của mình, bài đăng này vẫn sẽ hữu ích cho bạn.

Để không làm tốn thời gian của bạn, sau đây là một cảnh báo nhỏ trước khi đọc: bài đăng này sẽ không đưa ra được câu trả lời chính xác rằng framework nào sẽ hoạt động tốt hơn. Cũng như hàng trăm bài đăng khác với tựa đề tương tự mà bạn có thể tìm thấy. Bởi vì câu trả lời còn dựa vào nhiều yếu tố khác nữa, những yếu tố có ảnh hưởng như liệu công nghệ có phù hợp với môi trường làm việc của bạn không và cả bạn sẽ dùng nó trong trường hợp nào.

Vì không thể trực tiếp đưa ra câu trả lời, thông qua việc so sánh giữa hai framework, bạn sẽ biết cách xử lý vấn đề mỗi khi tự phải so sánh những framework khác với nhau và điều chỉnh chúng sao cho phù hợp với công việc của bạn. Đây chính là phương pháp “Cho cần câu chứ đừng cho con cá”. Bằng cách này, khi mà cả hai framework nói trên bị thay thế bởi FrameworkTốtHơn.js trong vài năm nữa, bạn sẽ biết cách giải quyết câu hỏi này.

Điểm bắt đầu là ở đâu?

Trước khi chọn lựa bất kỳ công cụ nào, bạn cần phải trả lời được hai câu hỏi đơn giản sau: “Đây có phải là một công cụ có thể tự vận hành tốt hay không” và “Liệu nó có phù hợp với việc mình đang làm không?” Cả hai sẽ vô nghĩa nếu như bạn chỉ xét đến một vấn đề, vậy nên bạn phải ưu tiên sử dụng cái thoả mãn được cả hai câu hỏi. Mà, những câu hỏi ấy đâu phải là câu hỏi đơn giản mà bạn có thể đáp được ngay, vậy nên chuyện phân tích rõ từng vấn đề là vô cùng cần thiết.

Đầu tiên là câu hỏi về công cụ:

  • Liệu chúng đã được phát triển toàn diện chưa? Và ai tạo ra chúng?
  • Chúng có những đặc điểm nào?
  • Chúng sử dụng kiến trúc nào, mô hình phát triển nào, và kiểu mẫu nào?
  • Hệ sinh thái xung quanh nó vận hành thế nào?

Câu hỏi về sự phù hợp:

  • Liệu bạn và đồng nghiệp của mình có thể học cách dùng công cụ này dễ dàng?
  • Nó có tương thích với dự án của bạn hay không?
  • Kinh nghiệm từ những nhà phát triển sẽ như thế nào?

Sử dụng bộ câu hỏi trên sẽ giúp bạn làm quen được với bất kỳ công cụ nào và bài viết này cũng sẽ dựa vào chúng để so sánh React và Angular. Hơn nữa, sau đây là một điểm bạn cần phải biết. Nghiêm túc mà nói, việc so sánh hai framework trên hoàn toàn không công bằng khi Angular là một framework đã được hoàn thiện và được đầu tư đầy đủ, trong khi React chỉ là một thư viện tổng hợp UI. Để công bằng hơn, React sẽ được bàn luận thông qua các liên kết với các thư viện đã dùng qua nó.

Độ phát triển

Một điểm quan trọng trong việc trở thành một nhà phát triển tài ba chính là biết cách cân bằng giữa sự uy tín, tiếp xúc lâu dài và đánh giá được công nghệ tiên tiến mới. Như một luật lệ chung, bạn cần phải cẩn thận mỗi khi lựa chọn sử dụng một công cụ chưa được phát triển hoàn chỉnh bởi vì những nguy hại sau:

  • Công cụ có thể có bug và không ổn định.
  • Nó có thể đột ngột bị bỏ quên bởi nhà sản xuất.
  • Sẽ không có một diễn đàn chung đủ lớn nào có thể hỗ trợ được đầy đủ kiến thức cho bạn khi cần.

Cả React lẫn Angular đều đến từ những công ty vô cùng phát triển, cho nên bạn có thể an tâm lựa chọn chúng.

Tổng quan

React

React được phát triển và duy trì bởi Facebook và nó được sử dụng cho chính trang web này, ngoài ra còn có cả Instagram và WhatsApp nữa. Nó đã tồn tại được khoảng 5 năm rồi, cho nên cũng không hẳn là một framework mới toanh nữa. Nó cũng là một trong những dự án nổi tiếng nhất trên GitHub với chừng 119,000 sao đánh giá ngay từ khi mới bắt đầu.

Angular

Angular ra đời sau React nhưng nó cũng là một cái tên vô cùng quen thuộc. Framework được sáng lập bởi Igor Minar này được vận hành bởi Google, và họ sử dụng chúng trong hơn 600 ứng dụng như Firebase Console, Google Analytics, Google Express, Google Cloud Platform và hơn thế nữa.

Các đặc tính

Như đã nhắc ở trên, Angular có nhiều đặc tính mới lạ hơn hẳn React. Đây vừa là điểm mạnh nhưng cũng vừa là điểm yếu của nó, tuỳ theo cách chúng được sử dụng.

Cả hai framework đều có chung các đặc tính sau: các cấu phần (components), đồng bộ dữ liệu (data binding) và nó có thể chạy trên bất kỳ hệ điều hành nào.

Angular

Angular cung cấp nhiều đặc tính mới lạ thích hợp cho những trang web hiện đại. Một số tính năng tiêu chuẩn là:

  • Dependency Injection (một kỹ thuật lập trình giúp tách một class độc lập với các biến phụ thuộc)
  • Templates (Bản mẫu), dựa trên phiên bản mở rộng của HTML
  • Routing (định tuyến), cung cấp bởi @angular/router
  • Công nghệ Ajax khuyên dùng @angular/common/http
  • @angular/forms cho việc tạo dựng forms
  • Bản tóm lược các cấu phần của CSS
  • Bảo hộ XSS
  • Tiện ích cho việc chạy thử các đơn vị trong cấu phần.

Trong các điểm trên, nhiều tính năng đã được cài đặt sẵn trong cơ cấu của framework này và bạn không có lựa chọn khác nào ngoài dùng chúng. Điều này yêu cầu những lập trình viên phải quen thuộc với những đặc tính như dependency injection chỉ để tạo ra một ứng dụng nho nhỏ bằng Angular. Những đặc tính khác như client HTTP và form thì hoàn toàn là tuỳ chọn và có thể thêm vào nếu như bạn dùng nó thường xuyên như các tính năng có sẵn khác.

React

Với React, bạn sẽ khởi đầu với ít lựa chọn hơn. Bởi vì khi chỉ nhìn vào React, đây là danh sách các tính năng vốn có của nó:

  • Không có dependency injection
  • Thay vì sử dụng template cơ bản, nó có JSX, một dạng ngôn ngữ XML được thiết kế đè lên trên JavaScript
  • Quản lý các state (trạng thái dữ liệu) bằng cách sử dụng setState và Context API
  • Bảo hộ XSS
  • Tiện ích cho việc chạy thử các đơn vị trong cấu phần.

Tuy không nhiều, nhưng đó có thể lại là một ưu điểm. Nó đồng nghĩa với việc bạn hoàn toàn tự do trong việc chọn lựa bất cứ thư viện bổ sung nào để làm thành cơ sở gốc. Chỉ là điểm bất lợi lại là bạn phải tự đưa ra các chọn lựa. Một số thư viện nổi tiếng đi kèm với React thường là:

  • React-router để định tuyến
  • Fetch (hoặc axios) cho các yêu cầu về HTTP
  • Hàng loạt các phương pháp cho bản tóm lược CSS
  • Enzyme cho các tiện ích chạy thử bổ sung.

Được tự do tìm kiếm thư viện phù hợp với mình là một việc rất tuyệt vời. Nó cho phép bạn điều chỉnh các kho dữ liệu tuỳ theo mỗi dự án bạn đang theo, và giá của chúng cũng rất phù hợp.

Ngôn ngữ, Mô hình và Kiểu mẫu

Trước khi đi sâu vào các đặc tính của mỗi framework, hãy cùng tìm hiểu concept cao cấp nào đang vô cùng nổi tiếng với những người sử dụng.

React

Khi nói đến React, có rất nhiều cái tên hay được nhắc đến như: JSX, các Functional Component (cấu phần dạng hàm), hệ thống quản lý trạng thái các dữ liệu, PropTypes và Flow.

JSX

JSX là một tính năng còn đang bị tranh cãi trong giới các nhà phát triển: một số thì hài lòng với nó, một số thì cho rằng nó là một bước lùi cực lớn. Thay vì có cách tiếp cận thông thường là phân tách các chú thích và logic, React quyết định kết hợp chúng lại thành một cấu phần bằng cách dùng XML – một dạng ngôn ngữ cho phép bạn viết các chú thích bổ sung trực tiếp lên mã JavaScript của bạn.

Trong khi giá trị của việc chồng các chú thích và JavaScript với nhau còn đang được bàn luận, nó tồn tại một lợi ích không thể bỏ qua được: phân tích dữ liệu. Nếu như trong quá trình chú thích JSX bị lỗi, hệ thống sẽ lập tức nhắc nhở chứ không yên lặng bỏ qua lỗi ấy. Điều này có ích trong việc nhận ra được lỗi type và một số sai lầm nho nhỏ khác.

Functional Component

Với REACT bạn có thể nhận biết được các component thông qua các chức năng và các lớp (class) của chúng. Functional Component thường được biết đến bởi sự đơn giản của mình và cả mối lên kết rõ rệt giữa các prop (properties-đối tượng) đầu vào và kết quả đầu ra nó cung cấp. Những phiếm hàm code vì ít khi bị ghép nối với nhau nên có thể trợ giúp cho người dùng mỗi khi cần tái sử dụng code và khi test thử chương trình. Nhưng mà functional component của React vẫn còn khá nhiều các hạn chế. Tiêu biểu như chúng không thể có được các state hoàn toàn đối lập với các class component (component kiểu lớp). Việc này đã yêu cầu các lập trình viên phải biết chuyển đổi giữa hai loại trên thì mới tận dụng được mọi thứ.

Chỉ là mọi chuyện sẽ thay đổi khi bản đề xuất React hook được hoàn chỉnh và phát hành. Bản đề xuất này cho phép các functional component sở hữu được các state và dùng những đặc điểm khác của các class component, tựa như các lifecycle hook (những hàm dùng để xử lý một chức năng) vậy. Và rồi một app hoàn toàn có thể sử dụng được tạo từ React sẽ ra đời.

Quản lý các State

Đối với các framework và React, việc quản lý được các state có nhiều ý nghĩa quan trọng khác nhau. Mỗi component sẽ sở hữu một state riêng, và bạn có thể sử dụng nó để chế tạo những component có state (stateful component) để liên kết các state lại thành một ứng dụng. Nó còn được biết đến với kiểu mẫu là lifting state up (nâng cấp state). Chỉ là kiểu vận hành này thường không có tính ứng dụng khi bạn cần lưu trữ các global state trong nhiều phần khác nhau của một ứng dụng, đồng thời phải bạn phải tự chuyển tiếp dữ liệu đi khắp các cấp bậc component khác trong hệ thống. Để giảm tải công việc, React 16.3 giới thiệu chức năng Context API, một thứ cho phép các dữ liệu tồn tại trong toàn bộ các component trên hệ thống mà không cần bạn phải tự chuyển chúng đi khắp nơi nữa. Các ký tự không thể tự mình lưu trữ các state, chúng chỉ đơn thuần trình bày các dữ liệu mà thôi, nhưng nếu bạn tổng hợp các stateful component, bạn có thể hoàn thiện một hệ thống hỗ trợ của riêng mình để hỗ trợ việc lưu trữ các state.

Hơn nữa, React có tồn tại một thư viện bên ngoài dành cho việc quản lý các state. Redux là một thư viện quản lý State được truyền cảm hứng bởi Flux, nhưng đơn giản hơn nhiều. Ý tưởng chính của Redux chính là toàn bộ các state trong ứng dụng sẽ đại diện một đối tượng riêng biệt, chúng được triển khai bởi các hàm gọi là Reducer. Reducer là các hàm nguyên bản và chúng được sử dụng riêng biệt với các component. Điều này cho phép việc loại bỏ sự lo lắng mỗi khi khả năng chạy thử chương trình.

MobX là một thư viện thay thế có khả năng quản lý các state trong một ứng dụng. Thay vì giữ lại các state trong một kho lưu trữ bất biến như Redux, chương trình này cho phép bạn lưu lại số ít các state cần thiết và dẫn xuất số còn lại đi. Ngoài ra, nó còn cung cấp thêm các công cụ trang trí có thể xác định được các hàm quan sát và những quan sát viên, mang lại cho các state của bạn các logic phản hồi lại được những tác động.

PropTypes

PropTypes mà một tính năng có thể tuỳ chọn sử dụng trong React, nó tăng tính an toàn mỗi khi bạn không sử dụng Flow hay TypeScript. Nó còn sở hữu những công cụ có tính năng kiểm định giúp cho các prop trong component được kiểm tra giá trị trong thời gian chạy ứng dụng. Sau phiên bản React 15.5, prop-types đã được chuyển sang một thư viện riêng biệt và việc sử dụng nó hay không sẽ tuỳ thuộc vào người dùng. Dựa vào những ưu điểm trên, sử dụng công cụ này sẽ nâng cao độ tin cậy cho ứng dụng của bạn.

Flow

Flow là một tính năng kiểm tra lỗi đánh máy của JavaScript được Facebook phát triển. Nó có thể phân tích mã code và kiểm tra một số lỗi đánh máy như bản in ngầm và các vùng nhớ trống.

Không giống với tính năng có chung mục đích như TypeScript, Flow không yêu cầu bạn nhập vào một ngôn ngữ lập trình mới và chú thích các mã code của bạn để bắt đầu công việc kiểm tra lỗi đánh máy. Với Flow, các chú thích về lỗi gõ chữ chỉ hiện lên khi bạn muốn sử dụng nó mà thôi và chúng còn có thể sử dụng như một gợi ý bổ sung cho việc phân tích. Điểm này khiến Flow trở thành một lựa chọn tốt cho những ai muốn phân tích mã code cố định, nhưng khi sử dụng, bạn cần tránh việc viết lại các code đã có sẵn.

Cả ba tính năng trên có thể nâng cao được trải nghiệm phát triển ứng dụng của bạn: cả JSX, Flow và PropTypes cho phép bạn nhận biết được những nơi có thể có lỗi, và sự cẩn thận khi chọn lựa phương pháp quản lý các state sẽ làm cho cấu trúc dự án của bạn rõ ràng hơn.

Angular

Giống như React, Angular cũng sở hữu nhiều tính năng thú vị, lần lượt chúng là TypeScript, RxJS, và Angular Elements, đồng thời nó cũng có cả cách tiếp cận riêng trong việc quản lý state.

TypeScript

TypeScript là một dạng ngôn ngữ được xây dựng trên nền JavaScript và được phát triển bởi Microsoft. Nó là một phiên bản superset của JavaScript ES2015 và còn bao gồm nhiều phiên bản mới nhất của các ngôn ngữ lập trình. Bạn có thể dùng nó thay vì dùng Bable khi viết các state cho đồ hoạ trong JavaScript. Nó còn bao gồm cả một hệ thống đánh máy có hiệu quả cao có thể phân tích tĩnh các mã code của bạn thông qua tổ hợp của các chú thích và hệ thống gợi ý nhập liệu.

Ngoài ra nó còn có thêm một ích lợi tinh vi hơn nữa. TypeScript vì chịu ảnh hưởng nặng nề của Java và .NET nên khi lập trình viên có chút hiểu biết về loại ngôn ngữ này,họ sẽ nhận thấy việc sử dụng TypeScript đơn giản hơn JavaScript nhiều ( hãy để ý cách bài viết chuyển từ một tính năng sang môi trường làm việc của riêng bạn). Mặc dù Angular là framework đầu tiên ủng hộ sử dụng TypeScript, tính năng này còn có thể sử dụng với cả React nữa.

RxJS

RxJS là một thư viện lập trình phản hồi, nó áp dụng linh hoạt nhiều cách giải quyết cho các hoạt động và sự kiện diễn ra không đồng bộ. Nó là sự tổ hợp giữa mẫu Observer, Iterator và kỹ thuật lập trình bằng hàm số. RxJS cho phép bạn sử dụng các công cụ như liên kết (mapping), lọc (filtering), tách (splitting) và hợp nhất (merging) như một chuỗi giá trị liên tiếp và thực hiện nhiều hoạt động với chúng.

Thư viện này được áp dụng bởi Angular trong module HTTP của họ cũng như cho một số vận hành nội bộ khác. Khi bạn thực hiện một yêu cầu của HTTP, nó sẽ đáp lại bằng Observable thay thì là Promise như thông thường. Cách tiếp cận này mở ra nhiều khả năng thú vị, ví như khả năng cancel một yêu cầu, làm đi làm lại yêu cầu đó nhiều lần hay làm việc với các phần mềm quản lý dữ liệu liên tục, kể tên như công nghệ Web Sockets. Nhưng tất cả chỉ là bề nổi mà thôi. Để có thể làm chủ được RxJS, bạn cần phải hiểu cách làm việc với nhiều loại Observables, Subjects, cũng như hàng trăm phương pháp và cách vận hành khác.

Quản lý các State

Giống như React, các component của Angular cũng có thể lưu trữ được dữ liệu và truyền tải được nội dung đến các thế hệ sau của nó. Nếu bạn cần truy cập một giá trị từ các component chị em thì bạn có thể chuyển chúng đến một bộ phận chứa các state để sau đó gắn chúng vào các component. Vì lập trình phản hồi và RxJS là những công cụ không thể thiếu trong Angular, bạn có thể tận dụng các observable để tính tại các bộ phận trong state có nguồn từ vài input. Thế nhưng, cách làm này sẽ trở nên phức tạp đối với những ứng dụng lớn hơn vì thay đổi một số giá trị có thể dẫn đến việc khó có thể nắm bắt được chúng khi mà các tầng cập nhật bị thay đổi đủ hướng.

NgRx, thư viện quản lý các state nổi tiếng nhất dành cho Angular có thể đơn giản hoá vấn đề ấy. Nó lấy cảm hứng từ Redux, đồng thời cũng tận dụng RxJS để quan sát và tính toán lại các dữ liệu trong state. Sử dụng NgRx có thể giúp bạn cưỡng chế các dòng dữ liệu vô hướng cũng như giảm thiểu chuyện ghép đôi các mã lại.

NGXS là một thư viện dữ liệu khác cũng lấy cảm hứng từ Redux. Trái ngược với NgRx, NGXS lại chủ yếu muốn giảm thiểu các mã soạn sẵn bằng cách dùng các tính năng hiện đại mới của TypeScript và nâng cao được tốc độ lĩnh hội và trải nghiệm phát triển ứng dụng nói chung.

Angular Elements (những phần tử Angular)

Angular Elements cung cấp một phương pháp tổng hợp các component của Angular lại thành một phần tử có thể tuỳ chỉnh. Hay còn được biết đến là component cho các trang web, những phần tử tuỳ chỉnh được này là biện pháp tiêu chuẩn hoá bất kì framework nào với mục đích tự mình điều chỉnh các phần tử HTML đang được mã JavaScript điều khiển. Một khi bạn xác định được phần tử ấy và thêm chúng vào đăng ký của trình duyệt, nó sẽ tự động vận hành ở bất cứ trang HTML nào dùng nó. Các phần tử của Angular cung cấp một API có thể tạo ra một màng bọc thiết yêu để có thể triển khai các component API tuỳ chỉnh được có vận hành được với cơ chế phát hiện các thay đổi của Angular. Cơ chế này còn có thể sử dụng để nhúng các components khác hoặc toàn bộ ứng dụng Angular vào ứng dụng chính của bạn, và còn có thể được viết trên một framework khác với vòng tuần hoàn phát triển khác nữa.

TypeScript được xem là một công cụ tốt trong việc nâng cấp sức chịu cho dự án của bạn, đặc biệt là những dự án có cơ sở dữ liệu lớn hoặc chuỗi logic các miền/kinh doanh phức tạp. Các mã code được viết bằng TypeScript sẽ minh hoạ rõ ràng và tiện cho việc theo dõi hơn. RxJS giới thiệu một cách mới trong việc quản lý các dòng dữ liệu cho dự án của bạn nhưng nó lại yêu cầu bạn phải hiểu thấu được các đối tượng làm việc bên trong. Bằng không thì nó sẽ gây nhiều khó khăn cho công việc của bạn. Angular element có tiềm năng trong việc tái sử dụng các component của Angular và việc nó vận hành như thế nào trong tương lai đang được rất nhiều người mong đợi.

Ecosystem (Hệ sinh thái công nghệ)

Điểm tốt của các nguồn framework miễn phí chính là số lượng công cụ được chế tạo phục vụ cho chúng. Đôi khi, những công cụ này còn có ích hơn hẳn framework. Hãy nhìn qua những công cụ và thư viện liên kết với mỗi framework nổi tiếng nhất sau đây.

Angular

Angular CLI

Một trào lưu nổi tiếng với các framework hiện đại ngày nay chính là sở hữu được công cụ CLI có thể giúp bạn khởi động dự án của mình mà khỏi cần phải tự mình đặt cấu hình. Angular sẽ có Angular CLI để làm việc đó. Nó cho phép bạn sinh ra và vận hành một dự án chỉ với một vài lệnh đơn giản. Các văn bản sẽ chịu trách nhiệm trong việc dựng nên ứng dụng, bắt đầu một server phát triển và chạy thử sẽ được dấu đi bằng lệnh node_modules . Đồng thời bạn cũng có thể dùng nó để tạo ra những mã code mới trong quá trình phát triển và cài đặt các dependency (phần phụ thuộc).

Angular giới thiệu đến với người dùng một cách mới trong việc quản lý các dependency trong dự án của bạn. Khi sử dụng ng add bạn có thể cài đặt một dependency và chúng sẽ tự động cấu hình cho việc sử dụng. Ví dụ như khi bạn gõ run ng add @angular/material , Angular CLI sẽ tải các Angular Material từ đăng ký npm và chạy văn bản cài đặt của nó để tự động hoá cấu hình ứng dụng của bạn cho việc sử dụng Angular Material. Việc này được thực hiện thông qua việc dùng Angular schematic (lược đồ). Các lược đồ là những công cụ biểu hiện tiến độ công việc, cho phép các thư viện thay đổi mã nền của bạn. Điều này có nghĩa là những tác giả của các thư viện sẽ cung cấp cho người dùng một lựa chọn tự động hơn trong việc giải quyết bằng cách quay trở về phiên bản cũ mỗi khi cập nhật phiên bản mới mà gặp các vấn đề vận hành không tương thích.

Framework Iconic

Iconic là một framework nổi tiếng với việc phát triển các ứng dụng điện thoại lai (hybrid app – ứng dụng có thể chạy trên nhiều hệ điều hành). Nó cung cấp kho chứa Cordova, kho chứa có thể hợp nhất với Angular và là một thư viện component có nguyên liệu phù hợp. Sử dụng nó bạn sẽ tạo được một ứng dụng điện thoại dễ dàng hơn. Nếu bạn thích tạo ra một ứng dụng lai hơn là một ứng dụng chỉ có thể chạy trên một hệ điều hành duy nhất (native app), thì đây sẽ là lựa chọn tốt có thể giúp được bạn.

Angular Material

Nếu bạn thích thiết kế theo dạng material, bạn sẽ thoả mãn khi biết rằng hiện nay đã có các thư viện Material component dành cho Angular với nhiều component có sẵn để chọn lựa.

Angular universal

Angular universal là một dự án sở hữu nhiều công cụ khác nhau cho phép các server-side vận hành trong các ứng dụng của Angular. Nó hợp nhất được với Angular CLI và hỗ trợ một số frameworks Node.js, ví như express và hapi, cũng như là với lõi .NET.

Angury

Angury là những chương trình mở rộng cho các trình duyệt Chrome và Firefox có khả năng gỡ rối cho những ứng dụng của Angular khi chạy trong chế độ xây dựng. Bạn có thể dùng chúng để khám phá hệ thống component của mình, giám sát hệ thống phát hiện thay đổi và tối ưu hoá những vấn đề khi vận hành chương trình.

React

Create React App

Create React App là một ứng dụng thay thế cho CLI dành cho React, nó giúp bạn bắt đầu một dự án mới nhanh hơn. Giống với Angular CLI, nó cho phép bạn tạo dựng một dự án mới, chạy thử ứng dụng ở chế độ phát triển hoặc tạo một bộ bundle sản xuất. Nó sử dụng Jets cho việc chạy thử các đơn vị nhỏ, hỗ trợ tóm lược các ứng dụng sử dụng các biến số trong môi trường làm việc, hỗ trợ các proxy cho việc phát triển trong hệ điều hành, Flow và TypeScript, Sass, PostCSS, và một tính năng khác.

React Native

React Native là một nền tảng được Facebook phát triển để tạo ra các ứng dụng nội bộ cho điện thoại thông qua việc dùng React. Không như Iconic có thể sản xuất các ứng dụng lai, React Native lại sản xuất ra một UI nội bộ. Nó cung cấp một bộ component React tiêu chuẩn có thể liên kết với những component nội bộ. Nó còn cho phép bạn tạo ra một component riêng của mình và nhúng chúng vào bộ mã code nội bộ viết trong Objective-C, Java hay Swift.

Material UI

React hiện cũng sở hữu một thư viện component cho việc thiết kế dạng Material. So sánh với bản của Angular, phiên bản này trưởng thành hơn và có phạm vi các component rộng hơn.

Next.js

Next.js là một framework dành cho việc vận hành chức năng server-side cho các ứng dụng của React. Nó cung cấp những cách tiếp cận linh hoạt để có thể chạy ứng dụng của bạn trên server toàn phần hoặc một phần, đưa ra kết quả cho khách hàng và tiếp tục chạy trong trình duyệt. Nó còn cố gắng trong việc đơn giản hoá những tác vụ phức tạp trong khi chế tạo một ứng dụng chạy được trên toàn cầu, vậy nên set up của nó phải được thiết kế càng đơn giản càng tốt với số lượng các dữ liệu nguyên bản và yêu cầu cho cơ cấu của dự án càng ít càng tốt.

Gatsby

Gatsby là một chương trình tạo ra các website tĩnh bằng cách dùng React.js. Nó cho phép bạn sử dụng GraphQL để query (truy vấn) các dữ liệu cho những website được đánh dấu xác nhận của bạn, YAML, JSON, bản mở rộng của API cũng như là những hệ thống quản lý nội dung nổi tiếng.

React 360

React 360 là một thư viện cho việc tạo ra các ứng dụng thực tế ảo cho các trình duyệt. Nó cung cấp các khai báo cho React API đang được tạo trên nền của trình duyệt API là WebGL và WebVR, nhờ đó việc tạo ra cho người dùng một trải nghiệm 360 VR sẽ trở nên dễ dàng hơn.

React Developer Tools

React Dev Tools là một chương trình mở rộng của trình duyệt dành riêng cho việc chỉnh lỗi cho các ứng dụng của React, nó cho phép bạn chuyển hướng đến hệ thống các component của React và kiểm tra các prop và state ở đấy.

Khả năng tiếp thu, tốc độ học và trải nghiệm của việc phát triển chương trình

Một yếu tố cực kỳ quan trọng trước khi chọn học một công nghệ mới là liệu nó có dễ học hay không. Đương nhiên, đáp án của câu hỏi này còn phụ thuộc vào nhiều yếu tố khác như kinh nghiệm của bạn và liệu bạn có quen thuộc với một số cách vận hành và mô hình như vậy hay không. Dù vậy, chuyện làm quen với mới nhiều điều mới mỗi khi gặp bất kỳ framework mới lạ nào là không thể tránh khỏi. Sau đây, trước tiên cứ cho rằng các bạn đã biết rõ ES6+ rồi, những công cụ để xây dựng và nhiều thứ khác, hãy xem xem bạn sẽ cần học thêm những gì nhé.

React

Với React, thứ bạn tiếp xúc đầu tiên chính là JSX. Việc phải gõ code khởi tạo đôi khi có hơi chút khó khăn cho một số nhà lập trình. Mặc dù vậy thì nó cũng không quá phức tạp – chúng chỉ là các biểu thức mà thôi. Những biểu thức này cũng chỉ là JavaScript và một vài cú pháp đặc biệt kiểu HTML quen thuộc. Và rồi bạn sẽ cần học viết các component, sử dụng prop trong việc kiểm tra cấu hình và quản lý các state nội bộ. Bạn chẳng cần phải học bất kỳ cấu trúc logic hay vòng lặp nào cả vì chúng chỉ đơn thuần là JavaScript mà thôi.

Để học React, bộ hướng dẫn chính thức sẽ là điểm bắt đầu tuyệt vời cho bạn. Một khi đã học xong nó, hãy làm quen với router. React Router v4 có thể hơi phức tạp và bất tiện một chút, nhưng bạn sẽ chẳng cần lo lắng về nó đâu. Ngoài ra, dựa vào kích cỡ, độ phức tạp và yêu cầu cho dự án của bạn, bạn sẽ cần phải đi tìm thêm một số thư viện dữ liệu bổ sung, dù việc này khó, nhưng khi đã quen thì mọi việc sẽ suôn sẻ mà thôi.

Việc làm quen với React vô cùng đơn giản. Ngay cả một người có ít kinh nghiệm phát triển lập trình frontend và chỉ biết đến lập trình backend cũng có thể nhanh chóng học được. Những thông báo lỗi xuất hiện trong quá trình làm việc thường sẽ đi kèm với lời giải thích rõ ràng và có cả cách giải quyết vấn đề bạn gặp phải. Phần khó nhất ở đây có thể kể đến việc đi tìm những thư viện bổ sung phù hợp với các yêu cầu bạn đặt ra, nhưng những việc còn lại như tạo sườn cơ bản và phát triển ứng dụng thì lại rất đơn giản.

Angular

Việc học cách dùng Angular sẽ giới thiệu đến bạn nhiều khái niệm mới mẻ hơn React. Đầu tiên, bạn sẽ phải học làm quen với TypeScript. Đối với những lập trình viên có nhiều kinh nghiệm làm việc với những ngôn ngữ như Java hay .NET sẽ tiếp thu nhanh hơn những ai quen dùng JavaScript, vậy nên đối những lập trình viên chỉ từng học qua JavaScript, họ sẽ phải nỗ lực nhiều hơn nữa.

Framework này trên cơ bản là có rất nhiều chủ đề cho bạn lựa chọn, bắt đầu từ những chủ đề đơn giản như module, dependency injection, decorator, component, service, pipe, template và directive, đến những thứ phức tạp hơn như change detection, zone, tổng hợp AoT, và Rx.js. Rx.js là một chương trình phức tạp và nó sẽ được mô tả kỹ hơn tại trang chủ của nó. Trong khi sử dụng những chủ đề đơn giản là một việc cực kỳ dễ dàng, mọi việc khó khăn hơn khi chuyển sang những chủ đề phức tạp hơn.

Nói chung thì, việc bắt đầu sử dụng Angular sẽ phức tạp hơn nhiều so với React. Số lượng khái niệm đơn giản nhất của nó có thể khiến cho người mới sử dụng bị choáng ngợp. Và ngay cả khi bạn đã quen dần, trải nghiệm khi làm việc sẽ hơi khó khăn hơn vì bạn sẽ phải tự nhắc nhở mình những thứ như quản lý hạn đăng ký của Rx.js, cách change detection hoạt động và “trái chuối trong hộp” (vâng, nó cũng là một lời khuyên có thật trong bài tư liệu gốc). Bạn sẽ còn gặp phải những thông báo lỗi sai quá mức khó hiểu để rồi bạn phải lên google tìm cách giải quyết và cầu mong cho phương pháp mình chọn lựa là phương pháp chính xác.

Nghe thì có vẻ như bài viết đang có hơi chút thiên vị React, và đúng là như vậy. Nhiều lập trình viên mới đã tham gia thử nghiệm làm quen với cả hai framework và sau khi kiểm tra từ số lượng đến độ khó công việc, bằng cách nào đó thì làm việc với React sẽ suôn sẻ hơn. Nhưng, như đã nói ở trên, nó còn phụ thuộc vào nhiều yếu tố khác nữa, và có thể bạn lại thấy ngược lại với số đông thì sao?

Tóm lại

Bạn có thể tự đưa ra kết luận rằng mỗi framework đều có khả năng riêng của mình, và chúng đều có điểm mạnh và điểm yếu. Tuy vậy, bài phân tích này đã nêu lên những điểm không hoàn toàn liên quan đến trọng tâm của câu hỏi và nó chưa đưa ra cho bạn một câu trả lời chính xác về việc nên dùng framework nào. Để quyết định chuyện đó, bạn sẽ cần phải nhìn ra được cái framework nào tương thích với dự án bạn đang thực hiện. Đây là việc mà chính bạn cần phải tự tìm hiểu.

Để bắt đầu việc đấy, hãy thử trả lời những câu hỏi liên quan đến dự án của bạn và trước khi bắt tay vào trả lời, hãy thử liên kết những đáp án bạn với những gì bạn vừa biết được về cả hai framework được kể trên. Danh sách này có thể là chưa hoàn chỉnh, nhưng nó lại vừa đủ cho bạn để khởi động:

· Dự án của bạn bao lớn?

  • Công việc sẽ được duy trì trong bao lâu?
  • Liệu tất cả những tính năng đã được xác định rõ ràng trước hay chưa hay bạn cần chúng phải vận hành thật linh hoạt?
  • Nếu như tất cả các tính năng đã được xác định, sức chứa cho dự án của bạn là bao nhiêu?
  • Loại tên miền và logic kinh doanh được sử dụng có phức tạp hay không?
  • Bạn muốn chương trình của mình vận hành ở đâu? Trang web, điện thoại hay desktop?
  • Bạn có cần vận hành kiểu server-side hay không? Liệu SEO có quan trọng?
  • Liệu bạn có phải tổ chức nhiều chương trình trực tiếp bằng framework này hay không?
  • Đoàn đội làm việc của bạn lớn hay nhỏ?
  • Những lập trình viên trong nhóm có nhiều kinh nghiệm không và lai lịch của họ thế nào?
  • Có thư viện component có sẵn nào bạn muốn sử dụng không?

Nếu bạn bắt đầu một dự án lớn và muốn hạn chế tối đa các rủi ro trong việc đưa ra lựa chọn sai lầm, hãy nghĩ đến việc chạy một sản phẩm thử nghiệm (proof of concept – PoC) trước. Chọn một số tính năng chủ chốt của dự án và thử tạo chúng bằng một framework bất kỳ. Việc tạo ra một PoC thường không mất quá nhiều thời gian, nhưng chúng sẽ cho bạn những trải nghiệm được cách framework ấy làm việc và cho phép bạn xác định được những yêu cầu công nghệ chính. Nếu bạn hài lòng với kết quả, bạn có thể bắt tay vào công việc của mình. Nếu không hợp, việc này sẽ giảm thiểu đi nhiều khó khăn mà bạn sẽ gặp phải trong quá trình làm việc sau này.

Liệu một framework có tối ưu hơn những framework khác?

Một khi bạn đã chọn được framework cho dự án của mình, thông thường bạn sẽ tiếp tục dùng nó cho những dự án tiếp theo. Đừng làm như vậy. Dù việc giữ vững một mô hình công nghệ cho riêng mình là ý tốt, nhưng đừng dùng cùng một cách xử lý cho nhiều trường hợp khác nhau. Trước khi bắt đầu một dự án, hãy tự hỏi lại những câu hỏi trên. Có thể ở dự án này đáp án là như vậy nhưng nó có thể khác đi với dự án khác thì sao? Hơn nữa, nếu bạn đã quen với việc làm các dự án nho nhỏ của mình bằng những công nghệ khác nhau thì hãy tiếp tục phát huy chuyện đấy. Việc trải nghiệm như thế sẽ đem về cho bạn rất nhiều kinh nghiệm đáng giá. Nhớ giữ cho mình một cái nhìn rộng mở hơn và học từ chính lỗi sai của mình. Để rồi sau này, bạn có thể tự nhiên và nhanh chóng biết được công nghệ nào mới phù hợp với dự án của mình.