Презентация Паши Клименкова посвящена приёмам функционального программирования (ФП) в JavaScript. В ней рассматриваются концепции иммутабельности, чистых функций, композиции функций и функторов, а также их преимущества и недостатки. Также обсуждаются комбинации объекта-ориентированного программирования и функционального подхода, включая применение монад и функторов для упрощения кода.

1. ПРИЁМЫ
ФУНКЦИОНАЛЬНОГО ПРОГРАММИРОВАНИЯ
В
ОБЫЧНОМ JAVASCRIPT

2. КТО ВООБЩЕ Я
Паша Клименков
Senior Software Developer @ Geotab Inc.
Oakville, ON, Canada

3. О ЧЁМ БУДЕТ ЭТА ПРЕЗЕНТАЦИЯ
• Возьмём некоторые идеи из ФП
• Упростим их до предела
• Применим в JavaScript
• Посмотрим, в чём выгода

4. О ЧЁМ БУДЕТ ЭТА ПРЕЗЕНТАЦИЯ
• Возьмём некоторые идеи из ФП
• Упростим их до предела
• Применим в JavaScript
• Посмотрим, в чём выгода

5. О ЧЁМ БУДЕТ ЭТА ПРЕЗЕНТАЦИЯ
• Возьмём некоторые идеи из ФП
• Упростим их до предела
• Применим в JavaScript
• Посмотрим, в чём выгода

6. О ЧЁМ БУДЕТ ЭТА ПРЕЗЕНТАЦИЯ
• Возьмём некоторые идеи из ФП
• Упростим их до предела
• Применим в JavaScript
• Посмотрим, в чём выгода

7. О ЧЁМ НЕ БУДЕТ ЭТА ПРЕЗЕНТАЦИЯ
• ООП - дно, ФП - мессия
• Подробная инструкция к ФП
• “Монада - это моноид в категории эндофункторов”

8. О ЧЁМ НЕ БУДЕТ ЭТА ПРЕЗЕНТАЦИЯ
• ООП - дно, ФП - мессия
• Подробная инструкция к ФП
• “Монада - это моноид в категории эндофункторов”

9. О ЧЁМ НЕ БУДЕТ ЭТА ПРЕЗЕНТАЦИЯ
• ООП - дно, ФП - мессия
• Подробная инструкция к ФП
• “Монада - это моноид в категории эндофункторов”*

10. ПЛАН НА ВЕЧЕР
•Immutability
•Просто функции
•Непросто функции
•Комбинация ООП/ФП
•Функторы
•Монады

11. ЧТО ТАКОЕ ФП?
Такой декларативный стиль программирования, где
все функции - без побочных эффектов, а данные -
readonly.
sql, кстати, тоже декларативный

12. 1. IMMUTABILITY
Объекты не меняют своего состояния
Переменные не меняют свои значения

13. IMMUTABILITY
• Оперируем только read-only данными
• Если нужно что-то изменить - создаём новый,
измененный экземпляр

14. ПРИМЕР
Перевод GPS координат в оконные

15. ПРИМЕР: ИСХОДНЫЕ ДАННЫЕ

16. ПРИМЕР: МЯСОРУБКА

17. ПРИМЕР: ЧТО МОЖЕТ МЕНЯТЬСЯ

18. ПРИМЕР: БЕЗ ПЕРЕМЕННЫХ

19. ПРИМЕР
Редактирование Entity

20. ПРИМЕР: КОНСТРУКТОР ENTITY

21. ПРИМЕР: ЧТО МОЖЕТ МЕНЯТЬСЯ

22. ПРИМЕР: READ-ONLY ОБЪЕКТ

23. КАК УМЕНЬШИТЬ СОБЛАЗН
• const либо let вместо var
• filter/map/reduce вместо for
• Object.freeze - контрольный выстрел

24. IMMUTABILITY: ПЛЮСЫ
• Проще понимать код
• Меньше багов
• Атомарность создания объектов (объект либо готов, либо его еще нет)
• Меньше временного связывания (когда порядок инициализации важен)
• Проще кэшировать
• Потокобезопасность*

