SlideShare a Scribd company logo
Code Style (in russian)
Михаил Давыдов
Разработчик JavaScript
Code Style
В ролях
- разработчик А
- разработчик Б (новичек)
История про разработчиков
4
Эта история вымышленная
и к Яндексу не относится
Жил-был один разработчик
и писал вот так:
6
function name(value)
-tab->{
-tab->-tab->var a = 0, b = 42;
-tab->-tab->if (value) return a
-tab->}
Код разработчика А
7
В проект пришел еще один и
стал писать так:
8
var name = function (value) {
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};
Код разработчика Б
9
И общего Code Style у них
не было…
10
11
var name = function (value) {
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};
Код разработчика Б
А: Что за говнокод?
12
function name(value)
-tab->{
-tab->-tab->var a = 0, b = 42;
-tab->-tab->if (value) return a
-tab->}
Код разработчика А
Б: У самого говнокод!
13
var name = function (value) {
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};
Код разработчика Б
А: Почему так ф-ю
написал?
14
function name(value)
-tab->{
-tab->-tab->var a = 0, b = 42;
-tab->-tab->if (value) return a
-tab->}
Код разработчика А
Б: А ты вообще табы
используешь!
15
var name = function (value) {
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};
Код разработчика Б
А: Зачем тут скобка?
16
function name(value)
-tab->{
-tab->-tab->var a = 0, b = 42;
-tab->-tab->if (value) return a
-tab->}
Код разработчика А
Б: Уайтсмитс? Ты из
какой пещеры вылез?
17
var name = function (value) {
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};
Код разработчика Б
А: Зачем тут точка с
запятой?
18
function name(value)
-tab->{
-tab->-tab->var a = 0, b = 42;
-tab->-tab->if (value) return a
-tab->}
Код разработчика А
Б: А ты зачем перенос
не поставил?
19
var name = function (value) {
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};
Код разработчика Б
А: RTFM or GTFO!
20
function name(value)
-tab->{
-tab->-tab->var a = 0, b = 42;
-tab->-tab->if (value) return a
-tab->}
Код разработчика А
Б: А в бубен?
21
22
Нужна договоренность в
стиле кода
23
Организационный профит Code Style
•  Это закон
–  Должна быть отдельная страница о которой все знают
–  Страницу просто найти
•  Закон разрешает конфликты
–  Не знание закона не освобождает от ответственности
•  Решает большинство проблем
•  Эту страницу нужно дать прочитать перед
началом работы
24
Если не понятно, то нужно
дать понять причину ввода
такого Code Style
Применение CS
Для быстрого восприятия кода
Для предотвращения ошибок в коде
Для быстрого написания кода
26
Каждый из следующих
примеров зависит от
восприятия конкретного
человека
Обобщение элементов
28
var name = function (value) {
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};
Обобщение соседних элементов
29
var name = function (value) {
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};
Обобщение соседних элементов
Перенос строки разрывает обобщение
30
.b-form {
font-family: Arial;
font-size: 2em;
padding: 0 10px;
min-height: 100px;
}
Обобщение соседних элементов
Перенос строки разделяет разные типы CSS
ствойств и обобщает соседние элементы
Вертикаль – список
32
var name = function (value) {
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};
Вертикаль – список
var - список переменных
33
var name = function (value) {
..var a = 0
...., b = 42
...., c = 42
...., d = 42
....;
};
Вертикаль – список
Coma-first style – его цель уменьшить число
ошибок.
34
var name = function (value) {
..var a = 0
...., b = 42
....c = 42
...., d = 42
....;
};
Вертикаль – список
Отсутствие запятых легко заметить
35
var a =
..{ b: 2
.., c: 3
.., d: 4
..}
..;
Вертикаль – список
Coma-first style для литералов Object
https://gist.github.com/357981
36
ALL code is ugly.
Yours, mine, everyone's.
Code Is Ugly. Just face it.
37
.b-form {
-webkit-transition: color;
-moz-transition: color;
-ms-transition: color;
-o-transition: color;
transition: color;
}
Вертикаль – список
Выравнивание по свойству
38
.b-form {
-webkit-transition: color;
-moz-transition: color;
-ms-transition: color;
-o-transition: color;
transition: color;
}
Вертикаль – список
Выравнивание по значению
Так проще прочитать
39
<ol class="b-list">
....<li class="b-item">Abc</li>
....<li class="b-item">Abc</li>
....<li class="b-item">Abc</li>
</ol>
Вертикаль – список
40
jQuery('.clickable')
.....filter('a')
.....click(handler)
.....end()
.....show('slow')
....;
Вертикаль – список
Вызов функций по цепочке – список
41
if (typeof a !== "undefined" &&
typeof b !== "undefined" &&
typeof c === "string") {
// your stuff
}
Вертикаль – список
Несколько условий – список
Единообразие
43
var name = function (value) {
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};
Единообразие
Похожий код быстрее воспринять
44
// Этот пробел обязательный
function A(value) {
}
// Этот пробел для единообразия
var A = function (value) {
};
Единообразие
Похожий код быстрее воспринять
Разрядка
46
var name = function (value) {
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};
Разрядка
БуряМглоюНебоКроет vs
Буря мглою небо кроет
47
for ( var i = 0 ; i < 100 ; i++ ){
}
for (var i = 0; i < 100; i++){
}
Разрядка, но без фанатизма
Буря Мглою Небо Кроет vs
Буря мглою небо кроет
48
Сильно разряженный код
сложно воспринять
49
<div class="b-header"></div>
Однако не везде она работает
В HTML перед и после равно пробел как
правило не ставят
Начало - конец
51
var name = function (value) {
....var a = 0,
........b = 42;
if (value) {
....return a;
}
};
Начало блока "видит" конец блока
Код представляет из себя "параграфы
текста"
52
var name = function (value) {
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};
Начало блока "видит" конец блока
Код представляет из себя "параграфы
текста"
53
<div class="b-header">
....<div class="b-item">Abc</div>
....<div class="b-item">Abc</div>
....<div class="b-item">Abc</div>
</div>
Начало блока "видит" конец блока
54
<div class="b-header">
....<div class="b-item">
........Abc
....</div>
....<div class="b-item">
........Abc
....</div>
</div>
Начало блока "видит" конец блока
Не везде это применимо: много писать,
мельтешение, баги с пробелами
Предотвращение ошибок
56
<div class="b-header">
....<div class="b-item">
........Abc
....</div>
....<div class="b-item">
........Abc
....</div>
</div>
Лишние пробелы
Переносы и пробел = +2 лишних пробельных
символа
57
Лишние пробелы
Переносы и пробел = +2 лишних пробельных
символа
var item = $('.b-item')[0];
if (item.innerHTML = "Abc") {
// Недостижим
}
Точка с запятой в FE
59
var name = function (value) {
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
}
Точка с запятой в Function Expression
60
cat **/*.js > all.js!
61
var name = function (value) {
}var name2 = function (value) {
}
Точка с запятой в Function Expression
SyntaxError: missing ; before statement
62
var name = function (value) {
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};
Точка с запятой в Function Expression
Скобки у циклов
64
var name = function (value) {
....var a = 0,
........b = 42;
....if (value)
........return a;
};
Скобки у циклов и условий
Лень писать скобки
65
var name = function (value) {
....var a = 0,
........b = 42;
....if (value)
........a = 42;
........return a;
};
Скобки у циклов и условий
Редкая логическая ошибка
66
var name = function (value) {
....var a = 0,
........b = 42;
....if (value) {
........a = 42;
........return a;
....}
};
Скобки у циклов и условий
67
var name = function (value) {
....var a = 0,
........b = 42;
....if (value) return a;
};
Скобки у циклов и условий
Много скобок создает много шума
Auto semicolon insertion
69
var name = function (value) {
....var a = 0,
........b = 42;
....if (value) {
........return
............{pewpew: a};
....}
};
Auto semicolon insertion
70
var name = function (value) {
....var a = 0,
........b = 42;
....if (value) {
........return;
............{pewpew: a};
....}
};
Auto semicolon insertion
После return будет поставлена ;
http://es5.github.com/#x7.9
Последнее свойство перекрывает
предшествующее
Свойства с префиксами в CSS
72
.b-form {
box-shadow: 0 0 400px 200px #000;
-webkit-box-shadow: 0 0 400px 200px #000;
}
Свойства с префиксами в CSS
73
Свойства с префиксами в CSS
74
.b-form {
-webkit-box-shadow: 0 0 400px 200px #000;
box-shadow: 0 0 400px 200px #000;
}
Свойства с префиксами в CSS
Последним должен идти свойство без
префикса
http://pepelsbey.net/pres/pre-fixes/
75
Свойства с префиксами в CSS
76
Еще несколько слов…
•  Документирование неявного кода
–  Код должен быть максимально самодокументируемым
•  Написание примеров использования
–  Чтобы не рыться в коде
•  Сокращение длины строки
–  Чтобы не вертеть головой и не скролить
•  Уменьшение уровней вложенности
–  Быстрее читать код
•  Единообразие в модулях и именах
•  Автоматизированная проверка кода ♥
–  IDE
–  Pre Commit Hook
77
Код должен выглядеть так
как будто его пишет один
человек
78
А как в Яндексе?
79
Как мы делаем в Яндексе
•  Love & Peace
•  У каждого проекта свой Code Style
–  Страница в Вики
–  Или CONTRIBUTE.md файл в корне проекта
•  Есть стиль по умолчанию
–  Страница в Вики со стилей по языкам
–  Не обязательный – на случай если лень
•  Стараемся использовать общепринятый
–  Так проще новым разработчикам
–  Привычней читать сторонний код
•  Code Review
–  Зависит от размера проекта
–  Как правило новички проходят обязательно
80
Заключение
•  Соглашение Code Style - Must have!
•  Нужно знать меру
–  Разрядка пробелами
–  Фигурные скобки
•  Все правила имеют на то причину
81
82
Михаил Давыдов
Разработчик JavaScript
azproduction@yandex-team.ru
azproduction
Спасибо

More Related Content

Viewers also liked (8)

PDF
How to install git on ubuntu
baran19901990
 
PDF
Modules and assembling of JavaScript (in russian)
Mikhail Davydov
 
PDF
07 control+structures
baran19901990
 
PDF
JavaScript. Async (in Russian)
Mikhail Davydov
 
PDF
Ajax and Transports (in russian)
Mikhail Davydov
 
PDF
Dump-IT Загрузка и инициализация JavaScript
Mikhail Davydov
 
PDF
JavaScript. Loops and functions (in russian)
Mikhail Davydov
 
PDF
Introduction in Node.js (in russian)
Mikhail Davydov
 
How to install git on ubuntu
baran19901990
 
Modules and assembling of JavaScript (in russian)
Mikhail Davydov
 
07 control+structures
baran19901990
 
JavaScript. Async (in Russian)
Mikhail Davydov
 
Ajax and Transports (in russian)
Mikhail Davydov
 
Dump-IT Загрузка и инициализация JavaScript
Mikhail Davydov
 
JavaScript. Loops and functions (in russian)
Mikhail Davydov
 
Introduction in Node.js (in russian)
Mikhail Davydov
 

Similar to Code Style (in russian) (20)

PDF
CSSO — минимизируем CSS
Roman Dvornov
 
PDF
Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"
Yandex
 
PDF
Цена ошибки
Platonov Sergey
 
PDF
Мастер-класс: Разрабатываем сайт с нуля на полном стеке БЭМ-технологий — Жека...
Yandex
 
PDF
Парсим CSS
Roman Dvornov
 
PPTX
MoscowJS 26 webpack presentation
lgordey
 
PPTX
Moscow js 26 webpack
lgordey
 
PDF
Владимир Варанкин — «БЭМ»
Yandex
 
PDF
CSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScript
Alexey Ivanov
 
PDF
CSSO — сжимаем CSS Роман Дворнов, Avito
it-people
 
PDF
Интервью с Анатолием Кузнецовым, автором библиотеки BitMagic C++ Library
Tatyanazaxarova
 
PDF
Вадим Макишвили "Вёрстка в IntelliJIDEA"
Yandex
 
PPTX
Статический анализ кода: Что? Как? Зачем?
Andrey Karpov
 
PPTX
CodeFest 2011. Крестьянинов М. — Обзор аспектно-ориентированного программиров...
CodeFest
 
PPT
PHP Tricks
BlackFan
 
PDF
Парсим CSS
Badoo Development
 
PDF
Парсим CSS: performance tips & tricks
Roman Dvornov
 
PDF
Инструментируй это
Roman Dvornov
 
PDF
Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...
Ontico
 
PDF
Denis Bugarchev
yaevents
 
CSSO — минимизируем CSS
Roman Dvornov
 
Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"
Yandex
 
Цена ошибки
Platonov Sergey
 
Мастер-класс: Разрабатываем сайт с нуля на полном стеке БЭМ-технологий — Жека...
Yandex
 
Парсим CSS
Roman Dvornov
 
MoscowJS 26 webpack presentation
lgordey
 
Moscow js 26 webpack
lgordey
 
Владимир Варанкин — «БЭМ»
Yandex
 
CSS-в-JS, HTML-в-JS, ВСЁ-в-JS. Все гораздо проще, когда всё вокруг JavaScript
Alexey Ivanov
 
CSSO — сжимаем CSS Роман Дворнов, Avito
it-people
 
Интервью с Анатолием Кузнецовым, автором библиотеки BitMagic C++ Library
Tatyanazaxarova
 
Вадим Макишвили "Вёрстка в IntelliJIDEA"
Yandex
 
Статический анализ кода: Что? Как? Зачем?
Andrey Karpov
 
CodeFest 2011. Крестьянинов М. — Обзор аспектно-ориентированного программиров...
CodeFest
 
PHP Tricks
BlackFan
 
Парсим CSS
Badoo Development
 
Парсим CSS: performance tips & tricks
Roman Dvornov
 
Инструментируй это
Roman Dvornov
 
Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...
Ontico
 
Denis Bugarchev
yaevents
 
Ad

More from Mikhail Davydov (10)

PDF
Components now! (in russian)
Mikhail Davydov
 
PDF
JavaScript. Event Model (in russian)
Mikhail Davydov
 
PDF
JavaScript. OOP (in russian)
Mikhail Davydov
 
PDF
JavaScript. Event Loop and Timers (in russian)
Mikhail Davydov
 
PDF
JavaScript. Introduction (in russian)
Mikhail Davydov
 
PDF
JavaScript. Basics (in russian)
Mikhail Davydov
 
PDF
JavaScript on frontend and backend (in Russian
Mikhail Davydov
 
PDF
Components now!
Mikhail Davydov
 
PDF
Dart - светлая сторона силы?
Mikhail Davydov
 
PDF
Making Scalable JavaScript Application
Mikhail Davydov
 
Components now! (in russian)
Mikhail Davydov
 
JavaScript. Event Model (in russian)
Mikhail Davydov
 
JavaScript. OOP (in russian)
Mikhail Davydov
 
JavaScript. Event Loop and Timers (in russian)
Mikhail Davydov
 
JavaScript. Introduction (in russian)
Mikhail Davydov
 
JavaScript. Basics (in russian)
Mikhail Davydov
 
JavaScript on frontend and backend (in Russian
Mikhail Davydov
 
Components now!
Mikhail Davydov
 
Dart - светлая сторона силы?
Mikhail Davydov
 
Making Scalable JavaScript Application
Mikhail Davydov
 
Ad

Code Style (in russian)