Javascript тренинги

Навигация

1. Введение
2. Как начать ?
3. Процесс выполнения задач
4. Задания первого этапа
   4.1 Javascript advanced
   4.2 Modern Javascript
   4.3 Testing Javascript with Jest
5. Задания второго этапа
   5.1 Vue Basic
   5.2 Vue and Vuex
   5.3 Testing Vue app

Введение

Трененги разбиты на 2 больших этапа.

1. Базовый JS + современный синтаксис JS + Jest Unit Testing
2. Базовый Vue.js + экосистема Vue.js(Vuex, VueRouter, VueTypes) + Vue-test-utils + Jest Unit Testing

Каждый этап разбит на 3 подэтапа со своим заданием, для того что-бы начать выполнять задание из
следуещего подэтапа, необходимо выполнить предыдущий, для того что-бы начать выполнять задания из
следующего этапа, нужно закончить все задания из первого этапа

Как начать ?

1. Сообщите техническому директору о своём желании проходить тренинг
2. Согласуйте рабочее время, которое вы будете уделять заданиям из тренинга
3. Сообщите сотруднику, который будет делать ревью вашего кода о том, что вы начали выполнять задание
4. Сделайте форк данного репозитория
5. Откройте доступ к репозиторию своему куратору, что-бы он мог в дальнейшем проводить код ревью
6. Исходный код каждого тренинга, должен находиться в своей папке
   (не менйте структуру форкнутого репозитория !!!)
7. Каждая последующая задача подэатапа, предполагает модификацию текущей
   кодовой базы, полученной во время выполнения предыдущей задачи.
   Например: Создали приложения A, теперь это приложение нужно собирать с помощью webpack, модифицируем код приложения A

Процесс выполнения задач

Задачи первого этапа:

1. После выполнения каждого задания первого этапа, необходимо создать pull request
   и назначить его на вашего куратора
2. Оставленные замечания, в ходе код ревью, необходимо поправить, если вы не
   согласны или не понимаете, что здесь не так то можете начать дискусию в
   созданном комментарии, либо, созвониться с вашим куратором, для более
   подробного обсуждения
3. Когда все ошибки будут устранены, можно приступать к выполнению следующей задачи этапа

Задачи второго этапа:

1. Перед началом выполнения заданий из второго этапа, необходимо
   декомпозировать общую задачу на ряд мелких
2. После выполнения каждой декомпозированной задачи, необходимо создавать
   pull request и назначать его на вашего куратора
3. Оставленные замечания, в ходе код ревью, необходимо поправить, если вы не согласны или не понимаете, что здесь не так, то можете начать дискусию в созданном комментарии,
   либо созвониться с вашим куратором, для более подробного обсуждения
4. Когда все ошибки будут устранены, можно приступать к выполнению следующей декомпозированной задаче
5. После полностью выполненного задания, необходимо согласовать с вашем
   куратором время созвона, для ответа на вопросы, которые есть
   у каждого задания второго этапа
6. После успешного отвеченных вопросов можно начинать следуещее задания этапа

Задания первого этапа

JavaScript Advanced

Для начала задания необходимо:
Базовые знания Javascript

Длительность:
Приблизительно 30-40 часов

Цель:
Получить более глубокие знания JavaScript: понять как взаимодействовать
с DOM api, что такое контекст и замыкания, как работает
асинхронность в js и зачем нужны Event Loop и Call Stack.

Ссылки для изучения:

1. Литература
   1.1 Современный учебник JavaScript - https://learn.javascript.ru/
   1.2 Выразительный Javascript - https://eloquent-javascript.karmazzin.ru/
2. Статьи
   2.1 Call Stack, Event Loop , Tasks & more - https://clck.ru/PuCES
   2.2 Javascript objeсts - https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Working_with_Objects
3. Видео
   3.1 Про цикл событий в JavaScript или "как на самом деле работает асинхронность"? - https://www.youtube.com/watch?v=8cV4ZvHXQL4

Задание:
Необходимо создать программу викторину, с возможностью ответа на вопросы, и выводом статистики о количестве правильных и не правильных ответов по завершении. Для получения коллекции с вопросами следует использовать
https://opentdb.com/api_config.php , где нужно сгенерировать api url со следующими параметрами:

1. Number of Questions: 6
2. Select Category: на ваш выбор
3. Select Difficulty: на ваш выбор
4. Select Type: Multiple choice
5. Select Encoding: Default Encoding

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

