Ứng dụng công nghệ node js và react js để tối ưu hệ thống quản lý điểm tại trường cao đẳng giao thông vận tải ii

Từ đó thiết kế hệ thống thành những chương trình thuận tiện trong quá trình làm việc như: tìm kiếm, nhập liệu, thống kê,… Ở nước ta, ứng dụng công nghệ thông tin vào các lĩnh vực quản lý

ĐẠI HỌC ĐÀ NẴNG

LÊ THANH TÙNG

ỨNG DỤNG CÔNG NGHỆ NODE.JS VÀ REACT.JS ĐỂ TỐI ƯU HỆ THỐNG

QUẢN LÝ ĐIỂM TẠI TRƯỜNG CAO ĐẲNG

GIAO THÔNG VẬN TẢI II

LUẬN VĂN THẠC SĨ HỆ THỐNG THÔNG TIN

Đà Nẵng - Năm 2017

ĐẠI HỌC ĐÀ NẴNG

LÊ THANH TÙNG

ỨNG DỤNG CÔNG NGHỆ NODE.JS VÀ REACT.JS ĐỂ TỐI ƯU HỆ THỐNG

QUẢN LÝ ĐIỂM TẠI TRƯỜNG CAO ĐẲNG

GIAO THÔNG VẬN TẢI II

Chuyên ngành: HỆ THỐNG THÔNG TIN

Mã số: 60.48.01.04

LUẬN VĂN THẠC SĨ HỆ THỐNG THÔNG TIN

Người hướng dẫn khoa học: PGS.TSKH Trần Quốc Chiến

Đà Nẵng - Năm 2017

LỜI CAM ĐOAN

Tôi xin cam đoan đây là công trình nghiên cứu của riêng tôi

Các số liệu và kết quả nghiên cứu nêu trong luận văn là trung thực và chưa từng được ai công bố trong bất kỳ công trình nào khác

Tác giả luận văn

Lê Thanh Tùng

LỜI CẢM ƠN

Hoàn thành luận văn tốt nghiệp này, tôi xin bày tỏ lòng biết ơn sâu sắc

đến thầy PGS.TSKH Trần Quốc Chiến đã tận tình hướng dẫn và giúp đỡ tôi

trong suốt quá trình thực hiện

Qua đây, tôi xin gửi lời cảm ơn chân thành nhất đến quý Thầy, Cô giáo khoa Tin học, phòng Đào tạo Trường Đại học Sư phạm và phòng Đào tạo Sau đại học, Đại học Đà Nẵng; các bạn học viên Cao học Hệ thống thông tin khóa

29 cùng gia đình, bạn bè đã động viên, góp ý, giúp đỡ, tạo điều kiện cho tôi trong quá trình học tập và thực hiện luận văn

Tôi xin ghi nhớ những công ơn, những tình cảm cao đẹp mà quý Thầy

cô, bạn bè đã dành cho tôi trong suốt thời gian qua Một lần nữa, tôi xin chân thành cảm ơn!

MỤC LỤC

DANH MỤC CÁC BẢNG vi

DANH MỤC CÁC TỪ VIẾT TẮT vii

DANH MỤC CÁC HÌNH viii

MỞ ĐẦU 1

1 Lý do chọn đề tài 1

2 Mục đích của luận văn 2

3 Đối tượng nghiên cứu 2

4 Phạm vi nghiên cứu 2

5 Phương pháp nghiên cứu 2

6 Ý nghĩa khoa học, thực tiễn của đề tài 3

7 Bố cục luận văn 3

CHƯƠNG 1 NGHIÊN CỨU TỔNG QUAN 4

1.1 TỔNG QUAN VỀ NODE.JS 4

1.1.1 Khái niệm 4

1.1.2 Lịch sử phát triển 5

1.1.3 Ưu điểm của Node.js 5

1.1.4 Kỹ thuật của Node.js 7

1.1.5 Các đặc tính của Node.js 7

1.1.6 Các thành phần của Node.js 8

1.1.7 Cài đặt Node.js 8

1.2 TỔNG QUAN VỀ REACT.JS 12

1.2.1 Khái niệm 12

1.2.2 Lịch sử phát triển 12

1.2.3 Ưu, nhược điểm của React.js 13

1.2.4 Tính năng 16

1.2.5 Cấu trúc, thành phần trong React.js 16

1.3 TỔNG QUAN VỀ KIẾN TRÚC FLUX 18

1.3.1 Khái niệm 18

1.3.2 Cấu trúc của Flux 19

1.3.3 Dòng dữ liệu 21

1.3.4 Sự khác biệt của Flux so với MVC 22

1.3.5 Implement Flux 22

1.4 TỔNG QUAN VỀ MONGODB 22

1.4.1 Tìm hiểu cơ sở dữ liệu NoSQL 23

1.4.2 Hệ quản trị cơ sở dữ liệu MongoDB 25

KẾT LUẬN CHƯƠNG 1 28

CHƯƠNG 2 PHÂN TÍCH, THIẾT KẾ HỆ THỐNG 29

2.1 HIỆN TRẠNG CÔNG TÁC QUẢN LÝ ĐIỂM TẠI TRƯỜNG CAO ĐẲNG GIAO THÔNG VẬN TẢI II 29

2.1.1 Giới thiệu về trường Cao đẳng Giao thông vận tải II 29

