đồ án 1 tìm hiểu flutter

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b>ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH</b>

<b>TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TINKHOA CƠNG NGHỆ PHẦN MỀM </b>

<b>BÁO CÁO CUỐI KỲ MÔN HỌC ĐỒ ÁN 1</b>

<b>TÌM HIỂU FLUTTER </b>

<b>GIẢNG VIÊN HƯỚNG DẪN: THS. NGUYỄN CÔNG HOAN </b>

<b>NHÓM SINH VIÊN THỰC HIỆN: NGUYỄN ĐỨC PHƯƠNG - 21521307 </b>

<b>LÂM GIA KHÁNH - 19521678 </b>

<b>TP. HỒ CHÍ MINH, 2023</b>

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

ii

<b>LỜI CẢM ƠN </b>

Trong suốt quá trình thực hiện Đồ án 1 với đề tài "Tìm hiểu Flutter", chúng em đã nhận được rất nhiều sự giúp đỡ, đóng góp ý kiến và chỉ bảo nhiệt tình của thầy Th.S Ngũn Cơng Hoan, giảng viên hướng dẫn của chúng em.

Thầy Hoan đã dành rất nhiều thời gian và tâm huyết để hướng dẫn nhóm em trong suốt q trình thực hiện đồ án. Thầy đã giúp em định hướng đề tài, xây dựng kế hoạch, dàn bài, triển khai các chức năng của hệ thống và hoàn thiện đồ án. Thầy cũng đã đưa ra rất nhiều góp ý quý báu về ý nghĩa mà đồ án này mang lại, từ đó cho tụi em đợng lực q báu để hoàn thiện đồ án này.

Em xin chân thành cảm ơn thầy Hoan đã luôn đồng hành, hỗ trợ và giúp đỡ chúng em trong suốt quá trình thực hiện đồ án. Chúng em cũng xin cảm ơn các thầy cô trường Đại học Công nghệ Thông tin đã giảng dạy và truyền đạt cho chúng em những kiến thức quý báu trong suốt quá trình học tập tại trường.

Trong quá trình thực hiện đồ án có thể khơng tránh khỏi được sai sót, chúng em kính mong nhận được sự góp ý, hướng dẫn của quý thầy cô, đặc biệt là thầy Hoan để có thể hồn thiện đồ án hơn nữa, và em cũng mong muốn được tiếp tục đồng hành cùng thầy Hoan trong những đồ án tiếp theo.

Chúng em xin gửi lời cảm ơn chân thành nhất đến thầy

TP.HCM, ngày 30 tháng 12 năm 2023Nhóm sinh viên thực hiện.

Nguyễn Đức Phương Lâm Gia Khánh

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

1.2.1. Thời kỳ desktop applications ... 3

1.2.2. Thời kỳ web applications ... 3

1.2.2.1. Thời kỳ JavaScript ... 3

1.2.2.2. Sự phát triển của CSS ... 5

1.2.2.3. Cách mạng jQuery ... 6

1.2.3. Thời kỳ mobile applications ... 7

1.2.4. Thời kỳ cross platform applications ... 8

1.2.5. Thời kỳ progressive web applications ... 9

1.2.6. Thời kỳ responsive design ... 10

1.2.7. Framework trỗi dậy ... 10

1.4.2. Các framework Frontend phổ biến ... 14

1.5.Các xu hướng công nghệ phổ biến ... 14

1.5.1. Artificial Intelligence và Machine Learning ... 14

1.5.2. Single-Page Application ... 15

1.5.3. Progressive Web Apps ... 15

1.5.4. Serverless Architecture ... 16

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

iv

1.5.5. Server-Side Rendering ... 16

1.5.6. Low Code Development ... 18

1.5.7. Micro Front End Architecture... 19

1.5.8. GraphQL ... 19

1.5.9. Mobile-First Approach ... 21

1.5.10.Voice User Interface ... 21

Chương 2.CÁC KIẾN TRÚC PHỔ BIẾN ... 23

2.1.MVC ... 23

2.1.1. Khái niệm ... 23

2.1.2. Cấu trúc mơ hình MVC ... 23

2.1.3. Hoạt đợng của mơ hình MVC ... 23

2.1.4. Lợi ích của việc sử dụng mơ hình MVC... 25

2.1.5. Các ngơn ngữ và framework sử dụng mơ hình MVC... 26

2.1.6. Tổng kết ... 27

2.2.MVP ... 27

2.2.1. Khái niệm ... 27

2.2.2. Cấu trúc của mơ hình MVP ... 27

2.2.3. Hoạt đợng của mơ hình MVP ... 28

2.2.4. Sự khác biệt giữa MVC và MVP ... 28

2.2.5. Lợi ích của việc sử dụng mơ hình MVP ... 30

2.2.6. Các ngơn ngữ và framework sử dụng mơ hình MVP ... 30

2.2.7. Tổng kết ... 30

2.3.MVVM ... 31

2.3.1. Khái niệm ... 31

2.3.2. Cấu trúc của mơ hình MVVM ... 31

2.3.3. Hoạt đợng của mơ hình MVVM ... 31

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

v

2.3.4. Sự khác biệt giữa MVC/MVP và MVVM ... 32

2.3.5. Lợi ích của việc sử dụng mơ hình MVVM ... 33

2.3.6. Các ngơn ngữ và framework sử dụng mơ hình MVVM ... 33

2.3.7. Tổng kết ... 33

2.4.Component-based ... 34

2.4.1. Khái niệm ... 34

2.4.2. Cấu trúc của mơ hình component-based ... 34

2.4.3. Hoạt đợng của mơ hình component-based ... 35

2.4.4. Lợi ích của việc sử dụng mơ hình component-based ... 35

2.4.5. Các ngơn ngữ và framework sử dụng mơ hình component-based ... 35

2.4.6. Tổng kết ... 36

2.5.Micro Frontend ... 36

2.5.1. Khái niệm ... 36

2.5.2. Cấu trúc của mơ hình micro Frontend ... 36

2.5.3. Hoạt đợng của mơ hình micro Frontend ... 36

2.5.4. Lợi ích của việc sử dụng mơ hình micro Frontend ... 37

2.5.5. Các cơng nghệ và framework sử dụng mơ hình micro Frontend ... 37

2.5.6. Tổng kết ... 37

2.6.Kiến trúc Flux ... 38

2.6.1. Khái niệm ... 38

2.6.2. Cấu trúc của kiến trúc Flux ... 38

2.6.3. Hoạt động của kiến trúc Flux ... 40

2.6.4. Lợi ích của việc sử dụng kiến trúc Flux ... 40

2.6.5. Các công nghệ và framework sử dụng kiến trúc Flux ... 40

2.6.6. Tổng kết ... 40

2.7.Kiến trúc Redux ... 41

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

vi

2.7.1. Khái niệm ... 41

2.7.2. Cấu trúc của kiến trúc Redux ... 41

2.7.3. Hoạt động của kiến trúc Redux... 42

2.7.4. So sánh kiến trúc Redux so với kiến trúc Flux ... 43

2.7.5. Các công nghệ và framework sử dụng kiến trúc Redux ... 43

2.7.6. Tổng kết ... 43

Chương 3.CÁC VẤN ĐỀ CƠ BẢN CỦA FRONTEND ... 45

3.1.Hiển thị UI (UI Rendering) ... 45

3.1.1. Định nghĩa ... 45

3.1.2. Phương thức xử lý ... 45

3.1.3. UI Rendering trong React ... 45

3.1.3.1. React Components ... 45

3.1.3.2. React Virtual DOM ... 46

3.1.4. UI Rendering trong Flutter ... 47

3.1.4.1. Flutter Widget ... 47

3.1.4.2. Flutter Render ... 47

3.2.Tương tác UI ... 48

3.2.1. Giải quyết vấn đề ... 48

3.2.2. Tương tác trong React... 49

3.2.3. Tương tác trong Flutter ... 50