P.S По внешнему виду нет особых требований, ориентируйтесь на свой вкус,
но какой-то css должен быть :)

Обязательные требования к выполнению:

1. Использовать чистый JavaScript без сторонних библиотек и фреймворков (включая jQuery !!!)
2. Валидация ответа сервера
3. Поддержка браузеров: FF и Chrome последних версий

Modern Javascript

Для начала задания необходимо:
Должен быть сдан тренинг - Javascript advanced

Длительность:
Приблизительно 30-40 часов

Цель:
Получить знания современного стандарта JavaScript

Ссылки для изучения:

1. Литература
   1.1 Современный учебник JavaScript - https://learn.javascript.ru/
2. Статьи
   2.1 ES6 по человечески(краткое руководства по ES6) - https://habr.com/ru/post/305900/
   2.2 ES7 руководство - https://frontend-stuff.com/blog/es2016/
   2.3 ES8 руководство - https://frontend-stuff.com/blog/es2017/
   2.4 ES9 руководтво - https://frontend-stuff.com/blog/es2018/
   2.5 Подробней про промисы - https://frontend-stuff.com/blog/javascript-promises/
   2.6 Async/Await - https://frontend-stuff.com/blog/javascript-async-await/
   2.7 Webpack официальный Getting Started - https://webpack.js.org/guides/getting-started/
   2.8 Что такое Babel - https://learn.javascript.ru/polyfills
3. Видео
   3.1 Асинхронность с Async/Await - https://www.youtube.com/watch?v=5kAPExqSZ1I
   3.2 Полный курс ES6, ES7, ES8 - https://www.youtube.com/watch?v=Ti2Q4sQkNdU
   3.3 Курс Webpack + Babel - https://www.youtube.com/watch?v=eSaF8NXeNsA&t=7771s

Задание:
Необходимо переделать задание из тренинга JavaScript Advanced в современном JS стиле, по максимуму используя новые возможности языка. А так-же добавить возможность возвращаться к предыдущему отвеченному вопросу, что-бы пользователь имел возможность выбрать новый ответ или сохранить старый. Собирать проект необходимо с помощью Webpack !!!.

Обязательные требования к выполнению: Необходимо использовать следующие конструкции из ES6:

1. Классы и весь новый синтаксис для работы с классами
   (только в том случае если решили их использовать)
2. Async/Await
3. Функции для работы с массивами map, filter, reduce
4. Новое объявление переменных let + const
5. ES modules
6. Rest + Spread операторы
7. Стрелочные функции

Testing Javascript with Jest

Для начала задания необходимо:
Должен быть сдан тренинг - Modern Javascript

Длительность:
Приблизительно 10-20 часов

Цель:
Изучить самый популрянй фреймворк для unit тестирования JS кода, познакомиться с подходом разработки TDD

Ссылки для изучения:

1. Статьи
   1.1 Юнит-тестирование для чайников - https://habr.com/ru/post/169381/
   1.2 TDD методология - https://habr.com/ru/company/ruvds/blog/450316/
   1.3 TDD на простом примере - https://proglib.io/p/test-driven-development/
   1.4 Официальная документация Jest - https://jestjs.io/docs/en/getting-started
   1.5 Тестирование Javascript + Jest - https://habr.com/ru/post/502302/
   1.6 JS + Jest для начинающих - https://clck.ru/QKMH2
2. Видео
   2.1 Jest. Unit Тестирование в JavaScript - https://www.youtube.com/watch?v=IEDe8jl5efU

Задание:
Необходимо покрыть тестами приложение написанное в тренинге Modern Javascript

Обязательные требования к выполнению:

1. Использовать только ту функциональность, которую даёт Jest из коробки,
   не прибегая к использованию дополнительных библиотек

Задания второго этапа

Vue Basic

Для начала задания необходимо:
Должен быть сдан тренинг - Testing Javascript with Jest

Длительность:
Приблизительно 60-80 часов

Цель:
Научиться проектировать и реализовывать сложные JavaScript-приложения
с использованием библиотеки Vue.js. Изучить компонентную архитектуру js.

Ссылки для изучения:

1. Литература
   1.1 Fullstack Vue - https://ru.b-ok2.org/book/3592239/af0ca3
