Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
NEW
Programming

/

Web Development

Masterclass Frontend

Đây là khóa học frontend nâng cao dành cho sinh viên và những người làm việc thực tế có ít nhất 1 năm kinh nghiệm phát triển web. Đối tượng phù hợp nhất là những người có từ 2-3 năm kinh nghiệm trong ngành, đang gặp phải thời kỳ trì trệ về kỹ năng hoặc muốn học về cấu trúc sản phẩm cần được xem xét trong các công ty lớn.

41 học viên đang tham gia khóa học này

  • hoonyhan
실습 중심
마스터과정
JavaScript
React
Functional Programming
oop
Next.js

Dịch cái này sang tiếng Việt

  • Phương pháp luận phát triển frontend nâng cao

  • Cấu trúc đối tượng GoF và ví dụ áp dụng thực tế trong công việc ## Cấu trúc đối tượng GoF là gì? GoF (Gang of Four) Design Patterns bao gồm 23 mẫu thiết kế được chia thành 3 loại: - **Creational Patterns** (Mẫu khởi tạo):

Chào mừng bạn đến với lớp học Frontend Master Class

Nhiều lập trình viên thường phát hiện ra rằng bản thân họ không thể phát triển thêm từ một thời điểm nhất định. Họ băn khoăn không biết nên học thêm gì, bản thân mình thiếu sót ở điểm nào, và các lập trình viên làm việc tại những công ty lớn hoặc các công ty cung cấp dịch vụ hoàn toàn khác thì phát triển dựa trên những cân nhắc gì.


Khóa học Frontend Master bắt đầu từ những kiến thức cơ bản và tổng hợp hầu hết các module cũng như phương pháp lập trình tạo nên khung sườn của phát triển frontend hiện đại. Thông qua khóa học này, bạn sẽ được học từ phương pháp GoF, các pattern code hiện đại và cách sử dụng React và Next.js, chiến lược quản lý state, design pattern, cấu trúc code, thư viện animation và công cụ testing - tất cả những nội dung giúp bạn thoát khỏi trình độ developer cơ bản để phát triển thành developer trung cấp và cao cấp. Khóa học tập trung sâu vào JavaScript, React, lập trình hàm, hướng đối tượng, Next.js và hầu như không đề cập đến Vue.js cũng như Svelte.

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

1. Người có ít nhất 1 năm kinh nghiệm học tập hoặc làm việc trong lĩnh vực frontend

Đây là khóa học nâng cao dành cho những người đã có hiểu biết cơ bản về HTML, CSS, JavaScript và có kinh nghiệm phát triển các ứng dụng web đơn giản. Khóa học phù hợp với những ai muốn xây dựng năng lực phát triển frontend sâu hơn dựa trên kiến thức nền tảng đã học.


2. Những người làm việc trong thực tế đang không cảm thấy sự phát triển do các mẫu code lặp đi lặp lại

Bạn có cảm thấy sự phát triển bị đình trệ khi viết những đoạn code tương tự mỗi ngày không? Khóa học này sẽ trình bày các pattern và phương pháp tiếp cận đa dạng giúp giải quyết hiệu quả những vấn đề phức tạp thường gặp trong công việc thực tế. Bạn sẽ học được các kỹ thuật nâng cao giúp nâng cao chất lượng code và cải thiện năng suất phát triển.


3. Những người cần học về các đặc tả sâu và mẫu phát triển của Javascript

Bạn có muốn vượt ra khỏi việc chỉ đơn thuần sử dụng JavaScript để viết code hiệu quả hơn dựa trên sự hiểu biết sâu sắc về ngôn ngữ này không? Trong khóa học này, chúng tôi sẽ đi sâu vào các khái niệm nâng cao như nguyên lý hoạt động bên trong của JavaScript, lập trình bất đồng bộ, lập trình hàm, design pattern cùng với các ví dụ thực tế chi tiết.

Chương trình học chi tiết

JavaScript Nâng cao

  • Cấu trúc thời gian chạy

  • Hàm callback và Promise

  • Web API

  • Map / WeakMap

  • Set / WeakSet

  • Closure và quản lý bộ nhớ

một phần của lời giải thích về this

Mô hình lập trình

  • Lập trình hướng đối tượng

  • GoF Programming Design Patterns

  • Lập trình hàm

  • Cách sử dụng Generator

Bài giảng Builder Pattern

Mẫu thiết kế

  • Mẫu thiết kế Atomic Design

  • Mẫu Presentational & Container

  • Mô hình FSD

  • Custom Hooks

  • Compound Components

  • Mẫu Render Props

  • Higher-Order Components(HOCs)

  • Memoization

  • Ảo hóa

  • Props Collections & Getters

  • Slot

  • State Reducer

  • Lifted State