2.1.2 Công tác quản lý điểm 30

2.2 MÔ TẢ YÊU CẦU 30

2.2.1 Yêu cầu người sử dụng 30

2.2.2 Yêu cầu hệ thống 31

2.3 TỔNG QUAN CHỨC NĂNG CỦA HỆ THỐNG 31

2.3.1 Quản trị hệ thống 31

2.3.2 Sinh viên 32

2.3.3 Phòng Đào tạo 32

2.4 THIẾT KẾ HỆ THỐNG 32

2.4.1 Công cụ hỗ trợ 32

2.4.2 Thiết kế hệ thống 33

KẾT LUẬN CHƯƠNG 2 45

CHƯƠNG 3 GIẢI PHÁP TỐI ƯU HỆ THỐNG 46

3.1 PHÂN TÍCH NGUYÊN NHÂN LÀM CHẬM HỆ THỐNG 46

3.1.1 Truy vấn database: sử dụng SQL server 2008 46

3.1.2 Quá trình xử lý luồng dữ liệu: Kiểu truyền thống (blocking) 50 3.2 GIẢI PHÁP TỐI ƯU HỆ THỐNG 51

3.2.1 Sử dụng MongoDB để tối ưu hoá truy vấn Database 51

3.2.2 Sử dụng công nghệ Node.js 52

KẾT LUẬN CHƯƠNG 3 54

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 55

TÀI LIỆU THAM KHẢO 56 KẾT LUẬN GIAO ĐỀ TÀI LUẬN VĂN (bản sao)

DANH MỤC CÁC CHỮ VIẾT TẮT

Các chữ viết tắt Nghĩa của các chữ viết tắt

API Application Programming Interface CRUD Create - Read - Update – Delete

JSON Javascript Object Notation

KLTN Khóa luận tốt nghiệp

MVC Model - View - Controller

NoSQL Not only Structured Query Languagee SQL Structured Query Languagee

RDBMS Relational database management system NPM Node Package Manager

OOP Object-Oriented Programming

PHP Personal Home Page

SPAs Single-Page Applications

1.6 Sơ đồ chung về quan hệ giữa các thành phần trong Flux 20

2.12 Quản lý ngành đào tạo 43 2.13 Quản lý điểm của từng lớp học phần 43 2.14 Quản lý lớp sinh hoạt 44 2.15 Quản lý lớp học phần 44

3.2 So sánh chức năng Insert giữa SQL và MongoDB 47

3.3 So sánh tốc độ truy vấn từ cùng đối tượng khác nhau

3.5 So sánh tốc độ truy vấn khi sử dụng khóa ngoại 49

MỞ ĐẦU

1 Lý do chọn đề tài

Trong những năm gần đây, cùng với sự phát triển, yêu cầu của xã hội ngày càng cao, để không những phục vụ cho các vấn đề quản lý nhà nước, còn định hướng trong việc hội nhập quốc tế Đây là vấn đề nhằm tăng cường cho công tác quản trị, hỗ trợ việc ra quyết định cho các trường học, cơ quan, công ty, trong đó lấy công nghệ thông tin là nền tảng để đưa vào việc xây dựng các Hệ thống thông tin phục vụ cho công tác quản lý trở thành yêu cầu cấp bách

Công tác quản lý ngày càng được nhiều các cơ quan và đơn vị quan tâm Tuy nhiên để bảo đảm cho các Hệ thống đạt hiệu quả trong quản lý, an toàn về dữ liệu và thân thiện trong tương tác

Tuy nhiên, hiện nay, việc áp dụng ngay các phần mềm chuyên dụng còn là một vấn đề gặp không ít khó khăn Để đáp ứng được yêu cầu cấp thiết

đó thì đòi hỏi phải có một đội ngũ cán bộ có đủ chuyên môn, có đủ trình độ để phân tích hệ thống quản lý một cách đầy đủ, chi tiết mà không bị thiếu sót hay thừa thông tin Từ đó thiết kế hệ thống thành những chương trình thuận tiện trong quá trình làm việc như: tìm kiếm, nhập liệu, thống kê,…

Ở nước ta, ứng dụng công nghệ thông tin vào các lĩnh vực quản lý đang từng bước được triển khai Đặc biệt, với việc chuyển đổi đào tạo theo học chế tín chỉ thì việc ứng dụng công nghệ thông tin là hết sức cần thiết để đáp ứng yêu cầu quản lý việc dạy và học theo đặc thù của hệ thống đào tạo này, điển hình là hệ thống quản lý điểm

Hiện nay, trường Cao đẳng Giao thông vận tải II đã áp dụng hình thức đào tạo theo hệ thống tín chỉ, đòi hỏi quản lý kết quả học tập phức tạp hơn (xét học bổng, xét học tiếp, xét nhận đồ án, khóa luận tốt nghiệp, thang điểm

4, thang điểm chữ, ) Tuy nhiên việc cập nhật điểm còn thủ công, mất rất nhiều thời gian và dễ xảy ra sai sót Quy trình công bố điểm còn phức tạp, qua nhiều công đoạn Thời gian xử lý, truy xuất dữ liệu của hệ thống còn chậm trễ gây mất thời gian, ảnh hưởng tới công việc của phòng Đào tạo

