[karpov.courses] Frontend [Дмитрий Безуглый, Артур Стамбульцян]

Robot · 21 Окт 2021

ПРОЙДИТЕ ПОЛНЫЙ ЦИКЛ СОЗДАНИЯ ВЕБ-ПРИЛОЖЕНИЙ
Долгое время считалось, что frontend — это про вёрстку и интерактивность. Однако сегодня разработчику всё чаще приходится выходить за пределы браузера и разбираться в смежных областях.
МЫ ВСЕ БЫЛИ ДЖУНАМИ И ПРОШЛИ ЭТОТ ПУТЬ:
1) ИЗУЧИЛ ОСНОВЫ ФРОНТЕНДА
2) ПОПАЛ В КОМПАНИЮ
3) СДЕЛАЛ НЕСКОЛЬКО ЗАДАЧ И ПОНЯЛ, ЧТО ЗНАНИЙ НЕ ХВАТАЕТ
- Нехватка системных знаний мешает подниматься по карьерной лестнице. Особенно это заметно на собеседованиях: кандидаты вроде бы знают, как решать типовые задачи, но если копнуть глубже, сразу теряются.
- Сильный frontend-разработчик чётко понимает, как работает веб, уверенно общается с бэкендерами, тестировщиками, девопсами и даже может самостоятельно что-то настроить.
НАЧИНАЙТЕ С НУЛЯ, ОТТАЛКИВАЯСЬ ОТ РЕАЛЬНЫХ ПРОБЛЕМ
Наш проект начнётся с голого HTML и CSS на GitLab Pages, а закончится готовым сервисом на React со своим деплоем на собственном сервере. Мы перейдём на React, чтобы осознать проблемы разработки и по-настоящему разобраться, зачем нужен тот или иной инструмент.
ИЗУЧАЙТЕ СМЕЖНЫЕ ТЕМЫ
Современный frontend-разработчик должен уметь выходить за пределы браузера. Деплой, CI/CD, мониторинг, кэширование, оптимизация на сервере — всё это поможет вам делать качественные, быстрые интерфейсы и решать сложные проблемы.
РАЗБИРАЙТЕ ТОНКОСТИ И НЮАНСЫ РАЗРАБОТКИ
Мы не теоретики — каждый день мы создаём интерфейсы для миллионов пользователей и уже набили шишки и собрали лайфхаки, как разрабатывать быстро и эффективно. Все эти знания и навыки мы передадим вам на этом курсе.
ДЛЯ КОГО ЭТА ПРОГРАММА:
BACKEND РАЗРАБОТЧИК
Вы хотите быть Fullstack разработчиком — мы поможем вам приобрести необходимые компетенции и делать более интересные задачи, за которые вам будут платить больше.
MIDDLE FRONTEND
Вы успешно решаете рабочие задачи, но хотите структурировать знания и глубже копнуть в инструментарий. Мы поможем получить навыки, которые позволят вам расти выше.
JUNIOR FRONTEND
Вы уже работаете в компании или на фрилансе и хотите вырасти в middle frontend специалиста. Мы поможем вам получить все навыки, которые нужны на работе.
ЧТО НЕОБХОДИМО ДЛЯ КУРСА:
- HTML: Знание синтаксиса и умение верстать
- CSS: Знание базы для оформления сайтов (специфичность, тяжелые селекторы, блочная модель)
- JAVASCRIPT: Базовые знания (синтаксис, переменные, функции, циклы, замыкания, this, fetch)
- GIT: Базовые знания (умение создать репозиторий, создать ветку, закоммитить изменения, запушить в ветку, смержить с мастером)

