Uncategorized

Написание современного JavaScript кода

JavaScript-разработчик из Франции, Себастьян Кастель, поделился мыслями о том, как на его взгляд должен выглядеть современный JavaScript код в 2017 году.

А вы помните те времена, когда JavaScript был языком, который использовали только для оживления страниц сайта? Это время уже прошло, так как, языки программирования развиваются вместе с методами их использования. Посмотрите на код, который вы написали один, два года назад: он вас смущает? Если да, этот пост для вас.


Ниже вы найдете мой список из хороших практик, которые помогут сделать ваш JavaScript код проще в написании, чтении и поддержке.

Используйте линтер для форматирования вашего кода

Первый совет, который я вам дам это использование линтера. Он создан для проверки, соблюдения единого стиля в вашем коде. Это позволит сделать код консистентным во всех .js файлах. Очень полезно использовать линтер в командной работе — это позволит сделать стиль кода единым среди всех разработчиков одного проекта.

Что более важно, линтер делает исправления в вашем коде, когда это возможно. ESLint, например, делает довольно таки хорошо (используйте опцию –fix) и он отлично интегрируется с популярными IDE.

Вы также можете использовать Prettier, если сравнивать с ESLint, он больше сфокусирован на форматировании кода. Разница между ними небольшая.

Следующие пункты помогут вам выбрать какие правила использовать с линтером:

Используйте современные правила для линтера

Если вы в замешательстве и не можете решить, какой набор правил использовать для кода, выбирайте StandardJS. Это очень строгий линтер, который не даст вам отступить от правил. Несколько примеров:

  • Используйте 2 пробела для табуляции
  • Не используйте точки с запятой (мне это показалось очень странным, но через несколько дней я привык)
  • Пробелы после ключевых слов (например if) и фигурных скобок
  • И другие

StandardJS может устанавливаться в виде отдельного Node модуля. Но если вы хотите использовать его в большом проекте с существующей кодовой базой и отключить некоторые правила, используйте ESLint predefined config. Я например отключил no-mixed-operators и import/no-webpack-loader-syntax.

Используйте новые фишки ES2015+

Вы скорее всего, слышали об изменениях в ES2015+ (или ES6, ES7…). Вот несколько, без которых я больше не могу жить:

  • Arrow functions: написание функций типа x => x*2 очень полезно в функциональном программировании
  • Классы: перестаньте использовать прототипы, классы гораздо круче
  • Операции с массивами и объектами:
function doSomething() {
const a = doSomethingElse()
const b = doSomethingWithA(a)
const otherResults = { c: '', d: '' }
return { a, b, ...otherResults } // equivalent to { a: a, b: b }
}
const { a, c, ...rest } = doSomething() // Also works with arrays!
// `rest` looks like { b: ..., d: '' }

    Создание промисов становится легче с async/await:

// Please try to write the same code with classic promises ;)
async function doSomething() {
const a = await getValueForA()
const b = await getValueForBFromA(a)
const [c, d] = await Promise.all([
// parallel execution
getValueForC(), getValueForDFromB(b)
])
const total = await calculateTotal(a, b, c, d)
return total / 1000
}

Используйте функциональное программирование

Вокруг данной темы точится много споров. Но не смотря на это, функциональное программирование набирает популярность и не только в JavaScript. В чем причина? Оно делает код более предсказуемым, безопасным и гораздо более поддерживаемым. Вот вам несколько простых советов:

Для начала перестаньте использовать for для циклов. В большинстве случаев они вам не нужны. Доказательство:

const arr = [{ name: 'first', value: 13 }, { name: 'second', value: 7 }]

// Instead of:
const res = {}
for (let i = 0; i < arr.length; i++) { const calculatedValue = arr[i].value * 10 if (calculatedValue > 100) {
res[arr[i].name] = calculatedValue
}
}

// Prefer:
const res = arr
.map(elem => ({ name: elem.name, calculatedValue: elem.value * 10 }))
.filter(elem => elem.calculatedValue > 100)
.reduce((acc, elem) => ({
[elem.name]: calculatedValue,
...acc
}), {})

Хорошо, я признаю, что это довольно таки экстремальный пример и если вы не привыкли к функциональному программированию, это может показаться сложным. Давайте упростим код:

const enrichElementWithCalculatedValue =
elem => ({ name: elem.name, calculatedValue: elem.value * 10 })
const filterElementsByValue = value =>
elem => elem.calculatedValue > value
const aggregateElementInObject = (acc, elem) => ({
[elem.name]: calculatedValue,
...acc
})
const res = arr
.map(enrichElementWithCalculatedValue)
.filter(filterElementsByValue(100))
.reduce(aggregateElementInObject, {})

Здесь мы определили три функции, названия которых указывают на то, что эти функции делают.
Второй совет: создавайте локальные функции (даже в существующих функциях) подобрав для них грамотные названия, вы можете документировать код без комментариев!

Обратите внимание, что три локальные функции не изменяют контекст, в котором они выполняются. Не меняют внешние переменные, не обращаются к внешним сервисам… В функциональном программировании они называются pure (чистыми) функциями. У них есть большие преимущества:

  • Их легко тестировать, поскольку из заданных параметров возможен только один возможный результат, даже если мы вызываем функцию несколько раз;
  • Они гарантированно дают одинаковый результат независимо от фактического состояния приложения;
  • Состояние приложения остается прежним до и после вызова функции.

Исходя из вышесказанного, мой третий совет: используйте такие функции как можно чаще!

Несколько советов в завершение

  • Привыкайте работать с асинхронным кодом, как можно чаще используйте промисы, посмотрите на observales в RxJS (вот отличный туториал по функциональному реактивному программированию)
  • Пишите тесты! Возможно вам это покажется очевидным, но я знаю кучу проектов с непроверенным кодом. Хотя современный JavaScript позволяет тестировать (front или backend) достаточно легко.
  • Используйте последние возможности языка: например, прекратите писать arr.indexOf(elem) !== -1. Замените это на arr.includes(elem).
  • Читайте много технических статей: subreddit JavaScript – очень хороший источник черпания информации о самых крутых практиках в экосистеме.

И в заключение самый важный совет, который я могу вам дать: всегда занимайтесь рефакторингом! Попробуйте улучшить модуль, который вы написали год назад. Попробуйте заменить var на const, используйте стрелочные функции или async / await чтобы упростить код… Всегда приятно работать с простым и понятным кодом.


Рекомендуем к прочтению: Upwork: вывод средств. Как вывести средства с международной биржи труда в России и Украине?


Изучайте веб разработку, с помощью онлайн уроков, каждый понедельник и среду в 20:00, на канале: Быстрый старт в веб-разработке (на странице проекта доступный записи всех уроков).


 

Dr. Michael J. Garbade

I, Dr. Michael J. Garbade is the co-founder of the Education Ecosystem (aka LiveEdu), ex-Amazon, GE, Rebate Networks, Y-combinator. Python, Django, and DevOps Engineer. Serial Entrepreneur. Experienced in raising venture funding. I speak English and German as mother tongues. I have a Masters in Business Administration and Physics, and a Ph.D. in Venture Capital Financing. Currently, I am the Project Lead on the community project -Nationalcoronalvirus Hotline I write subject matter expert technical and business articles in leading blogs like Opensource.com, Dzone.com, Cybrary, Businessinsider, Entrepreneur.com, TechinAsia, Coindesk, and Cointelegraph. I am a frequent speaker and panelist at tech and blockchain conferences around the globe. I serve as a start-up mentor at Axel Springer Accelerator, NY Edtech Accelerator, Seedstars, and Learnlaunch Accelerator. I love hackathons and often serve as a technical judge on hackathon panels.

Recent Posts

Blockchain in Elections: A Leap Toward Transparent Democracy

In 2024 we're witnessing a critical point in democratic technology: the integration of blockchain and…

4 months ago

Win Big with Our Amazon Fire Max 11 & AirPods Pro Giveaway!

We’re thrilled to announce an exciting opportunity for you to win not one but two…

6 months ago

Unleashing Potential: How Education Ecosystem Transforms Learning into Real-World Success

Acquiring practical skills is crucial for career advancement and personal growth. Education Ecosystem stands out…

8 months ago

The Role of Artificial Intelligence in Modern Software Development

Artificial Intelligence (AI) has been making significant strides in various industries, and the software development…

11 months ago

Highest Stable Coin Yields – (W16 – 2024)

Another week to bring you the top yield platforms for three of the most prominent…

12 months ago

LEDU Token OTC Trading

If you hold a large volume of LEDU tokens above 1 million units and wish…

1 year ago