Vì những lý do như trên, tôi đề xuất chọn đề tài luận văn cao học:

“Ứng dụng công nghệ Node.js và React.js để tối ưu hệ thống quản lý điểm tại trường Cao đẳng Giao thông vận tải II”

2 Mục đích của luận văn

- Ứng dụng công nghệ mới nhằm mục đích tối ưu hệ thống quản lý điểm;

- Đề xuất giải pháp góp phần tối ưu hiệu năng của hệ thống quản lý điểm, giải quyết tình trạng sai sót trong việc nhập liệu thủ công, giảm thiểu đáng kể thời gian nhập liệu, xử lý dữ liệu;

- Xây dựng cơ sở khoa học trong vấn đề cải thiện hiệu năng và xử lý dữ liệu của các hệ thống cũ

3 Đối tượng nghiên cứu

- Người sử dụng (chuyên viên phòng Đào tạo, phòng Công tác Học sinh - Sinh viên, sinh viên, ), người quản lý (quản trị mạng);

- Công nghệ Node.js, React.js, và mô hình Flux;

- Cơ sở dữ liệu MongoDB;

- Các công cụ hỗ trợ

4 Phạm vi nghiên cứu

Đề tài thực hiện khảo sát quy trình quản lý điểm tại trường Cao đẳng Giao thông vận tải II

5 Phương pháp nghiên cứu

Chúng tôi nghiên cứu các tài liệu về cơ sở lý thuyết bao gồm các tài liệu về Node.js, React.js, MongoDB và các tài liệu liên quan đến một số

nghiên cứu khác Chúng tôi sử dụng hệ thống quản lý điểm có sẵn, so sánh thời gian xử lý, tốc độ truy xuất dữ liệu với hệ thống dùng công nghệ Node.js, React.js để rút ra kết luận tối ưu

6 Ý nghĩa khoa học, thực tiễn của đề tài

Xây dựng cơ sở khoa học trong vấn đề cải thiện hiệu năng và xử lý dữ liệu của các hệ thống cũ Về thực tiễn: Đề xuất giải pháp góp phần tối ưu hiệu năng của hệ thống quản lý điểm, giải quyết tình trạng sai sót trong việc nhập liệu thủ công, giảm thiểu đáng kể thời gian nhập liệu, xử lý dữ liệu

7 Bố cục luận văn

Luận văn gồm có ba chương:

- Chương 1: Nghiên cứu tổng quan; Chương này trình bày về khái niệm, lịch sử phát triển, ưu, nhược điểm, kỹ thuật, tính năng và ứng dụng của Node.js, React.js, MongoDB Kiến trúc Flux, thành phần và mô hình hoạt động;

- Chương 2: Phân tích, thiết kế hệ thống; Chương này, tập trung trình bày

về hiện trạng công tác quản lý điểm tại trường Cao đẳng Giao thông vận tải II Trên cơ sở những phân tích, tiến hành xây dựng và thiết kế chương trình

- Chương 3: Giải pháp tối ưu hệ thống Chương này phân tích nguyên nhân làm chậm hệ thống hiện tại đang sử dụng tại trường Cao đẳng Giao thông vận tải II, từ đó tìm ra và lựa chọn giải pháp cải thiện hiệu năng hệ thống thích hợp

CHƯƠNG 1

NGHIÊN CỨU TỔNG QUAN

Chương này trình bày về khái niệm, lịch sử phát triển, ưu, nhược điểm, kỹ thuật, tính năng và ứng dụng của Node.js; Tổng quan về React.js về các vấn đề khái niệm, lịch sử phát triển, ưu, nhược điểm, tính năng, cấu trúc, thành phần của React.js; Kiến trúc Flux, thành phần và mô hình hoạt động; Tổng quan về cơ sở dữ liệu NoSQL và MongoDB, một số đặc trưng của MongoDB

1.1 TỔNG QUAN VỀ NODE.JS

1.1.1 Khái niệm

Node.js là ứng dụng mã nguồn mở, cho phép vận hành trên nhiều phần cứng khác nhau; được cài đặt trên nhiều Hệ điều hành

Ứng dụng Node.js được viết bằng JavaScript, và có thể hoạt động như

OS X, Microsoft Windows, Linux và FreeBDS

Node.js thiết kế theo hướng sự kiện và non-block I/O API, tối ưu hoá thông lượng của ứng dụng và cho phép mở rộng cao Những công nghệ này được sử dụng cho các ứng dụng thời gian thực (real-time applications) như ứng dụng chat, mạng xã hội,…

Node.js sử dụng Google V8 JavaScript engine để biên dịch ra mã thực thi, và các module cơ bản được tách thành từng phần và được xây dựng bằng JavaScript Node.js có một thư viện cho phép các ứng dụng hoạt động như một máy chủ Web mà không cần phần mềm biên dịch Nginx, Apache HTTP Server hoặc IIS,…

Node.js được sử dụng làm nền tảng server-side cho các website để cung cấp các dịch vụ cho khách hàng của các công ty như: Groupon, SAP, LinkedIn, Microsoft, Yahoo!, Walmart, Rakuten và PayPal

1.1.2 Lịch sử phát triển

Node.js ban đầu được viết vào năm 2009 bởi Ryan Dahl Việc phát hành ban đầu chỉ hỗ trợ Linux Phát triển và bảo trì của nó được dẫn dắt bởi Dahl và sau này được tài trợ bởi Joyent

