Ứ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

BỘ GIÁO DỤC VÀ ĐÀO TẠO
ĐẠ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


BỘ GIÁO DỤC VÀ ĐÀO TẠO
ĐẠ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


i

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


ii

LỜI CẢM ƠN
Hồ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 q 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 q 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!

iii

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

iv

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

v

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)


vi

DANH MỤC CÁC BẢNG
Số hiệu
bảng

Tên bảng

Trang

1.1

Một số đặc trưng của MongoDB

27

2.1

Bảng ánh xạ các thành phần giữa SQL và MongoDB

40


vii

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

CSDL

Cơ sở dữ liệu

DOM

Document Object Model

ĐA

Đồ án

HK

Học kỳ

HSSV

Học sinh - sinh viên

I/O

Input/Output

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

TBC

Trung bình chung

TBC TL

Trung bình chung tích luỹ

TKM

Tổng kết mơn

XML

eXtensible Markup Language

UI

User Interface

ES6

ECMAScript 6


viii

DANH MỤC CÁC HÌNH
Số hiệu

Tên hình

hình vẽ

Trang

1.1

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

9

1.2

Cài đặt Node.js

10

1.3

Hoàn tất cài đặt

12

1.4

Công nghệ Virtual DOM

17

1.5

Luồng dữ liệu một chiều

18

1.6

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

20

2.1

Sơ đồ quản lý điểm sinh viên

33

2.2

Thực thể SECTORS

36

2.3

Thực thể CLSS

37

2.4

Thực thể STUDENTS

37

2.5

Thực thể SUBJECTS

38

2.6

Thực thể MARKS

39

2.7

Mơ hình thực thể kết hợp

39

2.8

Mơ hình cơ sở dữ liệu quan hệ

40

2.9

Giao diện đăng nhập

41

2.10

Quản lý sinh viên

42

2.11

Quản lý môn học

42

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.1

Mơ hình mẫu 1

46


ix

3.2
3.3

So sánh chức năng Insert giữa SQL và MongoDB
So sánh tốc độ truy vấn từ cùng đối tượng khác nhau
trong trường ID của mỗi bản ghi

47
48

3.4

Mơ hình mẫu 2

49

3.5

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

49

3.6

Blocking và Non-Blocking

51


1

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 u cầu cấp thiết
đó thì địi hỏi phải có một đội ngũ cán bộ có đủ chun 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


2

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 (chun 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ố


3

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.


4

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 hố

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,…


5

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

a. Ưu điểm
- Đặc điểm nổi bật của Node.js là nhận và xử lý nhiều kết nối chỉ với
một single-thread.
Điều này giúp hệ thống tiết kiệm được bộ nhớ và phát huy hiệu quả cao
khi không phải tạo thread mới cho mỗi truy vấn giống PHP; và tận dụng ưu
điểm non-blocking I/O của Javascript để Node.js tận dụng tối đa tài nguyên
của server giảm việc tạo ra độ trễ.


6

- 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;


7

- Một ứng dụng chỉ tồ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 nonblocking 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


8

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 ở 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.


9

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.


10

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.


11

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

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

12

Hình 1.3: Hồn tất cài đặt
Nhấn Finish để hồ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


13

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ã hố. 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ư đó đã hồ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ó ln 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


14

đượ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: