CHƯƠNG 1. ReactJS ReactJS là một thư viện mã nguồn mở viết bằng ngôn ngữ JavaScript và được tạo ra bởi Facebook để xây dựng các thành phần giao diện phía người dùng (User Interface). Các thành phần này được gọi là Component và chúng có thể thể được tái sử dụng. Một trong những điểm mạnh của ReactJS đó là việc render dữ liệu sẽ được kiểm tra rất kỹ xem đó là sự thay đổi dữ liệu của thành phần nào trong DOM nhằm mục đích hạn chế tối đa việc render lại tất cả dữ liệu trong DOM từ đó nâng cao hiệu suất và tối ưu hoá tốc độ tải trang.
Để làm được điều này thì ReactJS hỗ trợ chúng ta một DOM khác gọi là DOM ảo (virtual DOM). DOM ảo có cấu trúc tương tự DOM chính, ReactJS sẽ dùng DOM ảo này để kiểm tra, so sánh và tìm đúng thành phần của DOM chính cần cập nhật lại khi có sự kiện làm thành phần đó bị thay đổi và chỉ cập nhật đúng phần có sự thay đổi đó chứ không cập nhật lại cả DOM Thông thường, các trang web sẽ dùng trực tiếp HTML để render DOM cho chính nó, nếu các website thiên về hiển thị thông tin cho người dùng mà không có quá nhiều tương tác của người dùng hoặc có ít trang thì cách làm thông thường này không có vấn đề gì nhưng khi một website có nhiều tương tác của người dùng (client và server giao tiếp nhiều) thì website sẽ gặp vấn đề rất lớn về mặt hiệu năng vì DOM sẽ được render lại toàn bộ mỗi lần người dùng thực hiện chức năng có reload lại trang.1: Virtual DOM trong ReactJS [4] 3 Chương 01: Cơ sở lý thuyết ReactJS cho phép người lập trình viết HTML hoặc cũng có thể viết CSS trực tiếp trong JavaScript bằng cú pháp JSX, dễ dàng và thuận tiện hơn trong việc xem kết quả đầu ra ngay lập tức. ReactJS có cấu trúc tổ chức theo dạng thành phần (Component) cho phép các Component này lồng vào nhau và có mối quan hệ cha-con (parent-child), các Component cha-con này có thể liền kết truyền dữ liệu từ Component cha sang Component con thông qua các Properties của Component con, có nghĩa là một Component cha có thể có nhiều Component con và dữ liệu của các Component con có thể được sử dụng, biến đổi mà không ảnh hưởng đến Component cha.2: Cơ chế truyền dữ liệu của ReactJS [5] 1. Redux Redux là một thư viện Javascript giúp quản lý các trạng thái (State) của ứng dụng, giúp người lập trình xử lý luồng hoạt động một cách nhất quán và dễ dàng để kiểm tra.
Nếu một ứng dụng có ít component thì việc truyền dữ liệu giữa các component là tương đối dễ dàng và không có vấn đề gì nhưng khi ứng dụng có nhiều component thì câu chuyện trở nên phức tạp hơn rất nhiều. Trong react, để chia sẻ dữ liệu giữa các component thì chúng phải có quan hệ cha con (parent- child) và truyền dưới dạng Properties. Vấn đề được đặt ra là khi giữa các 4 Chương 01: Cơ sở lý thuyết component đó không có quan hệ cha con nhưng lại cần chia sẻ dữ liệu với nhau thì sẽ như thế nào. Để có thể truyền dữ liệu một cách tối ưu và đơn giản hơn chúng ta sẽ lưu dữ liệu vào một một nơi chứa chung, từ đó truyền dữ liệu cho các component cần dùng.
Lúc này, nơi chứa này sẽ đóng vai trò trung gian, nó có nhiệm vụ lưu trữ và phân phát dữ liệu. Redux sẽ hỗ trợ việc chia sẻ dữ liệu giữa các component. Redux sẽ có 3 thành phần: Actions, Reducers và Store. • Actions: Là các events và chúng là cách thức cần thiết để gửi dữ liệu từ ứng dụng đến Store.
Data là dữ liệu tương tác bởi user hoặc lấy APIs • Reducers: Là những function, các function này sử dụng state hiện tại của ứng dụng sau đó hiện một action rồi cập nhật lại một state mới. Các states này sẽ được lưu trữ dưới dạng objects và quy định rõ các state của ứng dụng thay đổi khi phản hồi một action gửi đến store. • Store: Là nơi lưu trạng thái ứng dụng. Store cho phép việc truy cập tới các state đã được lưu trong nó.
Redux hoạt động theo nguyên lý như sau: • Sau khi một action được thực thi, dispatcher (thành phần trong store) sẽ được gọi để kích hoạt và gửi đến reducer một action. Lúc này reducer thực hiện hành động được định nghĩa dựa vào action tương ứng được gửi đến. Sau đó sẽ đồng thời lưu lại giá trị của state mới vào trong store và trả về state mới đó. Nguyên lý hoạt động của redux [6] 5 Chương 01: Cơ sở lý thuyết 1.
React Native - React Native là một framework mã nguồn mở được phát triển bởi Facebook, được sử dụng để xây dựng ứng dụng di động đa nền tảng. Nó cho phép nhà phát triển sử dụng JavaScript để tạo ra các ứng dụng di động cho cả hệ điều hành iOS và Android mà không cần viết lại mã nguồn từ đầu. - Với React Native, có thể sử dụng các thành phần UI được xây dựng sẵn để xây dựng giao diện người dùng cho ứng dụng của mình. React Native sử dụng một cấu trúc gọi là "React component", trong đó mỗi thành phần đại diện cho một phần của giao diện người dùng.
Chúng ta có thể tạo các thành phần UI tái sử dụng và kết hợp chúng lại để tạo thành giao diện động và tương tác. - React Native sử dụng một công nghệ gọi là "bridge" để kết nối mã JavaScript với các thành phần native của hệ điều hành, giúp ứng dụng chạy mượt mà và có hiệu năng cao. Có thể sử dụng các API native và thư viện của hệ điều hành để truy cập vào các tính năng như máy ảnh, định vị, cảm biến và nhiều hơn nữa. - Một ưu điểm lớn của React Native là khả năng chia sẻ mã nguồn giữa các nền tảng khác nhau.
Chúng ta có thể viết một lần và chạy trên cả iOS và Android, giúp tiết kiệm thời gian và công sức phát triển. Tuy nhiên, đôi khi cần phải viết mã native để giải quyết các vấn đề đặc thù cho từng nền tảng. - Tóm lại, React Native là một framework mạnh mẽ cho phát triển ứng dụng di động đa nền tảng, cho phép sử dụng JavaScript và chia sẻ mã nguồn giữa iOS và Android. Nó đã trở thành một lựa chọn phổ biến cho việc xây dựng ứng dụng di động hiệu quả và linh hoạt.
Các thư viện hỗ trợ cho Front-end khác - Axios: là một thư viện HTTP client được phát triển dựa vào Javascript Promise, được dùng để hỗ trợ cho giao tiếp với các API Web Service. - Material UI: là một thư viện có các React Component được tạo ra bởi Google, cung cấp cho lập trình viên các Component được xây dựng sẵn giúp cho các lập trình viên có thể sử dụng, tiết kiệm thời gian phải dựng HTML và viết style CSS - Next UI: cũng là một thư viện các React Component mới ra mắt gần đây. Hỗ trợ xây dựng giao diện với các component đẹp mắt và nhiều tuỳ biến cho lập trình viên có thể sáng tạo, chỉnh sửa tùy thích. - React Native Elements cung cấp một bộ sưu tập các thành phần UI đã được thiết kế sẵn, như nút, thanh trượt, hộp chọn, hình ảnh và nhiều hơn nữa.
Thư viện này tập trung vào việc cung cấp các thành phần giao diện người dùng đẹp mắt và dễ sử dụng, giúp tăng tốc quá trình phát triển ứng dụng. React Native Elements cũng tích hợp tốt với React Native và hỗ trợ các tính năng như tùy chỉnh chủ đề, tương thích với nhiều nền tảng và sự tương thích ngược với các phiên bản React Native. - Native Base là một thư viện UI khác cho React Native, cung cấp một bộ sưu tập các thành phần giao diện người dùng đa nền tảng. Native Base tập trung vào việc cung cấp các thành phần UI theo phong cách thiết kế Material Design và iOS.
Thư viện này cung cấp các thành phần như nút, danh sách, thẻ, thanh trượt và 6 Chương 01: Cơ sở lý thuyết nhiều hơn nữa. Native Base cũng hỗ trợ tùy chỉnh chủ đề, cho phép bạn điều chỉnh giao diện người dùng theo ý muốn. Giới thiệu Spring Framework là một Java platform mã nguồn mở, nó giúp đơn giản hóa việc phát triển các ứng dụng Java và cho phép xây dựng ứng dụng từ “plain old Java objects” (POJOs). Bên cạnh đó, phần mở rộng được sử dụng để xây dựng các ứng dụng web trên nền tảng Java EE.
Mục tiêu của Spring Framework là làm cho việc phát triển ứng dụng J2EE dễ dàng hơn và thúc đẩy việc lập trình tốt hơn bằng mô hình POJO-based. Các tính năng của Spring Framework Các tính năng của Spring Framework được tổ chức thành khoảng 20 modules khác nhau. Các modules đó được nhóm lại thành từng nhóm như sau: Hình 4.4: Các nhóm modules của Spring Framework[10] Trong đó tính năng của từng phần như sau: - Test: Hỗ trợ kiểm thử các thành phần trong Spring với JUnit và TestNG. - Spring Core Container: Bao gồm các modules là Beans, Core, Context và SpEL.
Trong đó module Core và Beans cung cấp các phần nền tảng của framework bao gồm cả tính năng Inversion of Control (IoC) và Dependency Injection. Module Context hỗ trợ đa ngôn ngữ (internationalization), các tính 7 Chương 01: Cơ sở lý thuyết năng Java EE như EJB, JMX. Module Expression Language cung cấp hỗ trợ việc gán và lấy giá trị, các phương thức cải tiến cho phép truy cập collections, index, các toán tử logic… - AOP, Aspects và Instrumentation: Module AOP hỗ trợ cài đặt lập trình hướng khía cạnh (Aspect Oriented Programming), Aspects hỗ trợ tích hợp với AspectJ. - Data Access/Integration: Tầng này bao gồm các module JDBC, ORM, OXM, JMS và Transaction.
Các module này cung cấp khả năng giao tiếp với cơ sở dữ liệu. - Web: Tầng này bao gồm các module Web, Web-Servlet, Web-Struts, và Web-Portlet dùng để hỗ trợ việc lập trình web. Spring Boot Spring Boot là một module nằm trong hệ sinh thái Spring Framework. Spring Boot giúp cho việc lập trình với Spring trở nên đơn giản hơn, không cần phải thực hiện các bước cấu hình phức tạp.
Spring Boot sẽ tự động cấu hình Spring dựa trên các dependencies đã thêm trước đó vào dự án. Và ngoài ra các server (Tomcat, Jetty) cũng được nhúng vào ứng dụng, vì thế có thể chạy ở bất cứ đâu có java chạy là được. Nhờ đó mà các nhà phát triển sẽ tập trung hơn để giải quyết các vấn đề doanh nghiệp.5: Từ Spring Framework đến Spring Boot [9] 8 Chương 01: Cơ sở lý thuyết 1. Khái niệm MongoDB MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở được viết bằng C++ và thuộc dạng CSDL NoSQL (Not Only SQL).