Trong tháng 6 năm 2011, Microsoft và Joyent thực hiện một bản riêng của Windows phiên bản của Node.js Node.js đầu tiên xây dựng hỗ trợ Windows được phát hành vào tháng 7 năm 2011

Vào tháng 01 năm 2012, Dahl bước sang một bên, thúc đẩy đồng nghiệp và NPM tác giả Isaac SCHLUETER để quản lý dự án

Vào tháng 01 năm 2014, SCHLUETER thông báo Timothy J Fontaine

sẽ là trưởng dự án mới

Vào tháng 9 năm 2015, Node.js v0.12 và io.js v3.3 đã được sáp nhập lại với nhau thành Node v4.0 Điều này mang động cơ V8 ES6 tính năng vào Node.js, và một chu kỳ hỗ trợ phát hành dài hạn

1.1.3 Ưu điểm của Node.js

- JSON APIs

Với cơ chế event-driven, non-blocking I/O(Input/Output) và mô hình kết hợp với Javascript là lựa chọn cho các dịch vụ Webs làm bằng JSON

- Ứng dụng trên một trang( Single page Application)

Nếu viết một ứng dụng thể hiện trên một trang, Node.js phù hợp để làm Với khả năng xử lý nhiều Request/s đồng thời thời gian phản hồi nhanh Các ứng dụng viết không muốn nó tải lại trang, gồm rất nhiều request từ người dùng cần sự hoạt động nhanh để thể hiện sự chuyên nghiệp thì Node.js

là lựa chọn tốt

- Shelling tools unix

Node.js có thể xử lý hàng nghìn Process và trả ra một luồng khiến cho hiệu suất hoạt động đạt mức tối đa

- Streamming Data (Luồng dữ liệu)

Các web thông thường gửi HTTP request và nhận phản hồi lại (Luồng

dữ liệu) Giả sử sẽ cần xử lý một luồng dữ liệu cực lớn, Node.js sẽ xây dựng các Proxy phân vùng các luồng dữ liệu để đảm bảo tối đa hoạt động cho các luồng dữ liệu khác

- Ứng dụng Web thời gian thực

Với sự ra đời của các ứng dụng di động và HTML 5 nên Node.js rất hiệu quả khi xây dựng những ứng dụng thời gian thực (real-time applications) như ứng dụng chat, các dịch vụ mạng xã hội như Facebook, Twitter,…

b Các khuyến cáo khi sử dụng Node.js

Hạn chế sử dụng Node.js khi:

- Xây dựng các ứng dụng hao tốn tài nguyên: Khi muốn viết một chương trình convert video, Node.js hay bị rơi vào trường hợp thắt cổ chai khi làm việc với những file dung lượng lớn;

- Một ứng dụng chỉ toàn CRUD: Node.js không nhanh hơn PHP khi làm các tác vụ mang nặng tính I/O như vậy Ngoài ra, với sự ổn định lâu dài của các webserver script khác, các tác vụ CRUD đã được tối ưu hóa;

- Và khi chưa hiểu hết về Node.js thì sẽ gặp nhiều khó khăn Với phần lớn các API hoạt động theo phương thức non-blocking/async việc không hiểu

rõ vấn đề sẽ làm cho việc xuất hiện những error không biết nó xuất phát từ đâu? Và khi cộng đồng Node.js chưa đủ lớn mạnh, và sẽ ít có sự hỗ trợ từ cộng đồng [7]

1.1.4 Kỹ thuật của Node.js

Tác giả của Node.js ban đầu có mục đích tạo ra các trang web với khả năng push như trong Gmail Sau khi thử và tìm giải pháp bằng một số ngôn ngữ lập trình khác, ông đã chọn JavaScript vì khả năng bất đồng bộ của nó Trong Node.js, tất cả các I/O được thực hiện theo cách không đồng bộ (asynchronous) và non-blocking, kết hợp với vòng lặp dựa trên sự kiện đơn luồng, đưa ra một cách mới để thực hiện các ứng dụng Web thời gian thực Node.js do đó có thể giữ nhiều kết nối có hiệu lực mà không cần phải từ chối kết nối mới đến

Ứng dụng Node.js thường chạy đơn luồng, mặc dù thực hiện đa luồng được hỗ trợ trên Node.js 0.10+ từ JXcore

Kỹ thuật web truyền thống yêu cầu mỗi kết nối (theo yêu cầu) để tạo ra một thread mới, chiếm RAM hệ thống và cuối cùng là hết RAM nếu có nhiều truy vấn Node.js thì khác, nó hoạt động trên single-thread, sử dụng non-blocking I/O, cho phép hỗ trợ hàng chục ngàn kết nối đồng thời (concurrent connections), mà không lo lắng về giới hạn bộ nhớ RAM

1.1.5 Các đặc tính của Node.js

- Không đồng bộ: Tất cả các API của Node.js đều không đồng bộ

(none-blocking), chủ yếu dựa trên nền của Node.js Server và chờ đợi Server

trả dữ liệu về Việc di chuyển máy chủ đến các API tiếp theo sau khi gọi và

cơ chế thông báo các sự kiện của Node.js giúp máy chủ để có được một phản ứng từ các cuộc gọi API trước (Realtime);

