
Getting Started with Next.js (feat. Map Service Development)
vroomfan
A course on Next.js fundamentals. Develop a map service end-to-end with Next.js.
초급
Next.js, SEO, vercel
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.
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!
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.
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?
Đồ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ì?
Hiểu nguyên lý hoạt động của Web API thông qua mã Chromium
Hoạt động của Timer khi tab bị vô hiệu hóa và cách xử lý
Giảm tải cho main thread bằng Worker
Giảm tải máy chủ bằng cách tối thiểu hóa kết nối WebSocket
Truyền dữ liệu giữa các browsing context khác nhau
Điều khiển animation bằng js thay vì css
API Web bổ sung cho thực tế công việ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.
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.
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.
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.
Học cách điều khiển animation bằng Web Animation API và requestAnimationFrame.
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. Độ 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.
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
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 등을 다룹니다.
Tất cả
25 bài giảng ∙ (2giờ 5phút)
Tài liệu khóa học:
Tất cả
4 đánh giá
5.0
4 đánh giá
Đánh giá 4
∙
Đánh giá trung bình 5.0
Đánh giá 33
∙
Đánh giá trung bình 4.7
Đánh giá 609
∙
Đánh giá trung bình 4.9
Đánh giá 7
∙
Đánh giá trung bình 5.0
418.122 ₫
Hãy khám phá các khóa học khác của giảng viên!
Khám phá các khóa học khác trong cùng lĩnh vực!