3.3.Form Validation ... 51

3.3.1. Vấn đề ... 51

3.3.2. Cách giải quyết ... 51

3.3.3. Form Validation với React ... 52

3.3.4. Form Validation với Flutter ... 54

3.4.Tạo Frontend động (dynamic form) ... 55

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

vii

3.4.1. Mô tả ... 55

3.4.2. Công nghệ BEEKAI ... 55

3.4.2.1. Form Builder ... 56

3.4.2.2. Xây dựng form với nhiều bước (multi-step form builder) ... 58

3.4.2.3. Theo dõi hồ sơ (Submission) ... 60

3.4.3. Công nghệ React-hook ... 61

3.4.3.1. Khái niệm ... 61

3.4.3.2. Các loại React Hooks ... 61

Chương 4.KHÁI QUÁT VỀ FLUTTER ... 63

4.7.1. Refactor mã thành Widget thay vì phương thức ... 71

4.7.2. Kiểm sốt chi phí phương thức build ... 72

4.7.3. Sử dụng state management ... 72

4.7.4. Xác định rõ ràng kiến trúc ... 72

4.7.5. Tuân theo Dart style guide ... 74

4.7.6. Lựa chọn Package kỹ càng ... 74

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

viii

4.7.7. Hạn chế sử dụng MediaQuery/LayoutBuilder ... 74

4.7.8. Chỉ sử dụng Streams khi cần thiết ... 74

4.7.9. Sử dụng từ khóa const khi có thể ... 75

4.7.10.Giảm thiểu các hoạt đợng tốn kém ... 75

4.7.11.Sử dụng lazy builder ... 75

4.7.12.Giảm thiểu intrinsic operations ... 76

4.7.13.Sử dụng if thay vì conditional expression ... 76

4.7.14.Sử dụng ?? và ?. operators ... 76

4.7.15.Pitfalls ... 77

4.8.Use cases ... 78

4.8.1. Trường hợp nên sử dụng ... 78

4.8.1.1. Phát triển ứng dụng di động đa nền tảng ... 78

4.8.1.2. Phát triển Web App ... 78

4.8.1.3. Phát triển ứng dụng yêu cầu ổn định cao ... 78

4.8.1.4. MVP development ... 78

4.8.2. Trường hợp không nên sử dụng ... 79

4.8.2.1. Ứng dụng có chức năng phụ tḥc cao đến hệ điều hành ... 79

4.8.2.2. Áp dụng thực tế tăng cường (Augmented Reality) ... 79

4.8.2.3. Khả năng Web hạn chế ... 79

4.9.Study cases ... 79

4.9.1. Social networking ... 79

4.9.2. Ecommerce platforms ... 80

4.9.3. Banking và Decentralized exchanges ... 82

Chương 5.SO SÁNH FLUTTER VỚI REACT NATIVE ... 84

5.1.Ngơn ngữ lập trình ... 84

5.1.1. Dart (Flutter) ... 84

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

5.7.Hỗ trợ tự đợng hóa Build và Release... 93

5.7.1. Flutter Build and Release ... 93

5.7.2. React Native Build and Release... 94

5.7.3. So sánh ... 94

Chương 6.PHÂN TÍCH THIẾT KẾ ỨNG DỤNG ... 96

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

x

6.1.Hiện trạng vấn đề ... 96

6.1.1. Hiện trạng... 96

6.1.2. Phương hướng giải quyết ... 96

6.2.Phân tích yêu cầu ứng dụng ... 96

6.3.Phân tích thiết kế hệ thống ... 97

6.3.1. Biểu đồ Use Case ... 97

6.3.1.1. Danh sách actors ... 99

6.3.1.2. Danh sách Use Case ... 99

6.3.2. Đặc tả Use Case ... 100

6.3.2.1. Đặc tả Use Case đăng ký ... 100

6.3.2.2. Đặc tả Use Case đăng nhập ... 101

6.3.2.3. Đặc tả Use Case đăng xuất ... 102

6.3.2.4. Đặc tả Use Case đăng nhập với Google ... 103

6.3.2.5. Đặc tả Use Case xem danh sách bài đăng ... 105

6.3.2.6. Đặc tả Use Case thêm bài đăng ... 106

6.3.2.7. Đặc tả Use Case yêu thích bài đăng ... 107

6.3.2.8. Đặc tả Use Case xoá bài đăng ... 108

6.3.2.9. Đặc tả Use Case xem danh sách bình luận ... 110

6.3.2.10. Đặc tả Use Case thêm bình luận ... 111

6.3.2.11. Đặc tả Use Case xố bình luận ... 112

6.3.2.12. Đặc tả Use Case chỉnh sửa thông tin tài khoản ... 113

6.3.3. Mơ hình cơ sở dữ liệu ... 114

6.4.Mơ tả giao diện ứng dụng ... 116

6.4.1. Giao diện đăng ký ... 116

6.4.2. Giao diện đăng nhập ... 117

6.4.3. Giao diện trang chủ ... 118

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

xi

6.4.4. Giao diện danh sách bình luận ... 120

6.4.5. Giao diện thêm bài đăng ... 122

6.4.6. Giao diện quản lý thông tin tài khoản ... 124

6.5.Cài đặt ứng dụng ... 126

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

xii

<b>DANH MỤC HÌNH </b>

Hình 1.1. HTML, CSS, JavaScript tạo nên trang web. ... 2

Hình 1.2. Cách AJAX hoạt đợng. ... 4

Hình 1.3. Các tính năng của NodeJS. ... 5

Hình 1.4. Mợt số phương thức trong jQuery. ... 7

Hình 1.5. Flutter... 8

Hình 1.6. React Native. ... 9

Hình 1.7. Luồng hoạt đợng của PWA. ... 10

Hình 1.8. Số lượng framework đồ sợ khi chỉ mới tính riêng cho JS. ... 11

Hình 1.9. IDE và text editor ... 12

Hình 1.10. Đa dạng ngơn ngữ lập trình. ... 13

Hình 1.11. Server-side rendering. ... 18

Hình 1.12. GraphQL. ... 21

Hình 2.1. Mơ phỏng luồng hoạt đợng của MVC. ... 25

Hình 2.2. Các ngơn ngữ và framework sử dụng MVC. ... 26

Hình 2.3. Mơ hình MVP. ... 29

Hình 2.4. Mơ hình MVC. ... 29

Hình 2.5. Cấu trúc mơ hình MVVM. ... 31

Hình 2.6. Các thành phần của kiến trúc Flux. ... 38

Hình 2.7. Cấu trúc của kiến trúc Redux. ... 41

Hình 3.1. React thể hiện component thành view. ... 46

Hình 3.2. React Virtual DOM. ... 47

Hình 3.3. Quy trình render Widget của Flutter. ... 48

Hình 3.4. Mẫu mã lệnh sử dụng thư viện yup và react-hook-form. ... 52

Hình 3.5. Mẫu mã lệnh sử dụng formik. ... 53

Hình 3.6. Mẫu mã lệnh sử dụng react-hook-form. ... 54

Hình 3.7. Mẫu mã lệnh sử dụng TextFormField. ... 54

Hình 3.8. Gói form_bloc hỗ trợ cho Flutter. ... 55

Hình 3.9. BEEKAI. ... 55

Hình 3.10. Tổ chức cấu trúc trang và các form câu hỏi bằng bảng điều khiển (control panel) và phương thức drag-and-drop. ... 56

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

Hình 3.14. Flow control của BEEKAI. ... 59

Hình 3.15. BEEKAI có khả năng duy trì khả năng đáp ứng người dùng trên mọi nền tảng. ... 59

Hình 3.16. Kết quả phân tích của BEEKAI. ... 60

Hình 3.17. Giao diện theo dõi hồ sơ của BEEKAI. ... 60

Hình 3.18. Xuất bản dữ liệu theo dõi người dùng. ... 61

Hình 4.1. Ngơn ngữ Dart. ... 63

Hình 4.2. Tóm tắt lịch sử Flutter. ... 65

Hình 4.3. Kiến trúc Flutter. ... 66

Hình 4.4. Mơ tả roadmap của Flutter. ... 71

Hình 4.5. Kiến trúc BLOC. ... 73

Hình 4.6. Kiến trúc Provider sử dụng ChangeNotifier. ... 73

Hình 4.7. Ví dụ sử dụng lazy builder. ... 75

Hình 4.8. Ví dụ sử dụng tốn tử ??. ... 77

Hình 4.9. Hạn chế của Flutter cho Web. ... 79

Hình 4.10. Tencent Cloud Chat sử dụng Flutter. ... 80

Hình 4.11. Chỉ số thành cơng của nhóm phát triển khi sử dụng Flutter... 80

Hình 4.12. Ứng dụng Xianyu sử dụng Flutter. ... 81

Hình 4.13. Chỉ số thành cơng của nhóm phát triển eBay. ... 81

Hình 4.14. Ứng dụng eBay Motors. ... 82

Hình 4.15. Chỉ số thành cơng của nhóm phát triển Nubank. ... 83

Hình 4.16. Ứng dụng Nubank liên kết với thẻ vật lý. ... 83

Hình 5.1. Skia – Flutter high performance rendering engine. ... 84

Hình 5.2. Mơ tả kiến trúc 2 luồng của React Native. ... 85

Hình 5.3. React Native giao tiếp với nền tảng native thông qua cơ chế cầu nối Bridge. ... 85

Hình 5.4. Mơ tả Widget thơng qua Widget tree của Flutter inspector. ... 86

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

xiv

Hình 5.5. React Native lấy cảm hứng component từ React, chỉ khác mơi trường chạy

ứng dụng. ... 87

Hình 5.6. Ví dụ ứng dụng React Native. ... 88

Hình 6.1. Sơ đồ Use Case tổng quát. ... 97

Hình 6.2. Sơ đồ Use Case cho module bài đăng. ... 98

Hình 6.3. Sơ đồ Use Case cho module bình luận. ... 98

Hình 6.4. Giao diện đăng ký. ... 116

Hình 6.5. Giao diện đăng nhập. ... 117

Hình 6.6. Giao diện trang chủ. ... 118

Hình 6.7. Giao diện trang chủ khi mở menu mở rộng của bài đăng. ... 119

Hình 6.8. Giao diện danh sách bình luận... 120

Hình 6.9. Giao diện danh sách bình luận khi mở menu mở rợng của bình luận. ... 121

Hình 6.10. Giao diện thêm bài đăng. ... 122

Hình 6.11. Giao diện thêm bài đăng khi mở menu mở rộng chọn ảnh. ... 123

Hình 6.12. Giao diện quản lý thơng tin tài khoản. ... 124

Hình 6.13. Giao diện quản lý thơng tin tài khoản khi mở menu mở rộng chọn ảnh. .. 125

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

xv

<b>DANH MỤC BẢNG </b>

Bảng 5.1 So sánh hiệu suất của Flutter và React Native ... 88

Bảng 6.1 Danh sách actors ... 99

Bảng 6.2 Danh sách Use Case ... 99

Bảng 6.3 Đặc tả Use Case đăng ký ... 100

Bảng 6.4 Đặc tả Use Case đăng nhập ... 101

Bảng 6.5 Đặc tả Use Case đăng xuất ... 102

Bảng 6.6 Đặc tả Use Case đăng nhập với Google ... 103

Bảng 6.7 Đặc tả Use Case xem danh sách bài đăng ... 105

Bảng 6.8 Đặc tả Use Case thêm bài đăng ... 106

Bảng 6.9 Đặc tả Use Case yêu thích bài đăng ... 107

Bảng 6.10 Đặc tả Use Case xoá bài đăng ... 109

Bảng 6.11 Đặc tả Use Case xem danh sách bình luận ... 110

Bảng 6.12 Đặc tả Use Case thêm bình luận ... 111

Bảng 6.13 Đặc tả Use Case xố bình luận... 112

Bảng 6.14 Đặc tả Use Case chỉnh sửa thông tin tài khoản ... 113

Bảng 6.15 Danh sách các tập (NoSQL Collections) ... 114

Bảng 6.16 Tập users ... 115

Bảng 6.17 Tập posts ... 115

Bảng 6.18 Tập comments ... 115

Bảng 6.19 Mô tả giao diện đăng ký ... 116

Bảng 6.20 Mô tả giao diện đăng nhập ... 117

Bảng 6.21 Mô tả giao diện trang chủ ... 119

Bảng 6.22 Mơ tả giao diện danh sách bình luận ... 121

Bảng 6.23 Mô tả giao diện thêm bài đăng ... 123

Bảng 6.24 Mô tả giao diện quản lý thông tin tài khoản ... 126

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

1

<b>TÓM TẮT ĐỒ ÁN </b>

Đồ án tập trung vào tìm hiểu và nghiên cứu về Flutter nói riêng và nhánh Frontend nói riêng, mợt trong những ngành nghề phổ biến nhất trong cợng đồng lập trình viên hiện nay.

Đồ án tập trung nghiên cứu về quá trình phát triển của ngành Frontend, các xu hướng phát triển hiện nay như tích hợp AI, AR, responsive application và xu thế chuyển sang các ứng dụng chạy đa nền tảng.

Đồ án cung cấp mợt cái nhìn rõ hơn về những điều cần lưu ý trong q trình xây dựng mợt ứng dụng xét về mặt Frontend, những kiến trúc phổ biến và những best practice để tối ưu hiệu suất của ứng dụng. Ở cuối đồ án là một ứng dụng mạng xã hợi đơn giản, mục đích chính để thể hiện khả năng chạy đa nền tảng của Flutter.

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

Phát triển front-end thường bao gồm sự kết hợp của các công nghệ, bao gồm HTML để cấu trúc nội dung, CSS để thiết kế và bố trí và JavaScript để thêm tính tương tác và chức năng vào các trang web. Các nhà phát triển front-end làm việc để đảm bảo rằng giao diện người dùng thân thiện, hấp dẫn mắt và phản hồi trên các thiết bị và kích thước màn hình khác nhau.

Phát triển Frontend là mợt khía cạnh quan trọng của phát triển web và phần mềm, vì nó ảnh hưởng trực tiếp đến cảm nhận của người dùng về chất lượng và khả năng sử dụng của ứng dụng. Thường được kết hợp với phát triển Backend, làm việc với logic phía máy chủ và quản lý dữ liệu, để tạo ra mợt ứng dụng phần mềm hoặc trang web hồn chỉnh và chức năng.

<b>Hình 1.1. HTML, CSS, JavaScript tạo nên trang web. </b>

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

3

<b>1.2. Lịch sử phát triển </b>

<b>1.2.1. Thời kỳ desktop applications </b>

Trong khoảng những năm của thập niên 1980 cho tới những năm đầu của thập niên 2000, với việc internet còn chưa thực sự phát triển và sự phổ biến của máy tính cá nhân, desktop app chiếm thế thượng phong trong thị trường ứng dụng với tốc độ tăng chóng mặt. Desktop app giúp cho người dùng khơng phải dựa vào kết nối mạng nghèo nàn thời đó mà chỉ dựa vào sức mạnh phần cứng của máy tính cá nhân để thực hiện các tác vụ hằng ngày như soạn thảo văn bản, chỉnh sửa hình ảnh, v.v….

<b>1.2.2. Thời kỳ web applications 1.2.2.1. Thời kỳ JavaScript </b>

Vào năm 1995, Bredan Eich phát triển ngôn ngữ JavaScript khi làm việc tại Netscape, được thiết kế ban đầu là một ngôn ngữ nhẹ chạy ở trình duyệt, tương tác với DOM để thêm vào trang web tính tương tác như nhập dữ liệu, xác thực dữ liệu. Tuy nhiên lúc này vẫn vẫn là các trang web tĩnh, tương tác với server và chờ đợi một file HTML mới trả về.

Vào những năm tiếp theo, Netscape cho ra đời Netscape Navigator 2.0, là trình duyệt đầu tiên hỗ trợ Javascript, trong khi đó Microsoft giới thiệu mợt phiên bản của chính họ là JScript hoạt đợng trên trình duyệt IE. Điều này khiến cho việc phát triển, thực thi các đoạn mã Javascript trên các trình duyệt khác nhau cũng khác nhau, sự đồng bợ của ngơn ngữ là chưa có khiến cho Javascript chưa được phát triển mạnh mẽ và sử dụng rộng rãi.

Tới năm 1997, chuẩn ECMAScript được giới thiệu để chuẩn hoá Javascript và đảm bảo khả năng tương thích giữa các trình duyệt khác nhau. Chuẩn ECMAScript định nghĩa những tính năng cốt lõi của Javascript và vẫn được phát triển qua nhiều phiên bản sau.

Sau sự ra đời của chuẩn ECMAScript, từ những năm 1990 đến đầu 2000, Javascript được phát triển rộng rãi và mạnh mẽ trong cộng đồng thông qua các tính năng của nó. Javascript mang lại mợt luồng gió mới khi nó có thể được sử dụng ở phía trình duyệt để xác thực form, cập nhật DOM, làm các hiệu ứng.

Tới đầu năm 2000, kỹ thuật AJAX (Asynchronous JavaScript and XML), một trong những kĩ thuật quan trọng trong quá trình phát triển web, đã tạo nên một cuộc cách

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

4

mạng trong quá trình phát triển web application. Kỹ thuật này thay thế cách một trang web thông thường lấy dữ liệu từ phía máy chủ đó là phải tải lại cả trang web, hay có thể xem như là đồng bộ bằng phương pháp mới, cho phép thực hiện truyền tải dữ liệu một cách bất đồng bộ. Tức là thay vì phải chờ máy chủ trả về file HTML mới, làm cho quá trình tương tác của user bị giáng đoạn thì giờ đây trang web vẫn có thể tương tác được trong khi chờ dữ liệu trả về từ phía server, sau khi nhận dữ liệu, kỹ thuật này cho phép Javascript áp dụng dữ liệu này và thay đổi DOM để hiển thị lên trên trình duyệt, giúp cho trải nghiệp của người dùng mượt mà hơn, không bị giáng đoạn như trước.

<b>Hình 1.2. Cách AJAX hoạt động. </b>

Tới những năm tiếp theo, nhiều frameworks và thư viện ra đời để đơn giản hoá việc lập trình web bằng Javascript. Đặc biệt phải kể đến jQuery được giới thiệu năm 2006. Sau sự ra đời của jQuery, nhiều framework hiện đại khác được ra đời, sớm nhất là Angular của Google giúp cho việc phát triển web càng ngày càng trở nên hiện đại, dễ dàng và nhiều tác vụ nâng cao hơn cũng được hiện thực hoá, làm cho trang web càng ngày càng có tính tương tác cao, bắt mắt với người dùng. Lúc này trong cợng đồng lập trình web phân ra hai nhánh gồm Frontend và Backend, Frontend sẽ sử dụng JS để phát triển cịn Backend sử dụng các ngơn ngữ server từ trước như C#, Java.

Tới năm 2009, với sự ra đời của Node.js, đã đánh dấu bước ngoặt rằng JS là mợt ngơn ngữ fullstack khi có thể được sử dụng ở phía server. Node.js là mợt môi trường

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

Trong suốt từ cuối thập niên 1990 và đầu thập niên 2000, các lập trình viên web đối diện với vấn đề tương tự với javascript, đó là css hoạt đợng trên các trình duyệt khác nhau một cách khác nhau.

Từ giữa thập niên 2000 cho tới nay, CSS3 ra đời mà giới thiệu nhiều tính năng mới, tính năng nâng cao như bo góc cho viền, màu gradients, cung cấp từ khố định nghĩa các hoạt hoạ chủn đợng trên trang web, cung cấp các từ khoá để định nghĩa các media-query phục vụ cho việc phát triển trang web có thể hiển thị trên nhiều trình duyệt với đợ rợng màn hình khác nhau, cũng như giới thiệu grid-layout, flexbox layout.

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

6

Ngày nay, nhiều CSS frameworks ra đời, ví dụ như Bootstrap, Tailwinds hoặc các thư viện CSS. Những framworks và thư viện này cung cấp những phần tử, components sẵn có giúp cho việc phát triển trang web có giao diện bắt mắt ngày càng dễ dàng hơn, mang lại trải nghiệm tốt hơn cho người dùng.

<b>1.2.2.3. Cách mạng jQuery </b>

Chuẩn ECMAScript chỉ định nghĩa các phương thức cốt lõi của Javascript, các trình duyệt vẫn xử lí những tác vụ như cập nhật DOM, thực hiện AJAX request, xử lí sự kiện mợt cách riêng biệt theo tiêu ch̉n của nó, vì vậy jQuery đã ra đời để xử lí vấn đề nhức nhối này. JQuery cung cấp các phương thức ở mức nâng cao, trừu tượng để lập trình viên xử lí các tác vụ nêu trên, trừu tượng hố sự khác biệt giữa các trình duyệt, nhờ đó mà các dịng lệnh Javascript giữa các lập trình viên, giữa các mã nguồn trở nên đồng bợ hơn, các lập trình viên cũng khơng cần quan tâm các trình duyệt xử lí các dịng lệnh theo các cách khác nhau khi mà thư viện jQuery đã hỗ trợ việc đó cho họ. Thư viện này cịn đơn giản hoá các câu lệnh truy vấn DOM, thực hiện AJAX requets; giúp cho các tác vụ như cập nhật phần tử, thêm sửa xoá CSS và xử lý sự kiện cũng trở nên ngắn gọn. Cụ thể hơn, khi viết một câu lệnh jQuery để thực hiện truy vấn DOM, thư viện này sẽ dựa vào trình duyệt đang chạy câu lệnh jQuery mà thực thi câu lệnh JS được hỗ trợ tương ứng. JQuery đã tạo nên một cuộc cách mạng thật sự khi mà với jQuery và AJAX, việc lập trình Frontend đã trở nên dễ dàng hơn, lập trình viên với hai cơng cụ mạnh mẽ này có thể lập trình được hầu hết các tính năng được u cầu vào thời gian đó. Nhờ vậy mà jQuery ngày càng được sử dụng rộng rãi, cộng đồng sử dụng ngày càng tăng và trở thành một cuộc cách mạng thật sự trong cộng đồng phát triển web.

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

Trong những năm từ 1973 tới 2000, những sản phẩm điện thoại thương mại đầu tiên xuất hiện, kéo theo đó là những ứng dụng đơn sơ hạn chế trên những mẫu điện thoại này như lịch, máy tính,... Những ứng dụng này bị giới hạn nhiều về mặt tính năng và được thiết kế riêng biệt cho mợt hệ điều hành cụ thể nào đó.

Cho đến năm 2008, Apple cho ra mắt App Store và một năm sau đó Android Market được trình làng đã đánh dấu một bước cách mạng trong việc phân phối các ứng dụng dành cho thiết bị di động tới tay người dùng.

