CHƯƠNG 1: CƠ SỞ LÝ THUYẾT Hình 1. Kiến trúc 3 tầng sử dụng MERN stack 1.JS Tầng trên cùng của MERN stack là React.js, một JavaScript framework để tạo các ứng dụng động phía client trong HTML. Nó cho phép những nhà phát triển web tạo ra giao diện người dung nhanh chóng. Phần Views của Reactjs thường được hiển thị bằng việc chủ yếu dung các component mà chứa các component cụ thể hoặc các thẻ HTML.
Một trong những đặc trưng duy nhất của Reactjs là việc render dữ liệu không những có thể thực hiện ở tầng server mà còn ở tầng client. Ưu điểm của react: - Reactjs cực kì hiệu quả: Reactjs tạo ra cho chính nó DOM ảo – nơi mà các component thực sự tồn tại trên đó. Điều này sẽ giúp cải thiện hiệu suất rất nhiều. Reactjs cũng tính toán những thay đổi nào cần cập nhật len DOM và chỉ thực hiện chúng.
Điều này giúp Reactjs tránh những thao tác cần trên DOM mà nhiều chi phí. - Reactjs giúp việc viết các đoạn code JS dễ dàng hơn: Nó dung cú pháp đặc biệt là JSX (Javascript mở rộng) cho phép ta trộn giữa code HTML và Javascript. Ta có thể them vào các đoạn HTML vào trong hàm render mà không cần phải nối chuỗi. Đây là đặc tính thú vị của Reactjs.
Nó sẽ chuyển đổi các đoạn HTML thành các hàm khởi tạo đối tượng HTML bằng bộ biến đổi JSX. 21 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT - Nó có nhiều công cụ phát triển: Khi bạn bắt đầu Reactjs, đừng quên cài đặt ứng dụng mở rộng của Chrome dành cho Reactjs. Nó giúp bạn debug code dễ dàng hơn. Sau khi bạn cài đặt ứng dụng này, bạn sẽ có cái nhìn trực tiếp vào virtual DOM như thể bạn đang xem cây DOM thông thường.
- Render tầng server: Một trong những vấn đề với các ứng dụng đơn trang là tối ưu SEO và thời gian tải trang. Nếu tất cả việc xây dựng và hiển thị trang đều thực hiện ở client, thì người dung sẽ phải chờ cho trang được khởi tạo và hiển thị lên. Điều này thực tế là chậm. Hoặc nếu giả sử người dung vô hiệu hóa Javascript thì sao? Reactjs là một thư viện component, nó có thể vừa render ở ngoài trình duyệt sử dụng DOM và cũng có thể render bằng các chuỗi HTML mà server trả về.
- Làm việc với vấn đề test giao diện: Nó cực kì dễ để viết các test case giao diện vì virtual DOM được cài đặt hoàn toàn bằng JS. - Hiệu năng cao đối với các ứng dụng có dữ liệu thay đổi liên tục, dễ dàng cho bảo trì và sửa lỗi. Nhược điểm của react: - Reactjs chỉ phục vụ cho tầng View. React chỉ là View Library nó không phải là một MVC framework như những framework khác.
Đây chỉ là thư viện của Facebook giúp render ra phần view. Vì thế React sẽ không có phần Model và Controller, mà phải kết hợp với các thư viện khác. React cũng sẽ không có 2- way binding hay là Ajax. - Tích hợp Reactjs vào các framework MVC truyền thống yêu cầu cần phải cấu hình lại.
- React khá nặng nếu so với các framework khác React có kích thước tương tương với Angular (Khoảng 35kb so với 39kb của Angular). Trong khi đó Angular là một framework hoàn chỉnh. - Khó tiếp cận cho người mới học Web. 22 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.js và Node.js Tầng tiếp theo là framework phía máy chủ Express.js, chạy bên trong máy chủ Node.js tự nhận mình là “web framework tối giản, nhanh, đơn giản cho Node.js” và đó thực sự chính xác.js có các mô hình mạnh mẽ để định tuyến URL (khớp URL đến với chức năng máy chủ) và xử lý các yêu cầu và phản hồi HTTP.
Bằng cách tạo các Yêu cầu HTTP XML (XHR) hoặc GET hoặc POST từ giao diện người dùng React.js của bạn, bạn có thể kết nối với các hàm Express.js cung cấp giá trị cho ứng dụng của bạn bằng cách sử dụng các promises, callbacks, … để truy cập và cập nhật dữ liệu trong cơ sở dữ liệu MongoDB của bạn. Ưu điểm của node: - Có tốc độ xử lý nhanh nhờ cơ chế xử lý bất đồng bộ (non-blocking). Bạn có thể dễ dàng xử lý hàng ngàn kết nối trong khoảng thời gian ngắn nhất. - Giúp bạn dễ dàng mở rộng khi có nhu cầu phát triển website.
- Nhận và xử lý nhiều kết nối chỉ với một single-thread. Nhờ đó, hệ thống xử lý sẽ sử dụng ít lượng RAM nhất và giúp quá trình xử Nodejs lý nhanh hơn rất nhiều. - Có khả năng xử lý nhiều Request/s cùng một lúc trong thời gian ngắn nhất. - Có khả năng xử lý hàng ngàn Process cho hiệu suất đạt mức tối ưu nhất.
- Phù hợp để xây dựng những ứng dụng thời gian thực như các ứng dụng chat, mạng xã hội … Nhược điểm của node: - Nodejs gây hao tốn tài nguyên và thời gian. Nodejs được viết bằng C++ và JavaScript nên khi xử lý cần phải trải qua một quá trình biên dịch. Nếu bạn cần xử lý những ứng dụng tốn tài nguyên CPU thì không nên sử dụng Nodejs. - Nodejs so với các ngôn ngữ khác như PHP, Ruby và Python sẽ không có sự chênh lệch quá nhiều.
Nodejs có thể sẽ phù hợp với việc phát triển ứng dụng mới. Tuy nhiên khi xây dựng và triển khai dự án quan trọng thì Nodejs không phải là sự lựa chọn hoàn hảo nhất. 23 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1. MongoDB Nếu ứng dụng của bạn lưu trữ bất kỳ dữ liệu nào (hồ sơ người dùng, nội dung, nhận xét, tải lên, sự kiện, …), thì bạn sẽ muốn có một cơ sở dữ liệu để có thể làm việc cùng với React, Express và Node.
Đó là lý do MongoDB xuất hiện: Các tài liệu JSON được tạo trong giao diện người dùng React.js của bạn có thể được gửi đến máy chủ Express.js, nơi chúng có thể được xử lý và (giả sử chúng hợp lệ) được lưu trữ trực tiếp trong MongoDB để truy xuất sau này. Ưu điểm của MongoDB - Document oriented - Hiệu suất cao - Tính sẵn sàng cao - Nhân rộng - Khả năng mở rộng cao - Sharding - Năng động - Không có lược đồ cứng nhắc. - Linh hoạt - thêm / xóa trường có ít hoặc không ảnh hưởng đến ứng dụng - Dữ liệu không đồng nhất - Không joins - Phân phối được - Biểu diễn dữ liệu trong JSON hoặc BSON - Hỗ trợ không gian địa lý (Geospatial) - Tích hợp dễ dàng với BigData Hadoop - Ngôn ngữ truy vấn dựa trên tài liệu mạnh mẽ như SQL - Các bản phân phối cloud như AWS, Microsoft, RedHat, dotCloud và SoftLayer, v.v … Trên thực tế, MongoDB được xây dựng cho cloud. Kiến trúc mở rộng quy mô tự nhiên của nó, được kích hoạt bởi sharding, liên kết tốt với quy mô và sự nhanh nhẹn có được nhờ điện toán đám mây.
24 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT Nhược điểm của MongoDB - Một nhược điểm của NoSQL là hầu hết các giải pháp đều không tuân thủ ACID mạnh mẽ (Atomic, Consistency, Isolation, Durability) như các hệ thống RDBMS được thiết lập tốt hơn. - Giao dịch phức tạp. - Không có chức năng hoặc thủ tục lưu trữ tồn tại nơi bạn có thể liên kết logic 1. LỢI ÍCH CỦA MERN STACK Hãy bắt đầu với MongoDB, cơ sở dữ liệu tài liệu ở gốc của MERN stack.
MongoDB được thiết kế để lưu trữ dữ liệu JSON nguyên bản (về mặt kỹ thuật, nó sử dụng phiên bản nhị phân của JSON được gọi là BSON) và mọi thứ từ giao diện dòng lệnh đến ngôn ngữ truy vấn của nó (MQL), hoặc MongoDB Query Language) được xây dựng trên JSON và JavaScript. MongoDB hoạt động cực kỳ hiệu quả với Node.js và giúp việc lưu trữ, thao tác và biểu diễn dữ liệu JSON ở mọi tầng trong ứng dụng của bạn trở nên vô cùng dễ dàng. trên nhà cung cấp dịch vụ đám mây mà bạn chọn, dễ dàng chỉ bằng một vài lần bấm nút.js (chạy trên Node.js) và React.js làm cho ứng dụng JavaScript/JSON MERN trở nên đầy đủ.js là một server-side web framewwork bao bọc các request và response HTTP, đồng thời giúp dễ dàng thực hiện ánh xạ URL tới các chức năng phía máy chủ.js là khung JavaScript giao diện người dùng để xây dựng giao diện người dùng tương tác trong HTML và giao tiếp với máy chủ từ xa. Sự kết hợp này có nghĩa là dữ liệu JSON chảy tự nhiên từ trước ra sau, giúp xây dựng dữ liệu nhanh chóng và debug khá đơn giản.
Ngoài ra, bạn chỉ cần biết một ngôn ngữ lập trình và cấu trúc tài liệu JSON để hiểu toàn bộ hệ thống! MERN là sự lựa chọn cho các nhà phát triển web ngày nay muốn phát triển nhanh chóng, đặc biệt đối với những người có kinh nghiệm về React. 25 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1. MỘT SỐ THƯ VIỆN HỖ TRỢ KHÁC 1.IO là một thư viện JavaScript cho phép giao tiếp realtime giữa máy khách và máy chủ.IO được xây dựng trên WebSockets, một giao thức nổi tiếng cho việc giao tiếp realtime. Trong MERN stack sử dụng Socket.IO để tạo kết nối realtime giữa máy khách (React.js) và máy chủ (Express.js và Node.js) để truyền và nhận dữ liệu tức thì.
Phía back-end Jsonwebtoken: JSON Web Token (JWT) là một tiêu chuẩn mở xác định cách thức để truyền thông tin giữa các bên một cách an toàn dưới dạng JSON. Thông tin được xác minh và đáng tin cậy vì nó có chứa chữ ký số. Chữ ký số này được mã hóa bằng bằng RSA hoặc ECDSA. Một chuổi token phải bao gồm ba phần cách nhau bởi dấu chấm đó là header, payload và signature.
JWT thường được dùng trong authentication. Mongoose: Mongoose là một thư viện JavaScript tạo kết nối giữa MongoDB và Node. Mongoose cho phép định nghĩa các đối tượng với một schema được định nghĩa rõ ràng, được ánh xạ tới một MongoDB document. Cloudinary: Cloudinary là giải pháp Phần mềm dưới dạng dịch vụ (SaaS) giúp quản lý các nội dung phương tiện của ứng dụng web hoặc thiết bị di động của trên đám mây.
Cloudinary cung cấp giải pháp tổng thể đáp ứng hầu hết các yêu cầu về hình ảnh và video, cho phép tải lên, lưu trữ, xử lý, chuyển đổi và phân phối được tối ưu hoá. Tải lên, xử lý và phân phối phương tiện được xử lý trên các máy chủ của Cloudinary, tự động mở rộng quy mô để xử lý lưu lượng truy cập lớn và tải cao. Phía front-end Redux: Redux là một thư viện JavaScript mã nguồn mở. Là một công cụ dùng để quản lý và tập trung các trạng thái.
Nó được sử dụng phổ biến cùng với các thư viện như React.JS, Angular để xây dựng giao diện người dùng hiệu quả hơn. Redux gồm có ba thành phần: Actions, Store và Reducers.