- Tăng tốc độ: Node.js được xây dựng dựa vào nền tảng V8 Javascript

Engine nên việc thực thi chương trình nhanh;

- Đơn luồng: Node.js sẽ không respond tới bất kỳ 1 request khác đến

từ các clients, vì nó chỉ có 1 luồng để thực thi đoạn mã, dù có gia tăng thêm

CPU nó vẫn tiếp tục block các requests đến khác

- Khả năng mở rộng cao: Node.js được viết bằng JavaScript, là một hệ

thống phần mềm viết các ứng dụng internet có khả năng mở rộng, chủ yếu là web server Nodejs sử dụng kỹ thật điều khển theo sự kiện, nhập/xuất không đồng bộ để tối tiểu tổng chi phí và tối đại khả năng mở rộng

- Không đệm: Node.js không đệm bất kì một dữ liệu nào và các ứng

dụng này chủ yếu là đầu ra dữ liệu;

- Có giấy phép: Node.js đã được cấp giấy phép bởi MIT License [13]

1.1.6 Các thành phần của Node.js

- Websocket server (Chat server);

- Hệ thống Notification (Giống như facebook hay Twitter);

- Ứng dụng upload file trên client;

- Các dịch vụ máy chủ quảng cáo;

- Các ứng dụng dữ liệu thời gian thực khác

1.1.7 Cài đặt Node.js

Bước 1: Download Nodejs ở https://nodejs.org/en/, nên dùng phiên bản

v4.4.5 với Hệ điều hành 64 bit được mô tả theo Hình 1.1

Bước 2: Cài đặt

Hình 1.1: Phiên bản cài đặt và hệ điều hành khuyên dùng

Ấn Next để cài đặt

Hình 1.2: Cài đặt Node.js

Tích vào đồng ý và ấn Next để cài đặt

Chọn đường dẫn để cài đặt

Chọn các tính năng cần cài đặt

Nhấn Install để thực hiện cài đặt

Hình 1.3: Hoàn tất cài đặt

Nhấn Finish để hoàn tất

Để kiểm tra đã cài thành công hay chưa vào cửa sổ cmd, tới thư mục cài đặt trong C:\Program Files\nodejs, và chạy dòng lệnh node -v để kiểm tra phiên bản cài đặt

1.2 TỔNG QUAN VỀ REACT.JS

1.2.1 Khái niệm

React là một JavaScript framework để xây dựng giao diện người sử dụng (User interface) của ứng dụng

Với tư tưởng rất đơn giản:

- Mỗi thành phần của React là một hàm: Dễ chia nhỏ dự án, làm Unit test,…;

- Luồng dữ liệu một chiều: Khi cần thay đổi dữ liệu của một thành phần, phải sử dụng setState hoặc các setter tương đương [8]

1.2.2 Lịch sử phát triển

Vào năm 2010, Facebook đã release một phiên bản mở rộng cho PHP gọi là XHP XHP được xây dựng với mục đích chủ yếu nhằm hạn chế lỗi bảo

mật XSS (Cross Site Scripting) Đó là lỗi mà lập trình viên echo trực tiếp các giá trị mà người dùng nhập vào không thông qua mã hoá Thông thường, các hacker sẽ nhập các đoạn Javascript vào, rồi sử dụng trang web đã được nhúng

mã đó để đánh cắp thông tin của người dùng mở trang đó lên Và XHP đã giúp lập trình viên dễ dàng loại bỏ những input nguy hiểm đó

XHP đã trở nên rất hữu dụng cho Facebook khi đó Tuy nhiên, có một vấn đề mà XHP chưa giải quyết được: đó là những ứng dụng web client thường xuyên phải tương tác với server Nếu làm theo cách truyền thống thì rất phức tạp, đặc biệt với những trang có rất nhiều biểu mẫu như Facebook Ads Group Và rồi một kĩ sư của Facebook đã mang XHP lên browser bằng cách sử dụng Javascript Và sau 6 tháng công việc của kĩ sư đó đã hoàn thành,

và thành quả là React.js

Sau khi ra đời, React.js đã trở nên phổ biến nhờ hiệu năng tốt cũng như cấu trúc rất rõ ràng, dễ phát triển, bảo trì Việc tương tác với DOM là một việc tốn rất nhiều tài nguyên xử lý Tức là nếu thay đổi nội dung các DOM node thì browser cần phải render nó lại, và việc đó vốn nặng nề, đặc biệt với các web application phức tạp, có hàng ngàn elements Và React.js là framework đầu tiên đã đi theo lối tiếp cận: nếu tối ưu được việc xử lí DOM thì sẽ tạo ra được một library có hiệu năng tốt Giải pháp của nó là lưu lại trạng thái (state) của application, và chỉ render ra browser khi state thay đổi Lập trình viên tương tác với React.js bằng cách đưa ra những state cần thay đổi và React.js sẽ tối ưu render

1.2.3 Ưu, nhược điểm của React.js

React.js thực sự hữu dụng khi dữ liệu thay đổi liên tục: Với những ứng dụng Javascript truyền thống, cần phải theo dõi xem dữ liệu nào đã thay đổi, rồi thay đổi DOM tương ứng để đảm bảo nó luôn cập nhật React.js tiếp cận theo một hướng khác Khi một component được khởi tạo, phương thức render

