Документ представляет курс по фронтенд-разработке на JavaScript с использованием Vue и React, охватывающий ключевые аспекты создания веб-приложений. Он описывает разделение на фронтенд и бэкенд, задачи и навыки фронтенд-разработчика, а также включает планы по обучению и необходимым инструментам. Курс предполагает изучение верстки, JavaScript, современных инструментов и фреймворков, что подготавливает студентов к разработке различных веб-приложений и сайтов.

1. Введение во Frontend-
разработку
Курс Frontend-разработки на Javascript + Vue/React

2. Веб-приложение
• Веб-приложением называется веб-сайт, функционал которого
достаточно сложен по сравнению с обычным информационным
сайтом. Такие сайты обычно имеют следующие особенности:
• Позволяют пользователям создавать данные
• Комментарии, сообщения, посты, данные профиля, фотографии, история поиска и т.д.
• Предполагают активное взаимодействие пользователя и сайта
• Нажатие на кнопки, ввод текста, перетаскивание, подгрузка данных при скролле,
постраничная навигация, работа со слайдерами и другими интерактивными элементами
• Обрабатывают и демонстрируют большой объем однотипных данных
• Список сообщений, постов, таблицы данных, списки пользователей, данные о местах,
графики данных и т.д.
• Используют максимально удобные способы представления данных
• Графики, карты, таблицы, инфографика, слайдеры, плееры, интерактивные списки и другое

3. Веб-приложения - примеры
• vk.com
• hh.ru
• youtube.com
• google.com
• facebook.com
• avito.ru
• web.telegram.org
• maps.yandex.ru
• docs.google.com
• dropbox.com
• habr.com
• github.com
• aliexpress.com

4. Составная часть веб-приложения
• Любое веб-приложение и веб-сайт условно делится на две слабо
связанные части: фронтенд (клиентская) и бэкенд (серверная).
• Фронтенд – все, что видят и с чем взаимодействуют пользователи
веб-приложения. Это внешний вид приложения и
работоспособность всех кнопок и других элементов, с которыми
работает пользователь.
• Бэкенд – часть приложения, которая отвечает за хранение и
обработку данных. Это базы данных и код, принимающий и
обрабатывающий запросы с клиента на сервер. Сюда же относится
множество других возможностей приложения, которые не могут
быть сделаны на клиенте.

5. Взаимодействие бэкенд-
фронтенд

6. Работа Frontend-разработчика
• Задача фронт-разработчика в том, чтобы предоставить
пользователю интерфейс для работы с веб-приложением.
• В его задачи входит:
• Верстка веб-страниц из дизайн-макета
• Установка анимаций и иных дизайн-эффектов
• Оптимизация отображения страниц на разных разрешениях и экранах
• Настройка взаимодействия пользователя со страницей
• Реализация бизнес-логики интерфейса приложения
• Отправка запросов на сервер в ответ на действия пользователя
• Обработка и визуализация в странице данных, которые приходят с сервера
• Оптимизация и документирование кода

7. Что должен уметь делать
фронтенд-разработчик
• Hard Skills:
• Работа с графическими редакторами для извлечения данных для верстки
• Верстка страницы при помощи HTML+CSS
• Использование анимации и SVG
• Написание логики приложения на Javascript
• Проектирование архитектуры проекта без/с фреймворком
• Использование инструментов тестирования, линтирования, сборки кода
• Soft skills
• Оценка сроков выполнения задач
• Документирование кода и частей приложения
• Коммуникация с дизайнером, бэкенд-разработчиком, тестировщиком,
менеджером проекта

8. Чему учимся на курсе
• Блок 1. Верстка веб-страниц
• Основы применения HTML + CSS. По итогам – умение по дизайн-макету и самостоятельно разработать веб-
страницу для сайта/приложения.
• Блок 2. Продвинутая верстка
• Адаптивная верстка, основы UX-дизайна, анимации и SVG, использование сторонних библиотек,
препроцессоры для стилей.
• Блок 3. Основы Javascript и DOM
• Основы синтаксиса Javascript. Работа со страницей при помощи DOM. По итогам – умение сделать работающее
веб-приложение.
• Блок 4. Современные инструменты Frontend
• Общение с сервером. Продвинутые API. Объектно-ориентированное программирование. Качество кода и
архитектуры веб-приложений. Современные подходы к разработке.
• Блок 5. Frontend-фреймворк
• React / Vue. По итогам – способность делать те же приложения, что в блоках 3-4, но быстрее и более системно.

9. Инструменты разработки
• Браузер Chrome
• IDE (Редактор кода)
• Visual Studio Code
• Atom
• Sublime Text
• Git + Github
• Node.js

10. Что ещё?
• Фронтенд-разработчик сегодня может со своими навыками
разрабатывать:
• Веб-сайты
• Веб-приложения
• Кроссплатформенные мобильные приложения (напр. Phonegap)
• Браузерные игры (технология Canvas)
• Десктоп-приложения (напр. NW.js)
• Бэкенд-часть приложения (Node + Express, Node + Firebase, …)
• Скрипты автоматизированного тестирования

11. Поиск информации
• Источники информации по разработке сегодня многочисленны.
Среди них:
• Google
• StackOverflow
• MDN (Mozilla Development Network)
• learn.javasript.ru
• При поиске информации обращайте внимание на актуальность:
• Для HTML+CSS – не старше 2014 года
• Для Javascript – не старше 2015-2016 года

12. Перед следующим занятием
• Установить браузер Chrome
• Завести на компьютере отдельную папку для занятий
• Установить IDE (В курсе будет использоваться VS Code)
• Установить на компьютер Git, зарегистрироваться на Github