강의

멘토링

커뮤니티

Programming

/

Front-end

Phát triển Frontend với Kick, Web API (feat. React)

Chúng tôi đề cập đến Web API có thể ứng dụng vào thực tế. Mong bạn sẽ có được 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á

132 học viên

  • vroomfan
이론 실습 모두
JavaScript
React
Web API

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

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 ngữ cảnh khác nhau (window, tab, iframe, v.v.) giao tiếp

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

Web API dành cho các lập trình viên FE tỉ mỉ
Hiểu dễ dàng và nhanh chóng thông qua các ví dụ đa dạng!

Khởi đầu phát triển Frontend, Web API

Khi phát triển FE, bạn sẽ tự nhiên tiếp xúc với fetch, setTimeout cũng như các API cần học riêng như Worker, MessageChannel, MutationObserver.

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

Trong quá trình thực hiện công 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 như triển khai các yêu cầu phức tạp khó khăn, ứng phó với các tình huống lỗi không phổ biến, hoặc tối ưu hóa hiệu suất.

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

Bạn đã từng gặp phải tình huống như thế này chưa? 🤔

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


    Dựa trên dữ liệu tọa độ có chứa thông tin thời gian, cần phải vẽ đường trên bản đồ theo từng khoảng thời gian đã trôi qua để trực quan hóa lộ trình di chuyển. 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); ... Như thế này, gọi setTimeout liên tiếp theo từng time có được không?

    • Có những tình huống mà setTimeout không hoạt động như mong đợi không? Nếu có thì nên đối phó 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 tạo bài viết ở tab A, bài viết mới đó cũng phải hiển thị ngay lập tức trên trang danh sách bài viết ở tab B.


    • Khi viết bài mới ở tab A, bạn có thể truyền thông tin về bài đăng đó cho tab B, và tab B sử dụng giá trị này để cập nhật trạng thái (state) danh sách được không?
      { type: 'newPost', title: 'title_1', author: 'author_1', ... }

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


      { type: 'refetchPosts' }

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


7 điểm quan trọng về Web API học được qua khóa học

  1. Hiểu nguyên lý hoạt động của Web API thông qua mã 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 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 browsing context khác nhau

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

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


Chương trình học tập 📚

Phần 1. Giới thiệu khóa học

Học cách Web API mở rộng chức năng của JavaScript thông qua mã nguồn trình duyệt và cách chúng được triển khai và hoạt động trong trình duyệt.

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

Kiểm tra cách setTimeout hoạt động khi tab bị vô hiệu hóa và học cách triển khai timer một cách chính xác.

Phần 3. Web Workers API

Học cách giải quyết tình huống xảy ra tải trên main thread hoặc server bằng cách sử dụng Worker.

Phần 4. API Tin nhắn

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

Phần 5. Web Animations API

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

Phần 6. Bonus Web API

MutationObserver, requestIdleCallback và các bài học Web API bổ sung khác cho thực tế công việc sẽ được cập nhật.

Q&A 💭

Q. Độ khó của khóa học là như thế nào?

Khóa học này được tiến hành với giả định rằng bạn đã biết cú pháp React cơ bản, khái niệm event loop và kiến thức nền tảng về web. Nếu bạn có kiến thức cơ bản thì có thể dễ dàng theo kịp các Web API mới. Nếu có bất kỳ đoạn code nào trong tài liệu học không hiểu, xin hãy thoải mái để lại câu hỏi.

Q. Lớp học được tiến hành theo cách nào?

Mỗi phần sẽ trình bày một tình huống vấn đề mới. Chúng ta sẽ đầu tiên tìm hiểu cách giải quyết tình huống vấn đề bằng JS/CSS cơ bản, sau đó tìm hiểu về các bug hoặc tình huống ngoại lệ có thể xảy ra trong đoạn code đó. Tiếp theo, chúng tôi sẽ giới thiệu Web API để giải quyết vấn đề một cách tỉ mỉ hơn và triển khai chức 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ề JavaScript Web API nên không cần phải học thêm thư viện riêng biệt. Tuy nhiên, để việc giảng dạy diễn ra mượt mà, các thư viện như zod(TS validation), ws(websocket) v.v. đã được bao gồm trong package.json.

💾 Lưu ý trước khi học

  • Cần có kiến thức cơ bản về Web, Javascript, React.

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


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

  • Bạn nên xem video bài học cùng với mã nguồn tài liệu được cung cấp để có trải nghiệm học tập tốt nhất.

  • Chúng tôi khuyến khích bạn tự giải quyết 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?

  • Người chỉ sử dụng setTimeout, fetch Web API trong thực tế

  • Người muốn giải quyết 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?

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

  • Cách dùng npm

Xin chào
Đây là

1,037

Học viên

50

Đánh giá

87

Trả lời

4.5

Xếp hạng

2

Các khóa học

안녕하세요.
스타트업에서 4년동안 프론트엔드 개발자로 일하고 있습니다.
React, Next.js, 지도, 차트, UI library 등을 다룹니다.

포트폴리오

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

    It was great to be able to explore commonly used Web APIs. They've really gathered the key points!! It's a lecture that's easy to listen to without feeling burdened. Best 👍

    • fined0006806님의 프로필 이미지
      fined0006806

      Đánh giá 33

      Đánh giá trung bình 4.7

      5

      100% đã tham gia

      It was great to learn more about WEB API in detail. I think it would have been even better if you had shown more practical perspectives or example code.

      • jjhgwx님의 프로필 이미지
        jjhgwx

        Đánh giá 609

        Đánh giá trung bình 4.9

        5

        33% đã tham gia

        Thank you for the great lecture!

        • yoonc017672님의 프로필 이미지
          yoonc017672

          Đánh giá 7

          Đánh giá trung bình 5.0

          5

          32% đã tham gia

          418.122 ₫

          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!