được gọi để tạo ra một lightweight representation cho view Khi dữ liệu thay đổi, phương thức render lại được gọi Và để tối ưu, React.js so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước, và cập nhật ít thay đổi nhất đến DOM

a Ưu điểm của React.js

- Sẽ luôn luôn biết được component sinh ra mã HTML như thế nào chỉ bằng việc nhìn vào một file source

Điều này có thể là ưu điểm lớn nhất, ngay cả khi Angular cũng có ưu điểm này Giả sử phải cập nhật header website với tên của user đang đăng nhập Nếu không sử dụng bất kỳ Javascript MVC framework nào, có thể sẽ làm nó như sau:

Đoạn mã này quá phức tạp Làm thế nào để debug được output? Ai đã update header? Liệu có ai khác có thể truy nhập đến header? Ai mới là người quyết định tên của user được hiển thị là đúng?

Với yêu cầu như trên, có thể viết nó với React.js như sau:

Có thể biết ngay được component trên sẽ render ra mã HTML như thế nào Nếu biết trạng thái (state), thì sẽ biết output được render và không phải lần theo luồng chương trình để hiểu nó đang làm gì

- Tích hợp giữa javascript và HTML vào trong JSX làm cho các component dễ hiểu hơn Theo truyền thống thường tách các file HTML và các function Javascript thành các file riêng rẽ, điều này dẫn đến các file Javascript

sẽ chứa tất cả function cho một "page", do đó để hiểu được luồng làm việc của chương trình sẽ phải đọc code từ JS > HTML > JS > HTML Việc chèn các đoạn mã js trực tiếp vào các file markup và sau đó đóng gói chúng lại dưới dạng có thể "portable" được

- Có thể render React.js phía server

Việc chỉ render phía client lý giải tại sao các website như Soundcloud rất chậm, trong khi đó Stack Overflow (chỉ render phía server)lại rất nhanh React.js cho phép làm được điều đó

b Nhược điểm của React.js

React.js chỉ phục vụ cho tầng View (V trong mô hình MVC) React.js thường được so sánh với vai trò tương đương như các Javascript framework khác, nhưng việc so sánh giữa React.js và Angular thực sự không có ý nghĩa, bởi chúng sinh ra để đảm nhiệm những vai trò khác nhau Angular là một framework hoàn chỉnh còn React.js thì không Điều này lý giải tại sao thường gây ra một số hiểu lầm về React.js, bởi React.js thường được tích hợp trong các framwork hoàn chỉnh, nhưng nó chỉ phục vụ cho tầng view

React.js cung cấp một ngôn ngữ tạo template và các function nhằm render ra các mã HTML HTML là tất cả những gì mà React.js có thể output

ra Các đoạn mã HTML/Javascript được gọi là các "Component" nếu có khả năng lưu trữ các trạng thái (State) của chính nó trong bộ nhớ (ví dụ như tab

nào được chọn trong một loạt các tab trên giao diện), nhưng chúng cũng chỉ sinh ra mã HTML Vì thế, React.js có những nhược điểm sau:

- Nếu chỉ dùng React.js đứng một mình, nó vô dụng đối với các yêu cầu thực tế;

- Tài liệu nghèo nàn;

- React.js khá nặng nếu so với các framework khác

1.2.4 Tính năng

- Được dùng để tạo ra các giao diện cho người dùng (user interface) nhằm giải quyết các vấn đề khi phát triển các ứng dụng đơn trang ( Single-Page Applications viết tắt là SPAs);

- SPAS là web app mà chỉ load một trang HTML và tự động update content khi người dùng tương tác nó;

- Được sử dụng để xây dựng các ứng dụng lớn mà có dữ liệu thay đổi theo thời gian;

- React.js chỉ xử lý User Interface trong ứng dụng, nó chỉ được xem như là View trong mô hình thiết kế MVC;

- React.js có thể kết hợp được với các thư viện Js khác hoặc các framework lớn hơn như AngularJS

1.2.5 Cấu trúc, thành phần trong React.js

a Components

Trong React.js sử dụng khái niệm Component Mọi thứ trong React.js đều có thể coi là Component Việc này giúp cho React.js thực hiện tốt các nguyên tắc trong OOP như:

b Virtual DOM

Hình 1.4: Công nghệ Virtual DOM

Đây là công nghệ DOM ảo được React.js sử dụng nhằm tăng hiệu năng

sử dụng, tối ưu việc update UI khi có sự thay đổi về dữ liệu Có thể hiểu Virtual DOM là một bản sao của DOM Khi ứng dụng hoạt động, các thay đổi trên DOM sẽ được tính toán trước trên DOM ảo, phân tích và tối ưu sau đó mới update DOM Việc này giúp cho sự thay đổi trên DOM là hạn chế nhất

có thể Do đó tăng hiệu năng của ứng dụng

c Javascript Syntax Extension

Đây là một syntax extension của Javascript Dùng để viết Javascript với những tag giống như XML (XML-like) Về bản chất, các tag thực sự là những lời gọi hàm, sẽ được chuyển đổi trong React code và end up dưới dạng HTML

và Javascript trong cây DOM Có thể hiểu nó giống như là HTML/XML với một số khả năng khác

d Dòng dữ liệu

