Chương 1: Cơ sở lý thuyết Khả năng triển khai khó khăn trong một số môi trường hạn chế về an toàn và quản lý mạng.2 Các công nghệ sử dụng ở Frontend 1.1 Giới thiệu React là một thư viện JavaScript được sử dụng để phát triển xây dựng giao diện trong lập trình ứng dụng Frontend. Đặc điểm nổi bật của React là khả năng tái sử dụng code và render dữ liệu không chỉ thực hiện được trên tầng server mà còn ở phía client. Hai khái niệm quan trọng trong React: + JSX: React extension hỗ trợ viết các phần tử giống như HTML trực tiếp vào mã nguồn JavaScript. + Virtual DOM: Nếu không sử dụng React, khi có sự thay đổi trên giao diện thì cây DOM sẽ cập nhật lại cho chính DOM đó.
Tuy nhiên, đối với những website có xu hướng tương tác nhiều với người dùng thì điều này lại làm ảnh hưởng đến hiệu năng vì toàn bộ cây DOM sẽ phải reload lại mỗi khi người dùng nhấn vào tính năng yêu cầu tải lại trang. Nếu sử dụng JSX, React sẽ khởi tạo Virtual DOM (DOM ảo) là bản sao chép của DOM thật trên trang đó, React sử dụng bản copy này để tìm đúng phần cần cập nhật trên DOM thật khi có bất kỳ một sự kiện nào đó khiến thành phần trong nó thay đổi. Việc cập nhật đúng chỗ sẽ giúp tiết kiệm tài nguyên và thời gian xử lý.2 Ưu điểm Phù hợp với đa dạng thể loại website: Việc tạo website sẽ dễ dàng hơn vì không cần phải code nhiều như khi tạo những trang web chỉ dùng HTML và Javascript. Tái sử dụng các Component: Nếu xây dựng các Component đủ tốt, bạn có thể dụng nó cho các yêu cầu dự án khác nhau, chỉ tốn thời gian khi xây dựng Component ban đầu.
Sử dụng được cho cả ứng dụng di động: React Native là một framework khác cũng được phát triển bởi Facebook, hỗ trợ chia sẻ các Component hoặc sử dụng lại các Business Logic có trong ứng dụng. 21 Chương 1: Cơ sở lý thuyết Thân thiện với SEO: React là một thư viện của JavaScript và hiện nay Google Search Engine đã crawl và index được code của JavaScript hỗ trợ đưa thông tin website lên top đầu tìm kiếm của Google. Debug dễ dàng: Facebook đã phát hành một Chrome Extension dùng trong việc debug của ứng dụng giúp quá trình coding được dễ dàng và nhanh chóng.1 Giới thiệu Redux là một công cụ để quản lý trạng thái có thể dự đoán được cho ứng dụng sử dụng JavaScript hoặc TypeScript. Redux hỗ trợ ứng dụng hoạt động một cách nhất quán, chạy trong các môi trường khác nhau và dễ dàng để kiểm tra.
Redux sử dụng kiến trúc uni-direction data flow, nghĩa là dữ liệu trong ứng dụng chuyển động theo một hướng duy nhất và từ một nguồn duy nhất. Các ứng dụng ngày càng trở nên phức tạp và có nhiều state hơn, chính vì thế Redux giúp hỗ trợ quản lý state của ứng dụng. Với Redux, state của ứng dụng được lưu trữ tại cùng một nơi gọi là store, và mỗi component đều có thể truy cập vào các state trong store đó. 4 Giới thiệu Redux [8] 22 Chương 1: Cơ sở lý thuyết 1.2 Các thành phần của Redux Store: là các sự kiện mà chúng ta gửi dữ liệu từ ứng dụng đến Redux store.
Những dữ liệu có thể là sự tương tác giữa người dùng và ứng dụng, gọi APIs, hoặc cũng có thể là từ việc sử dụng biểu mẫu (form). Redux chỉ dùng một store duy nhất làm Single Source of Truth. Reducer: là hàm xử lý action, lấy state hiện tại của ứng dụng, thực hiện một action và trả về một state mới. Các state được lưu như những object và chúng giúp chúng ta xác định được cách thay đổi state của một ứng dụng trong việc phản hồi từ một action được gửi đến store.
Actions: Là một javascript object, thực hiện trên một state luôn trả về state mới. Vì thế nên state này có thể dự đoán được. Action có một thuộc tính “types” để xác địng loại hành động và có thể chứa dữ liệu bổ sung. 5 Các thành phần của Redux [8] 1.3 Redux Toolkit Redux Toolkit là một thư viện của Redux cung cấp một số tiện ích và các quy tắc khi thực hiện Redux.
Redux Toolkit giúp dễ dàng tiếp cận với những người mới bắt đầu sử dụng Redux và cải thiện hiệu suất dành cho những nhà phát triển có nhiều kinh nghiệm. Redux Toolkit giải quyết một số vấn đề như: 23 Chương 1: Cơ sở lý thuyết • Việc cấu hình đơn giản hơn so với Redux, không cần cài nhiều gói như Redux mà hỗ trợ tích hợp sẵn như Redux Devtool, Redux Thunk và Redux Immutable. • Redux Toolkit giảm đáng kể số lượng code cần phải viết khi Redux có nhiều đoạn code lặp lại nhiều lần.4 Các thư viện hỗ trợ khác Một số thư viện hỗ trợ xây dựng website phía Front-end: - Axios: là một HTTP client được phát triển dựa trên Javascript Promise, được dùng để hỗ trợ cho việc xây dựng các ứng dụng API từ đơn giản đến phức tạp và có thể được sử dụng cả ở trình duyệt hay Node. - dnd-kit: bộ công cụ hỗ trợ kéo thả mạnh mẽ và nhẹ dành cho React, hỗ trợ các tình huống phức tạp như kéo và thả giữa các danh sách.
- dayjs: là thư hiện Javascript hỗ trợ xử lý thời gian với cú pháp đơn giản, hỗ trợ đa quốc gia và đa ngôn ngữ. - react-hook-form và yup: hỗ trợ xử lý và thao tác với form một cách thuận tiện và dễ dàng hơn. - react-color-palette: hỗ trợ xử lý màu sắc cho người dùng tuỳ chỉnh - react-icons: cung cấp đa dạng các icon 1.1 Material UI [17] Hình 1. 6 Giới thiệu Material-UI [17] Material UI (hay còn gọi là MUI) là một thư viện mã nguồn mở với các thành phần thư viện người dùng (UI) được xây dựng với ReactJS, triển khai thiết kế dựa trên Material Design của Google.
24 Chương 1: Cơ sở lý thuyết MUI cung cấp gần như đầy đủ các thành phần mà trang web cần có. Từ nút, hộp thoại cho đến ô nhập liệu, bảng dữ liệu và rất nhiều các thành phần khác với giao diện đẹp, khả năng tùy chỉnh và thích ứng cao. Ưu điểm của MUI: - Các thành phần chuẩn hóa: các thành phần được xây dựng theo chuẩn Material Design, đảm bảo thống nhất và thẩm mỹ - Tuỳ chỉnh linh hoạt: MUI cho phép tùy chỉnh các thành phần theo nhu cầu cụ thể của ứng dụng và nhu cầu của người dùng - Cộng đồng phong phú: được tin sử dụng bơi nhiều tổ chức lớn, có cộng đồng người sử dụng đông đảo, mang lại nhiều khả năng phát triển 1.3 Các công nghệ sử dụng ở Backend 1.1 Giới thiệu [4] Node.js được xây dựng và phát triển từ năm 2009, là một nền tảng được phát triển độc lập dựa trên V8 JavaScript Engine.js có thể sử dụng trên nhiều nền tảng hệ điều hành khác nhau như Window, Linux và OS X.js cung cấp một thư viện phong phú đa dạng các mô-đun JavaScript khác nhau giúp đơn giản việc lập trình và tiết kiệm thời gian. Ý tưởng chính của Node.js là sử dụng non-blocking, giúp nhanh chóng định tuyến đầu vào / đầu ra dữ liệu theo thời gian thực.js sử dụng luồng đơn là Single Threaded cho phép hỗ trợ nhiều kết nối đồng thời, là giải pháp đối với các web truyền thống sử dụng nguồn tài nguyên kém hiệu quả.
25 Chương 1: Cơ sở lý thuyết 1.2 Kiến trúc của Node. 7 Kiến trúc Node.js [5] V8 (Javascript Engine): Một thành phần quan trọng trong Node.js, dùng để biên dịch mã JavaScript thành mã máy mà máy tính có thể hiểu được và chạy được trên CPU. LIBUV: Một thư viện mã nguồn mở của JavaScript, cung cấp vòng lặp sự kiện (event loop), các API không đồng bộ để xử lý I/O như đọc/ghi file, kết nối mạng,. LIBUV gồm ba thành phần: Event Queue, Event Loop và Thread Pool Hình 1.
8 Cấu trúc LIBUV [5] 26 Chương 1: Cơ sở lý thuyết + Event loop: Một thành phần quan trọng trong hệ thống runtime, xử lý các sự kiện và callback trong ứng dụng Node. Nó cũng điều khiển các tác vụ khác như đọc, ghi từ các I/O, gửi và nhận dữ liệu qua mạng. Có hai loại sự kiện trong Event Loop: sự kiện đồng bộ được xử lý ngay lập tức trong event loop và sự kiện bất đồng bộ được đưa vào hàng đợi và sẽ xử lý sau khi sự kiện đồng bộ đã xử lý xong. [5] + Thread pool: Những luồng riêng biệt độc lập với luồng chính ở Event Loop.
Khi yêu cầu từ Event Queue sang Event Loop, nếu các tác vụ thuộc loại tác vụ nặng (hoạt động xử lý file, các yêu cầu mạng, các hoạt động liên quan đến thời gian) thì chúng sẽ được tải xuống Thread Pool để xử lý. Điều này sẽ giúp giảm tải ở Event Loop.js Standard Library: bao gồm các thư viện, chức năng liên quan đến hệ điều hành: setTimeout, fs, http. Ngoài ra trong kiến trúc của Node.js còn có: http-parser, c-ares, OpenSSL, zlib,… 1.1 Giới thiệu Express.js là một framework được xây dựng trên nền tảng của Node.js, cung cấp các tính năng để phát triển web hoặc xây dựng API. Hỗ trợ phát triển ứng dụng theo mô hình MVC, cho phép định nghĩa các middleware, các request methods trong route và hỗ trợ RESTful API.2 Cách thành phần trong ứng dụng Express.js Express Application: Một instance của Express framework và chứa tất cả các cài đặt và các middleware cần thiết để xử lý các yêu cầu HTTP.
Middleware: Đây là các hàm trung gian dùng để tiền xử lý các request trước khi trả về response cho người dùng. Nếu các request thỏa điều kiện thì chương trình chạy tiếp. Trong một hàm middleware có 3 tham số: request, response và next(). Tham số thứ ba là một NextFucntion khi next() được gọi thì những xử lý phía sau mới được chạy.
Middleware có thể được dùng để xử lý xác thực, xử lý lỗi, ghi log và nhiều nhiệm vụ khác. 27 Chương 1: Cơ sở lý thuyết Hình 1. 9 Middleware [9] Routing: Giúp ứng dụng xác định các yêu cầu từ người dùng đối với các endpoint cụ thể. Mỗi route có thể được kết hợp với một hoặc nhiều middleware.
Một số lựa chọn để thao tác như GET, POST, PUT, PATCH, DELETE,… Controller: Nhận request và gửi lên server (thông qua models) sau đó trả về response. Controller tương tác với cả views và models. Một số ứng dụng có thể tách các xử lý các nghiệp vụ tương ứng với các request trong controller thành Service. Models: Đại diện cho đối tượng trong Cơ sở dữ liệu.
Model tương tác với Controller. Views: Chứa các file/engine template cho ứng dụng.js, để render được file HTML ta dùng sendFile() trên đối tượng response. Do đó, một số engine template như pug, hbs, jade được sử dụng để hỗ trợ render.