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

Содержание

Слайд 2

Качество кода – что это?

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

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

Слайд 3

Основные принципы

KISS. KISS расшифровывается как «чем проще — тем лучше»
DRY. DRY означает

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

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

Слайд 4

Способы контроля качества

Style Guide (стайл гайд), стандарт (ES6 / ECMAScript 2015)
Автоматическая проверка

Способы контроля качества Style Guide (стайл гайд), стандарт (ES6 / ECMAScript 2015)
– ESLINT
Code Review

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

Слайд 5

Style Guide (стайл гайд)

Описание принципов оформления и написания кода, синтаксиса. В компании

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

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

Слайд 6

HTML/Twig

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

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

Слайд 7

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

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

Слайд 8

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

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

Слайд 9

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

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

Слайд 10

TWIG v.1.X

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

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

Слайд 11

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

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

Слайд 12

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

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

Слайд 13

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

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

Слайд 14

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

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

Слайд 15

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

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

Слайд 16

SCSS

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

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

Слайд 17

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

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

Слайд 18

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

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

Слайд 19

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

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

Слайд 20

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

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

Слайд 21

MIXIN

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

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

Слайд 22

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

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

Слайд 23

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

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

Слайд 24

Методология SCSS

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

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

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

Слайд 25

JS

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

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

Слайд 26

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

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

Слайд 27

Есть не адаптивная часть сайта, например, админ-панель. Она находится вне видимости import

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

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

Слайд 28

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

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

Слайд 29

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

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

Слайд 30

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

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

Слайд 31

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

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

Слайд 32

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

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

Слайд 33

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

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

Слайд 34

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

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

Слайд 35

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

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

Слайд 36

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

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

Слайд 37

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

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

Слайд 38

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

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

Слайд 39

ПОЛНЫЕ ГАЙДЫ БУДУТ ВЫДАНЫ ДЛЯ ИЗУЧЕНИЯ ПРИ ТРУДОУСТРОЙСТВЕ

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

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

Слайд 40

Стандарт (ES6 / ECMAScript 2015)

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

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

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

Слайд 41

ESLINT – Автоматическая проверка

Инструмент статического анализа кода для выявления проблемных шаблонов, обнаруженных

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

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

Слайд 42

ESLINT – Запуск проверки

Для работы нужен Node JS (открываем консоль)
Команда: node [ путь

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

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

Слайд 43

Code Review (Кодревью)

Проверка кода выполнения задачи перед тестированием, которую проводит другой разработчик

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

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

Слайд 44

ПРАКТИКА ЧАСТЬ 1

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

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

Слайд 45

1 Что здесь не так?

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

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

Слайд 46

1 Ответ

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

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

Слайд 47

2 Что не так?

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

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

Слайд 48

2 Ответ

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

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

Слайд 49

3

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

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

Слайд 50

3

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

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

Слайд 51

4

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

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

Слайд 52

4

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

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

Слайд 53

5

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

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

Слайд 54

5

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

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

Слайд 55

6

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

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

Слайд 56

6

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

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

Слайд 57

6

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

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

Слайд 58

7 Завершающее задание

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

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

Слайд 59

7

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

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

Слайд 60

Самостоятельное изучение

Style Guide JS github.com/leonidlebede/javascript-airbnb

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

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

Слайд 61

ПРАКТИКА ЧАСТЬ 2

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

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

Слайд 62

8 Что здесь не так?

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

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

Слайд 63

8.1

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

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

Слайд 64

8.2

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

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

Слайд 65

8.3

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

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

Слайд 66

9

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

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

Слайд 67

9

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

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

Слайд 68

10

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

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

Слайд 69

10 Вариант решения

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

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

Слайд 70

11

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

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

Слайд 71

11 Вариант решения

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

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

Слайд 72

12

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

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

Слайд 73

12

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

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

Слайд 74

Задание 1

Написать HTML верстку для статьи
Добавить стилей CSS в отдельном файле, не в style

Ярмарка

Задание 1 Написать HTML верстку для статьи Добавить стилей CSS в отдельном
Мастеров - Практикум 2022
Имя файла: Лекция---Качество-кода-(1).pptx
Количество просмотров: 30
Количество скачиваний: 0