25. IMMUTABILITY: МИНУСЫ
• Дополнительная нагрузка на CPU (больше действий)
• Дополнительная нагрузка на память (больше GC)
• Дополнительная нагрузка на мозг (ООП любит state)

26. 2. ПРОСТО ФУНКЦИИ
Функции первого класса
Чистые функции

27. ФУНКЦИИ ПЕРВОГО КЛАССА
могут быть переданы в качестве параметра
могут быть присвоены как значения

28. ЧИСТЫЕ ФУНКЦИИ
• Без побочных эффектов
• Зависят только от входных параметров
(детерминированные)

29. ПРИМЕР: ПОБОЧНЫЕ ЭФФЕКТЫ

30. ПРИМЕР: НЕДЕТЕРМИНИРОВАННАЯ
ФУНКЦИЯ

31. ПРИМЕР: ДЕТЕРМИНИРОВАННАЯ
ФУНКЦИЯ

32. ПРОСТО ФУНКЦИИ: ПЛЮСЫ
• Нет побочных эффектов
• Меньше багов
• Очень просто тестировать
• Очень просто понимать
• Абсолютная потокобезопасность
• Абсолютная распараллеливаемость

33. ПРОСТО ФУНКЦИИ: МИНУСЫ
• Нет побочных эффектов
• Наша работа - делать побочные эффекты
• Ввод/вывод, кэш - это всё побочные эффекты

34. 3. НЕПРОСТО ФУНКЦИИ
Композиция функций
Карринг функций

35. КОМПОЗИЦИЯ ФУНКЦИЙ
Композиция - умное слово, похожее на сложение.
Но для функций.

36. ПРИМЕР: КОМПОЗИЦИЯ

37. ПРИМЕР: КОМПОЗИЦИЯ

38. ПРИМЕР: КОМПОЗИЦИЯ
2 промежуточных массива

39. ПРИМЕР: КОМПОЗИЦИЯ
Один массив. Совсем один.

40. ПРИМЕР: ЕЩЕ КОМПОЗИЦИЯ

41. ПРИМЕР: ЕЩЕ КОМПОЗИЦИЯ

42. КАРРИНГ
Карринг (каррирование) - частичный вызов функции.
Это когда аргументов мало, а вызвать хочется

43. ПРИМЕР: КАРРИНГ

44. ПРИМЕР: КАРРИНГ

45. ПРИМЕР: КАРРИНГ

46. ПРИМЕР: КАРРИНГ

47. ПРИМЕР: КАРРИНГ

48. ПРИМЕР: КАРРИНГ

49. НЕПРОСТО ФУНКЦИИ: ПЛЮСЫ
• Большая гибкость в использовании функций
• Функции становятся меньше
• Мемоизация (не влезло в плюсы “просто” функций)

50. НЕПРОСТО ФУНКЦИИ: МИНУСЫ
• Иногда код становится загадочнее
• Можно ухудшить производительность кода

51. КОМБИНАЦИЯ ООП/ФП
Оболочка - ООП, ввод/вывод,
побочные эффекты
Ядро - ФП, логика, чистые
функции
Core
Shell

52. ОСНОВНЫЕ ПРИНЦИПЫ
• Императивная оболочка
• оболочка работает с вводом/выводом
• оболочка очень тонкая

53. ОСНОВНЫЕ ПРИНЦИПЫ
• Функциональное ядро
• ядро работает с immutable данными и чистыми
функциями
• ядро содержит всю логику приложения

54. ПРИМЕР: ДВИЖУЩИЕСЯ МАШИНКИ

55. ПРИМЕР: ДВИЖУЩИЕСЯ МАШИНКИ
ввод/вывод,
оболочка

56. ПРИМЕР: ДВИЖУЩИЕСЯ МАШИНКИ
логика,
чистые функции

57. ОБОЛОЧКА/ЯДРО: ПЛЮСЫ
• Основные баги будут в оболочке, которая ужата до
минимума
• Ядро очень просто тестировать. Юнит-тестов достаточно
• Оболочке достаточно нескольких интеграционных тестов
• Command query responsibility segregation из коробки

58. ОБОЛОЧКА/ЯДРО: МИНУСЫ
• Хоть один?

59. ФУНКТОРЫ
Умные контейнеры для
значений

