강의

멘토링

커뮤니티

Programming

/

Front-end

Điểm nhấn của phát triển Frontend, Web API (feat. React)

Chúng tôi sẽ đề cập đến các Web API có thể áp dụng vào thực tế. Hy vọng bạn sẽ trang bị được những "vũ khí" để giải quyết các yêu cầu mà chắc chắn bạn sẽ gặp phải ít nhất một lần.

(5.0) 4 đánh giá

136 học viên

Độ khó Cơ bản

Thời gian Không giới hạn

  • vroomfan
JavaScript
JavaScript
React
React
Web API
Web API
JavaScript
JavaScript
React
React
Web API
Web API

Đánh giá từ những học viên đầu tiên

Đánh giá từ những học viên đầu tiên

5.0

5.0

고슈

100% đã tham gia

Tôi rất thích vì đã có thể xem qua các Web API thường dùng. Chỉ toàn những điểm tinh túy nhất!! Đây là một bài giảng rất hay, nghe không hề áp lực. Tuyệt vời nhất 👍

5.0

망고

100% đã tham gia

Tôi đã hiểu rõ hơn về WEB API nên rất tốt. Tôi nghĩ sẽ tốt hơn nếu anh/chị có thể cho thấy góc nhìn thực tế hơn hoặc các ví dụ code.

5.0

Jang Jaehoon

33% đã tham gia

Cảm ơn bạn vì bài giảng hay!

Bạn sẽ nhận được điều này sau khi học.

  • Nguyên lý hoạt động của Web API trong trình duyệt

  • Cách giảm tải bằng Web Worker

  • Cách các context khác nhau (window, tab, iframe, v.v.) giao tiếp với nhau

  • Cách sử dụng Timer, Animation một cách chính xác hơn

Web API dành cho các nhà phát triển FE tỉ mỉ
Hiểu nhanh và dễ dàng thông qua các ví dụ đa dạng!

Điểm nhấn trong phát triển Frontend, Web API

Khi phát triển FE, bên cạnh fetch và setTimeout mà bạn thường xuyên tiếp xúc một cách tự nhiên, còn có những API cần phải tìm hiểu riêng như Worker, MessageChannel và MutationObserver.

Vượt xa việc triển khai các tính năng FE thông thường, Web API là yếu tố thiết yếu để xử lý lỗi một cách tỉ mỉ và tối ưu hóa, chẳng hạn như ứng phó với tình huống tab bị vô hiệu hóa, truyền dữ liệu giữa các tab khác nhau hay giảm thiểu các yêu cầu máy chủ trùng lặp.

Trong quá trình làm việc thực tế, tôi nhận ra rằng có thể giải quyết nhiều vấn đề khác nhau bằng Web API, từ việc triển khai các yêu cầu phức tạp, xử lý các tình huống lỗi không phổ biến cho đến tối ưu hóa hiệu suất.

Hy vọng bạn sẽ tìm hiểu được cách triển khai các yêu cầu chi tiết bằng Web API thông qua các ví dụ phản ánh những tình huống thực tế có thể gặp phải trong công việc.

Bạn đã bao giờ gặp tình huống như sau chưa? 🤔

  1. Trực quan hóa lộ trình di chuyển của người dùng trên bản đồ


    Dựa trên dữ liệu tọa độ bao gồm thông tin thời gian, bạn cần trực quan hóa lộ trình di chuyển bằng cách vẽ các đường trên bản đồ theo thời gian đã trôi qua. Dữ liệu như sau:


    [{ lng: 127.10, lat: 37.50, time: 1000ms },
    { lng: 127.11, lat: 37.51, time: 1700ms },
    { lng: 127.12, lat: 37.52, time: 2100ms }, ...]

    • setTimeout(drawLine, 1000); setTimeout(drawLine, 1700 - 1000); setTimeout(drawLine, 2100 - 1700); ... Liệu gọi liên tiếp setTimeout tương ứng với mỗi time như thế này có được không?

    • Có trường hợp nào setTimeout không hoạt động đúng như dự kiến không? Nếu có thì nên xử lý như thế nào?

  2. Đồng bộ hóa dữ liệu giữa nhiều tab
    Khi viết bài mới trên trang soạn thảo bài viết của tab A, bài viết mới đó cũng phải được hiển thị ngay lập tức trên trang danh sách bài viết của tab B.


    • Khi viết bài mới ở tab A, liệu có thể gửi thông tin về bài viết đó sang tab B, rồi ở tab B dùng giá trị này để cập nhật trạng thái (state) của danh sách không?
      { type: 'newPost', title: 'title_1', author: 'author_1', ... }

    • Liệu có nên gửi tín hiệu từ tab A sang tab B rằng có bài viết mới, và khi tab B nhận được thông tin này thì gọi lại API lấy danh sách không?


      { type: 'refetchPosts' }

    • Vậy thì phương pháp để trao đổi các dữ liệu như trên giữa các tab khác nhau là gì?


7 điểm mấu chốt về Web API học được qua bài giảng

  1. Hiểu nguyên lý hoạt động của Web API thông qua mã nguồn Chromium

  2. Hoạt động của Timer khi tab bị vô hiệu hóa và cách xử lý

  3. Giảm tải cho main thread bằng Worker

  4. Giảm tải cho máy chủ bằng cách tối thiểu hóa kết nối WebSocket

  5. Truyền dữ liệu giữa các ngữ cảnh duyệt web khác nhau

  6. Điều khiển animation bằng JS thay vì CSS

  7. Các Web API bổ sung cho công việc thực tế


