ПРОГРАММА КУРСА ://
|
Частая ошибка разработчиков — пытаться создать идеальный продукт сразу. Однако, как показывает практика, гораздо важнее сначала быстро создать минимально жизнеспособный продукт, а уже потом заниматься его доработкой и улучшением. В этом модуле мы напишем работающий прототип новостной ленты с помощью React*, Webpack, TypeScript и GitLab Pages.
Открыть программу
1. Настройка окружения, HTML + CSS и деплой
Создадим нашу первую страницу без инструментов, добавим по необходимости интерактивность и задеплоим её на GitLab Pages.
2. Делаем страницы категорий новостей
Сделаем ещё 5 HTML-страниц и отобразим их на JS разными способами: createElement, template, innerHTML.
3. Что такое интернет и как он работает, TCP/IP, HTTP
На базовом уровне рассмотрим, как работает интернет, что такое IP и TCP и как они друг с другом соотносятся.
4. HTTP, HTTP/2, HTTP/3
Более детально рассмотрим протокол HTTP и поговорим о том, какие его недостатки привели к созданию HTTP/2 и HTTP/3.
5. CORS и подключение API
Научимся фиксить CORS и подтягивать данные в вёрстку.
5. Promises, Event Loop
Научимся писать асинхронный код. Узнаем, что JS на самом деле однопоточный, и познакомимся с EventLoop.
7. React*. Введение
Изучим предпосылки появления React* и его аналогов. Подключим библиотеку и изучим несколько базовых концепций: JSX и компонентный подход.
8. React*. Знакомство с хуками
Познакомимся с тем, как React* предлагает описывать стейт приложения. Разберём принцип работы автоматической перерисовки интерфейса (Reconciliation). Затронем тему хуков и рассмотрим те, которые понадобятся для перевода ленты на React*: useState и useEffect.
9. Babel, Webpack, сборка проекта
Рассмотрим вопрос модульной архитектуры. Познакомимся с CommonJS и ESM — главными стандартами этой архитектуры. Подключим Babel для превращения JSX в валидный JS-синтаксис. Свяжем все зависимости (css, js, изображения) с помощью Webpack. Прокачаем наш Gitlab CI.
10. TypeScript
Рассмотрим проблему недокументированного API, научимся верстать страницу новости.
Мини-проект "Memory Game"
Напишем свою игру на React, настроим сборку на Webpack и выложим всё это на GitLab Pages. Суть игры проста — перед пользователем лицевой стороной вниз разложены 16 карточек с рисунками. Пользователь переворачивает 2 карточки, и если рисунки на них совпадают, карточки убираются. Если нет — снова переворачиваются. Цель игры — найти все 8 пар рисунков.
|
Сегодня frontend-разработчику важно не только уметь писать клиентский код, но и знать, как этот код доставлять на сервер. Эти знания позволяют находить общий язык с остальными членами команды разработки и существенно повышают ценность специалиста на рынке труда. В этом модуле мы поговорим о том, как собирать и доставлять код.
Открыть программу
1. Переезжаем на свой домен
Зарегистрируем свой домен, свяжем его с GitLab Pages.
2. Улучшаем качество кода
Рассмотрим две проблемы: потенциально опасный код и неоднородное форматирование. Разберёмся, почему это плохо и какие инструменты решают эти проблемы. Подробно изучим ESLint, Stylelint, Prettier, EditorConfig и встроенные возможности анализа Webstorm. Создадим инфраструктуру анализа, которая минимизирует риски попадания “плохого” кода в репозиторий и продакшн.
3. Роутинг в современных веб-приложениях
Разберёмся, как устроен современный роутинг, и создадим страницу новости.
4. Заводим свой сервер: Linux, Nginx, VPS, VDS, SSH. Выкатываем сайт на свой сервер
GitLab Pages — это хостинг с довольно скудным функционалом. Рассмотрим ограничения хостинга и обойдём их, подключив свой сервер. Соберём сайт вручную по SSH и получим свой сервер на Linux, на котором будет доступен наш сайт.
5. CI/CD
Научимся собирать сайт при пуше в мастер, чтобы не тратить время на рутину.
6. Безопасность в интернете: TLS/SSL, HTTPS
Рассмотрим протокол TLS и разберёмся, какими методами обеспечивается безопасность в современном web. Переведём наш проект на HTTPS.
Мини-проект "Github Users"
Поработаем с репозиторием с одним большим компонентом на React, где нет ничего кроме разметки в разном стиле. Чтобы привести всё к одному стилю, настроим линтеры на JS и CSS. Для переходов по страницам настроим роутинг, а также поднимем свой сервер, так как роутинг будет работать по слешу.
|
Админка — это сайт, доступный владельцам для управления основным приложением. Админки делаются с помощью готовых технологий, чтобы не тратить время дизайнеров и разработчиков. В этом модуле мы научимся собирать админку быстро и эффективно.
Открыть программу
1. Создаём админку без дизайна
Админка необходима для создания рекламных постов, которые будут попадать в ленту. Научимся быстро создавать её интерфейс с помощью популярного фреймворка Material UI.
2. Всё, что нужно знать про формы
Уделим время глубокому изучению форм на чистом HTML и JS. Рассмотрим, какие бывают инпуты и как быстро собрать и провалидировать данные. Узнаем, как много всего можно сделать в формах на чистом HTML и JS, не изобретая велосипеды в рабочих проектах.
3. Делаем форму на React*
Разберёмся в особенностях построения форм на React*, рассмотрим контролируемые и неконтролируемые компоненты, напишем валидацию формы.
4. Firebase
Научимся быстро разворачивать облачные сервисы для создания и получения постов из админки.
5. Авторизация: закрываем админку от посторонних
Админка готова, но мы не можем выкатить её на сервер, потому что тогда её увидят все пользователи. Научимся делать так, чтобы интерфейс админки был доступен только администраторам.
6. Авторизация: OAuth
Продолжим разбираться с аутентификацией/авторизацией, подробно рассмотрим стандарт OAuth и добавим в наш проект вход в админку через Google и GitHub.
Мини-проект "Advanced To-Do List"
Сделаем свой to-do list! Чтобы не тратить время на разработку компонентов, воспользуемся готовой UI-библиотекой. Настроим авторизацию, чтобы списком могли пользоваться сразу несколько людей, и добавим в наш проект backend, чтобы хранить данные об их делах.
|
Когда на рынке есть несколько конкурирующих продуктов, важно, чтобы ваш продукт был привлекательнее с точки зрения UX. Продукт с богатым функционалом, но сделанный небрежно, проигрывает более модному аналогу. Плавные и продуманные анимации, адаптация под разные экраны и тёмная тема — эти UX оптимизации могут сильно повлиять на популярность вашего продукта.
Открыть программу
1. Редизайн
Любой живой проект время от времени переживает редизайн, и наш проект не исключение. У таких переделок бывают разные причины: например, может поменяться айдентика всего бренда, или дизайнер может решить, что после всех изменений на сайте текущая дизайн-система уже не справляется с новыми задачами. В этом уроке научимся быстро и эффективно делать редизайн и более подробно разберём методологию написания стилей БЭМ.
2. Тёмная тема
Сегодня тёмная тема для любого интерфейса — это стандарт индустрии. Операционные системы, десктопные приложения, мобильные приложения, сайты и даже мультимедиа в автомобилях создают вариант отображения интерфейса при слабом освещении. Разберёмся, как поддерживать разные темы на сайте при помощи css-переменных и научимся учитывать тему операционки с помощью медиа-запросов.
3. Попапы, модалки, дропдауны
Сегодня сложно представить интерфейс без всплывающих окон. Зачастую разработчики пугаются таких задач, поскольку они отличаются от привычной разработки интерфейса. Разберёмся в специфике разработки таких окон и попытаемся сделать их с нуля. Это послужит хорошей практикой для изучения CSS, событийной модели браузера и нюансов React*.
4. useContext и архитектура Flux
Начнём отделять бизнес-логику от отображения. Поговорим о состояниях приложения и узнаем, в каких проектах их использовать необходимо, а в каких можно обойтись и без них. Посмотрим, как React решает задачу состояния и какие архитектурные подходы и решения можно применять, используя сторонние библиотеки.
5. Redux
Подключим к сайту стейт-менеджер и разберёмся, как он работает.
6. Redux-toolkit
При подключении Redux могут возникнуть неудобства в разработке, с которыми поможет справиться redux-toolkit. Разберёмся в тонкостях и нюансах его работы.
7. Скелетон
Хороший продукт отличается тщательной проработкой деталей, и скелетон — одна из них. Рассмотрим, какие существуют варианты для отображения скелетона, и добавим один из них в наш проект.
8. Анимации: CSS, SVG, JS
Научимся делать анимации при помощи CSS, SVG и JS. Анимируем несколько элементов и поймём, как анимация работает внутри: узнаем, что такое morphing, и даже сделаем подобие физической модели.
9. Анимации: React*
Поговорим об особенностях реализации анимации в React-приложении, напишем собственную анимацию, а также рассмотрим популярные готовые инструменты.
9. Верстаем мобильную версию сайта
Рассмотрим особенности мобильных версий и научимся делать их на CSS и JS. Обсудим тонкости и нюансы каждого метода.
Мини-проект "Top JavaScript Repositories"
Сделаем галерею популярных JavaScript репозиториев — адаптивное приложение под любой размер экрана, которое поддерживает тёмную тему и открывает модальные окна. Глобальное состояние сделаем через React Context и Redux Toolkit. Дополнительно напишем свой свайп в галерее на мобильных устройствах.
|
PWA — это ряд требований к веб-приложениям, сформированных компанией Google. Доступность приложения в офлайне — одно из основных требований, которое значительно повышает его юзабилити. Также в индустрии всё чаще встречается запрос на инклюзивность, поскольку часть аудитории веб-сервиса — люди с ограниченными возможностями. Им необходимо обеспечить комфортные условия пользования продуктом. В этом модуле мы подробно остановимся на каждом из этих актуальных требований.
Открыть программу
1. Офлайн: Web Workers, Service Workers
Узнаем, как с помощью serviceworker дать пользователям возможность использовать наше приложение в офлайн режиме.
2. PWA + favicon
Рассмотрим технологию PWA и сделаем из нашего сайта приложение, которое можно устанавливать на устройства и запускать без браузера. Обсудим нюансы такого решения.
3. Доступность: Lighthouse, VoiceOver
Сделаем интерфейс нашего веб-сервиса доступным для людей с ограниченными возможностями: добавим доступность с клавиатуры и корректное озвучивание интерфейса специальными программами.
4. Локализация
Расширим охват аудитории: предоставим англоязычным пользователям возможность пользоваться нашим продуктом.
Мини-проект "Github Users Offline"
Возьмём уже знакомый нам проект Github Users и переведём его в офлайн, чтобы вся информация была доступна без подключения к интернету.
|
Рано или поздно кода станет так много, что сайт начнёт тормозить. Поэтому важной задачей является повышение производительности за счёт увеличения скорости загрузки ресурсов и быстроты выполнения кода. В большинстве браузеров есть специальные инструменты для анализа производительности. В этом модуле научимся с помощью них находить причины проблем с производительностью и оперативно их устранять.
Открыть программу
1. Клиентская скорость загрузки. Теория
Познакомимся с методами оптимизации скорости загрузки ресурсов, рассмотрим способы измерения производительности и изучим основные метрики Web Vitals для SPA.
2. Клиентская скорость загрузки. Практика
Применим знания из прошлого урока на практике и познакомимся с инструментами для визуализации производительности.
3. Как браузер рисует страницы. Оптимизируем производительность
Обсудим подробнее процессы загрузки страницы и ресурсов, на практических примерах рассмотрим процессы оптимизации и задебажим один очень популярный сайт.
4. Производительность React*
Разберём нюансы и тонкости производительности React-приложения, научимся находить проблемы и быстро их устранять. Узнаем, как React рендерит проект, изучим memo, useMemo и useCallback. Посмотрим на React Context и Redux с точки зрения производительности.
5. Оптимизации: изображения, сервер, UX
Подробно рассмотрим методы сокращения объёма загрузки графики и научим serviceworker и nginx кешировать и сжимать код проекта.
|
По мере развития продукта становится всё сложнее следить за тем, чтобы новые фичи не ломали сайт. Чтобы быть уверенным в том, что мы пишем работоспособный код, необходимо покрывать его автотестами — специальными программами, которые выявляют ошибки в коде. В этом модуле мы рассмотрим, какие бывают тесты и как их писать. Также затронем тему мониторинга ошибок, который позволяет вовремя узнавать о проблемах в работе продукта.
Открыть программу
1. Мониторинг: Sentry
Мониторинг помогает оперативно понять, что у пользователей что-то идёт не так. Sentry — один из популярных инструментов для мониторинга. Научимся им пользоваться.
2. Основы тестирования frontend
Познакомимся с основами тестирования frontend. Узнаем, чем ручное тестирование отличается от автоматического. Обсудим виды тестирования, чек-листы и многое другое.
3. UNIT-тесты: Jest, TDD
Подключим фреймворк Jest и научимся с его помощью писать юнит-тесты. Поговорим о том, как тестирование меняет подход к разработке, и обсудим принципы хорошего юнит-теста.
4. Интеграционное тестирование: React Testing Library
Попрактикуемся писать интеграционные тесты с помощью библиотеки testing-library.
5. E2E: Cypress
Cypress даёт возможность писать сценарные тесты. Это нужно, чтобы каждый раз не тестировать интерфейс вручную. Рассмотрим, как настраивать этот инструмент, и научимся на нём писать.
Мини-проект "Wallet"
Получим доступ к репозиторию с упрощённым проектом кошелька, где есть данные о подключённых банковских картах и операциях. Покроем проект разными тестами: юнит, интеграционными и E2E.
|
В некоторых ситуациях применение сложных инструментов разработки себя не оправдывает и является излишним. В этом модуле мы поговорим о том, как в очень сжатые сроки и в условиях нехватки ресурсов быстро запустить работающий продукт.
Открыть программу
1. Create React App* + Storybook
Познакомимся с Create React App* — набором инструментов, который избавит нас от необходимости настраивать сборку вручную.
2. NextJS
Теперь необходимо без backend настроить серверный рендеринг. В этом нам поможет фреймворк NextJS.
4. Strapi + Heroku
Рассмотрим популярные платформы, на которых можно быстро задеплоить своё веб-приложение.
|
После изучения hard skill frontend-разработки, важно поговорить и о том, как найти им применение и презентовать работодателю. В этом блоке мы обсудим рынок вакансий frontend-разработки, в том числе и рынок для junior специалистов. Также поговорим о том, как лучше искать вакансии и как устроены интервью.
Открыть программу
1. Поиск работы. Анализ рынка вакансий
Обсудим, в чем разница digital/продукты. Поговорим, какие требования и ожидания от frontend-разработчиков. Разберем несколько вакансий и проанализируем возможные зарплатные ожидания. Узнаем, где искать релевантные вакансии, как подготовить грамотное резюме, что должно быть в портфолио, как развить свои soft skills, как подготовиться к интервью и какую зарплату можно попросить.
2. Поиск работы. Поиск вакансий и этапы интервью
Разберем, как построены процессы найма на рынке, кто может проводить интервью, как вести себя на собеседовании, как выбрать лучший оффер и договориться на наиболее комфортные условия. Также обсудим, как происходит онбординг в разных компаниях.
*/Организация Meta, а также ее продукт React, на который мы ссылаемся выше, признаны экстремистскими и запрещены на территории Российской Федерации.
УЗНАТЬ БОЛЬШЕ
Мы свяжемся с вами и ответим на все ваши вопросы по найму учеников.