60. ПРИМЕР: СКЛАДЫВАЕМ КАРТИНКИ

61. ПРИМЕР: СКЛАДЫВАЕМ КАРТИНКИ

62. ПРИМЕР: СКЛАДЫВАЕМ КАРТИНКИ

63. ПРИМЕР: СКЛАДЫВАЕМ КАРТИНКИ

64. ПРИМЕР: СКЛАДЫВАЕМ КАРТИНКИ
??? 3.png ???

65. ФУНКТОР
• Контейнер вокруг данных,
• который умеет применять к ним функции,
• сохраняя при этом контейнер (результат останется в
контейнере)

66. ФУНКТОР
• Контейнер - это массив, async, nullable - что угодно
• Внутренние данные - это числа, объекты, функторы -
всё, что угодно
• Функции применяются к данным через map()

67. ARRAY - ЭТО ФУНКТОР!

68. PROMISE - ЭТО ТОЖЕ ПОЧТИ ФУНКТОР!

69. НАЗАД К ПРИМЕРУ
.png

70. ПОЛЕЗНЫЕ ФУНКТОРЫ
• Maybe
• Either
• IO
• Writer
• State

71. MAYBE - ПОЧТИ КАК NULLABLE

72. MAYBE - ПОЧТИ КАК NULLABLE*

73. MAYBE - ПОЧТИ КАК NULLABLE

74. MAYBE ПРИМЕР

75. MAYBE ПРИМЕР

76. EITHER = LEFT ♥ RIGHT

77. EITHER = LEFT ♥ RIGHT

78. EITHER = LEFT ♥ RIGHT

79. EITHER = LEFT ♥ RIGHT

80. EITHER = LEFT ♥ RIGHT

81. EITHER = LEFT ♥ RIGHT

82. EITHER ♥ РЕЛЬСО-ОРИЕНТИРОВАННОЕ
ПРОГРАММИРОВАНИЕ
Right
Left
f(x) g(x) h(x)
Картинка и концепция взяты отсюда

83. И НА САМОМ ДЕЛЕ…
Классический Maybe = Just ♥ Nothing

84. ДРУГИЕ ФУНКТОРЫ
• IO - для ввода/вывода
• Writer - для логов
• State - для… состояний

85. ФУНКТОРЫ: ПЛЮСЫ
• Удобное управление вычислением
• Разделение контекста и логики

86. ФУНКТОРЫ: МИНУСЫ
• Крутоватая кривая обучения
• Есть соблазн вставлять функторы туда, где они не
нужны

87. ПРОПУЩЕННЫЕ ГЛАВЫ
• Аппликативные функторы
• Моноиды

88. МОНАДЫ

89. МОНАДЫ ПРОКЛЯТЫ. ЛИБО ВЫ ИХ НЕ
ПОНИМАЕТЕ, ЛИБО НЕ МОЖЕТЕ ОБЪЯСНИТЬ

90. ПРИМЕР: ВЛОЖЕННЫЕ МАССИВЫ

91. ПРИМЕР: ВЛОЖЕННЫЕ MAYBE

92. ПРИМЕР: ВЛОЖЕННЫЕ MAYBE

93. MAYBE СТАНЕТ МОНАДОЙ, ЕСЛИ

94. MAYBE СТАНЕТ МОНАДОЙ, ЕСЛИ

95. MAYBE СТАНЕТ МОНАДОЙ, ЕСЛИ

96. ВСЁ. ВЫ ЗНАЕТЕ МОНАДЫ.
Whoa!

97. ARRAY СТАНЕТ МОНАДОЙ, ЕСЛИ
В ECMAScript добавят flatten или flatMap (скоро)

98. И ДА, PROMISE - ПОЧТИ МОНАДА

100. ИТОГО
• Immutability - всё read-only, меньше багов
• Чистые функции - без побочных эффектов, еще меньше багов
• Композиция, карринг - переиспользуем функции
• Функторы - разделение контекста и вычислений
• Монады - “правильные” функторы

101. СПАСИБО!
DotsAndBrackets.com
/pasha.klimenkov
/in/pavelklimenkov
slideshare.com/pashaklimenkov
Вопросы?