Trong mợt khoảng thời gian dài sau đó là thời kì mà native app, những phần mềm được phát triển riêng cho một hệ điều hành, phát triển mạnh mẽ. Trong thời gian này có hai hệ điều hành chính phổ biến hơn cả là iOS và Android. Để phát triển ứng dụng dành cho iOS, các lập trình viên sẽ sử dụng ngơn ngữ Objective-C và sau này là Swift và lập trình trên Xcode. Cịn về phía ứng dụng Android, ban đầu sẽ sử dụng ngơn ngữ Java, sau này sử dụng Kotlin và lập trình trên Android Studio IDE. Các ứng dụng lúc này đã có thể truy cập trực tiếp tới phần cứng của thiết bị như camera, micro, GPS,... điều này giúp cho các ứng dụng native càng ngày càng có nhiều tính năng tiện lợi hỗ trợ người dùng một cách mạnh mẽ. Thêm vào đó, các ứng dụng native cũng được tối ưu tốt hơn so với các loại app khác, tận dụng tối đa sức mạnh phần cứng của các thiết bị di động, mang lại thời gian phản hồi gần như ngay lập tức, tối ưu dung lượng sử dụng. Ngồi ra, mợt điều giúp cho các ứng dụng này ngày càng được chấp thuận mạnh mẽ đó là tính bảo mật khi mà các ứng dụng muốn được đưa lên các cửa hàng phải tuân theo những hướng dẫn được đề ra trước, qua đó đảm bảo các ứng dụng này không gây hại cho máy người dùng.

Trong những năm tiếp theo, nhờ sự phát triển mạnh mẽ của native app, lĩnh vực có mặt của native app càng ngày càng mở rộng và đa dạng, bao quát cuộc sống của con người.

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

8

<b>1.2.4. Thời kỳ cross platform applications </b>

Trong quá trình phát triển native app, các lập trình viên phải đối mặt với vấn đề một bộ mã nguồn chỉ dành cho một hệ điều hành nhất định. Điều này vừa khiến các lập trình viên muốn phát triển ứng dụng cho cả iOS và Android phải học 2 ngôn ngữ cũng như các API khác nhau đồng thời cũng khiến cho các doanh nghiệp phải đối mặt vói vấn đề chi phí khi phải vận hành hai nhóm riêng biệt để phát triển, vận hành và bảo trì.

Trong những nỗ lực đầu tiên để giải quyết vấn đề này, các nhà lập trình viên đã ững dụng những công nghệ web (HTML, CSS, JavaScript) để tạo nên các ứng dụng hoạt động được trên nhiều hệ điều hành vì thơng qua giao diện web. Sau này có 2 phương thức để phát triển, đầu tiên là hybrid app kết hợp các tính năng của native app trong khi vẫn hiển thị giao diện dựa trên công nghệ web, thứ 2 là dựa hoàn toàn vào webapp và giao tiếp với thiết bị native thơng qua trình duyệt.

Sau này là sự ra đời của các cross-platform framwork như Xamarin (2011) sử dụng C#, React Native (2015) sử dụng JS với React và Flutter (2018) sử dụng Dart giúp phát triển các ứng dụng cross-platform có hiệu năng cao.

<b>Hình 1.5. Flutter. </b>

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

Năm 2015 đánh dấu lần đầu tiên cụm từ PWA được nhắc đến bởi Frances Berriman và Alex Russell.

Những nguyên tắc chính của PWA gồm khả năng hoạt đợng ngay cả khi khơng có hoặc kết nối mạng chậm, cung cấp trải nghiệm tốt hơn cho người dùng. Tiếp theo đó là giao diện có thể hoạt đợng trên nhiều màn hình có kích thước khác nhau và cuối cùng là đảm bảo các tính năng cơ bản đồng thời cung cấp thêm những tính năng nâng cao phù hợp với các trình duyệt khác nhau.

Những tính năng chính của PWA gồm khả năng hoạt động offline, cung cấp các tính năng giống với native app như đẩy thơng báo, routing trong app và hiệu suất cao cho các ứng dụng này.

Các công nghệ sử dụng để tạo nên PWA gồm service workder, mợt dịng lệnh chạy ngầm để quản lí các kết nối mạng, cache lại nợi dung trang web; một tập tin JSON tên Manifest để định nghĩa các thông tin cho ứng dụng như tên, icon,... để hiển thị ứng dụng lúc tải về.

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

<b>1.2.7. Framework trỗi dậy </b>

Trong những ngày đầu của việc phát triển ứng dụng web, với những công nghệ đời đầu như HTML, CSS, JS, việc phát triển những ứng dụng phức tạp tốn rất nhiều thời gian. Từ đó nhu cầu về framework phát triển web cũng tăng lên.

Những framework server-side đầu tiên gồm các framework như CodeIgniter (2006), CakePHP (2005), và Zend Framework (2006) cung cấp cho các nhà phát triển PHP các

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

Những framework này mang lại nhiều lợi ích cho các nhà lập trình viên bao gồm cung cấp sẵn những công cụ để xây dựng trang web giúp tiết kiệm thời gian phát triển ứng dụng, làm tăng tính mở rợng và bảo trì của ứng dụng và có mợt cợng đồng đông đảo sử dụng framework hỗ trợ lẫn nhau.

<b>Hình 1.8. Số lượng framework đồ sộ khi chỉ mới tính riêng cho JS. 1.3. Cơng nghệ Frontend </b>

<b>1.3.1. Các cơng cụ </b>

Ngày nay, cơng việc lập trình Frontend ngày càng trở nên thuận tiện cho các lập trình viên nhờ vào các cơng cụ được phát triển nhằm mục đích tiết kiệm thời gian, mang lại cú pháp, cách dùng thân thiện với con người hơn. Các cơng cụ có thể kể đến như IDE như Visual Studio, đóng gói và cung cấp những trình biên dịch hoặc thơng dịch các dịng lệnh để chạy ứng dụng, ngồi ra cịn có các tính năng khác như trình gỡ lỗi, các trình quản lý đối tượng.

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

12

Text editor, cung cấp ít tính năng hơn so với IDE và thường cần các extension bên ngồi để chạy ứng dụng. Mục đích chính của text editor thường chỉ để soạn thảo các dòng lệnh.

Các công cụ quản lý các thư viện bên thứ ba, các module, các nudget đi kèm như NPM, Yarn.

Công cụ tối ưu hố q trình quản lý các phiên bản của mã nguồn như Git, SVN giúp bảo vệ mã nguồn khỏi các sơ suất làm mất mát dòng lệnh, quản lý các phiên bản của phần mềm được ra mắt với người dùng.

Các công cụ để build và bundler mã nguồn như Webpack, Turbopack, Parcel được sử dụng để bunble và build mã nguồn (ví dụ như Javascript, CSS) để tối ưu hoá hiệu suất, tăng tốc đợ tải trang, giảm kích thước trang cần tải về trình duyệt.

<b>Hình 1.9. IDE và text editor 1.3.2. Các ngơn ngữ lập trình và framework </b>

Các ngơn ngữ lập trình được dùng phổ biến trong việc lập trình Frontend như PHP, Ruby, Java, C# trong thời kì đầu, sau này là sự xuất hiện của Javascript. Với sự phát triển của công nghệ, các framework ra đời như Laravel, CakePHP cho ngôn ngữ PHP, Ruby on Rails, Spring cho Java, .NET cho C#, Angular, VueJS, NextJS, Svelte, Solid cho Javasript.

Các framework được sinh ra nhằm mục đích đơn giản hố các bước cấu hình cho dự án, các hàm gọi dùng để render giao diện người dùng. Việc sử dụng framework giúp cho bộ mã nguồn được cấu trúc theo một mẫu cấu trúc thư mục sẵn có, cung cấp hướng dẫn cho các lập trình nhằm đảm bảo tính thống nhất giữa các thành viên, đảm bảo khả năng bảo trì và nâng cấp của dự án. Các framework còn giúp cho ứng dụng chạy mượt

</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28">

<b>1.4. Các Frontend framework 1.4.1. Định nghĩa </b>

Framework là mợt tập các dịng lệnh được viết sẵn theo một tiêu chuẩn cụ thể, các thư viện, công cụ dùng để phát triển phần mềm. Các framework tập trung vào việc tối ưu quá trình phát triển bằng cách cung cấp nhũng thành phần có thể tái sử dụng, áp dụng design-patern và một tập các luật để lập trình viên dựa theo đó để phát triển phần mềm một cách hiệu quả nhất. Frontend framework cung cấp một cấu trúc dựng sẵn để xây

