Scribd Logo
Upload

Welcome to Scribd!

  • BẢN THUYẾT TRÌNH XLTHS-FRONTEND WEBSITE

    Uploaded by

    Lê Văn Quang
    8 views9 pages
    Tài liệu

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Tài liệu

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    8 views9 pages

    BẢN THUYẾT TRÌNH XLTHS-FRONTEND WEBSITE

    Uploaded by

    Lê Văn Quang
    Tài liệu

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 9

    HTML 

    là viết tắt của cụm từ Hypertext Markup Language (tạm dịch là Ngôn


    ngữ đánh dấu siêu văn bản). HTML được sử dụng để tạo và cấu trúc các thành
    phần trong trang web hoặc ứng dụng, phân chia các đoạn văn, heading, titles,
    blockquotes… và HTML không phải là ngôn ngữ lập trình.

    Một tài liệu HTML được hình thành bởi các phần tử HTML (HTML Elements)
    được quy định bằng các cặp thẻ (tag và attributes). Các cặp thẻ này được bao bọc
    bởi một dấu ngoặc ngọn (ví dụ <html>) và thường là sẽ được khai báo thành một
    cặp, bao gồm thẻ mở và thẻ đóng. Ví dụ, chúng ta có thể tạo một đoạn văn bằng
    cách đặt văn bản vào trong cặp tag mở và đóng văn bản <p> và </p> :

    Ví dụ: <p>Đây là cách bạn thêm đoạn văn trong HTML.</p>

    Css:
    CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử
    dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh
    dấu (HTML). Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho trang web. Bạn
    có thể hiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử trên
    website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ giúp
    chúng ta có thể thêm style vào các phần tử HTML đó như đổi bố cục, màu sắc
    trang, đổi màu chữ, font chữ, thay đổi cấu trúc…
    Responsive:
    Responsive Web Design (RWD) là thuật ngữ ám chỉ cách thiết kế trang web
    hiển thị tương thích với mọi kích thước thiết bị và là xu hướng mới theo đó
    quy trình thiết kế và phát triển web. Tức là bố cục trang web sẽ tự đáp ứng
    theo hành vi người dùng và môi trường hiển thị. Môi trường này chính là
    kích thước của trình duyệt, kích thước hoặc hướng xoay thiết bị. Và thiết bị ở
    đây đa phần là các thiết bị di động như smartphone hoặc tablet. Lấy một ví
    dụ với trang blog hiện tại thì đây chính là một dạng thiết kế Responsive Web
    Design. Các bạn có thể thử thay đổi kích thước trình duyệt, xem trên di
    động, tablet,… mà vẫn đảm bảo giao diện hiển thị tốt.

    Để làm được điều đó chúng ta sẽ sử dụng linh hoạt kết hợp các kỹ thuật bao
    gồm flexible grid, responsive image và CSS media query. Khi người dùng
    chuyển từ máy tính xách tay của họ sang iPad hay iPhone, trang web sẽ tự
    động chuyển đổi để phù hợp với kích thước màn hình và kịch bản xử lý. Nói
    cách khác, các trang web cần phải có công nghệ tự động đáp ứng theo thiết
    bị của người dùng. Điều này sẽ loại bỏ sự cần thiết cho nhiều thiết kế web
    khác nhau và giảm thiểu thời gian cũng như chi phí thiết kế web.

    3. Sự khác biệt giữa SPA và MPA

    - SPA (Single Page Application): là một ứng dụng web hay một website mà ở đó
    tất cả các thao tác của người dùng chỉ diễn ra trên 1 trang duy nhất, tất cả các cấu
    trúc của trang web (HTML) được load sẵn 1 lần và sẽ không load lại ngay cả khi
    chuyển trang. Một số ông lớn đang sử dụng SPA: Facebook, Google, Twitter,...

    - MPA (Multi-Page Application): hoạt động theo cách truyền thống, yêu cầu ứng
    dụng phải tải lại hoàn toàn mỗi khi người dùng tương tác với nó. MPA được dùng
    bởi các web thương mại điện tử như Shopee, Lazada, Tiki,....

    - Tốc độ:

    • SPA tải nhanh hơn ( vì nó tải phần lớn tài nguyên ứng dụng chỉ một lần.
    Trang không tải lại hoàn toàn bất cứ khi nào người dùng yêu cầu một phần
    dữ liệu mới)

    • MPA tải châm hơn (vì trình duyệt phải tải lại toàn bộ trang từ đầu bất cứ
    khi nào người dùng muốn truy cập dữ liệu mới hoặc chuyển sang một phần
    khác của trang web)

    --> Thời gian tải tối ưu cho một trang web là 0,4 giây . Nếu trang web hoặc ứng
    dụng của bạn có nhiều hình ảnh, thì việc chọn SPA là một lựa chọn an toàn hơn.

    - SEO:

    • SPA: Kém thân thiện với SEO (Nguyên nhân chủ yếu là do hầu hết các ứng
    dụng một trang đều chạy trên JavaScript mà hầu hết các công cụ tìm kiếm
    không hỗ trợ. Các trang web được lập chỉ mục thông qua “thu thập thông
    tin”)

    • MPA cho phép định vị trang web tốt hơn (vì mỗi trang có thể được tối ưu
    hóa cho một từ khóa khác nhau)
    4. Nên sử dụng SPA hay MPA để phát triển web

    Mỗi kiến trúc đều có những ưu và nhược điểm riêng. Để lựa chọn đúng, trước
    hết bạn phải xác định mục tiêu kinh doanh của mình. Sau đó, phác thảo các tính
    năng mà ứng dụng web của bạn cần phải có để thực hiện những mục tiêu đó.

    - Sử dụng SPA khi:

    • Giới thiệu thương hiệu là mục tiêu chính của ứng dụng web

    • Bạn muốn tạo một phiên bản nhỏ hơn của một ứng dụng lớn hơn mà bạn
    định xây dựng trong tương lai

    • Khi ứng dụng của bạn không phụ thuộc nhiều vào SEO

    - Sử dụng MPA khi:

    • Bạn muốn giới thiệu một số lượng lớn sản phẩm, dịch vụ hoặc tính năng
    thông qua ứng dụng

    • Bạn muốn phục vụ cho cơ sở người dùng đa dạng với nhiều yêu cầu và sở
    thích khác nhau

    • Sự thành công của ứng dụng của bạn phụ thuộc vào thứ hạng của công cụ
    tìm kiếm

    1. React

    - Khái niệm: React được biết đến là thư viện JavaScript giúp xây dựng component
    UI (giao diện người dùng) tương tác dễ dàng hơn, có trạng thái và có thể sử dụng
    lại được với xu hướng Single Page Application.

    - Lịch sử ra đời: React lần đầu tiên được triển khai cho ứng dụng Newsfeed của
    Facebook năm 2011, sau đó được triển khai cho Instagram.com năm 2012. Nó
    được mở mã nguồn (open-sourced) tại JSConf US tháng 5 năm 2013.
    - Ứng dụng:

    • React giúp việc viết Javascript dễ dàng hơn: React sử dụng cú pháp đặc biệt
    gọi là JSX, cho phép bạn trộn HTML và JavaScript. Điều này không phải là
    bắt buộc, chúng ta vẫn có thể viết thuần JavaScript, nhưng nên sử dụng cú
    pháp mới bởi nó giúp việc viết ‘components’ đơn giản hơn.

    • Các thành phần có thể tái sử dụng được: Mỗi thành phần tự quyết định
    cách nó render và logic riêng của nó. Cách tiếp cận này tạo ra kết quả tuyệt
    vời và chúng ta có thể tái sử dụng các thành phần bất cứ nơi nào ta cần

    2. Redux

    - Khái niệm: Redux là một vùng chứa trạng thái có thể dự đoán được hay còn biết
    đến là một thư viện của JavaScript. Thư viện này được thiết kế để giúp bạn viết
    các ứng dụng JavaScript có thể hoạt động nhất quán trong các môi trường máy
    khách, máy chủ và môi trường số, đồng thời cho phép dễ dàng kiểm tra.

    - Nguyên nhân ra đời: Do yêu cầu cho các ứng dụng single-page sử dụng
    Javascript ngày càng trở lên phức tạp thì code của chúng ta phải quản lý nhiều
    state hơn. Với Redux, state của ứng dụng được giữ trong một nơi gọi là store và
    mỗi component đều có thể access bất kỳ state nào mà chúng muốn từ chúng
    store này.
    - Lịch sử ra đời: Năm 2013, Facebook nói rằng AngularJS của Google chậm chạm
    và nặng nề, vì vậy năm này họ giới thiệu ReactJS tới với cộng đồng các lập trình
    viên. Thế nhưng ReactJS chỉ là một thư viện để tạo ra các Component và render
    các Component này lên giao diện, ReactJS không có khả năng quản lý trạng thái
    của ứng dụng. Sau đó không lâu Facebook giới thiệu một thư viện Javascript với
    tên là Flux giúp quản lý trạng thái của ứng dụng, và nó là một thư viện được ra đời
    để hỗ trợ React. Trong thời gian đó Dan Abramov nghiên cứu về Flux của
    Facebook và ngôn ngữ ELM. Anh ta đã bị ảnh hưởng bởi kiến trúc của ELM, và
    nhận thấy sự phức tạp của Flux. Tháng 5/2015 Dan Abramov công bố một thư
    viện mới có tên Redux, nó là dựa trên kiến trúc của ELM và loại bỏ sự phức tạp
    của Flux.

    - Ứng dụng:

    • Hỗ trợ dự đoán trạng thái: Redux có chức năng dự đoán và quản lý trạng
    thái và chúng sẽ không bao giờ thay đổi. Lợi ích này có thể giúp người
    dùng thực hiện các nhiệm vụ phức tạp như hoàn tác hoặc làm lại vô thời
    hạn. Đồng thời, Redux còn có chức năng luân chuyển linh hoạt giữa các
    trạng thái để kiểm tra hiệu quả trong thời gian thực.

    • Khả năng bảo trì: Redux có một hệ thống code cực kỳ nghiêm ngặt,
    nhưng với những người đã sử dụng và hiểu về Redux sẽ tiếp cận dễ dàng
    hơn. Cũng chính việc này đã giúp cho Redux có thể được bảo trì một
    cách dễ dàng. Bên cạnh đó, lợi ích này còn góp phần giúp người dùng
    tách biệt logic nghiệp vụ khỏi sơ đồ thành phần. Trong khi đó, mục tiêu
    quan trọng của các ứng dụng có quy mô lớn hiện nay đều là hướng cho
    phần mềm của mình có thể dự đoán cũng như bảo trì được.

    • Gỡ lỗi một cách dễ dàng: Redux cho phép người dùng gỡ lỗi dễ dàng
    bằng cách lưu lại những Action và trạng thái để dễ nhận diện đối với
    những trường hợp lỗi mã hóa, lỗi mạng và một số lỗi khác khi định dạng
    trong quá trình triển khai chương trình. Việc gỡ lỗi thông thường sẽ cần
    nhiều thời gian và phức tạp nhưng với Redux DevTools của Redux sẽ hỗ
    trợ người dùng thực hiện thao tác gỡ lỗi dễ dàng hơn.

    • Lợi ích về hiệu suất: React Redux thực hiện nhiều tối ưu hóa hiệu suất
    bên trong để thành phần được kết nối của riêng bạn chỉ hiển thị khi thực
    sự cần.

    • Dễ kiểm tra: Tương đối dễ dàng để kiểm tra các ứng dụng Redux vì các
    chức năng được sử dụng để thay đổi trạng thái của các chức năng thuần
    túy.

    Fetch API và Axios

    1. Khái Niệm
     Fetch API là một API đơn giản cho việc gửi và nhận requesst bằng
    js. Fetch giúp cho việc thực hiện các yêu cầu web và xử lý phản hồi dễ
    dàng hơn so với XMLHttpRequest cũ.
    Phương thức fetch () nhận đầu vào là url để truy vấn rồi trả về response của
    request đó.

    - Axios là một thư viện HTTP Client dựa trên Promise. Cơ bản thì nó cung cấp
    một API cho việc xử lý XHR (XMLHttpRequests).
     Kết luận

    2. So sánh của Fetch API và Axios


     Cú pháp cơ bản
    Cả fetch và Axios có cú pháp khá đơn giản trong việc thực hiện yêu cầu.
    Axios tốt hơn bởi vì tự động chuyển đổi dữ liệu trả về (response) tới
    JSON, vì vậy khi sử dụng Axios chúng ta có thể bỏ qua bước chuyển đổi
    dữ liệu trả về (response) tới JSON, không giống như Fetch() chúng ta vẫn
    có thể chuyển đổi dữ liệu trả về (response) tới JSON. Cuối cùng, phương
    thức ngắn gọn của Axios cho phép chúng ta thực hiện yêu cầu HTTP cụ
    thể dễ hơn.
     Tương thích trình duyệt
    Một trong nhiều lý do các lập trình viên ưu tiên Axios hơn Fetch là vì
    Axios được hỗ trợ trên nhiều trình duyệt và phiên bản chính, không giống
    Fetch nó chỉ hỗ trợ trong Chrome 42+, Firefox 39+, Edge 14+, and Safari
    10.1+

    Tổng kết

     Với hầu hết các yêu cầu cần thiết cho giao tiếp HTTP, Axios đều cung
    cấp giải pháp dễ dàng cho vấn đề đó. Thư viện này thật sự là một giải
    pháp tốt nhất khi cần thao tác với các request HTTP mà cần có cơ chế xử
    lý lỗi chuẩn và thêm các hành động ngăn chặn HTTP.
     Tuy nhiên, với các project nhỏ, chỉ yêu cầu gọi các API đơn giản, thì fetch
    cũng là một giải pháp tốt, vì suy cho cùng, Axios cũng là 1 thư viện bên
    thứ 3, và cần import vào, như vậy sẽ làm tăng kích thước file JS của
    chúng ta.

    You might also like