Web Programing
  • Tổng quan
    • 1. SPA vs MPA
    • 2. Phương thức create Element()
  • Project 01
    • 1. Tổng quan về React Js
      • 1.1. Giới thiệu về React Js
      • 1.2. Cài đặt môi trường phát triển
      • 1.3. Tạo dự án đơn giản với create-react-app
  • 2. Kiến trúc và Component
    • 2.1. Cấu trúc dự án
    • 2.2. React hiển thị lên trình duyệt thế nào ?
    • 2.3. JSX là gì ?
    • 2.2. Tìm hiểu về component
    • 2.4. Ứng dụng component vào dự án đơn giản
  • 3. State và xử lý sự kiện React Event
    • 3.1. Tổng quan về State
    • 3.2. Quản lý state trong class component
    • 3.3. Quản lý state trong functional component
    • 3.4. Xử lý sự kiện với React Event
    • 3.5. Thực hành
  • PROJECT 2
    • 1. Tổng quan về Node.js và Express.js
      • 1.1. Giới thiệu về Node.js và các tính năng chính
      • 1.2. Cài đặt node.js và npm
      • 1.3. Khởi tạo ứng dụng node.js với Hello world
      • 1.4. Giới thiệu về express.js và các tính năng chính
      • 1.5. Cài đặt và triển khai ứng dụng với express
  • 2. Tạo RESTful API với Express.js
    • 2.1. Giới thiệu về API và RESTful API
    • 2.2. Tạo các endpoint cơ bản
    • 2.3. Hướng dẫn sử dụng Postman để kiểm tra API
    • 2.5.Auto Reload
  • 3. Kết nối CSDL MySQL với Express.js
    • 3.1. Giới thiệu về Hệ Quản Trị Cơ Sở Dữ Liệu SQL và MySQL
    • 3.2. Cài đặt MySQL
    • 3.3. Tạo bảng To-do list với MySQL
    • 3.4. Kết nối MySQL với ứng dụng Express.js
    • 3.5. Triển khai endpoint CRUD cho To do list App
    • 3.6. Kiểm tra endpoint với postman
  • Thực hành
    • Bài thực hành số 01
    • Bài thực hành số 02
Powered by GitBook
On this page
  1. Tổng quan

1. SPA vs MPA

SPA (Single Page Application) và MPA (Multi-Page Application) là hai kiến trúc phổ biến trong phát triển web.

1. SPA (Single Page Application)

  • Định nghĩa: SPA là loại ứng dụng web chỉ tải một trang HTML duy nhất và sau đó tự động cập nhật nội dung trang khi người dùng tương tác, mà không cần tải lại toàn bộ trang.

  • Cách hoạt động:

    • Khi người dùng truy cập ứng dụng, một trang HTML duy nhất được tải về.

    • Các tương tác sau đó (như điều hướng giữa các "trang" trong ứng dụng) được xử lý bởi JavaScript.

    • Dữ liệu và nội dung mới được tải qua các yêu cầu AJAX hoặc các phương thức tương tự mà không cần tải lại toàn bộ trang.

  • Ưu điểm:

    • Trải nghiệm người dùng mượt mà, nhanh chóng vì không cần tải lại trang.

    • Có thể tạo ra các ứng dụng web cảm giác gần như ứng dụng desktop.

    • Tải nhanh sau khi trang ban đầu đã được tải xuống.

  • Nhược điểm:

    • SEO (Tối ưu hóa công cụ tìm kiếm) khó khăn hơn do các công cụ tìm kiếm gặp khó khăn trong việc lập chỉ mục nội dung tải động. Tuy nhiên nhược điểm này đã và đang dần được cải thiện.

    • Thời gian tải ban đầu có thể chậm do cần tải nhiều tài nguyên (JavaScript, CSS).

    • Cần kỹ năng JavaScript nâng cao và các framework như React, Angular, hoặc Vue.js.

  • Ví dụ: Gmail, Google Maps, Facebook, Twitter.

2. MPA (Multi-Page Application)

  • Định nghĩa: MPA là loại ứng dụng web tải lại toàn bộ trang HTML mới mỗi khi người dùng yêu cầu một trang khác.

  • Cách hoạt động:

    • Mỗi lần người dùng điều hướng đến một trang mới, một yêu cầu HTTP được gửi đến máy chủ và máy chủ trả về một trang HTML hoàn chỉnh mới.

    • Quá trình này lặp lại cho mỗi trang mà người dùng yêu cầu.

  • Ưu điểm:

    • SEO dễ dàng hơn vì mỗi trang có thể được lập chỉ mục riêng lẻ với nội dung tĩnh.

    • Phù hợp với các dự án lớn yêu cầu tính bảo mật cao và nhiều trang nội dung khác nhau.

    • Không cần JavaScript phức tạp để xử lý điều hướng và dữ liệu.

  • Nhược điểm:

    • Trải nghiệm người dùng không mượt mà do cần tải lại toàn bộ trang khi điều hướng.

    • Tốc độ tải trang chậm hơn so với SPA.

    • Có thể yêu cầu nhiều tài nguyên từ máy chủ hơn khi tải lại trang.

  • Ví dụ: Các trang web tin tức, các trang thương mại điện tử truyền thống, blog, và hầu hết các trang web tin tức cũ.

So sánh nhanh:

Đặc điểm
SPA
MPA

Tải trang

Tải một lần, cập nhật nội dung động

Tải lại toàn bộ trang mỗi lần

Trải nghiệm

Mượt mà, giống ứng dụng desktop

Chậm hơn, cần tải lại trang

SEO

Khó khăn hơn và đang được cải thiện khi sử dụng các Framework

Dễ dàng

Hiệu suất

Nhanh hơn sau khi tải ban đầu

Chậm hơn do cần tải lại trang

Công nghệ

JavaScript, AJAX, Web API...

HTML, CSS, JavaScript, HTTP

Ứng dụng

Ứng dụng tương tác cao, dashboard

Trang thông tin, thương mại điện tử truyền thống

Lựa chọn giữa SPA và MPA phụ thuộc vào yêu cầu cụ thể của dự án, cũng như trải nghiệm người dùng mong muốn và khả năng quản lý của đội ngũ phát triển.

Next2. Phương thức create Element()

Last updated 7 months ago