</div><span class="text_page_counter">Trang 29</span><div class="page_container" data-page="29">

14

dựng giao diện và nâng cao trải nghiệm của người dùng khi sử dụng website hoặc webapp.

<b>1.4.2. Các framework Frontend phổ biến </b>

a) NextJS: Được phát triển bởi Vercel dựa trên thư viện React, kế thừa cấu trúc component-based, tối ưu và cung cấp tính năng server-rendering để tối ưu hố cho SEO cũng như giảm thời gian cần thiết để tải trang web.

b) Angular 2: Được phát triển bởi Google, mà một phiên bản nâng cấp của Angular. Cũng sử dụng kiến trúc component-based đồng thời cung cấp nhiều tính năng tối ưu cho trang web như tree-saking, dependency injection và data binding.

c) VueJS: VueJS là một framework tương tự ReactJS, có điểm khác biệt ở cách sử dụng data binding, thay vì 1-way mà là 2-way. Điều này giúp cho việc tiếp cận framework này trở nên dễ dàng.

d) Bootstrap: Bootstrap là một CSS framework phát triển bởi Twitter hay X. Framwork cung cấp một loạt những component được dựng sẵn, các style CSS và layout dựng sẵn giúp xây dựng trang web responsive. Bootstrap thường được dùng với React hoặc AngularJS

e) TailwindCSS: là một CSS framework cung cấp những class dựng sẵn giúp nhanh chóng xây dựng những component mà lập trình viên có thể tự tuỳ chỉnh hiển thị.

<b>1.5. Các xu hướng công nghệ phổ biến </b>

<b>1.5.1. Artificial Intelligence và Machine Learning </b>

Artificial Intelligence (AI) đề cập đến việc mơ phỏng trí thơng minh của con người trong các máy tính được lập trình để suy nghĩ và mô phỏng hành vi của con người. AI bao gồm một loạt các kỹ thuật như giải quyết vấn đề, học tập, nhận diện ngôn ngữ và đưa ra quyết định.

Machine Learning (ML) là một nhánh của AI liên quan đến việc phát triển các thuật tốn và mơ hình thống kê cho phép máy tính học hỏi và cải thiện từ kinh nghiệm, những quá trình học hỏi trước mà khơng cần được lập trình rõ ràng. Thuật toán ML sử dụng dữ liệu để xác định mẫu, đưa ra dự đoán hoặc tối ưu hóa quy trình.

AI và ML được áp dụng vào front-end thơng qua nhiều tính năng như hệ thống gợi ý, cá nhân hoá dữ liệu người dùng, chat bot, gợi ý dữ liệu nhập vào, tự động tạo nội dung…

</div><span class="text_page_counter">Trang 30</span><div class="page_container" data-page="30">

15

<b>1.5.2. Single-Page Application </b>

SPA là viết tắt của Single Page Application, một loại ứng dụng web hoạt động trong một trang web duy nhất. Không giống như các trang web truyền thống nơi mỗi tương tác có thể dẫn đến việc tải mợt trang mới từ máy chủ, SPA tải một lần ban đầu và cập nhật nội dung động khi người dùng tương tác với ứng dụng.

Các đặc điểm chính của SPA bao gồm:

a) Dynamic content loading: SPA sử dụng JavaScript để tải nợi dung ở phía trình duyệt, mang lại trải nghiệm người dùng mượt mà và phản hồi nhanh hơn mà không cần tải lại toàn trang.

b) Client-side rendering: Việc hiển thị nội dung và thao tác dữ liệu xảy ra ở phía client) bằng cách sử dụng các thư viện và framework JavaScript như React, Angular hoặc Vue.js, thay vì dựa vào máy chủ để hiển thị HTML.

c) Routing: SPA thường sử dụng cơ chế định tuyến phía máy khách để quản lý điều hướng trong ứng dụng, cập nhật URL động mà không yêu cầu các trang mới từ máy chủ. Điều này cho phép kiểm soát tốt hơn lịch sử duyệt web.

d) Hiệu suất: SPA có thể cung cấp thời gian tải nhanh hơn sau lần tải đầu tiên vì trang web lấy dữ liệu từ API và cập nhật nội dung một cách linh hoạt mà không cần làm mới tồn bợ trang.

e) Nâng cao trải nghiệm người dùng: Bằng cách cung cấp trải nghiệm liền mạch, SPA thường phản hồi và tương tác tốt hơn với người dùng, giống như các ứng dụng di động native.

f) Phát triển với trung tâm là API: SPA thường tương tác với API phía máy chủ để tìm nạp dữ liệu hoặc thực hiện các hoạt động không đồng bộ, cho phép tách rời quá trình phát triển front-end và back-end.

g) SPA cũng đối diện với nhiều mặt hạn chế như không tối ưu cho SEO khi các máy tìm kiếm khơng thể chạy code JavaScipt để lấy thơng tin của trang web. SPA cũng có thời gian load lần đầu cho trang web khá lâu khi trình duyệt cần tải hết mã nguồn về để chạy ứng dụng.

<b>1.5.3. Progressive Web Apps </b>

PWA là viết tắt của Progressive Web Apps, là một loại ứng dụng web sử dụng công nghệ web để cung cấp cho người dùng trải nghiệm giống như ứng dụng native thông

</div><span class="text_page_counter">Trang 31</span><div class="page_container" data-page="31">

PWA cung cấp cho các doanh nghiệp và nhà phát triển một giải pháp thay thế cho các ứng dụng di động gốc truyền thống, mang lại nhiều lợi thế, bao gồm phân phối dễ dàng hơn (không cần cửa hàng ứng dụng), khả năng tương thích đa nền tảng và giảm chi phí phát triển.

<b>1.5.4. Serverless Architecture </b>

Kiến trúc serverless (tối giản server) là mô hình điện tốn đám mây cho phép các nhà phát triển xây dựng và chạy các ứng dụng mà không cần quản lý cơ sở hạ tầng. Mặc dù tên của kiến trúc là serverless, các server vẫn tham gia vào việc thực thi dòng lệnh, nhưng các lập trình viên khơng cần phải quản lí, bảo trì và nâng cấp máy chủ mà đưa lên các máy tính điện tốn đám mây.

Các nền tảng serverless phổ biến bao gồm AWS Lambda, Azure Functions, Google Cloud Functions và các dịch vụ như AWS API Gateway hoặc Azure Event Grid, hỗ trợ các kiến trúc hướng sự kiện và cho phép nhà phát triển xây dựng các ứng dụng serverless.

Kiến trúc serverless rất phù hợp cho nhiều trường hợp sử dụng khác nhau, bao gồm ứng dụng web, API, xử lý dữ liệu theo thời gian thực, ứng dụng IoT. Tuy nhiên, nó có thể khơng phù hợp với các ứng dụng yêu cầu kiểm soát chi tiết đối với cơ sở hạ tầng.

Việc áp dụng kiến trúc serverless mang lại những lợi ích như khả năng mở rợng, giảm chi phí vận hành và chu kỳ phát triển tính năng nhanh hơn, khiến kiến trúc này trở thành lựa chọn hấp dẫn cho nhiều ứng dụng hiện đại và nhiều trường hợp sử dụng.

<b>1.5.5. Server-Side Rendering </b>

Server-Side Rendering (SSR) là một kỹ thuật được sử dụng trong phát triển web trong đó server sẽ tạo HTML ban đầu cho trang web trước khi gửi nó đến client (trình duyệt). Cách tiếp cận này khác với client-side rendering (CSR), trong đó trình duyệt tải xuống mợt tệp HTML tối thiểu và sau đó JavaScript ở phía máy khách sẽ hiển thị nợi dung.

</div><span class="text_page_counter">Trang 32</span><div class="page_container" data-page="32">

17

Các khía cạnh và lợi ích chính của Server-Side Rendering bao gồm:

a) Cải thiện hiệu suất và SEO: SSR thường giúp tải trang ban đầu nhanh hơn vì máy chủ gửi HTML được hiển thị đầy đủ tới trình duyệt. Điều này có lợi cho việc tối ưu hóa cơng cụ tìm kiếm (SEO) vì trình thu thập thơng tin của cơng cụ tìm kiếm có thể dễ dàng lập chỉ mục nợi dung.

b) First Contentful Paint (FCP): SSR có thể giúp đạt được FCP nhanh hơn vì trình duyệt nhận được nợi dung HTML sớm hơn, cho phép người dùng xem và tương tác với trang nhanh hơn.

c) Tăng khả năng tiếp cận của người dùng: Bằng cách cung cấp HTML, SSR đảm bảo rằng nợi dung có sẵn ngay cả khi JavaScript khơng tải hoặc thực thi đúng cách ở phía máy khách, cải thiện khả năng truy cập và trải nghiệm người dùng, đặc biệt đối với người dùng trên các thiết bị chậm hơn hoặc điều kiện mạng hạn chế.

d) Hỗ trợ trình thu thập dữ liệu web: SSR cung cấp nợi dung chính xác cho các nền tảng truyền thơng xã hợi và trình thu thập dữ liệu web, cho phép các trang web hiển thị một phần giao diện xem trước tốt hơn khi chia sẻ liên kết và đảm bảo lập chỉ mục nội dung phù hợp.

e) Bợ nhớ đệm: SSR hiệu quả đói với những phương thức caching, tối ưu hóa việc phân phối nội dung và giảm tải cho máy chủ cho các yêu cầu tiếp theo.

SSR thường được triển khai bằng cách sử dụng các công nghệ và framework như Next.js cho React, Nuxt.js cho Vue.js hoặc Angular Universal cho Angular. Các framework này tạo điều kiện thuận lợi cho q trình hiển thị phía máy chủ và xử lý sự phức tạp của việc hiển thị nội dung ở cả phía máy chủ và phía máy khách thơng qua công nghệ hydration.

Mặc dù SSR mang lại lợi thế về hiệu suất và SEO, nhưng nó có thể có chi phí xử lý máy chủ cao hơn so với CSR. Ngoài ra, thời gian tải trang lần đầu có thể bị ảnh hưởng nếu thời gian phản hồi của máy chủ chậm hoặc nếu độ phức tạp của ứng dụng ảnh hưởng đến tốc độ xuất file HTML trên máy chủ.

</div><span class="text_page_counter">Trang 33</span><div class="page_container" data-page="33">

Phát triển mã thấp phù hợp với nhiều ứng dụng, bao gồm các công cụ nội bộ, ứng dụng di động đơn giản. Tuy nhiên, các ứng dụng phức tạp hoặc có tính chun mơn cao vẫn có thể u cầu mã tùy chỉnh vì lý do logic về phạm trù kinh doanh phức tạp, khả năng mở rộng hoặc hiệu suất.

Các nền tảng và công cụ phát triển low code phổ biến bao gồm Microsoft Power Platform (Power Apps, Power Automate, Power BI), Mendix, OutSystems, Appian và Salesforce Lightning Platform. Các nền tảng này cung cấp nhiều chức năng, từ tạo ứng dụng cơ bản đến phát triển ứng dụng cấp doanh nghiệp, đáp ứng các yêu cầu kinh doanh khác nhau.

Việc áp dụng công nghệ phát triển phần mềm low-code tiếp tục phát triển khi các tổ chức tìm cách đẩy nhanh quá trình phân phối ứng dụng, giảm chi phí phát triển và chi phí nhân sự khi khơng cần phải xây dựng một đội xây dựng phần mềm.

</div><span class="text_page_counter">Trang 34</span><div class="page_container" data-page="34">

19

<b>1.5.7. Micro Front End Architecture </b>

Kiến trúc Micro Front End là một cách tiếp cận xây dựng các ứng dụng web bằng cách chia tầng Frontend thành các đơn vị nhỏ hơn, có thể triển khai và quản lý độc lập được gọi là micro Frontend tương tự như microservice trong phát triển Backend.

Kiến trúc Micro Frontend có thể được triển khai bằng nhiều chiến lược khác nhau như:

a) IFrames: Sử dụng iframe để nhúng và tách biệt các phần khác nhau của ứng dụng. b) JavaScript framework: Tận dụng các JavaScript framework như Web Components, Angular Elements, hoặc các micro Frontend frameworks tuỳ biến.

Việc áp dụng Kiến trúc Micro Frontend cho phép các tổ chức:

a) Cải thiện tốc đợ phát triển: Các nhóm đợc lập có thể làm việc đồng thời, đẩy nhanh tiến độ phát triển ứng dụng.

b) Khả năng mở rợng và bảo trì: Bảo trì, mở rợng và cập nhật dễ dàng hơn cho các phần cụ thể của ứng dụng mà không ảnh hưởng đến các phần khác.

c) Tính linh hoạt và lựa chọn cơng nghệ: tổ chức có thể tự do lựa chọn các cơng cụ và công nghệ tốt nhất, phù hợp cho nhu cầu cụ thể của từng Micro Frontend

Tuy nhiên, việc quản lý việc tích hợp nhiều Micro Frontend, đảm bảo tính nhất quán trong trải nghiệm người dùng và xác định các giao thức liên lạc giữa các Micro Frontend là những thách thức cần được xem xét và lập kế hoạch cẩn thận khi áp dụng kiến trúc này.

<b>1.5.8. GraphQL </b>

GraphQL là ngôn ngữ truy vấn và thời gian chạy dành cho các API được Facebook phát triển và có nguồn mở vào năm 2015. Nó cung cấp một giải pháp thay thế linh hoạt, hiệu quả và mạnh mẽ cho các API REST truyền thống bằng cách cho phép khách hàng chỉ yêu cầu dữ liệu họ cần và nhận chính xác dữ liệu đó ở dạng có thể dự đốn được.

Các tính năng và khái niệm chính của GraphQL bao gồm:

a) Định nghĩa lấy kiểu dữ liễu: Client có thể chỉ định chính xác dữ liệu mà họ yêu cầu bằng cách xác định các truy vấn theo một quy chuẩn. Điều này hạn chế việc truy vấn dữ liệu quá mức hoặc truy vấn dữ liệu dưới mức cần thiết trong API REST.

</div><span class="text_page_counter">Trang 35</span><div class="page_container" data-page="35">

20

b) Một endpoint duy nhất: GraphQL thường hiển thị một điểm cuối duy nhất đóng vai trị là điểm đầu vào cho tất cả các hoạt động dữ liệu. Điều này trái ngược với nhiều điểm cuối trong API RESTful.

c) Cấu trúc phân cấp: Các truy vấn trong GraphQL giống với cấu trúc dữ liệu được yêu cầu. Khách hàng có thể duyệt qua các mối quan hệ lồng nhau để truy xuất dữ liệu liên quan trong một câu truy vấn duy nhất.

d) Schema: GraphQL sử dụng schema để xác định loại, trường dữ liệu và mối quan hệ giữa dữ liệu. Schema này đóng vai trị như mợt cầu nối giữa client và server, cung cấp kiểu định nghĩa dữ liệu rõ ràng.

e) Thay đổi dữ liễu: Ngoài việc truy vấn dữ liệu, GraphQL còn hỗ trợ các yêu cầu thay đổi dữ liệu, cho phép client sửa đổi dữ liệu trên server bằng cách xác định các thao tác và dữ liệu để thao tác.

f) Công cụ đa dạng: GraphQL có một hệ sinh thái gồm các công cụ, thư viện và framework (ví dụ: Apollo Client, Relay) tạo điều kiện thuận lợi cho việc triển khai nó bằng nhiều ngôn ngữ và framework khác nhau.

GraphQL thường được sử dụng khi:

a) Cần có khả năng truy xuất dữ liệu linh hoạt, đặc biệt là trong các cấu trúc dữ liệu phức tạp.

