ПРОГРАММА КУРСА ://
|
Частая ошибка разработчиков — пытаться создать идеальный продукт сразу. Однако, как показывает практика, гораздо важнее сначала быстро создать минимально жизнеспособный продукт, а уже потом заниматься его доработкой и улучшением. В этом модуле мы напишем работающий прототип новостной ленты с помощью 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. Как угнать данные: HTTP/HTTPS, SSL
На практическом примере рассмотрим, как хакеры угоняют данные в общественных местах, и поймём, почему HTTPS — это важно.
|
Админка — это сайт, доступный владельцам для управления основным приложением. Админки делаются с помощью готовых технологий, чтобы не тратить время дизайнеров и разработчиков. В этом модуле мы научимся собирать админку быстро и эффективно.
Открыть программу
1. Создаём админку без дизайна
Админка необходима для создания рекламных постов, которые будут попадать в ленту. Научимся быстро создавать её интерфейс с помощью популярного фреймворка Bootstrap.
2. Firebase: пишем бэкенд для админки
Так же быстро развернём backend для создания и получения постов из админки.
3. Авторизация: закрываем админку от посторонних
Админка готова, но мы не можем выкатить её на сервер, потому что тогда её увидят все пользователи. Научимся делать так, чтобы интерфейс админки был доступен только администраторам.
|
Когда на рынке есть несколько конкурирующих продуктов, важно, чтобы ваш продукт был привлекательнее с точки зрения UX. Продукт с богатым функционалом, но сделанный небрежно, проигрывает более модному аналогу. Плавные и продуманные анимации, адаптация под разные экраны и тёмная тема — эти UX оптимизации могут сильно повлиять на популярность вашего продукта.
Открыть программу
1. Как браузер рисует страницы
Рассмотрим, как устроена отрисовка страниц браузером. Это поможет понять, как делать адаптивные сайты и плавные анимации.
2. Анимации
Научимся делать плавные переходы между страницами, добавим предзагрузку изображений и предложение подписаться на новости.
3. Мобильная версия и темная тема: media queries, window.onresize
Разберёмся, как создать адаптивный интерфейс и сделать тёмную тему.
4. Redux
Подключим к сайту стейт-менеджер и разберёмся, как он работает.
5. Redux-toolkit
При подключении Redux могут возникнуть неудобства в разработке, с которыми поможет справиться redux-toolkit. Разберёмся в тонкостях и нюансах его работы.
|
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. Интервью
Разберем, как построены процессы найма на рынке, кто может проводить интервью, как вести себя на собеседовании, как выбрать лучший оффер и договориться на наиболее комфортные условия. Также обсудим, как происходит онбординг в разных компаниях.
УЗНАТЬ БОЛЬШЕ
Мы свяжемся с вами и ответим на все ваши вопросы по найму учеников.