Bài giảng Memoization

Quản lý trạng thái

  • Bối cảnh xuất hiện của quản lý trạng thái

  • Quản lý trạng thái Redux

  • Quản lý trạng thái Recoil

  • Quản lý trạng thái Zustand

  • Quản lý trạng thái Jotai

  • Chiến lược sử dụng Context API

Một phần trong phần giải thích về Jotai

Hệ sinh thái React/Next.js

  • Đặc điểm của các phiên bản React

  • Các đặc điểm theo phiên bản Next.js

  • Chiến lược Fetching (React-query, SWR, Axios)

  • Chiến lược tải dữ liệu CSR

  • Chiến lược tìm nạp dữ liệu SSR

  • Chiến lược tìm nạp dữ liệu ISR

  • SEO của Next.js

Một phần trong hướng phát triển của React

Styling

  • Phương pháp xây dựng hệ thống thiết kế

  • Tailwind

  • Emotion.js

  • CSS Modules

Styling

Quản lý biểu mẫu

  • Xử lý Form

  • Chiến lược validation đồng bộ/bất đồng bộ

  • Trải nghiệm người dùng của Form

Quản lý biểu mẫu

Testing

  • Unit Test

  • Chiến lược kiểm thử Integration

  • Chiến lược kiểm thử E2E

Kiểm thử

Animation

  • Cách sử dụng GSAP

  • Cách sử dụng Motion

  • Cách sử dụng Anime.js

  • Tối ưu hóa UX hoạt hình

Thanos Snap

Xác thực và Bảo mật

  • OAuth 2.0, NextAuth.js, OpenID Connect

  • Quản lý phiên và token

  • Chiến lược token Next.js

  • Mã hóa hai chiều Payload

NextAuth.js

Tối ưu hóa hiệu suất

  • Core Web Vitals

  • Critical CSS

  • Chia tách mã nguồn

  • Lazy Load

  • Tối ưu hóa hình ảnh/font/bundle

Safari

Xử lý song song

  • Cách sử dụng Web Worker

  • Cải thiện hiệu suất xử lý song song của trình duyệt

  • Chiến lược offline của trình duyệt

Worker tự phục vụ

Khả năng truy cập và quốc tế hóa

  • WCAG 2.1 Khả năng tiếp cận web

  • Các trường hợp sử dụng ARIA

  • Công cụ kiểm tra khả năng truy cập

  • Triển khai i18n và quản lý đa ngôn ngữ

  • Định dạng/RTL/Xử lý tiền tệ

  • Chiến lược hiệu suất bản địa hóa

Công cụ phát triển trình duyệt Firefox

Công cụ phát triển

  • Cách sử dụng công cụ phát triển

  • Cách sử dụng công cụ phân tích web

  • Cách sử dụng công cụ đánh giá bundling

Thay đổi bố cục

Tài liệu giảng dạy đồ sộ

Tài liệu bài giảng được cấu trúc với vô số ví dụ mã, giải thích và câu trả lời cho các câu hỏi dự kiến.

Một phần của tài liệu bài giảng

Những lưu ý trước khi học

Môi trường thực hành

  • Hệ điều hành và phiên bản (OS): Có thể sử dụng trên tất cả các hệ điều hành như Windows, macOS, Linux, v.v.

  • Công cụ sử dụng: Cursor và trình duyệt internet

  • Cấu hình PC: PC cấu hình cơ bản có thể kết nối internet

Tài liệu học tập

  • Định dạng tài liệu học tập được cung cấp: Miro, v.v.

  • Khối lượng và dung lượng: Cung cấp tài liệu học tập cho từng phần

Kiến thức tiên quyết và lưu ý

  • Càng có nhiều kinh nghiệm tự mình suy nghĩ để giải quyết các vấn đề lập trình thì càng có ích khi nghe giảng.

  • Nếu có kinh nghiệm về backend và DevOps ngoài frontend thì sẽ giúp ích rất nhiều.

  • Bản quyền của khóa học này thuộc về giảng viên và nghiêm cấm phân phối cũng như sao chép trái phép. Tài liệu học tập cũng có bản quyền và cấm sử dụng ngoài mục đích học tập cá nhân.

Gửi các học viên thân mến


Xin chào, tôi là Han Sang Hoon.


Tôi đã tạo ra sản phẩm đầu tiên khi học lớp 8. Lúc đó tôi không ngờ rằng trang web mình tạo ra sẽ trở thành bước ngoặt trong cuộc đời. Trang web đầu tiên tôi làm đã có hơn một nghìn người truy cập ngay trong ngày đầu tiên, và lúc đó tôi đã nhận được sự động viên và khen ngợi từ hàng chục người dùng trực tuyến không quen biết. Không thể quên được trải nghiệm đó, tôi đã tiếp tục thực hiện vô số những nỗ lực trong lĩnh vực web.


