Лекции по веб-разработке

Программа курса "Системное программирование" для групп 107са, 107сб, 007а, 007б, 007в, 007г.

Для начинающих: Введение во фронтенд

• HTML
• CSS
• JavaScript
  • Введение в язык JavaScript. Основы языка: синтаксис, управляющие конструкции.
  • Функции. Rest...spread.
  • Массивы.
  • Работа с DOM. События.
  • Асинхронный код. Обработка ошибок. HTTP-запросы.
  • Map, Set. Даты. Работа с устройствами.
• TypeScript
• Node.js
• NPM
• Webpack
• ESLint + Prettier + Husky
• Git

Для продолжающих: Экосистема React + Redux

React

• Введение в React.js
• TypeScript + React
• Функциональные компоненты и хуки
• Как работать с формами и контролами
• Тестирование с помощью testing-library
• Добавление стилей и картинок
• Валидация форм:
  • Без сторонних библиотек
  • С библиотекой final-form
• Запросы в сеть:
  • Fetch
  • React Query
• Маршрутизация
• Библиотеки готовых компонентов

Redux

• Redux
• Тестирование Redux
• Маршрутизация в Redux
• Отправка асинхронных запросов с помощью redux-thunk
• Тестирование redux-thunk
• Redux Saga
• Redux Toolkit
• TypeScript + Redux
• Борьба с излишними рендерами с помощью reselect

Для профессионалов: Fullstack

• Как выкладывать сайт в интернет
• Express.js
• MongoDB
• ORM Mongoose
• Vue
• Vue: библиотеки компонентов
• VueX
• Angular
• Angular: библиотеки компонентов
• RxJS
• Angular: менеджеры состояния
• Svelte
• i18n многоязычность
• Оптимизация загрузки в React: lazy load, chunks
• Анализ причин для рендера в React
• Анализ бандла в Webpack
• Рендер на сервере на примере фреймворка Next

Полезные сайты

• https://learn.javascript.ru/
• https://developer.mozilla.org/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started
• https://reactpatterns.com/
• https://ru.reactjs.org/docs/hello-world.html
• https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/