React là gì và tại sao nó lại quan trọng?

Chào các bạn! 

Tình cờ trong lúc lục lại đống assignment cũ năm 3, mình tìm thấy một bài report dài 30 pages do mình viết để seminar về React và React Native. Nhưng lúc đấy lại không đăng lên blog. Dù hơi cũ nhưng hôm nay mình xin giới thiệu cho các bạn biết sơ về nó nhé.

GIỚI THIỆU

React (React.js hay ReactJS) là một thư viện JavaScript mã nguồn mở để xây dựng giao diện, được tạo ra bởi Facebook vào tháng 3/2013. React hiện chỉ là thư viện chứ không phải framework, và ứng với phần V trong mô hình MVC.

React được Facebook đưa vào sử dụng thực tế cho dự án Facebook Ads của họ, và từ đó cả Instagram, Netflix hay Airbnb,.. cũng bắt đầu đưa React vào sử dụng cho các dự án của họ. Danh sách các dự án lớn sử dụng React có thể xem tại đây.

Hiện nay, thư viện này nhận được rất nhiều sự quan tâm đến từ cộng đồng, Github repo của React đang có được hơn 67k stars. Nó đang được maintain bởi Facebook và Instagram, cũng với sự đóng góp của cộng đồng 1011 (28/5/2017) lập trình viên giỏi trên Thế giới.

VẤN ĐỀ & GIẢI PHÁP

Từ xưa đến nay, việc xây dựng ứng dụng MVC phía client với data-binding 2 chiều thì cũng khá là đơn giản, tuy nhiên khi dự án phát triển, càng nhiều tính năng mới, càng nhiều người được bổ sung vào team dẫn tới quá trình phát triển bị chậm đi với code bases lớn và phức tạp, đồng thời hiệu năng cũng sẽ bị giảm đi.

Thời gian trôi qua, project đó sẽ trở thành ác mộng đối với những con người đang thực hiện nó. Source code trở nên quá “sâu” để lập trình viên có thể nhớ được. Khi thêm một chức năng mới sẽ rất vất vả và đòi hỏi testing khá nhiều.

Bạn cũng có thể giải quyết vấn đề đó bằng các thư viện khác như Backbone.js hay Angular.js tuy nhiên với các project qui mô càng to thì sẽ càng khó để quản lý.

React thì trái lại, nó sinh ra để dành cho những ứng dụng lớn dễ dàng quản lý khi mở rộng. React được tạo ra cho phần V của mô hình MVC, cho phép lập trình viên tạo ra các web app lớn, có thể hiển thị các dữ liệu thay đổi theo thời gian mà không cần reload lại trang, cũng như xây dựng các UI components có thể tương tác và tái sử dụng. Mục tiêu chính của React là nhanh, đơn giản, hiệu năng cao và dễ dàng mở rộng.


TẠI SAO LẠI LÀ REACT

React trở nên phổ biến như vậy là vì nó được tạo ra bởi Facebook?

Không! Dĩ nhiên là không.
Vậy tại sao React lại được nhiều ông lớn lựa chọn đưa vào dự án của mình mặc dù nó vẫn chưa thực sự trưởng thành?

● Giải quyết cho V trong mô hình MVC

● Giúp viết Javascript dễ dàng hơn với JSX

React sử dụng một cú pháp mới gọi là JSX, là một sự hòa trộn giữa Javascript và cú pháp XML: cho phép quoting như HTML và sử dụng HTML tag để render sub-components. Vì vậy nó cũng trở nên thân thiện hơn với các lập trình viên front-end.

● Component hóa giao diện

React Component API cho phép lập trình viên tạo ra các Component tương ứng với các phần của giao diện. Các component này có thể được tái sử dụng như một layout template, hoặc kết hợp với các component khác để xây dựng content của giao diện.

Việc này sẽ giải quyết được vấn đề ở mục (b), khi mà project trở nên càng lớn và phức tạp, nhờ đó tăng năng suất và chất lượng công việc của lập trình viên bởi vì thật dễ dàng khi bạn chỉ quản lý và sửa chữa các component của chính bạn. 

Vì các lý do đó component thực sự là tương lai của lập trình ứng dụng Web, và đây cũng là tính năng quan trọng nhất, là Top-Level API mà bộ lõi React đem lại.

● Tăng hiệu năng với Virtual DOM:

React sử dụng khái niệm virtual DOM để tạo lại các component của bạn ngay cả khi component đó đang “live”. Cách tiếp cận này mang lại cho bạn tính linh hoạt rất lớn và cải thiện hiệu năng bởi React có thể tính toán được trước những thay đổi nào cần thực hiện trong DOM và chỉ update DOM theo những thay đổi đó.

Bằng cách đó React tránh và giảm thiểu những hành động gây tốn tài nguyên của DOM và làm cho việc cập nhật giao diện hiệu quả hơn.

● Thân thiệt với SEO:

Một trong những vấn đề lớn của các Js frameworks là nó không thân thiện với các cỗ máy tìm kiếm (search engine). Mặc dù đã có nhiều cải thiện nhưng thực sự search engine vẫn gặp rất nhiều khó khăn khi “đọc” các web app chứa nhiều Js. 

Tuy nhiên React tự hào nằm ngoài số đó bởi vì bạn có thể chạy React trên server và các virtual DOM của component sẽ được render và trả về trình duyệt dưới dạng web page mà không cần các thư viện bên thứ 3 hay bất kì thủ thuật nào. Vì vậy React đáp ứng đầy đủ tính SEO friendly

● React cung cấp nhiều công cụ out-of-the-box

Khi bạn bắt đầu những chuyến phiêu lưu với React, đừng quên cài đặt extension chính thức của React Chrome, nó giúp debug app nhanh hơn. React cũng giúp chúng ta update các Views với Flux – mô hình kiến trúc để thiết kế UI do Facebook đề xuất nhằm kiếm soát workflow của chương trình.

● Dễ dàng viết UI Testcases.

● React Native

React Native được Facebook công bố 2 năm sau React, cung cấp kiến trúc React để phát triển các ứng dụng native (iOS, Android UWP) và hứa hẹn sẽ tiếp nối React thành một kẻ khổng lồ trong lĩnh vực lập trình ứng dụng mobile

● Những bộ não lớn đang “hậu thuẫn” đằng sau React

React được Facebook opensource và hiện được phát triển bởi rất nhiều lập trình viên giỏi trên thế giới, vì vậy tương lai của React cũng cực kì được đảm bảo.

● Dễ dàng chuyển đổi trong công việc: 

Khi thuần thục React, bạn sẽ tận dụng được cốt lõi của nó để dễ dàng chuyển đổi giữa ReactJs và React Native để làm việc trên cả 2 khía cạnh đang “hot” trong giới IT hiện nay là lập trình web và lập trình mobile.

Đến đây là kết thúc phần 1 về Reactjs rồi. Mời các bạn đón xem phần 2 - React Native ở bài tiếp theo và đừng quên để lại bình luận bên dưới nhé. 

Chúc các bạn học tốt!