Спойлер: программа
1) Новостная лента 1.0
Частая ошибка разработчиков — пытаться создать идеальный продукт сразу. Однако, как показывает практика, гораздо важнее сначала быстро создать минимально жизнеспособный продукт, а уже потом заниматься его доработкой и улучшением. В этом модуле мы напишем работающий прототип новостной ленты с помощью React, Webpack, TypeScript и GitLab Pages.
1. HTML, CSS, JavaScript
2. Деплой на GitLab Pages
3. Введение в React: JSX, hooks
4. Webpack + NodeJS
5. API, fetch, CORS
6. TypeScript
2) FrontOps
Сегодня frontend-разработчику важно не только уметь писать клиентский код, но и знать, как этот код доставлять на сервер. Эти знания позволяют находить общий язык с остальными членами команды разработки и существенно повышают ценность специалиста на рынке труда. В этом модуле мы поговорим о том, как собирать и доставлять код.
1. Регистрация домена
2. Как браузер открывает сайт: IP, DNS
3. Связываем домен и GitLab Pages
4. Роутинг в современных веб-приложениях, React Router
5. Заводим свой сервер: Linux, Nginx, VPS, VDS, SSH
6. CI/CD через GitLab
7. Как угнать данные: HTTP/HTTPS, SSL
3) Быстрая админка
Админка — это сайт, доступный владельцам для управления основным приложением. Админки делаются с помощью готовых технологий, чтобы не тратить время дизайнеров и разработчиков. В этом модуле мы научимся собирать админку быстро и эффективно.
1. Быстрый интерфейс без дизайна: Bootstrap
2. Firebase: backend для frontend
3. Авторизация: HTTP, Cookie, JWT, oAuth
4) Модный Frontend
Когда на рынке есть несколько конкурирующих продуктов, важно, чтобы ваш продукт был привлекательнее с точки зрения UX. Продукт с богатым функционалом, но сделанный небрежно, проигрывает более модному. Плавные и продуманные анимации, адаптация под разные экраны и тёмная тема — эти UX оптимизации могут сильно повлиять на популярность вашего продукта.
1. Как браузер рисует страницы
2. Анимации
3. Делаем сортировку по дате
4. Мобильная версия и темная тема: media queries, window.onresize

5) Оффлайн и доступность
PWA — это ряд требований к веб-приложениям, сформированных компанией Google. Доступность приложения в офлайне — одно из основных требований, которое значительно повышает его юзабилити. Также в индустрии всё чаще встречается запрос на инклюзивность, поскольку часть аудитории веб-сервиса — люди с ограниченными возможностями. Им необходимо обеспечить комфортные условия пользования продуктом. В этом модуле мы подробно остановимся на каждом из этих актуальных требований.
1. Service Worker, IndexedDB
2. PWA
3. Локализация
4. Доступность: Lighthouse, VoiceOver
6) Производительный Frontend
Рано или поздно кода станет так много, что сайт начнёт тормозить. Поэтому важной задачей является повышение производительности за счёт увеличения скорости загрузки ресурсов и быстроты выполнения кода. В большинстве браузеров есть специальные инструменты для анализа производительности. В этом модуле научимся с помощью них находить причины проблем с производительностью и оперативно их устранять.
1. Откуда берутся лаги. Профилирование, тонкости и нюансы
2. Why-did-you-render, memo, useMemo, useCallback, виртуализация
3. Webpack-analyze
4. Клиентские оптимизации скорости загрузки сайта
5. Серверные оптимизации скорости загрузки сайта
7) Тестирование и мониторинг
По мере развития продукта становится всё сложнее следить за тем, чтобы новые фичи не ломали сайт. Чтобы быть уверенным в том, что мы пишем работоспособный код, необходимо покрывать его автотестами — специальными программами, которые выявляют ошибки в коде. В этом модуле мы рассмотрим, какие бывают тесты и как их писать. Также затронем тему мониторинга ошибок, который позволяет вовремя узнавать о проблемах в работе продукта.
1. Какие бывают тесты
2. UNIT-тесты: Jest, TDD
3. E2E: Cypress
4. Статический анализ кода: ESLint, Stylelint
5. Мониторинг: Sentry
8) Frontend на коленке
В некоторых ситуациях применение сложных инструментов разработки себя не оправдывает и является излишним. В этом модуле мы поговорим о том, как в очень сжатые сроки и в условиях нехватки ресурсов быстро запустить работающий продукт.
1. Create React App
2. Firebase
3. NextJS
4. Heroku, Vercel и друзья
9) Поиск работы
После изучения hard skill frontend-разработки, важно поговорить и о том, как найти им применение и презентовать работодателю. В этом блоке мы обсудим рынок вакансий frontend-разработки, в том числе и рынок для junior специалистов. Также поговорим о том, как лучше искать вакансии и как устроены интервью.
1. Рынок вакансий
2. Поиск работы
3. Интервью