2. Статьи
   2.1 Обзор компонентного подхода - https://learn.javascript.ru/webcomponents-intro
   2.2 Официальная документация Vue.js - https://ru.vuejs.org/v2/guide/
   2.3 Официальная документация Vue Router - https://router.vuejs.org/ru/
   2.4 Официальный style-guide - https://ru.vuejs.org/v2/style-guide/
   2.5 How to configure Webpack + Vue from the ground up - https://clck.ru/QKLuF
   2.6 Vue.js cheat sheet - https://marozed.ma/vue-cheatsheet/
   2.7 Vue patterns - https://learn-vuejs.github.io/vue-patterns/patterns/
3. Видео
   3.2 Обзорный курс Vue.js - https://www.youtube.com/watch?v=b6Ac0jcqJIg
   3.1 Vue.js скринкаст - https://laracasts.com/series/learn-vue-2-step-by-step
   3.2 Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex) - https://rutracker.org/forum/viewtopic.php?t=5874689

Задание:

Пример интерфейса приложения (вы можете выбрать своё оформление)

рис.1 рис.2 рис.3

Разработать одностраничное приложение со следующим функционалом:

1. Отображение списка сущностей (рис. 1), который будет подгружаться с localStorage в формате JSON
2. У каждой сущности как минимум должен быть заголовок, небольшое описание,
   дата создания и состояние Like
3. Дата создания должна отображаться в формате: создан 1 минуту/час/день назад,
   если больше недели, то дата в формате DD-MM-YYYY
4. При клике на кнопку лайка - меняется оформление кнопки
5. При клике на кнопку редактирования пользователь переходит на страницу редактирования (рис. 2)
6. При клике на Save изменения сохраняются и происходит переход на домашнюю страницу
7. При клике на Delete соответствующая сущность удаляется
8. При клике на + открывается страница создания новой карточки (рис. 3)
9. Все изменения сущностей должны сохраняться в localStorage и не теряться при перезагрузке страницы

Обязательные требования к выполнению:

1. Нельзя использовать дополнительные библиотеки кроме Vue.js + Vue Router, для сборки приложения
   можете использовать всё что потребуется
2. Нельзя использовать Vuex
3. Собирать приложение нужно с нуля используя webpack, vue-cli использовать нельзя
4. Должна быть добавлена валидация проверяющая корректность данных для полей форм
   (к примеру: длина поля title должен быть больше 4 символов, но меньше 255 и т.д.)
5. Использовать слоты при рендеринге списка сущностей
6. Использовать хотя-бы один mixin
7. Добавить попап с предупреждением, что данные не сохранятся, если пользователь пытается покинуть страницу с формой

Вопросы:

1. Какие методы жизненного цикла вы знаете? Перечислите и опишите.
2. Что такое реактивность данных ? Как задать реактивные данные ?
3. Как следует обновлять объекты и массивы ? Почему ?
4. Что такое однонаправленный поток данных ? Зачем он нужен ?
5. Какие способы взаимовдействия между компонентом потомком и компонентом родителем вы знаете ? Перечислите
6. Как передать данные компонента в слот ?
7. Что такое функциональные компоненты ? Когда их нужно использовать ?
8. Что произойдет если mixin будет содержать такой же метод, что и объект ?
9. В чем отличие watch от computed ? В каких случаях стоит использовать watch, а в каких computed ?

Vue and Vuex

Для начала задания необходимо:
Должен быть сдан тренинг - Vue Basic

Длительность:
Приблизительно 60-80 часов

Цель:
Научиться проектировать и реализовывать сложные JavaScript-приложения
с использованием библиотеки Vuex
Понять и изучить, что такое глобальное состояние и интерфейс для его изменения.
Понять и изучить, что такое JWT и как с этим работать на клиенте.
Изучить Flux архитектуру

Ссылки для изучения:

1. Статьи
   1.1 Официальная документация Vuex - https://vuex.vuejs.org/ru/guide/
   1.2 Axios - https://github.com/axios/axios#features
   1.2 Умные и глупые компоненты - https://clck.ru/MEXaR (статья обязательна к прочтению !!!)
   1.2 WTF is Vuex - https://clck.ru/QKNSL
   1.3 Vuex basics - https://skyronic.com/2016/01/vuex-basics-tutorial/
   1.4 Flux архитектура - https://clck.ru/QKNSi
   1.3 Flux для глупых людей - https://habr.com/ru/post/249279/
   1.4 Vuex cheat sheet - https://vuejs-tips.github.io/vuex-cheatsheet/
   1.5 JWT введение - https://jwt.io/introduction/
