ПРОГРАММА КУРСА ://
|
Частая ошибка разработчиков — пытаться создать идеальный продукт сразу. Однако, как показывает практика, гораздо важнее сначала быстро создать минимально жизнеспособный продукт, а уже потом заниматься его доработкой и улучшением. В этом модуле мы напишем работающий прототип новостной ленты с помощью React*, Webpack, TypeScript и GitLab Pages.
Открыть программу
1. Настройка окружения, HTML + CSS и деплой
Создадим нашу первую страницу без инструментов, добавим по необходимости интерактивность и задеплоим её на GitLab Pages.
2. Страницы категорий новостей
Сделаем ещё 5 HTML-страниц и отобразим их на JS разными способами: createElement, template, innerHTML.
3. Что такое интернет и как он работает: TCP/IP
На базовом уровне рассмотрим, как работает интернет, что такое 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, научимся верстать страницу новости.
|
Сегодня 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.
|
Админка — это сайт, доступный владельцам для управления основным приложением. Админки делаются с помощью готовых технологий, чтобы не тратить время дизайнеров и разработчиков. В этом модуле мы научимся собирать админку быстро и эффективно.
Открыть программу
1. Создаём админку без дизайна
Админка необходима для создания рекламных постов, которые будут попадать в ленту. Научимся быстро создавать её интерфейс с помощью популярного фреймворка Material UI.
2. Всё, что нужно знать про формы
Уделим время глубокому изучению форм на чистом HTML и JS. Рассмотрим, какие бывают инпуты и как быстро собрать и провалидировать данные. Узнаем, как много всего можно сделать в формах на чистом HTML и JS, не изобретая велосипеды в рабочих проектах.
3. Делаем форму на React*
Разберёмся в особенностях построения форм на React*, рассмотрим контролируемые и неконтролируемые компоненты, напишем валидацию формы.
4. Firebase: пишем бэкенд для админки
Научимся быстро разворачивать облачные сервисы для создания и получения постов из админки.
5. Авторизация: закрываем админку от посторонних
Админка готова, но мы не можем выкатить её на сервер, потому что тогда её увидят все пользователи. Научимся делать так, чтобы интерфейс админки был доступен только администраторам.
6. Авторизация: OAuth
Продолжим разбираться с аутентификацией/авторизацией, подробно рассмотрим стандарт OAuth и добавим в наш проект вход в админку через Google и GitHub.
|
Когда на рынке есть несколько конкурирующих продуктов, важно, чтобы ваш продукт был привлекательнее с точки зрения UX. Продукт с богатым функционалом, но сделанный небрежно, проигрывает более модному аналогу. Плавные и продуманные анимации, адаптация под разные экраны и тёмная тема — эти UX оптимизации могут сильно повлиять на популярность вашего продукта.
Открыть программу
1. Редизайн
Любой живой проект время от времени переживает редизайн, и наш проект не исключение. У таких переделок бывают разные причины: например, может поменяться айдентика всего бренда, или дизайнер может решить, что после всех изменений на сайте текущая дизайн-система уже не справляется с новыми задачами. В этом уроке научимся быстро и эффективно делать редизайн и более подробно разберём методологию написания стилей БЭМ.
2. Тёмная тема
Сегодня тёмная тема для любого интерфейса — это стандарт индустрии. Операционные системы, десктопные приложения, мобильные приложения, сайты и даже мультимедиа в автомобилях создают вариант отображения интерфейса при слабом освещении. Разберёмся, как поддерживать разные темы на сайте при помощи css-переменных и научимся учитывать тему операционки с помощью медиа-запросов.
3. Redux
Подключим к сайту стейт-менеджер и разберёмся, как он работает.
4. Redux-toolkit
При подключении Redux могут возникнуть неудобства в разработке, с которыми поможет справиться redux-toolkit. Разберёмся в тонкостях и нюансах его работы.
5. Анимации
Рассмотрим, какие бывают анимации и каких принципов следует придерживаться, чтобы делать их качественно. Разберёмся, как сделать анимацию на React* и добавим несколько анимаций в наш проект.
6. Попапы, модалки, дропдауны
Сегодня сложно представить интерфейс без всплывающих окон. Зачастую разработчики пугаются таких задач, поскольку они отличаются от привычной разработки интерфейса. Разберёмся в специфике разработки таких окон и попытаемся сделать их с нуля. Это послужит хорошей практикой для изучения CSS, событийной модели браузера и нюансов React*.
7. Инфинити скролл
Изучим подходы к отображению "бесконечной ленты" и реализуем один из вариантов в нашем проекте.
8. Скелетон
Хороший продукт отличается тщательной проработкой деталей, и скелетон — одна из них. Рассмотрим, какие существуют варианты для отображения скелетона, и добавим один из них в наш проект.
9. Мобильная версия сайта
Рассмотрим особенности мобильных версий и научимся делать их на CSS и JS. Обсудим тонкости и нюансы каждого метода.
|
PWA — это ряд требований к веб-приложениям, сформированных компанией Google. Доступность приложения в офлайне — одно из основных требований, которое значительно повышает его юзабилити. Также в индустрии всё чаще встречается запрос на инклюзивность, поскольку часть аудитории веб-сервиса — люди с ограниченными возможностями. Им необходимо обеспечить комфортные условия пользования продуктом. В этом модуле мы подробно остановимся на каждом из этих актуальных требований.
Открыть программу
1. Service Worker, IndexedDB
Рассмотрим, как сделать интерфейс нашего продукта доступным в офлайне.
2. PWA
Разберёмся, что такое PWA, и добавим возможность сохранить веб-сервис на экран смартфона.
3. Локализация
Расширим охват аудитории: предоставим англоязычным пользователям возможность пользоваться нашим продуктом.
4. Доступность: Lighthouse, VoiceOver
Сделаем интерфейс нашего веб-сервиса доступным для людей с ограниченными возможностями: добавим доступность с клавиатуры и корректное озвучивание интерфейса специальными программами.
|
Рано или поздно кода станет так много, что сайт начнёт тормозить. Поэтому важной задачей является повышение производительности за счёт увеличения скорости загрузки ресурсов и быстроты выполнения кода. В большинстве браузеров есть специальные инструменты для анализа производительности. В этом модуле научимся с помощью них находить причины проблем с производительностью и оперативно их устранять.
Открыть программу
1. Откуда берутся лаги. Профилирование, тонкости и нюансы
Познакомимся с основными инструментами для работы над производительностью и научимся находить проблемные места в продукте.
2. Why-did-you-render, memo, useMemo, useCallback, виртуализация
Изучим практические приёмы оптимизации фронтенда на React*.
3. Webpack-analyze
Рассмотрим популярный инструмент для анализа объёма клиентского кода.
4. Клиентские оптимизации скорости загрузки сайта
Научимся настраивать код-сплиттинг, а также делать сжатие кода и картинок.
5. Серверные оптимизации скорости загрузки сайта
Разберём популярные алгоритмы сжатия: Brotli и gzip. Научимся отдавать браузеру более лёгкий код.
|
По мере развития продукта становится всё сложнее следить за тем, чтобы новые фичи не ломали сайт. Чтобы быть уверенным в том, что мы пишем работоспособный код, необходимо покрывать его автотестами — специальными программами, которые выявляют ошибки в коде. В этом модуле мы рассмотрим, какие бывают тесты и как их писать. Также затронем тему мониторинга ошибок, который позволяет вовремя узнавать о проблемах в работе продукта.
Открыть программу
1. Какие бывают тесты
Разберёмся с теорией и нюансами тестирования. Рассмотрим различные виды тестов: модульные, интеграционные, снапшот и E2E.
2. UNIT-тесты: Jest, TDD
Научимся писать UNIT-тесты и рассмотрим, для каких случаев хорошо подходит Test Driven Development.
3. E2E: Cypress
Cypress даёт возможность писать сценарные тесты. Это нужно, чтобы каждый раз не тестировать интерфейс вручную. Рассмотрим, как настраивать этот инструмент, и научимся на нём писать.
4. Статический анализ кода: ESLint, Stylelint
Статический анализ позволяет отлавливать ошибки прямо во время написания кода. Узнаем, какие существуют анализаторы кода и как их настраивать.
5. Мониторинг: Sentry
Мониторинг помогает оперативно понять, что у пользователей что-то идёт не так. Sentry — один из популярных инструментов для мониторинга. Научимся им пользоваться.
|
В некоторых ситуациях применение сложных инструментов разработки себя не оправдывает и является излишним. В этом модуле мы поговорим о том, как в очень сжатые сроки и в условиях нехватки ресурсов быстро запустить работающий продукт.
Открыть программу
1. Create React App*
Познакомимся с Create React App* — набором инструментов, который избавит нас от необходимости настраивать сборку вручную.
2. Firebase
Воспользуемся Firebase, чтобы не тратить время на бэкенд.
3. NextJS
Теперь необходимо без backend настроить серверный рендеринг. В этом нам поможет фреймворк NextJS.
4. Heroku, Vercel и друзья
Рассмотрим популярные платформы, на которых можно быстро задеплоить своё веб-приложение.
|
После изучения hard skill frontend-разработки, важно поговорить и о том, как найти им применение и презентовать работодателю. В этом блоке мы обсудим рынок вакансий frontend-разработки, в том числе и рынок для junior специалистов. Также поговорим о том, как лучше искать вакансии и как устроены интервью.
Открыть программу
1. Рынок вакансий
Обсудим, в чем разница digital/продукты. Поговорим, какие требования и ожидания от frontend-разработчиков. Разберем несколько вакансий и проанализируем возможные зарплатные ожидания.
2. Поиск работы
Узнаем, где искать релевантные вакансии, как подготовить грамотное резюме, что должно быть в портфолио, как развить свои soft skills, как подготовиться к интервью и какую зарплату можно попросить.
3. Интервью
Разберем, как построены процессы найма на рынке, кто может проводить интервью, как вести себя на собеседовании, как выбрать лучший оффер и договориться на наиболее комфортные условия. Также обсудим, как происходит онбординг в разных компаниях.
*/Организация Meta, а также ее продукт React, на который мы ссылаемся выше, признаны экстремистскими и запрещены на территории Российской Федерации.
УЗНАТЬ БОЛЬШЕ
Мы свяжемся с вами и ответим на все ваши вопросы по найму учеников.