b) Client có băng thơng hạn chế yêu cầu truy vấn dữ liệu hiệu quả.

c) Nhiều clients có yêu cầu truy vấn dữ liệu khác nhau sử dụng cùng một API endpoint.

Khả năng giải quyết một số hạn chế của REST API truyền thống đã giúp cho GraphQL được áp dụng rộng rãi trên nhiều lĩnh vực và ngành khác nhau.

</div><span class="text_page_counter">Trang 36</span><div class="page_container" data-page="36">

21

<b>Hình 1.12. GraphQL. 1.5.9. Mobile-First Approach </b>

Cách tiếp cận ưu tiên thiết bị di động là chiến lược thiết kế và phát triển giao diện ưu tiên cho thiết bị di động trước khi xem xét đến những thiết bị khác như máy tính hoặc các thiết bị có màn hình lớn hơn. Chiến lược này bao gồm việc bắt đầu quá trình thiết kế với kích thước màn hình nhỏ nhất và sau đó cải tiến thiết kế cho màn hình lớn hơn.

Cách tiếp cận ưu tiên thiết bị di động không bỏ qua việc thiết kế giao diện cho màn hình lớn hơn; thay vào đó, nó chuyển trọng tâm sang ưu tiên các thiết bị di động do mức độ phổ biến của chúng trong bối cảnh ngày nay. Vì thiết bị di đợng có những hạn chế so với máy tính hoặc các thiết bị có màn hình lớn nên chiến lược này thúc đẩy quá trình thiết kế lấy người dùng làm trung tâm..

Bằng cách bắt đầu với thiết bị di động, các nhà thiết kế và nhà phát triển đảm bảo rằng nội dung và chức năng cốt lõi được tối ưu hóa cho màn hình nhỏ nhất, mang lại nền tảng vững chắc để có thể mở rợng cho màn hình lớn hơn, thân thiện với người dùng hơn và dễ thích ứng hơn với những thay đổi của sản phẩm.

<b>1.5.10. Voice User Interface </b>

Giao diện người dùng bằng giọng nói (Voice User Interface hay VUI) là công nghệ cho phép người dùng tương tác với máy tính, thiết bị hoặc ứng dụng bằng cách sử dụng lệnh nói hoặc ngơn ngữ tự nhiên. Nó cho phép người dùng tương tác với công nghệ thông qua giọng nói, cho phép họ thực hiện nhiệm vụ, truy xuất thông tin hoặc điều

</div><span class="text_page_counter">Trang 37</span><div class="page_container" data-page="37">

Các ví dụ phổ biến cho VUI có thể kể đến như loa thơng minh (Alexa, Siri, Google Home) dùng để điều khiển nhà thông minh, thực hiện các tác vụ thông thường như phát nhạc, đọc thơng tin,.... Thêm vào đó có thể kể đến trợ lý ảo là một dạng trợ lý ảo sử dụng giọng nói làm phương thức liên lạc chính với người sử dụng (ví dụ Siri, Cortana của MS, …) có thể dùng để thực hiện các tác vụ hỗ trợ người dùng.

</div><span class="text_page_counter">Trang 38</span><div class="page_container" data-page="38">

<b>2.1.2. Cấu trúc mơ hình MVC </b>

Các thành phần chính trong mơ hình MVC bao gồm:

a) Mơ hình (Model): Model là thành phần chịu trách nhiệm quản lý dữ liệu và logic kinh doanh của ứng dụng. Nó bao gồm các lớp và đối tượng biểu diễn cho dữ liệu, và xử lý các thay đổi trạng thái của nó. Model khơng biết đến sự tồn tại của View và Controller.

b) Hiển thị (View): View là thành phần chịu trách nhiệm hiển thị thơng tin cho người dùng. Nó nhận dữ liệu từ Model và biểu diễn nó theo cách được định nghĩa. View không thay đổi dữ liệu, mà chỉ làm nhiệm vụ hiển thị.

c) Controller (Controller): Controller là thành phần trung gian giữa Model và View. Nó xử lý sự kiện từ người dùng, tương tác với Model để cập nhật dữ liệu và sau đó cập nhật View để hiển thị thông tin mới. Controller là nơi điều phối luồng điều khiển của ứng dụng.

<b>2.1.3. Hoạt động của mơ hình MVC </b>

Ta có thể khái qt mơ tả hoạt động qua các bước như sau: a) Người Dùng (User) tương tác với View:

Sự tương tác bắt đầu khi người dùng tương tác với View, như là bấm một nút hoặc nhập dữ liệu.

b) View Tương Tác với Controller:

</div><span class="text_page_counter">Trang 39</span><div class="page_container" data-page="39">

24

View ghi nhận dữ liệu người dùng và gửi nó đến Controller để xử lý. Controller giải thích dữ liệu người dùng và quyết định cách xử lý nó. c) Controller Tương Tác với Model:

Controller tương tác với Model để cập nhật dữ liệu hoặc logic kinh doanh của ứng dụng dựa trên dữ liệu người dùng.

Model cập nhật trạng thái nợi tại của mình theo hướng dẫn của Controller. d) Model Thông Báo View:

Nếu trạng thái của Model thay đổi (do dữ liệu người dùng hoặc các yếu tố khác), nó thơng báo cho các View đã đăng ký.

Thông báo này thông báo cho View rằng chúng cần cập nhật bản thể để phản ánh những thay đổi trong dữ liệu.

e) View Truy Xuất Dữ Liệu từ Model:

View, sau khi nhận thông báo, truy xuất dữ liệu đã được cập nhật từ Model. View cập nhật bản thể của mình để phản ánh những thay đổi trong dữ liệu. f) Controller Tương Tác với View (Tùy chọn):

Trong một số trường hợp, Controller có thể trực tiếp cập nhật View để phản ánh những thay đổi trong Model mà không đợi thơng báo.

Ví dụ: mợt người dùng cuối gửi mợt yêu cầu đến một máy chủ để nhận danh sách sinh viên đang học trong mợt lớp. Sau đó, máy chủ sẽ gửi yêu cầu đó đến Controller cụ thể quản lý sinh viên. Controller đó sau đó sẽ yêu cầu Model quản lý sinh viên trả về một danh sách của tất cả sinh viên đang học trong một lớp.

</div><span class="text_page_counter">Trang 40</span><div class="page_container" data-page="40">

25

<b>Hình 2.1. Mô phỏng luồng hoạt động của MVC. </b>

Model sẽ truy vấn cơ sở dữ liệu để lấy danh sách tất cả sinh viên và sau đó trả lại danh sách đó cho Controller. Nếu phản hồi từ Model thành công, Controller sẽ yêu cầu View liên quan đến sinh viên trả lại mợt bản trình bày về danh sách sinh viên. View này sẽ lấy danh sách sinh viên từ Controller và hiển thị danh sách thành HTML có thể được sử dụng bởi trình duyệt.

Controller sau đó sẽ lấy bản trình bày đó và trả lại cho người dùng, kết thúc u cầu. Nếu trước đó Model trả về mợt lỗi, Controller sẽ xử lý lỗi đó bằng cách yêu cầu View xử lý lỗi tạo mợt bản trình bày cho lỗi cụ thể đó. Bản trình bày lỗi đó sau đó sẽ được trả lại cho người dùng thay vì bản trình bày danh sách sinh viên.

Như chúng ta có thể thấy từ ví dụ trên, Model xử lý tất cả dữ liệu. View xử lý tất cả bản trình bày và Controller chỉ thơng báo cho Model và View về những gì cần làm. Đây là kiến trúc cơ bản và cách làm việc của framework MVC.

<b>2.1.4. Lợi ích của việc sử dụng mơ hình MVC </b>

a) Mã nguồn dễ bảo trì và có thể mở rộng một cách dễ dàng.

b) Các thành phần của mơ hình MVC có thể được kiểm thử mợt cách đợc lập. c) Các thành phần của MVC có thể được phát triển đồng thời.

</div>