Программа обучения на специализацию "Frontend-разработчик"

Введение

Данный документ описывает порядок следования тем, которые следует изучить для базового понимания экосистемы, на основе которой строятся современные веб приложения. Программа расчитана на 15 дней и подразумевает, что вы владеете базовыми знаниями HTML, Javascript и CSS. В процессе курса вы изучите основные инструменты и концепции современной frontend разработки с использованием фреймворков и open source библиотек, которые помогут повысить вашу продуктивность в написании кода.

В процессе прохождения уроков вам предстоит написать веб-приложение "Рабочее место администратора системы" со следующей функциональностью:

1. Форма входа в приложение
2. Страница приветствия с выводом имени вошедшего пользователя
3. Шаблон приложения должен иметь левую навигацию, наименование системы, имя пользователя с сылкой на выход из системы
4. Реализация формы просмотра списка для сущности "Разделы каталога продукции". Вывод по 10 элементов на странице. Сортировка по всем колонкам списка кроме колонки "Действие". Поле поиска по списку
5. Реализация форм просмотра, создания и изменения для сущности "Разделы каталога продукции"
6. Реализация формы просмотра списка для сущности "Товар". Вывод по 10 элементов на странице. Сортировка по всем колонкам списка кроме колонки "Действие". Поле поиска по списку
7. Реализация форм просмотра, создания и изменения для сущности "Товар"
8. Сущность "Раздел каталога продукции". Иерархический справочник со следующими полями:
   1. Наименование
   2. Описание
   3. Родительский элемент
   4. Автор
   5. Дата создания
9. Сущность "Продукт". Плоский справочник со следующими полями:
   1. Наименование
   2. Описание
   3. Цена
   4. Каталог продукции
   5. Автор
   6. Дата создания

Урок 1. Установка и настройка окружения (1 день)

Окружение:

1. Webstorm или idea intellij + Vue plugin
2. nodejs + npm
3. vue + vue cli + vuetify
4. webpack + babel + eslint
5. git

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

Задание

1. Установите выбранный вами редактор кода
2. Установите компоненты, описанные в модуле "Окружение"
3. Сделайте fork репозитория https://github.com/agorinenko/front.git. В дальнейшем этот проект станет вашим основным местом хранения кода.
4. Изучите проект, создайте конфигурацию npm для запуска сервера, запустите приложение и порадуйтесь своему успеху
5. Подключите bootstrap как зависимость, установите ее, используя терминал

Задание для самоконтроля

1. Какую роль в проекте играет каждый компонент, описанный в модуле "Окружение"?
2. Как подключаются зависимости в проект?
3. В какое расположение происходит установка зависимостей?
4. Для чего исползуется файл .gitignore?
5. Для чего, по вашему мнению, файл .gitignore содержит строку node_modules?

Урок 2. Распределённые системы управления версиями кода (1 день)

В этом уроке познакомимся с системами управления кода на примере Git.

Задание

Заданием этого урока будет создание нового проекта, в котором вам будет удобно работать с HTML разметкой, CSS и JavaScript. Проект необходимо добавить в git репозиторий. Убедитесь, что генерируемые ide файлы и зависимости не попали в репозиторий.

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

Задание для самоконтроля

1. Какую роль играет git в процессе разработки?
2. Как посмотреть настройки git? Как указать прокси?
3. Что такое удаленный репозиторий? В чем его отличие от локального хранилища веток?
4. Как создать одной командой новую ветку и сразу переключиться в неё?
5. Как посмотреть список всех веток(удаленных и локальных)?
6. Что такое извлечение и возврат кода?
7. В чем отличие fetch от pull?
8. Для чего нужен push?
9. В чем отличие merge от rebase?
10. Что такое fork?
11. Для чего, по вашему мнению, создаются отдельные ветки? Какую роль играет ветка master?
12. Убедитесь, что в результате выполнения задания у вас получилось следующее(в удаленном репозитории):
    1. Присутствует ветка master
    2. Существует всего 4 ветки
    3. Первая ветка содержит один html файл, вторая два и тд.
    4. Контент последней ветки идентичен master. В master присутствует полный результат вашей работы.

Урок 3. Протоколы передачи данных в сети (1 день)

Задание

Изучите теоретическую часть, ответив на вопросы для самоконтроля

Задание для самоконтроля

