22 видеолекции по разработке интерфейсов

Летняя школа разработки интерфейсов открыла доступ к видеокурсу. В него вошли 22 лекции в том числе по работе в Git, по асинхронному программированию в JavaScript и популярным библиотекам, а также по локализации и доступности приложений.

Недавно мы рассказывали о летних школах Академии Яндекса и делились записями лекций Школы бэкенд-разработки. Сегодня мы подготовили для вас материалы Школы разработки интерфейсов. Курс рассказывает о возможностях современных инструментов разработки, асинхронном программировании в JavaScript, создании приложений на Node.js и React, работе в Git, типизации, локализации и многом другом.

1. Git — инструмент для совместной работы

Вы познакомитесь с Git изнутри и научитесь использовать его для работы в команде: разберёте механизм ветвления, способы объединения веток, а также правила исправления ошибок и написания регламентов.

2. Инструменты разработки

Первая часть лекции посвящена организации процесса разработки в популярных IDE (WebStorm, VS Code) и в терминале, а вторая — браузерным инструментам разработчика (Chrome DevTools).

3. Асинхронность в JavaScript

Подробный урок по асинхронному программированию в JavaScript, из которого вы узнаете, как бороться с callback hell, как настраивать циклы событий и очереди задач, как использовать функции async/await и применять debounce и throttle для оптимизации.

4. Библиотека RxJS

Разберёмся с основными концепциями библиотеки RxJS: рассмотрим различия promise и observable, изучим несколько популярных хелперов и операторов, а также поговорим о способах планирования задач.

5. Node.js

Вы с нуля напишете приложение на Node.js: познакомитесь с инфраструктурой для разработки, научитесь применять различные подходы к работе с данными и рендерингу приложений, а также разберётесь с логами, безопасностью и протоколом WebSocket.

Дополнительные материалы:

Код из лекции

Теория из прошлогоднего курса

6. React

Вводная лекция по React. Разберёмся, зачем он нужен и как с ним работать.

7. Архитектура React-приложения

Какие проблемы возникают с ростом приложения и как React помогает их решать?

Поговорим об архитектурных паттернах: обсудим различия между подходами MVC и Flux, а также детально рассмотрим Redux — самую популярную реализацию Flux.

8. Сборка

Как организовать процесс сборки веб-приложений? За какими метриками следить, чтобы команде и пользователям было комфортно? Можно ли использовать подход к настройке параметров ML-модели для улучшения процесса сборки?

Вы узнаете об архитектурном устройстве webpack и познакомитесь со стандартными техниками сборки: chunk splitting, innerGraph tree shaking, dynamic imports, minimizers, deadcode elimination и module concatenation.

9. Автотесты и модульное тестирование

Сначала поговорим об автотестах, а потом подробно разберём модульное тестирование. Вы узнаете, как изолировать внешние зависимости и тестировать взаимодействие с другими модулями, познакомитесь с эффективными приёмами для написания и поддержки тестов, а также попробуете запустить тестирование приложения на React.

10. Интеграционное тестирование

В первой части лекции разберём, что такое интеграционное тестирование, чем оно отличается от модульного и зачем запускать несколько видов тестов в одном проекте.

Во второй части поговорим об автоматизации интеграционных сценариев: научимся настраивать инфраструктуру и рассмотрим инструмент для написания автотестов, используемый в Яндексе.

11. Клиентская оптимизация — метрики

Обсудим виды метрик, способы их сбора и анализа, а также научимся использовать собранные данные для проведения экспериментов по оптимизации скорости загрузки страниц и для оценки результатов.

12. Клиентская оптимизация

Поговорим о том, что такое производительность веб-страниц и от чего она зависит. Обсудим основные показатели и инструменты для их мониторинга, а также рассмотрим различные подходы к оптимизации скорости загрузки.

13. Типизация

Что такое типизация и для чего она используется в современном вебе? Обсудим общие концепции, особенности устройства TypeScript, типизацию структур, контроль над типами и дженерики. Вы научитесь применять типизацию «в бою»: в практической части проведём миграцию проекта с JavaScript.

14. Функциональное программирование в мире JavaScript

Разберёмся в функциональном программировании: конвейер, композиция, частичное применение, каррирование, неизменяемые данные и чистые функции.

Дополнительные материалы:

— Лекция прошлого года

15. Практикум по функциональному программированию

Продолжаем тему функционального программирования: на примере простого парсера url учимся писать код в функциональном стиле с использованием библиотеки Ramda.js и практикуемся в каррировании и частичном применении функции.

16. Продвинутый JavaScript

Пришло время изучить сложные темы в JavaScript. Поговорим о преобразовании типов, метапрограммировании, прототипном наследовании, контексте, возможностях коллекций, итераторах, генераторах и модулях.

17. Безопасность

Лекция по основам безопасности для разработчиков веб-приложений: рассмотрим уязвимости на сервере и клиенте, а также механизмы защиты от них. Большинство сценариев рассчитано на JavaScript-приложения.

18. Мультимедиа

Лекция о мультимедиа-возможностях, доступных в вебе. Научимся создавать графические эффекты и анимацию при помощи CSS, JavaScript, SVG, Canvas и WebGL, познакомимся с аудиотегом и Web Audio API для работы со звуком, разберём актуальные видеоформаты и адаптивные потоковые видеотрансляции, а также рассмотрим API браузера для синтеза и распознавания речи.

19. Работа с сенсорным пользовательским вводом

Обсудим работу с сенсорными событиями в браузере и используемые для этого API. Расскажем, почему есть две актуальные спецификации и рассмотрим их различия, сильные и слабые стороны.

20. Доступность интерфейсов

Почему важна доступность интерфейсов и как её добиться? Обсудим принципы, лежащие в основе ассистивных технологий, и основные приёмы, которые делают интерфейс доступным, а также разберём примеры и продемонстрируем процесс работы скринридера.

21. Локализация. Часть 1

Вводная лекция по локализации: что такое локаль, как её определить и как работает встроенный API интернационализации. В конце лекции напишем простое ядро i18n.

Дополнительные материалы:

Теги для определения языков

Работа с мультиязычным контентом

Логические свойства и значения CSS

Пример проверки на RTL

22. Локализация. Часть 2

Практический урок по локализации: разберём, как параллельная разработка влияет на процесс локализации, и поговорим об автоматизации и других способах эффективной работы с переводами.

Школа разработки интерфейсов — это лекции, семинары и практикумы по созданию удобных, быстрых и надёжных интерфейсов. Занятия ведут сотрудники Яндекса, которые каждый день работают над сервисами с многомиллионной аудиторией. Во время обучения участники не только изучают теорию, но и работают над индивидуальными проектами под руководством куратора.

Краткий пересказ от Yandex GPT