О функциональном программировании в фронтенде

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

Функциональное программирование становится всё более и более популярным во фронтенд разработке. Но что это, на самом деле?

Если вы фронтенд разработчик, вы вероятно знакомы с объектно-ориентированным программированием, даже если вы его не знаете. Многие JS библиотеки используют классы, которые могут быть созданы, для описания желаемого эффекта, например:

const waypoint = new Waypoint({
  element: document.getElementById('thing'),
  handler: () => console.log('You have scrolled to a thing')
})

JavaScript обычно используется в ООП, но ничто не мешает нам использовать его в функциональном программировании. Давайте взглянем, как они будут отличаться друг от друга.

Но сначала, дисклеймер, я знаю, что ФП против ООП это широкий, нюансированный, а иногда и нечеткий предмет. Ниже следует небольшое упрощение, возможно, ложной дихотомии. Тем не менее, я думаю, что фронтенд разработка может значительно выиграть от влияния ФП.

Функциональное против Объектно-ориентированного

Начнём с небольшого аргумента, в сторону функционального программирования

(игра слов: fun — весело, poop — дерьмо)

Я хотел бы внести некоторый баланс здесь, но аргумент против функционального программирования состоит в том, что это… трудно. Это и понятно, даже термины звучат загадочно: монады, функторы, моноиды и все другие математические словечки могут оттолкнуть много людей. Haskell, чисто функциональный язык, известен тем, что его трудно понять.

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

Во-первых, давайте попробуем получить более полную картину. Для меня, по крайней мере, разница примерно сводится к следующему:

• Объектно-ориентированное программирование легко понять, потому что оно имитирует то, как люди думают об окружающем мире.
• Функциональное программирование более трудное для изучения и требует небольшого переустройства мозга, потому что заставляет тебя думать иначе, чем в повседневной жизни.

Так почему же кто-то должен перестраивать своё мышление, когда ООП интуитивно понятное и знакомое? Только ради хвастовства? Или может некоторые люди хотят сделать их работу (и их команды) тяжелея, введя много математики? Нет. ФП может быть сложным в изучении, но преимущества того стоят.

Давайте взглянем, как функциональный код будет отличаться от объектно-ориентированного на практике.

Как закрыть дверь

Представьте, что вы создаёте мир, и создаёте новую функцию — двери. Они могут быть закрыты или открыты, ограничивают или открывают доступ в комнату. Круто! Но нам нужен код, чтобы они работали, во-первых, функциональным образом:

// Чтобы не менять данные, первым аргументом для Object.assign будет пустой объект
// смотри: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
const open = obj => Object.assign({}, obj, {locked: false}) 

// теперь, давай сделаем дверь:
const myDoor = {
  color: 'red',
  locked: true,
}

// myDoor не будет видоизменяться (если мы будем придерживаться функционального подхода),
// поэтому мы получим новый объект "дверь", если мы откроем её
const myDoorOpened = open(myDoor)

И теперь, объектно-ориентированный:

// начнём с объекта дверь:
class Door {
  constructor(color, locked) {
    this.color = color
    this.locked = locked
  }
  open() {
    this.locked = false
  }
}

// создадим новый объект "дверь"
const myDoor = new Door('red', true)

myDoor.locked // -> true
myDoor.open()
myDoor.locked // -> false

Итак, какие преимущества ФП мы можем здесь увидеть?

• Переиспользование. В функциональной версии, функция open может может открыть всё, что имеет boolean locked свойство. В будущем, мы можем сделать сундук и использовать ту же функцию, чтобы открыть его. ФП позволяет писать небольшие, чистые функции, которые следуют Unix концепции: Do One Thing and Do It Well.
• Неизменность. По мере роста кода, будет всё сложнее отслеживать объект myDoor в ОО версии (он уже был открыт на строке х?). В долгосрочной перспективе просто безопаснее использовать неизменные структуры данных, которые ФП поощряет.
• Данные. В версии с ФП, myDoor это чистые данные, которые могут быть импортированы из файла JSON или получены из REST API. В версии с ООП, myDoor это объкт, который хранит данные, а так же методы, для управления этими данными.
• Краткость. По мере роста кода, его сложнее поддерживать, а функциональный код более краток.

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

Например в языке Elm, компилятор предупредит тебя, если ты забудешь о case в операторе switch. Функциональный стиль передаёт больше информации о цели программиста, поэтому среда разработки может работать с вами, почти как напарник программист.

Функциональное программирование в фронтенд разработке

Сообщество фронтенд разработчиков заинтересовалось функциональным программированием в 2016 году. Вот несколько интересных проектов, в которых можно найти примеры ФП:

• TypeScript и Flow обеспечивают строгую типизацию в JavaScript. TypeScript является надстройкой над JS, в то время как Flow это предупреждающая система, которая предупредит вас, если, например, число передается там, где должна быть строка.
• Ramda это “практическая функциональная библиотека для программистов JavaScript.“ — в общем мощный функциональный инструмент. Как lodash или underscore, но с ФП.
• Redux это библиотека для контроля состояний, которая включает в себя ФП с идеей чистых функций в своём ядре.
• Elm, ClojureScript, PureScript — функциональные языки, которые компилируются в JavaScript. Кривая обучения гораздо круче, чем в вышеупомянутых проектах.

Что дальше?

Если ты хочешь окунуться в функциональное программирование, я бы посоветовал следующее:

1. Исчерпывающее, но очень доступное введение в ФП
2. Руководство по функциональному программированию профессора Фрисби (бесплатная электронная книга)
3. Функциональный язык программирования — эти загадочные термины

И если ты из мира JavaScript:

1. Мысли в Ramda — введение в Ramda
2. Потрясающее ФП JS — функционально-ориентированные ресурсы для JS
3. Что такое функциональное программирование Эрика Эллиота

Спасибо за чтение!

Если вы нашли какие то опечатки или есть предложения по переводу — прошу писать в личные сообщения.

Автор: vasya-ves

Источник