1. Какой тип взаимодействия(или какая технология) лежит в основе протокола HTTP?
2. Не вдаваясь в детали опишите структуру и работу протокола
3. Какой порт по умолчанию используется при запросе веб-ресурса
4. Расскажите про заголовки запросов. Какой заголовок следует использовать для передачи файлов на сервер? Какой при этом объект API Javascript необходимо использовать для формирования пераметров запроса?
5. Что такое cookies и сессии? В чем их отличие?
6. Какие форматы ответов вы знаете?
7. Расскажите про коды состояний?
8. Что такое HTTP методы? Какие методы вы знаете?
9. В чем отличие GET от POST, POST от PUT, GET от HEAD, для чего используется OPTIONS?
10. Что такое REST? Расскажите про его архитектуру?
11. Что такое DNS? Кратко опишите его роль
12. Что такое localhost? По какому IP можно получить к нему доступ?
13. Предположим, что в локальной сети есть веб-ресурс, доступный по ссылке http://192.168.10.1. Перед вами стоит задача обратиться к нему по ссылке http://mysite со своей локальной машины. Доступа к DNS нет. Что вы предпримете?
14. Что такое сервер приложений, какова его роль? Какие сервера приложений вы знаете?
15. Расскажите про шифрование в сети. Какой порт по умолчанию используется при запросе веб-ресурса по зашифрованному протоколу?
16. Какой порт по умолчанию используется при запросе веб-ресурса по зашифрованному протоколу?
17. Расскажите про способы и протоколы аутентификации в веб-приложениях
18. Какие коды состояния используются в механизме аутентификации и авторизации?
19. Чем отличается аутентификация от авторизации?
20. Что такое JSON Web Token и для чего он нужен?
21. Расскажите про OAuth
22. Расскажите про Cross-Origin Resource Sharing
23. Расскажите про Cross-Site Scripting

Урок 4. Основы HTML 5 (5 часов)

Задание

На этом уроке вам потребуется сверстать макет сайта на ваше усмотрение. Макет должен иметь футер(или подвал), левую навигацию, место под контент страниц, логотип и наименование системы. Разметка долна быть выполнена с использованием стандарта HTML5. Пока можете не тратить время на внешний вид, этим мы займемся на следующем уроке.

Задание для самоконтроля

1. Проверка верстки
2. Из каких элементов состоит веб-страница, какова его структура?
3. Как указать браузеру, что формат разметки выполнен в виде HTML5?
4. Чем отличается блочная верстка от табличной?
5. Для чего служит элемент canvas
6. Что такое адаптивный дизайн? Каковы его основные принципы?
7. Для чего нужен метатег viewport?
8. Масштабируемая векторная графика. Для чего это нужно и каковы основные достоинства?

Урок 5. Основы CSS3 и препроцессор SASS (1 день 5 часов)

Задание

Мы продолжим улучшать ваш макет. Заданием этого урока будет адаптация приложения для мобилных устройств и приведения его стилевого оформления в порядок. Для мобильных устройств с шириной экрана менее 320px левая навигация должна быть скрыта. Стили должны находиться в отдельном файле. Необходимо использовать SCSS синтаксис. Старайтесь максимально использовать функции недоступные в самом CSS, например, переменные, вложенности, миксины, наследование. На данном этапе использование bootstarp не допускается.

Задание для самоконтроля

1. Расскажите про SASS и препроцессинг. Для чего это нужно? В чем ключевое отличие синтаксиса SASS от SCSS?
2. Расскажите про переменные
3. Расскажите про вложенности стилей, для чего они нужны? Для чего нужен символ &
4. Расскажите про фрагметы и их импорт
5. Что такое интерполяция строк?
6. Что такое примеси и как их использовать? для чего они нужны?
7. Как использовать наследование стилей и для чего это нужно?
8. Что вы знаете о технологии Flexbox?
9. Для чего нужно правило media? Что такое медиа-запрос? Какие типы носителей вы знаете?
10. Что такое bootstrap?

Урок 6. Основы Javascript и ECMAScript 6 (1 день)

Задание

Изучите основы Javascript и ECMAScript 6, ответив на вопросы для самоконтроля, после этого закрепите свои знания, выполнив практическое задание.
Вам потребуется реализовать алгоритм бинарного поиска по массиву объектов на основе ключа. Массим объектов генеририется утилитарной функцией day6utils.getData, которая находится в проекте. Пример вызова:

const list = day6utils.getData(100000)
const bs = new BinarySearch(list)
const result = bs.search(50200)

результат

console.log(result)
{
    key: 50200,
    value: "value50200"
}

При реализации класса BinarySearch используйте возможности стандарта ECMAScript 6. Прочитать про бинарный поиск можно в Википедии

Задание для самоконтроля

Создавайте примеры кода для обсуждения.

1. Что такое строгий режим strict mode? Для чего он нужен? Какой режим используется по умолчанию для содержимого модулей?
2. Расскажите про var, let, const
3. Какие типы данных определены в стандарте ECMAScript
4. Что такое массив? Для чего он нужен?
5. Какие коллекции вы знаете? В чем их отличие от массивов?
6. Какие циклы вы знаете?
7. Расскажите про оператор Spread
8. Как использовать параметры по умолчанию для функций?
9. Что такое стрелочная функция
10. Расскажите про интерполяцию строк
11. Изучите понятия функций, цепочки области видимости, контекста выполнения, глобального объекта и переменных окружения
12. Что такое замыкания в JavaScript?
13. Что такое Promise и для чего это нужно? Как можно создать promise?
14. Что такое асинхронная функция и как её объявить? Для чего нужно ключевое слово await?
15. Какие конструкции языка позволяют управлять обработкой ошибок?
16. Изучите понятие модулей в JavaScript
17. Изучите основные понятия ООП. Какие 4 принцыпа вы знаете?
18. Какая модель наследования используется в JavaScript?
19. Как можно создавать объекты?
20. Как объявляется конструктор класса?
21. Что такое статический метод и как его объявить?
22. Что такое getter и setter и как их объявить?
23. Как создать дочерний класс?

