Лекция - Качество кода (1)

Качество кода – что это?
Ярмарка Мастеров - Практикум 2022

Основные принципы
KISS. KISS расшифровывается как «чем проще — тем лучше»
DRY. DRY означает «не повторяйся»
Для самостоятельного изучения: SOLID
Ярмарка Мастеров - Практикум 2022

Способы контроля качества
Style Guide (стайл гайд), стандарт (ES6 / ECMAScript 2015)
Автоматическая проверка – ESLINT
Code Review
Ярмарка Мастеров - Практикум 2022

Style Guide (стайл гайд)
Описание принципов оформления и написания кода, синтаксиса. В компании есть такие для разных языков программирования
HTML / Twig
SCSS
JS
…
Ярмарка Мастеров - Практикум 2022

HTML/Twig
Ярмарка Мастеров - Практикум 2022

Ярмарка Мастеров - Практикум 2022

Ярмарка Мастеров - Практикум 2022

Ярмарка Мастеров - Практикум 2022

TWIG v.1.X
Ярмарка Мастеров - Практикум 2022

Ярмарка Мастеров - Практикум 2022

Ярмарка Мастеров - Практикум 2022

Ярмарка Мастеров - Практикум 2022

Ярмарка Мастеров - Практикум 2022

Ярмарка Мастеров - Практикум 2022

SCSS
Ярмарка Мастеров - Практикум 2022

Ярмарка Мастеров - Практикум 2022

Ярмарка Мастеров - Практикум 2022

Ярмарка Мастеров - Практикум 2022

Ярмарка Мастеров - Практикум 2022

MIXIN
Ярмарка Мастеров - Практикум 2022

Ярмарка Мастеров - Практикум 2022

Ярмарка Мастеров - Практикум 2022

Методология SCSS
https://ru.bem.info/methodology/css/
Также в компании есть сниппеты для переменных
цветов, размеров и т.п. для разных редакторов
Ярмарка Мастеров - Практикум 2022

JS
Ярмарка Мастеров - Практикум 2022

Ярмарка Мастеров - Практикум 2022

Есть не адаптивная часть сайта, например, админ-панель. Она находится вне видимости import общей сборки и придерживается старых стандартов.
Ярмарка Мастеров - Практикум 2022

Ярмарка Мастеров - Практикум 2022

Ярмарка Мастеров - Практикум 2022

Ярмарка Мастеров - Практикум 2022

Ярмарка Мастеров - Практикум 2022

Ярмарка Мастеров - Практикум 2022

Ярмарка Мастеров - Практикум 2022

Ярмарка Мастеров - Практикум 2022

Ярмарка Мастеров - Практикум 2022

Ярмарка Мастеров - Практикум 2022

Ярмарка Мастеров - Практикум 2022

Ярмарка Мастеров - Практикум 2022

ПОЛНЫЕ ГАЙДЫ БУДУТ ВЫДАНЫ ДЛЯ ИЗУЧЕНИЯ ПРИ ТРУДОУСТРОЙСТВЕ
Ярмарка Мастеров - Практикум 2022

Стандарт (ES6 / ECMAScript 2015)
Современные синтаксические возможности для упрощения решений и повышения читаемости кода
JS ES6: https://habr.com/ru/post/460741/
Другие используемые стандарты:
HTML5, CSS3, Twig 1.X
Ярмарка Мастеров - Практикум 2022

ESLINT – Автоматическая проверка
Инструмент статического анализа кода для выявления проблемных шаблонов, обнаруженных в коде JavaScript
Строгое равенство (===, а не ==)
Неиспользуемые переменные
Магические числа
Константы в условиях
Сложные функции
И множество других правил:
https://eslint.org/docs/latest/rules/
Ярмарка Мастеров - Практикум 2022

ESLINT – Запуск проверки
Для работы нужен Node JS (открываем консоль)
Команда:
node [ путь до ESLINT ][ пробел ][ путь до JS файла ]
Пример:
node ./node_modules/eslint ./js/template.js
Ярмарка Мастеров - Практикум 2022

Code Review (Кодревью)
Проверка кода выполнения задачи перед тестированием, которую проводит другой разработчик уровня «старший» и выше.
Комментарии – вопросы и замечания по коду или решению
Approve (Апрув) – подтверждение качества кода, которое позволяет перевести задачу в тестирование
Ярмарка Мастеров - Практикум 2022

ПРАКТИКА
ЧАСТЬ 1
Ярмарка Мастеров - Практикум 2022

1 Что здесь не так?
Ярмарка Мастеров - Практикум 2022

1 Ответ
Ярмарка Мастеров - Практикум 2022

2 Что не так?
Ярмарка Мастеров - Практикум 2022

2 Ответ
Ярмарка Мастеров - Практикум 2022

3
Ярмарка Мастеров - Практикум 2022

3
Ярмарка Мастеров - Практикум 2022

4
Ярмарка Мастеров - Практикум 2022

4
Ярмарка Мастеров - Практикум 2022

5
Ярмарка Мастеров - Практикум 2022

5
Ярмарка Мастеров - Практикум 2022

6
Ярмарка Мастеров - Практикум 2022

6
Ярмарка Мастеров - Практикум 2022

6
Ярмарка Мастеров - Практикум 2022

7 Завершающее задание
Ярмарка Мастеров - Практикум 2022

7
Ярмарка Мастеров - Практикум 2022

Самостоятельное изучение
Style Guide JS
github.com/leonidlebede/javascript-airbnb
Ярмарка Мастеров - Практикум 2022

ПРАКТИКА
ЧАСТЬ 2
Ярмарка Мастеров - Практикум 2022

8 Что здесь не так?
Ярмарка Мастеров - Практикум 2022

8.1
Ярмарка Мастеров - Практикум 2022

8.2
Ярмарка Мастеров - Практикум 2022

8.3
Ярмарка Мастеров - Практикум 2022

9
Ярмарка Мастеров - Практикум 2022

9
Ярмарка Мастеров - Практикум 2022

10
Ярмарка Мастеров - Практикум 2022

10 Вариант решения
Ярмарка Мастеров - Практикум 2022

11
Ярмарка Мастеров - Практикум 2022

11 Вариант решения
Ярмарка Мастеров - Практикум 2022

12
Ярмарка Мастеров - Практикум 2022

12
Ярмарка Мастеров - Практикум 2022

Задание 1
Написать HTML верстку для
статьи
Добавить стилей CSS в
отдельном файле, не в style
Ярмарка Мастеров - Практикум 2022