3.4.1.1. Quản lý môi trường
Node package manager(NPM): là công cụ quản lý các thư viện của javascript cho nodejs. NPM cung cấp 2 chức năng chính như:
- Là kho lưu trữ trực tuyến cho các package/module.
- Quản lý các module javascript và phiên bản của chúng trong dự án của
chúng ta đơn giản hơn, dễdàng hơn, tiết kiệm thời gian hơn.
Npm càng thể hiện sự quan trọng của nó trong các lập trình viên phát triển
ứng dụng sử dụng framework. NPM giúp chúng ta cài đặt và quản lý những package khi chúng ta sử dụng trong quá trình phát triển ứng dụng. Trong cộng
đồng Javascript , các lập trình viên chia sẻhàng nghìn các thư viện với các đoạn
34 thực hiện các dự án nhanh chóng hơn, tránh phải viết lại các thành phần cơ bản lặp đi lặp lại qua các dự án.
3.4.1.2. Javascript(JS)
JavaScript là ngôn ngữ đa nền tảng, ngôn ngữ lập trình kịch bản, hướng
đối tượng. JS là một ngôn ngữ nhỏ và nhẹ. Khi nằm bên trong một môi trường, JavaScript có thể kết nối tới các Object của môi trường đó và cung cấp cách quản lý chúng.
JS chứa các thư viện chuẩn cho các object và các yếu tố cốt lõi của 1 ngôn ngữ lập trình như: toán tử, cấu trúc điều khiển và câu lệnh.
Điều khác biệt giữa JS với các ngôn ngữ khác ví dụnhư so với java là JS không phân việt giữa kiểu của các đối tượng, tính kế thừa thông qua cơ chế
nguyên mẫu, các thuộc tính hoặc phương thức có thể thêm vào bất kì lúc nào. Không khai báo kiểu dữ liệu cho biến. Không thể tự ghi vào ổđĩa cứng.
JS có rất nhiều ứng dụng trong môi trường phát triển phần mềm và đa nền tảng khác nhau: [7]
• JS kết hợp với HTML, CSS trở thành ngôn ngữ để phát triển và xây dựng các ứng dụng, website.
• Có rất nhiều các framework nổi tiếng như ReactJS, Angular, VueJS… dùng JS để xây dựng.
• JS có thể sử dụng để xây dựng frontend và backend(node.js).
• Một số database có sử dụng JS như mongoDB, couchDB.
• JS có thểdùng để xây dựng các ứng dụng trên desktop với framework: electron. Những ứng dụng nổi tiếng như Atom, Visual Studio Code, wordpress…
• Xây dựng ứng dụng trên mobile đa nền tảng IOS, Android sử dụng framework React Native.
3.4.1.3. Framework ReactJS
Với sự phát triển của ngành lập trình trang web hiện nay thì các framework phát triển giao diện người dùng như React, Angular, Vue… ngày
càng phát triển mạnh mẽ hơn. Ngày nay để phát triển một dự án về web thì những người, nhóm phát triển thường nghĩ đến 1 trong 3 framework này để phát triển cho dự án của mình. Và trong đồ án lần này để xây dựng hệ thống tôi sử
35 React là một thư viện javascript nhằm đơn giản hóa việc phát triển giao diện người dùng, ngôn ngữ này được phát triển bởi Facebook, bản thử nghiệm
đầu tiên vào năm 2013, được sử dụng để viết ra mạng xã hội Facebook,
instagram và được ủng hộ của rất nhiều công ty lớn nhỏ trên thế giới.
Hình 3. 7. Sự phổ biến của các ngôn ngữ được đánh giá trên github [8]
Mục tiêu chính của react hướng đến là sự đơn giản trong quá trình phát triển phần mềm. Tất cả trạng thái được tập trung tại một thời điểm, bằng cách chia giao diện người dùng thành tập hợp các thành phần còn được gọi là component.
React hiện tại rất được các lập trình viên ưu thích vì tính đơn giản và
tường minh của nó, react rất thích hợp để xây dựng một trang web dạng single- page web applications.
Hiện tại để xây dựng một trang web lập trình vên có thể sử dụng phương
pháp là single – page web applications và multiple – page applications. a. Single – Page web Applications (SPA)
36 Giao thức SPA
Single page application là một ứng dụng web giúp nâng cao trải nghiệm
người dùng bằng cách sử dụng HTML5 và AJAX. Đầu tiên khi tải một trang web bất kỳ nào đấy, SPA sẽ tải một trang HTML đơn, sau đó dựa trên yêu cầu của
người dùng, SPA sẽ tiếp tục tải HTML khác trong cùng một trang đó, SPA có thể
sử dụng một vài thư viện JavaScript như ReactJS, AngulerJS, VueJS…
Toàn bộ resource của web bảo gồm file CSS, Javascript, master layout hay cấu trúc web page sẽđược load lần đầu tiên khi chúng ta bắt đầu một trang web.
Ở những lần sau, khi chuyển trang khác, người dùng sẽ gửi yêu cầu tới server để
lấy dữ liệu cần thiết về. Việc này mang đến trải nghiệm cho người dùng tốt hơn,
giảm thời gian phải tải lại toàn bộ trang web cồng kềnh, tiết kiệm được băng thông cũng như thời gian chờ đợi. Việc này trái ngược với các trang web truyền thống khi toàn bộ trang web truyền thống phải tải lại toàn bộ trang khi chuyển sang trang mới.
Ngoài có hiệu năng tốt trên trang web, SPA sẽ cho chúng ta trải nghiệm tốt hơn khi sử dụng trên mobile. SPA giúp trang web tải nhanh hơn, khiến nó trở
thành lợi thế lớn khi phục vụcho người dùng.
SPA giúp bạn bảo mật tốt hơn vì khi yêu cầu người dùng thay đổi thì không phải tải lại link của trang web.
Ưu điểm:
- SPA cho trải nghiệm mobile tốt hơn: Với SPA, việc thiết kế phiên bản mobile cho ns sẽ dễ dàng hơn nhiều và người dùng cũng di chuyển dễ dàng hơn trên site đó. Hơn nữa, single page sẽ giúp cho web load nhanh hơn, khiến nó trở
thành lợi thế lớn khi phục vụ người dùng. Nhiều người dùng cảm thấy khó khăn
khi phải thực hiện các thao tác bấm trên thiết bị có màn hình nhỏ, như điện thoại
di động, và Single page trong trường hợp này sẽ thích hợp hơn cho họ.
- SPA khiến việc chọn đối tượng thao tác dễdàng hơn: Với Single page, tất cả mọi thông tin người dùng có thể tìm thấy đều đặt tại một trang duy nhất.
Đối với SEO, đây là một cách làm tốt, bởi lẽ nó chỉ nhắm tới một hoặc một bộ từ khóa mà thôi. Tuy nhiên, người dùng sẽ phải cuộn toàn bộtrang web để tìm thấy những thứ mà họ mong muốn, do đó họ có thể sẽ đi khỏi trang của bạn nếu như
37 trên site đều có mục đích của nó và bạn đã suy tính kỹlưỡng trước khi đặt chúng
ởđó.
- SPA giúp website có độ tin cậy cao hơn: Link là một trong những yếu tố lớn quyết định một website sẽđược xếp hạng như thếnào. Đây chính là lợi thế
của việc chỉ có một trang vì mọi link trỏ tới đều trỏ về trang chủ của bạn.
- Hạn chế các yêu cầu không cần thiết tới web server. Giảm tải khi có
lượng người dùng lớn để đảm bảo tốc độ trả về để đáp ứng nhu cầu của người dùng. Chính từ đó dẫn việc tiết kiệm tài nguyên dư thừa không cần thiết và đảm bảo được hệ thống vận hành ổn định. [9]
Nhược điểm:
- Nội dung của SPA không có độ chi tiết cao: Một trong những điểm bất lợi của site một trang đó là nội dung sẽ không thể nào cụ thể và chi tiết được như
website có nhiều trang. Việc lấp đầy nội dung của Multiple pages Application trên SPA là không thể. Điều mà bạn có thể làm là chia nhỏ các mục của nội dung ra. Mỗi mục này sẽ tương ứng với một trang riêng biệt nếu bạn làm website có nhiều trang
- Không sử dụng được các kỹ thuật SEO nâng cao: Có những kỹ thuật SEO nâng cao mà chắc chắn là bạn không thể sử dụng được trên single page. Một trong các kỹ thuật đó là kỹ thuật cấu trúc website thành các Category và Sub-Category để hiển thị nội dung tốt nhất cho người dùng và giúp site của bạn
được chia theo độ tin cậy. Kỹ thuật này được gọi là siloing. Chắc chắn với SPA, bạn sẽ không thể nào áp dụng được kỹ thuật siloing này.
b.Multiple-page Applications
Cách xây dựng trang web theo MPA thường được sử dụng cho các trang web truyền thống như https://ngoisao.net,... Cách xây dựng này khiến trang web có hiệu năng thấp hơn so với SPA vì mỗi khi yêu cầu của người dùng thay đổi thì phải tải lại HTML của cả trang, bao gồm cả những nội dung mà mình không yêu cầu. Điều này khiến cho trang web khi có bất cứ một thay đổi nào cũng phải tải lại nội dung của cả một trang web.
Framework React ngoài làm trang web ra còn có thể sử dụng để tạo lên những ứng dụng trên mobile, phát triển các ứng dụng dựa trên nền tảng framework React Native.
38
Hình 3. 9. React Native
React Native là một công nghệ giúp chúng ta lập trình đa nền tảng để tạo ra các ứng dụng trên môi trường mobile. Nó là một framework mã nguồn mở được phát triển bởi Facebook, cho phép người lập trình viên sử dụng ngôn ngữ javascript để phát triển phần mềm trên mobile sử dụng hệ điều hành android và
ios. Cũng giống như ReactJs, react native sử dụng các native components thay vì các web components. Vì vậy sựđa năng khi sử dụng framework react giúp người lập trình viên có thêm những lựa chọn khi không chỉ phát triển trên môi trường web mà còn có thể sử dụng những kiến thức đó phát triển trên môi trường mobile.
3.4.1.4. Framework thiết kế giao diện
Sử dụng framework Ant.Design để thiết kế giao diện cho trang web.
Với một lập trình viên fontend không thể không biết đến 1 framework như
bootstrap thực hiện thiết kế giao diện cho trang web của mình. Nó hỗ trợ chúng ta dễdang hơn trong việc tạo giao diện trên trang web theo chuẩn nhất định, tạo các trang web thân thiện với người dùng. Và framework Ant.Design là một
framework tương tựnhư bootstrap nhưng nó hỗ trợdành riêng cho React để giúp
người lập trình có thể thiết kế giao diện nhanh hơn khi dựa trên các thuộc tính có sẵn trong các thẻ mà Ant.Desgin cung cấp.
Atd là tập hợp các components của React được xây dựng theo chuẩn thiết kế của Ant UED Team. Tương tự như các framework phổ thông khác, Ant cung cấp hầu hết các component thông dụng trong ứng dụng web hiện đại như layout,
39 button,icon, datepicker, input… Bên cạnh đó Ant cũng có những component
riêng như localeProvider cho phép thay đổi ngôn ngữ trên toàn ứng dụng.
Antd được tạo ra cho các ứng dụng máy tính nội bộ, cam kết trải nghiệm của người dùng và các nhà thiết kế sản phẩm. Những phương thức được cung cấp bởi antd mang tới cho người dùng thấy sựđơn giản, tinh tế trong những thiết kế. Tạo lên sự thoải mái cho người dùng khi sử dụng.
3.4.1.5. Css/Scss
SCSS là một ngôn ngữ tiền xử lý CSS. Người lập trình viên có thể viết CSS theo thứ tự rõ ràng, quản lý các biến đã được định nghĩa sẵn, các class dùng chung hay có thể tựđộng nén tập tin CSS lại để tiết kiệm dung lượng [10].
Đặc điểm của SCSS:
- Cú pháp của SCSS giống như một ngôn ngữ lập trình. Có thể khai báo biến để sử dụng nhiều lần cho một tính giống nhau trong nhiều component khác nhau.
- Tính kế thừa: một class mới có thể kế thừa được các thiết kế từ một
class trước đó thông qua hàm extends.
- Quy tắc Mixin: lưu thuộc tính của một thẻ hay class trong một
component để sử dụng cho nhiều component thông qua hàm include.
- Sử dụng các một hàm scss cho nhiều component bằng cách import các
hàm đó vào component.
Những đặc điểm trên giúp ta có thể tái sử dụng thuộc tính css của 1 thẻ
hay class và giúp ta kiểm soát được cấu trúc của css.