Урок 7. Сборка проекта, компиляторы и транспиляторы (5 часов)

В задании 5 вы сверстали общий шаблон вашего приложения. Используем его для макета полноценного приложения. Последующие занятия посвящены реализации функциональности модуля "Рабочее место администратора системы", описанного в разделе "Введение" выше.

Задание

Заданием этого урока будет создание проекта в выбранном редакторе кода. Проект должен содержать в своем составе:

1. webpack, babel и eslint
2. опционально vue и vuetify Проект должен запускаться как минимум в трех режимах:
3. запуск webpack dev server
4. сборка проекта для дальнейшего размещения в боевой среде
5. запуск eslint на проверку ошибок Перенесите наработки из урока 5 в ваш проект. При запуске webpack dev server должен открываться сверстанный вами шаблон. Настройте проект так, чтобы он был ориентирован на поддержку двух последних версий браузеров. Убедитесь, что все стили и скрипты(если есть) размещены в отдельных файлах и webpack их компилирует в отдельный bundle.

Задание для самоконтроля

1. Зачем нужно производить сборку проекта?
2. Соберите проект для дальнейшего размещения в боевой среде. Откройте главную html страницу.
3. Убедитесь, что вы понимаете основные концепции webpack: entry point, output, loaders/rules, plugins, mode. Кратко объясните, для чего нужна каждая из перечисленных концепций.
4. Убедитесь, что вы понимаете для чего нужен babel и что такое polyfill

Урок 8. Построение приложений с использованием JavaScript-фреймворков (1 день 5 часов)

Задание

В этом уроке потребуется полностью реализовать интерфейс модуля "Рабочее место администратора системы". Подключите к проекту vue и vuetify, если не сделали это на прошлом занятии. На данном этапе допускается использование bootstrap. Т.к. у вас ещё нет удаленных сервисов, то используйте массивы во vuex для временного хранения данных(конечно они должны пропадать при закрытии браузера, но сохраняться при переходе между страницами). Перед тем как приступать к реализации ознакомьтесь с документацией Vue и Vuex и пройдите вопросы для самоконтроля.

Задание для самоконтроля

1. Что такое виртуальны DOM?
2. Что такое реактивность?
3. Что такое Vue.js?
4. Что такое Vuex Store и для чего он нужен?
5. Как происходит организация маршрутов в приложении(другими словами навигация между страницами)?
6. Убедитесь, что понимаете синтаксис верстки шаблонов.
7. Что такое вычисляемые свойства?
8. Что такое компоненты? Для чего нужно разбиение приложения на компоненты?
9. Как создать общий макет приложения? Что такое слот для чего они нужны?
10. Расскажите о хуках жизненного цикла экземпляра. Где объявляются реактивные свойства? Чем функции, объявленные в computed, отличаются от функций из methods?

Урок 9. Знакомство с Django Framework (1 день)

Задание

На основе примеров из DJANGO_README.md и requirements.txt, а также документации вам следует установить и произвести настройку следующих модулей:

1. Django версии 2.1.7
2. djangorestframework для создания REST API для модуля "Рабочее место администратора системы".
3. django-rest-swagger. Генератор документации для Django REST Framework
4. django-cors-headers. Разрешение CORS запросов Создайте модель, используя базовые сериализаторы serializers.ModelSerializer. Модель должна включать в себя 2 сущности:
5. Разделы каталога продукции
6. Продукт Описание полей смотри в разделе "Введение" выше.

Задание для самоконтроля

Открыв Swagger убедитесь в наличии GET, POST, PUT, DELETE методов для каждой сущности. Выполните POST и убедитесь GET, что данные сохраняются

Урок 10. Сетевое взаимодействие с веб-сервером (1 день)

Задание

На предыдущем уроке вы создали REST API для модуля "Рабочее место администратора системы". Адаптируйте код, написанный в рамках урока 8. Напомню, что мы использовали массивы во vuex для временного хранения данных. Теперь, применив библиотеку Axios для доступа к API, отправляйте данные на сервер.

Задание для самоконтроля

1. Чем результат выполнения асинхронной задачи отличается от результата выполнения синхронной задачи?
2. Убедитесь, что данные сохраняются на сервере и не теряются после закрытия браузера.

Урок 11. Тестирование веб-приложений (1 день)

Задание

Задание для самоконтроля

Урок 12. Демонстрация готового веб-приложения (1 день)