Курс: Архітектура фронтенду
Сучасні підходи до побудови web-застосунків
16 практичних занять
На цьому курсі ви ознайомитесь з актуальними та ефективними підходами до розробки, які забезпечать побудову якісної архітектури web-застосунків!
Ви засвоїте на практиці Next.js, Micro Frontends, Progressive Web Apps (PWA), та Gatsby. Ці технології та підходи є одними з ключових у 2024 році. Ви навчитеся їх застосовувати та розв'язувати найпоширеніші проблеми, які виникають під час розробки.
- Next.js. Як створювати серверно-оптимізовані React-додатки з Next.js та розгортати застосунки з допомогою Vercel, AWS Amplify, Azure. Бонусом, ви навчитеся будувати SPA з Next, та як їх розгортати на AWS S3
- Micro Frontends. Як розбити монолітний фронтенд на менші, незалежні частини, які можна розробляти та розгортати на AWS, Azure окремо та незалежно. Ми розглянемо сучасний інструмент управління станом, Zustand, і рішення маршрутизації від Tanner Linsley, TanStack Router.
- PWA. Як створювати web-застосунки, які можуть працювати офлайн і мають User Experience, близький до нативних застосунків.
- Gatsby. Як генерувати швидкі, оптимізовані сайти з Gatsby, використовуючи GraphQL для управління даними. Ми розглянемо розгортання таких застосунків на AWS, Azure.
Крім теорії, ви будете практикуватися, створюючи реальні web-застосунки. Для закріплення навичок, ви побудуєте декілька проєктів, які залишаться у вас в портфоліо.
Після проходження цього курсу, ви зможете:
- ефективно будувати архітектуру ваших додатків
- обирати потрібні інструменти, знаючі їх сильні та слабкі сторони
Цей курс підійде як новачкам, так і досвідченим розробникам, які хочуть вдосконалити свої знання та навички.
Ментори:
Антон Худяков, Frontend Engineer II в одній із MAANG компаній. Має 6+ років досвіду створення web-застосунків для електронної комерції, інструментів бізнес-аналітики, статичних генераторів web-сайтів, моделей машинного навчання, рішень MLOps.Микита Попов, Senior Software Engineer в ALLSTARSIT. Має 10+ років досвіду, що охоплює стартапи та проєкти рівня enterprise. Брав участь у міграції великих SAAS рішень з використанням хмарних технологій та сучасних інструментів web-розробки.
Формат:
4 модулі: 16 занять по 2 рази на тиждень, четвер (19:30) та неділя (11:00).
Старт занять: 02 травня, четвер, 19:30
Тривалість одного заняття: ~2 години
Платформа: Zoom
Кому буде цікаво? Фронтенд-розробникам з базовим знанням JS
Мова лекцій: українська. Презентації та шаблони надаються англійською мовою.
Усі матеріали, посилання на ZOOM-заняття та відео курсу будуть розміщені на навчальній платформі. Після покупки квитка ви отримаєте доступ до курсу на електронну адресу, вказану при реєстрації.Кому буде цікаво?
- Frontend-розробникам зі знанням JS
- Всім, хто хоче розібратися в сучасній архітектурі web-застосунків
Програма
Chapter 1: Public-Facing Web Applications with SSR
Мета цього модулю - показати, що Next.js де факто стає стандартним та рекомендованим способом створення web-застосунків у 2024 році. Ви дізнаєтесь, як за допомогою Next.js створювати сучасні застосунки.
Кожен урок буде починатись з прикладів коду та презентації по Next.js та SSR, ціль цього модулю - познайомити учасників з новими можливостями Next.js та основ SSR.
В кінці у нас буде практика - викладач у форматі лайв кодингу напише блог з використанням останніх функціональних блоків Next.js (Серверні компоненти, APP роутер і тд).
Домашнє завдання буде по всьому першому модулю, учасники самі створять ще один застосунок з використанням Next.js.- 02.05 SSR and Next.js fundamentals, ShadcnU
- 09.05 Advanced Next.js
- 12.05 CI/CD, Deployment to Vercel, AWS, Performance Optimization
- 16.05 Q&A сесія
Chapter 2: SPA Web Applications with Micro Frontends
Ви дізнаєтесь, як розбити монолітний фронтенд на менші, незалежні частини, які можна розробляти та розгортати на AWS, Azure окремо та незалежно у цьомі модулі. Ми розглянемо сучасний інструмент управління станом, Zustand, і рішення маршрутизації від Tanner Linsley, TanStack Router
Кожен урок міститиме приклади коду та презентації по Vite, Zustand, TanStack Router, ShadcnUI, Мікрофронтендам, etc.
Після цього ми перейдемо до практики - викладач напише SPA застосунок з використанням Мікрофронтендів разом з учасниками курсу.
Домашнє завдання буде по всьому другому модулю, учасники створять застосунок з використанням технологій, наведених у цьому модулі.
- 19.05 Building an SPA with React, Vite, Zustand, TanStack Router
- 23.05 Micro Frontends
- 26.05 CI/CD, Deployments to AWS, Azure, Vercel
- 30.05 Q&A сесія
Chapter 3: PWA
В цьому розділі ви ознайомитесь з PWA web-застосунками, їх перевагами та прикладами розробки. Розглянемо сучасні методи розробки SPA та PWA застосунків з використанням Angular. Зробимо порівняння та наведемо приклади використання фреймворків за межами React екосистеми. Кожен міститиме приклади коду та презентації по різним аспектам PWA.
Кожен урок ми почнемо з прикладів коду та презентації з різних аспектів PWA
На практичному занятті викладач напише PWA-застосунок разом з учасниками.
Домашнє завдання буде по всьому треьому модулю: учасники створять застосунок з використанням service worker’ів, розгорнуть його та матимуть змогу ознайомитись з перевагами PWA власноруч.
- 02.06 Introduction to PWA and Web App Manifest
- 06.06 Service Workers
- 09.06 - PWA and hardware access
- 13.06 Q&A сесія
Chapter 4: SSG (Static Site Generation)
Задача цього модулю - познайомити учасників з Gatsby та показати у яких випадках SSG буде буде вдалим рішенням.
Кожен урок містить в собі приклади коду та презентації по SSG, Gatsby.
Після цього ми перейдемо до практики: викладач напише застосунок з використання Gatsby, SSG разом з учасниками курсу
Домашнє завдання: створення та деплой застосунку з використанням Gatsby, SSG.
- 16.06 Building a Static Website with Gatsby
- 20.06 SEO and Performance Optimization
- 22.06 Advanced Gatsby, CI/CD, Deployment for SSG
- 27.06 Q&A сесія
Ментор: Антон Худяков
— Frontend Engineer II в одній із MAANG компаній
— Lecturer at Fwdays
— Mentor at Tech Ground Hackathons
— Proud Ukrainian 🇺🇦
— Має 6+ років досвіду створення web-застосунків для електронної комерції, інструментів бізнес-аналітики, статичних генераторів web-сайтів, моделей машинного навчання, рішень MLOps.
Ментор: Микита Попов
— Senior Software Engineer в ALLSTARSIT, з десятирічним досвідом у розробці програмного забезпечення, що охоплює стартапи та проекти рівня enterprise.
— Прихильник генеративного ШІ, з досвідом тренування моделей та використання у Front End застосунках.
— Брав участь у міграції великих Software as a service рішень з використанням хмарних технологій та сучасних інструментів веб розробки.
— Ментор Tech Ground Hackathons, та активний учасник хакатонів.
— Ступінь у галузі комп'ютерних наук та електронної інженерії, з публікаціям на тему стиснення та обробки даних.