React.js sử dụng cơ chế one-way data binding – luồng dữ liệu một chiều Dữ liệu được truyền từ parent đến child thông qua props Luồng dữ liệu đơn giản giúp chúng ta dễ dàng kiểm soát cũng như sửa lỗi [10]

Hình 1.5: Luồng dữ liệu một chiều

1.3 TỔNG QUAN VỀ KIẾN TRÚC FLUX

1.3.1 Khái niệm

Vào năm 2013, Facebook giới thiệu một Framework Javascript hoàn toàn mới, một Framework giúp tạo ra các Single Page Application dễ hơn, nó mang tên React Khi sử dụng React cho service có thể sử dụng React đơn thuần mà không cần đến thành phần M hay C Tuy nhiên, khi Application phát triển và phình to lên, sẽ khó để debug cũng như kiểm soát code nếu nó không được tổ chức tốt

Một trong những cách đó là sử dụng kết hợp React kết hợp với các MVC Framework khác, chẳng hạn như Backbone, hay thậm chí là Angular

Và trong sự kết hợp đó React đóng vai trò của phần View

Cuối tháng 4/2014, Tom Occhino, Facebook đã chia sẻ khi codebase và

sự tổ chức code được mở rộng thì mô hình MVC "trở nên cực kỳ phức tạp một cách cực kỳ nhanh chóng" (Nguyên văn: MVC got really complicated

really quickly) Ông đưa ra một nhận xét, gây khá nhiều tranh cãi: "MVC DOESN'T SCALE"

Facebook cũng đã lần đầu tiên giới thiệu một giải pháp cho vấn đề sử dụng React một cách hiệu quả Đó là đề xuất một kiến trúc mới, với tên gọi Flux Theo Facebook thì Flux sẽ giúp cho lượng code đồ sộ của họ trở nên dễ hiểu hơn, dễ debug hơn, và "có thể đoán biết được" (predictable)

Flux là một kiến trúc phát triển ứng dụng mà Facebook dùng để xây dựng phần client-side cho những ứng dụng web Flux giúp làm việc với các components của React bằng cách sử dụng luồng dữ liệu một chiều (Unidirectional Data Flow) Flux chỉ là một khái niệm, nó không phải là một thư viện

1.3.2 Cấu trúc của Flux

Mô hình "Flux" được giải thích như sau: khi view kích hoạt một sự kiện, sự kiện này sẽ cập nhật lại model, sau đó model sẽ kích hoạt một sự kiện tương ứng, sau đó view sẽ phản hồi lại sự kiện của model này bằng cách render lại trang với dữ liệu mới nhất Luồng dữ liệu được chảy theo một chiều dựa vào thiết kế 2 pattern observer tách rời nhau luôn đảm bảo dữ liệu chính xác sẽ được lấy từ model

Hình 1.6: Sơ đồ chung về quan hệ giữa các thành phần trong Flux

Flux gồm các thành phần cơ bản sau:

- API (Application Programming Interface): là một giao diện mà một hệ thống máy tính hay ứng dụng cung cấp để cho phép các yêu cầu dịch vụ có thể được tạo ra từ các chương trình máy tính khác, cho phép dữ liệu có thể được trao đổi qua lại;

- Action: là nơi đăng ký các hàm sẽ được view gọi đến;

- Dispatcher: là nơi trung chuyển, đóng vai trò truyền các lời gọi từ Action đến với Store Khi một Action được gọi, Dispatcher sẽ broadcast một event đến với tất cả các Store, với các thông tin về Action Type, hay các data cần thiết;

- Store: là nơi lưu trữ dữ liệu, cũng là nơi có thể thực hiện việc thêm, sửa, xoá dữ liệu Store sẽ lắng nghe các event được truyền đến từ Action thông qua Dispatcher, kiểm tra xem event đó có thuộc quyền xử lý không, và thực hiện những thay đổi dữ liệu cần thiết, tương ứng với từng event Sau khi thay đổi dữ liệu, Store sẽ phát ra một event khác, không báo về sự thay đổi;

- View: View lấy dữ liệu được cung cấp bởi Store, và có nhiệm vụ hiển thị những dữ liệu đó Ngoài ra View lắng nghe event từ Store, mỗi khi Store

có sự thay đổi, View tự động được render lại với dữ liệu mới nhất Khi user tương tác với View và có phát sinh sự thay đổi dữ liệu, View sẽ gọi đến Action cần thiết, để Action thực hiện tiếp nhiệm vụ của mình [11]

1.3.3 Dòng dữ liệu

Flux được thiết kế bởi rất nhiều những quy tắc khắt khe liên quan đến Data Flow nhằm đảm bảo thiết kế "một chiều" (Unidirectional Flow)

Mọi thay đổi, hay các Action đều phải đi qua Dispatcher

Store chỉ public hàm getter, chứ không public hàm setter Những xử lý thay đổi dữ liệu chỉ có thể được gọi bên trong chính Store đó mà thôi Điều này đồng nghĩa với việc:

- Không thể thay đổi dữ liệu trong Store trực tiếp từ View;

- Không thể thay đổi dữ liệu trong một Store này từ một Store khác vì Store không cung cấp hàm setter cho một đối tượng nào khác gọi Để thực hiện việc đó phải thông qua Action và Dispatcher

Tính chất trên khiến cho dữ liệu bên trong Store trở nên dễ quản lý, và khi có sự thay đổi ta có thể dễ debug xem thay đổi đó đến từ đâu