Sau khi nếm trải khoảnh khắc ngọt ngào đó, tôi đã liên tục trải qua vô số thử thách và thất bại. Để tạo ra sản phẩm mong muốn, tôi đã phát triển trong căn phòng nhỏ suốt nhiều năm, và trong quá trình đó, tôi hiểu rõ hơn ai hết nỗi đau và khó khăn của việc phát triển một mình. Vì hiểu rõ cảm xúc và sự cô đơn đó, tôi đã kiên trì ghi lại và chia sẻ với thế giới con đường mà tôi đã đi qua trong hơn 10 năm. Tôi muốn truyền tải thông điệp đến những người đang làm việc trong môi trường cô đơn như tôi, trong môi trường không có ai dạy dỗ mình. Tôi muốn nói với họ rằng 'Bạn không hề cô đơn'.


Tôi đang điều hành một công ty phát triển phần mềm trong thực tế và đã gặp gỡ hàng chục doanh nghiệp, thực hiện vô số giao dịch và tạo ra nhiều sản phẩm. Qua quá trình đó, tôi có thể thấy được hướng phát triển, triết lý và những điều mà mỗi công ty coi trọng. Tôi cũng đã chứng kiến những người phải chịu đựng các mẫu code tệ và văn hóa phát triển không tốt dưới sự quản lý của một số ít developer có tính chuyên quyền trong các công ty nhỏ. Thị trường phát triển phần mềm Hàn Quốc tuy có vẻ như đang làm cùng một công việc phát triển như vậy, nhưng thực tế đang phát triển theo những cách thức hoàn toàn khác nhau.


Nếu những người đang đọc bài viết này đang dẫn dắt dự án tại một công ty nhỏ hoặc đang có những nghi ngờ và lo lắng về phương pháp phát triển mà bản thân đã áp dụng cho đến nay, thì khóa học này sẽ hữu ích cho bạn. Tôi không cố chấp với chỉ những phương pháp mà tôi đã chia sẻ. Tôi muốn kể cho bạn nghe câu chuyện của một lập trình viên đã trải nghiệm trước những ghi chép về việc học hỏi, suy nghĩ về code và trăn trở về code tốt hơn trong suốt cuộc đời mình.


Không có code nào giống như chân lý tuyệt đối. Các developer phải thực hiện vô số sự đánh đổi và tìm ra lựa chọn tốt hơn tùy theo từng tình huống. Trong quá trình đó, nếu như junior developer chỉ nhìn thấy vài lựa chọn rồi đưa ra quyết định, thì khi trở thành senior, họ có thể diễn giải vấn đề bằng cái nhìn sâu sắc hơn. Việc viết code dưới dạng khác nhau và viết theo cách dễ đọc hơn dù có vẻ hoạt động giống nhau, đều được tích lũy thông qua sự suy ngẫm và kinh nghiệm.


Thông qua khóa học này, các bạn sẽ có thể nhìn những đoạn code mà mình đã viết trong quá khứ bằng con mắt khác so với trước. Khi nhìn code bằng con mắt khác so với trước, các bạn sẽ có những suy nghĩ mà trước đây chưa từng nghĩ đến, và trong quá trình giải quyết những suy nghĩ đó, các bạn có thể tạo ra những đoạn code tốt hơn. Tôi đã đưa vào khóa học những suy nghĩ và giải pháp mà vô số các lập trình viên tiền bối đã trải qua. Tôi hy vọng các bạn sẽ có được những hiểu biết sâu sắc riêng của mình khi xem những giải pháp của những người đã suy nghĩ trước.

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

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

  • Nhà phát triển frontend đang trải qua thời kỳ trì trệ về kỹ năng

  • Người có ít nhất 1 năm kinh nghiệm và sự nghiệp phát triển web trở lên

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

  • Kiến thức cơ bản về lập trình

  • Tối thiểu 1 năm kinh nghiệm phát triển web trở lên

  • Hiểu biết về cú pháp HTML, CSS cơ bản

  • Hiểu biết cơ bản về Vanilla JavaScript

  • Có ít nhất 6 tháng kinh nghiệm sử dụng React.js và Next.js

Xin chào
Đây là

풀스택 개발자 한상훈입니다.

유튜브: https://www.youtube.com/@hoony_han

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

Tất cả

434 bài giảng ∙ (56giờ 10phút)

Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Chưa có đủ đánh giá.
Hãy trở thành tác giả của một đánh giá giúp mọi người!

14.625.954 ₫

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!