Lộ trình học tập 📚

Section 1. Giới thiệu khóa học

Thông qua mã nguồn trình duyệt, chúng ta sẽ tìm hiểu cách Web API mở rộng chức năng của JavaScript và cách chúng được triển khai cũng như hoạt động trong trình duyệt.

Section 2. Sử dụng hàm timer một cách chính xác

Tìm hiểu cách setTimeout hoạt động khi tab bị vô hiệu hóa và cách triển khai bộ hẹn giờ một cách chính xác.

Phần 3. Web Workers API

Tìm hiểu cách sử dụng Worker để giải quyết các tình huống gây quá tải cho main thread hoặc server.

Phần 4. Message API

Học về các Web API cho phép giao tiếp trong các tình huống bị cô lập như giữa các Window khác nhau, các Tab khác nhau hay Shadow DOM.

Phần 5. Web Animations API

Học cách điều khiển animation bằng Web Animation API và requestAnimationFrame.

Section 6. Bonus Web API

Các bài học Web API bổ sung dành cho thực tế như MutationObserver, requestIdleCallback sẽ được cập nhật.

Hỏi & Đáp 💭

Q. Khóa học này có độ khó như thế nào?

Khóa học được tiến hành dựa trên giả định rằng bạn đã nắm vững cú pháp React cơ bản, khái niệm Event Loop và các kiến thức cơ bản về web. Chỉ cần có kiến thức nền tảng, bạn sẽ có thể dễ dàng theo kịp các Web API mới. Nếu có đoạn code nào trong tài liệu bài giảng mà bạn không hiểu, hãy thoải mái đặt câu hỏi nhé.

Q. Khóa học được tiến hành theo phương thức nào?

Mỗi chương sẽ đưa ra một tình huống vấn đề mới. Trước tiên, chúng ta sẽ tìm hiểu cách giải quyết vấn đề bằng JS/CSS cơ bản, sau đó xem xét các lỗi hoặc trường hợp ngoại lệ có thể xảy ra trong mã nguồn đó. Tiếp theo, tôi sẽ giới thiệu các Web API giúp giải quyết vấn đề một cách triệt để hơn và chúng ta sẽ cùng triển khai các tính năng mong muốn bằng Web API đó.

Q. Có thư viện đặc biệt nào được sử dụng trong khóa học không?

Vì đây là khóa học về Web API JavaScript nên bạn không cần phải học thêm các thư viện riêng biệt. Tuy nhiên, để buổi học diễn ra suôn sẻ, các thư viện như zod (TS validation), ws (websocket) đã được bao gồm trong package.json.

💾 Lưu ý trước khi tham gia khóa học

  • Yêu cầu kiến thức cơ bản về Web, Javascript, React.

  • Cung cấp toàn bộ mã nguồn được sử dụng trong bài học. Vì trong bài học tôi không đọc từng dòng mã mà chỉ đọc những phần cần thiết cho tiến trình giảng dạy, nên tôi khuyên bạn nên xem mã cùng lúc.


👨‍🎓 Phương pháp học tập được khuyến nghị

  • Sẽ rất tốt nếu bạn vừa theo dõi mã nguồn trong tài liệu học tập được cung cấp vừa xem video bài giảng.

  • Bạn nên tự mình thực hiện các nhiệm vụ được đưa ra ở cuối mỗi phần.


Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Những ai chỉ đang sử dụng setTimeout và fetch Web API trong công việc thực tế.

  • Những ai muốn giải quyết các yêu cầu khắt khe bằng khái niệm Web API.

Cần biết trước khi bắt đầu?

  • Cú pháp cơ bản React, Javascript

  • Cách sử dụng npm

Xin chào
Đây là

1,042

Học viên

50

Đánh giá

87

Trả lời

4.5

Xếp hạng

2

Các khóa học

Xin chào.
Tôi đã làm việc với tư cách là nhà phát triển Front-end trong 4 năm tại một startup.
Tôi sử dụng React, Next.js, bản đồ, biểu đồ, thư viện UI, v.v.

Hồ sơ năng lực (Portfolio)

Chương trình giảng dạy

Tất cả

25 bài giảng ∙ (2giờ 5phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

4 đánh giá

5.0

4 đánh giá

  • go5ue님의 프로필 이미지
    go5ue

    Đánh giá 4

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Tôi rất thích vì đã có thể xem qua các Web API thường dùng. Chỉ toàn những điểm tinh túy nhất!! Đây là một bài giảng rất hay, nghe không hề áp lực. Tuyệt vời nhất 👍

    • fined0006806님의 프로필 이미지
      fined0006806

      Đánh giá 36

      Đánh giá trung bình 4.8

      5

      100% đã tham gia

      Tôi đã hiểu rõ hơn về WEB API nên rất tốt. Tôi nghĩ sẽ tốt hơn nếu anh/chị có thể cho thấy góc nhìn thực tế hơn hoặc các ví dụ code.

      • jjhgwx님의 프로필 이미지
        jjhgwx

        Đánh giá 647

        Đánh giá trung bình 4.9

        5

        33% đã tham gia

        Cảm ơn bạn vì bài giảng hay!

        • yoonc017672님의 프로필 이미지
          yoonc017672

          Đánh giá 7

          Đánh giá trung bình 5.0

          5

          32% đã tham gia

          411.310 ₫

          Khóa học khác của vroomfan

          Hãy khám phá các khóa học khác của giảng viên!

          Khóa học tương tự

          Khám phá các khóa học khác trong cùng lĩnh vực!