Thiết kế Unidirectional Data Flow của Flux phù hợp với thiết kế ràng buộc dữ liệu một chiều của React Nếu như ở các Javascript Framework nổi tiếng khác như AngularJS, EmberJS khác thì liên kết dữ liệu hai chiều luôn được quảng cáo như một trong những tính năng chủ chốt ở Facebook, các kỹ sư lại không nghĩ rằng đó là một ý hay cho hệ thống Bởi họ cho rằng liên kết dữ liệu hai chiều sẽ kiến cho "một object update sẽ kéo theo nhiều objects khác update, và từ đó lại trigger thêm nhiều update khác" Với thiết kế Unidirectional Flow, khi mà mọi thay đổi đều đi qua Dispatcher, có thể dễ

dàng nắm rõ được một thay đổi đó đến từ đâu, và hệ thống sẽ trở nên dễ dự đoán [9]

1.3.4 Sự khác biệt của Flux so với MVC

Thứ nhất, ở Data Flow, Flux là kiến trúc chỉ chấp nhận Unidirectional Data Flow Ngược lại ở MVC có thể thấy một cách thường xuyên những mô hình Bi-directional Data Flow, nơi mà một thay đổi có thể trực tiếp quay lại trigger một thay đổi khác từ nơi gọi đến nó

Thứ hai, Dispatcher không phải là Controller Dispatcher hoàn toàn không chứa business logic Dispatcher chỉ đảm nhiệm vai trò là một "trung tâm điều phối", nơi đưa một action đến với mọi Stores Trong mô hình MVC

có thể thiết kế bao nhiêu Controller cũng được, còn trong Flux, chỉ cần một Dispatcher làm nơi trung chuyển, và mọi action đều đi qua Dispatcher đó Ngoài ra, Controller trong mô hình MVC có thể gửi câu lệnh để thay đổi trạng thái của Model, hay thay đổi View thì Dispatcher hoàn toàn không thể Tuy nhiên sự xuất hiện của Dispatcher là quan trọng bởi nó đảm bảo cho thiết kế Unidirectional Data Flow

Thứ ba, Store có thể không quản lý dữ liệu gì, hoặc có thể quản lý nhiều trạng thái của Application, hay quản lý một lúc nhiều object Trong khi

đó, ở mô hình MVC thì Model thường là sẽ quả lý một object riêng biệt

1.3.5 Implement Flux

Flux vốn không phải là một Framework, mà là một kiến trúc Facebook trình bày những tư tưởng của kiến trúc đó, và ta có thể tự tạo ra một Framework hay Library theo kiến trúc Flux của riêng mình

1.4 TỔNG QUAN VỀ MONGODB

Hệ quản trị cơ sở dữ liệu MongoDB là một mô hình dữ liệu linh hoạt dùng cơ chế NoSQL để truy vấn Không giống như các cơ sở dữ liệu SQL, phải xác định và triển khai sơ đồ của một bảng trước khi chèn dữ liệu,

Collection trong MongoDB linh hoạt, không nhất thiết phải cho biết những thuộc tính có trong Collection, khi nào cần bổ sung sau vẫn được Sự linh hoạt này tạo điều kiện cho việc hướng tới một cách lưu trữ như một thực thể hay một đối tượng Mỗi Document có phù hợp với các trường dữ liệu của Collection chứa nó, ngay cả khi thay đổi gần như toàn bộ dữ liệu

1.4.1 Tìm hiểu cơ sở dữ liệu NoSQL

a Khái niệm NoSQL

NoSQL là Non-Relational: tạm dịch là không có quan hệ NoSQL là cơ

sở dữ liệu không quan hệ, ràng buộc giữa các Collection (hay còn gọi là bảng trong cơ sở dữ liệu bình thường) Tức là giữa các Collection (Bảng) sẽ không

có khóa chính, khóa ngoại như trong cơ sở dữ liệu bình thường Việc này sẽ giảm bớt rối khi cơ sở dữ liệu có nhiều bảng NoSQL nhấn mạnh đến mô hình lưu trữ cặp giá trị - khóa và hệ thống lưu trữ phân tán [25]

b Ưu, nhược điểm của CSDL NoSql

* Ưu điểm của NoSQL

- Là mã nguồn mở: không phải mất chi phí và có xu hướng tin cậy, an ninh và nhanh hơn để triển khai so với các hệ quản trị cơ sở dữ liệu độc quyền;

- Linh hoạt trong việc mở rộng và phát triển: Về phía công ty quản lý thì giúp mở rộng máy chủ khi dữ liệu càng ngày càng lớn hoặc lượng truy cập, tải dữ liệu quá lớn, thay vì thuê một máy chủ lớn hơn để thế máy chủ trước thì công ty chỉ cần thuê thêm một máy chủ khác Về phía người lập trình thì giúp thêm Collection (Bảng) hoặc cặp dữ liệu (Cột) Dễ cho việc thống kê, truy vấn nhanh;

- Áp dụng được công nghệ điện toán đám mây: mở rộng phạm vi được theo yêu cầu có sử dụng một dịch vụ như là Amazon EC2 Giống như tất cả công nghệ đám mây, EC2 dựa vào ảo hóa Liên kết yếu của ảo hóa là sự thực