Как я пишу код

from-my-experience.md

Как я пишу код

1. Краткость - сестра таланта. Поэтому думаем больше, чтобы написать меньше.

2. Пишем на ES6+ но не забываем, что это всё потом транспилируется в ES5. Некоторые конструкции после транспиляции становятся очень громоздкими. Возможно что-то лучше написать на ES5 более компактно.

3. Если вы в скопе делаете больше одного прямого обращения к свойству/методу объекта или массива, то есть смысл его перед использованием определить в локальную переменную т.к. свойства не минифицируются. Так же это относится и другим повторяющимся значениям (зачем одно и то же значение писать дважды, если его можно вынести в константу).

function wrong (object) {
    this.innerHTML = object.article.author;
    setAuthor(object.article.author);
}

function correct (object) {
    const author = object?.article?.author;
    // or
    const { author='Unknown' } = object?.article || {};
    // or
    const { author } = object.article;

    this.innerHTML = author;
    setAuthor(author);
}

4. Не стоит злоупотреблять не предопределёнными анонимными или стрелочными функциями (например map(e=>{}). Это приводит к утечкам памяти. В большинстве случаев функцию можно определить вне скопа и только передавать ссылку на одну и ту же функцию. Правда иногда всё таки приходится использовать функции высшего порядка, но старайтесь этого избегать.

// wrong
const fn = (array=[]) => array.map(({ a, b }) => a + b);

// correct
const sumProps = ({ a, b }) => a + b;
const fn = (array=[]) => array.map(sumProps);

5. JavaScript сам по себе очень мощная штука. Просто не все умеют его готовить :)

6. По возможности старайтесь не ссылаться в замыканиях на вложенные свойства объектов. Это тоже приводит к утечкам памяти.

7. Старайтесь в момент анимации не обращаться даже к гетерам DOM нод (например offsetHeight), т.к. это инициирует непосредственно в браузере reflow элементов, что приводит к залипаниям.

8. Избегайте анимацию элементов у которых есть прозрачность/альфа канал, размытие, тень или другие сложные стили. Это создаёт ощутимую нагрузку на процессор.

9. В CSS нет такого свойства как float. Есть display:grid, display:flex, display:inline-block и много других.

10. EM и FR это наше всё! PX используем только если меньше 2-х или если в конкретном случае ну никак без них не обойтись.

11. В HTML стремимся к минимуму. Минимум вложенностей. Что вижу на на дизайне, то и рисую. Не нужно делать дополнительные враперы и холдеры если можно обойтись без них. В большинстве случаев вместо HTML элементов можно обойтись использованием CSS псевдо элементов :before и :after

12. Если элемент дизайна может выглядеть чуть-чуть не так как нарисовано, но стилей скажем в 2 раза меньше, то лучше его сделать не точь в точь как на картинке, но зато он будет проще.

13. Избегайте использование кастомных элементов форм на сколько это возможно. Лучше использовать нативный если это возможно.

14. CSS селекторы должны быть точными. Нельзя вот так просто взять и написать в каком-то компоненте .title, т.к. в другом компоненте тоже может быть .title. А могут быть и вложенные компоненты. Поэтому должно быть .AwesomeComponent > .header > .title. BEM методология это конечно хорошо, но не для крупных проектов.

15. Альфа канал для цвета можно задавать не только в rgba формате но и в hex. #0007 или #12345678

16. Не используйте padding там, где нужен margin и наоборот.

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

18. Не нужно делать один большой монолитный кусок кода. Разбивайте логику на примитивы. Стремитесь к использованию канонов функционального программирования.

19. WEB и не только разработка, это как ремонт в квартире - после 4-х или 5-ти переездов нужно делать ремонт. Видишь что там уже полная жопа, после пяти внесённых изменений по просьбе PO, значит надо сесть и переписать этот кусок.

20. Смотри пункт 1