2. Видео: 2.1 JWT теория - https://www.youtube.com/watch?v=vQldMjSJ6-w&t=1s
   2.2 JWT проблемы - https://www.youtube.com/watch?v=601CnGGp_MU&t=1s
   2.3 JWT сервер - https://www.youtube.com/watch?v=_BSag4ABBMY
   2.4 JWT клиент - https://www.youtube.com/watch?v=XG-xOHogPkY

Задание:

1. Перепроектировать задание, выполненное в треннинге по Vue.js Basic используя стейт-менеджер Vuex
2. Добавить страницы с формами для авторизации и регистрации пользователей
3. При запросе на сервер, вместо текста кнопки в формах, должен отображаться спиннер
4. Все маршруты приложения кроме авторизации и регистрации должны быть доступны только зарегистрированному пользователю. Маршруты авторизации и регистрации доступны только для неаутентифицированного пользователя.
5. Добавить кнопку выхода из приложения
6. Теперь данные по карточкам должны храниться для каждого пользователя в localstorage отдельно
   и подгружаться только те которые соответствуют текущему id аутентифицированного пользователя
7. Должна быть реализована логика возобновления авторизационного токена в случае истечения его срока жизни
8. Необходимо добавить пагинацию если карточек на странице больше чем шесть штук
9. Добавить фильтр, который показывает только liked сущности

PS:

1. Сервис для регистрации - https://www.notion.so/amarkets/auth-Internal-3567bb92a9f14e509ba015e5d48d51ad
2. Сервис авторизации - https://www.notion.so/amarkets/auth-External-58acf5399cbf4079a3a0a71ab540b466

Обязательные требования к выполнению:

1. Для запросов необходимо использовать axios
2. Модульный Vuex
3. Компонентные библиотеки использовать нельзя
4. Использовать Async/Await

Вопросы:

1. Что такое Vuex ? Зачем он нужен ?
2. Что такое axios и чем он лучше fetch, XMLHttpRequest ?
3. Зачем нужны interceptors у axios ?
4. Что такое JWT, какие проблемы решает ?
5. Что такое состояние ? Почему состояние должно быть read-only ?
6. В чем разница actions и mutations ? Когда следует использовать actions, а когда mutations ?
7. Зачем нужны getters ?
8. Какой аргумент первым принимает на вход каждый action из чего состоит ?
9. Как получить доступ из одного геттера к другому в рамках одного модуля, а в рамках всего store ?

Testing Vue app

Для начала задания необходимо:
Должен быть сдан тренинг - Vue and Vuex

Длительность:
Приблизительно 30-50 часов

Цель:
Научиться писать Unit тесты при помощи JEST + Vue-test-utils для компонентов Vue.js и сущностей Vuex

Ссылки для изучения:

1. Литература:
   1.1 Testing Vue. Js Applications - https://www.pdfdrive.com/testing-vue-js-applications-e187667495.html
2. Статьи:
   2.1 Официальная документация Vue-test-utils - https://vue-test-utils.vuejs.org/ru/
   2.3 Как тестировать Vue Router - https://vue-test-utils.vuejs.org/ru/guides/using-with-vue-router.html
   2.4 Как тестировать Vuex - https://vuex.vuejs.org/ru/guide/testing.html
   2.5 Как тестировать компоненты - https://ru.vuejs.org/v2/cookbook/unit-testing-vue-components.html
   2.6 Guide to Unit testing Vue Components - https://testdriven.io/blog/vue-unit-testing/
3. Видео:
   3.1 An Introduction To Vue Testing With Jest - (Realworld App) - https://www.youtube.com/watch?v=Fbo4pttBZ9k

Задание:
Покрыть unit тестами всё приложение написанное в тренинге Vue.js + Vuex

Вопросы:

1. Зачем нужно unit тестирование ? Какие проблемы оно решает ?
2. Какие виды тестирования вы знаете ? Какие проблемы они решают ?
3. Что такое snapshot тестирование ? Когда его следует применять ?
4. Отличие ShallowMount от Mount ?
5. Отличие .toBe от toEqual ?
6. Что такое Stub и что такое Mock ?
7. Что нужно тестировать в компоненте ?
8. Зачем нужен localVue ?