Чистые функции. Функциональное программирование

2 года назад·3 мин. на чтение

В этой статье на простых и доступных примерах рассмотрим одну из концепций функционального программирования - Чистые функции.

Это серия статей о функциональном программировании:
  1. Парадигмы программирования
  2. Композиция
  3. Функторы
  4. Каррирование
  5. Чистые функции (рассматривается в этой статье)
  6. Функции первого класса

Что такое чистая функция?

Чистая функция — это функция, которая является детерминированной и не производит побочных эффектов.

Характеристики чистой функции

️1. Чистые функции должны быть детерминированными

Детерминированная функция — это функция, которая при одном и том же входе x всегда должна иметь один и тот же результат y.

Примеры недетерминированных функций

  1. Math.random
const getRandom = () => Math.random()
  1. ФункцииDate
const getDate = () => Date.now()
  1. getUsers
const getUsers = await fetch('/users')
Функция getUsers недетерминирована, потому что пользователи могли обновиться, нет подключения к интернету, сервер может быть недоступен или что-то еще.

Комментарии к примерам

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

️2. Чистые функции не должна иметь побочных эффектов

Побочным эффектом может быть:
  • Внешняя зависимость (доступ к внешним переменным, потокам ввода/вывода, чтение/запись файлов или выполнение HTTP-вызовов).
  • Мутация (мутации локальных/внешних переменных или переданных аргументов по ссылке).
Чистые функции должны быть детерминированными и не должны давать никаких побочных эффектов. При этом невозможно иметь приложения с состоянием без побочных эффектов (запрос к базе данных, выполнение http-вызова, чтение пользовательского ввода или даже отображение результатов в пользовательском интерфейсе). Но в функциональном программировании есть еще несколько концепций/исправлений для этого.

Примеры побочных эффектов

  1. Функция isLessThanMin
Функция с побочным эффектом
const min = 60
const isLessThanMin = value => value < min
Чистая функция
const isLessThanMin = (min, value) => value > min
Побочный эффект заключается во внешней зависимости. Для исправления используется внедрение зависимости (dependency injection).
  1. Функция для вычисления квадратов чисел
Функция с побочным эффектом
const squares = (nums) => {
  for(let i = 0; i < nums.length; i++) {
    nums[i] **= 2;
  }
}
Чистая функция
const squares = (nums) => nums.map(num => num * num)
Побочный эффект заключается в наличии императивного кода, который выполняет мутации в исходном массиве по ссылке. Для исправления используется функциональный .map, который создает новый массив.
  1. Функция updateUserAge
Функция с побочным эффектом
const updateUserAge = (user, age) => {
  user.age = age
}
Чистая функция
const updateUserAge = (user, age) => ({ ...user, age })
Побочный эффект заключается в мутации объекта user по ссылке. Нужно избегать изменения объектов по ссылке, вместо этого следует вернуть новый объект с новыми/обновленными свойствами.
  1. Функция getFirst2Elements
Функция с побочным эффектом
const getFirst2Elements = (arr) => arr.splice(0, 2)
Чистая функция
const getFirst2Elements = (arr) => arr.slice(0, 2)
Побочный эффект заключается в мутировании arr, переданного по ссылке методом .splice. Для исправления используется функциональный метод .slice, который не изменяет сам массив.

Почему функции с побочными эффектами - плохо?

У функций с побочными эффектами есть несколько очевидных недостатков:
  • Это делает функции тесно связанными с окружающей средой
  • Увеличивает когнитивную нагрузку на разработчика
  • Вызывает неочевидные изменения состояния
  • Увеличивает кривую обучения кодовой базы разработчика
  • Невозможность параллелизации
  • Высокая непредсказуемость
  • + потеря преимуществ чистых функций

Почему чистые функции - хорошо?

Можно вывести две основные категории улучшений. Улучшение опыта разработки (developer experience) и улучшение производительности приложений.

Улучшение опыта разработки

Принимая во внимание тот факт, что наши функции теперь детерминированы, независимы и самодостаточны. Улучшения будут очевидны.
  • Предсказуемость: устранение внешних факторов и изменений среды сделает функции более предсказуемыми.
  • Поддерживаемость: улучшается понимание кода.
  • Композиция: независимость функций и связь только через ввод и вывод, что позволит нам легко составлять композицию функций.
  • Тестируемость: самодостаточность и независимость функций выведут тестируемость на новый уровень.

Улучшение производительности

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

Как использовать переменные среды в React

2 года назад·5 мин. на чтение

О различных способах доступа к переменным среды в React приложении

Если у вас нет опыта server side программирования, переменные среды могут показаться чем-то магическим. Этот недостаток знаний может поставить вас в тупик, когда вы закончите создавать приложения todo на localhost и попытаетесь создать продакшн сборку в первый раз. Если вы хотите узнать, как использовать переменные среды в ваших собственных инструментах, или глубоко погрузиться в то, как переменные среды работают в React, вы можете продолжить чтение этой статьи. Но если вы ищете быстрое решение и используете Create React App, ознакомьтесь с документацией здесь. Пользователи NextJS, ознакомьтесь с документацией здесь.

Проблема, которую мы решаем

Как объявить различные URL-адресов API для локальной разработки и для продакшн сборки.

Как решить эту проблему

Использовать переменные среды. При работе с React переменные среды — это переменные, доступные через глобальный объект process.env. Этот глобальный объект предоставляется вашей средой через NodeJS. И поскольку у нас нет NodeJS в браузере, нам понадобится webpack. В этой статье рассмотрим два способа установки и использования переменных среды для ваших React проектов с помощью webpack: с помощью скриптов npm и с помощью файла .env.

Способ 1: Использование скриптов npm для установки переменных среды

Во-первых, установите webpack и webpack-cli из npm:
npm install --save-dev webpack webpack-cli
Перейдите в файл package.json, проверьте поле scripts и найдите команды, которые запускают webpack. Вероятно, это будет выглядеть примерно так:
{
  // ...
  scripts: {
    "dev": "webpack --config webpack.config.dev.js",
    "build": "webpack --config webpack.config.build.js"
  }
}
Давайте добавим некоторые переменные окружения с флагом --env в scripts:
{
  // ...
  scripts: {
    "dev": "webpack --env.API_URL=http://localhost:8000 --config webpack.config.dev.js",
    "build": "webpack --env.API_URL=https://www.myapi.com --config webpack.config.build.js"
  }
}
Мы добавили --env.API_URL= часть в обоих скриптах. Теперь запустите команду npm run dev, перейдите к React компоненту и используйте process.env.API_URL:
const App = () => <h1>{process.env.API_URL}</h1>;
И тут проект должен сломаться.
Сломается он потому, что когда мы используем переменные окружения в клиентском коде, они на самом деле просто служат заполнителями, которые будут заменены при компиляции нашего кода. Проблема в том, что мы не сказали webpack скомпилировать эти переменные в реальные значения. Давайте сделаем это в нашем конфигурационном файле webpack с плагином DefinePlugin:
const webpack = require('webpack'); // DefinePlugin это часть webpack, поэтому это require обязателен

// возвращаем функцию из config файла
// переменная `env` будет просто объектом { API_URL: 'http://localhost:8000' }
// в ней будут содержаться все переменные среды, которые мы указали в package.json

module.exports = (env) => {
  // этот объект это сама конфигурация webpack
  return {
    plugins: [
      // добавим плагин в список плагинов
      new webpack.DefinePlugin({ `process.env.API_URL`: JSON.stringify(${env.API_URL}) })
    ]
  };
};
DefinePlugin требует, чтобы вы буквально определили свои «переменные среды». Вы также можете применить .reduce к переменным среды, чтобы получить объект:
module.exports = (env) => {
  // создаем объект из переменных среды
  const envKeys = Object.keys(env).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(env[next]);
    return prev;
  }, {});

  return {
    plugins: [
      new webpack.DefinePlugin(envKeys)
    ]
  };
};
Если вы запустите команду сейчас, все скомпилируется, и ваш process.env.API_URL будет скомпилирован в правильный URL-адрес на основе переменной среды.

Способ 2: Использование файла .env для установки переменных среды

Вся идея здесь состоит в том, чтобы создать файл (называемый просто .env), заполненный переменными среды. Чтобы защитить пароли и другие значения переменных среды, добавьте файл .env в .gitignore. Фронтенд код будет ссылаться на одну и ту же переменную среды (process.env.API_URL) в обеих средах (при локальной разработке и на продакшене), но поскольку вы определили разные значения в своих .env, скомпилированные значения будут отличаться.

Создадим файл .env

Этот файл должен находиться в корневом каталоге проекта и называться .env. Добавим переменную:
API_URL=http://localhost:8000

Обработка файла .env

Теперь нам нужен какой-то способ обработки файлов и их содержимого. Для этого мы собираемся использовать популярный npm пакет под названием dotenv. Dotenv широко используется (create-react-app использует его). Он будет получать переменные из нашего файла .env и добавлять их в глобальный process.env.
$ npm install --save-dev dotenv

Добавление переменных в проект React

Есть одна проблема. Dotenv работает только на стороне сервера. А мы хотим использовать переменные среды на стороне клиента, на фронтенде. В данном случае мы разрабатываем клиентскую часть. И dotenv нужна какая-то среда для фактического хранения переменных. Здесь поможет Webpack. Воспользуемся плагином DefinePlugin в нашей webpack конфигурации:
const webpack = require('webpack');
const dotenv = require('dotenv');

module.exports = () => {
  // dotenv вернет объект с полем parsed 
  const env = dotenv.config().parsed;
  
  // сделаем reduce, чтобы сделать объект
  const envKeys = Object.keys(env).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(env[next]);
    return prev;
  }, {});

  return {
    plugins: [
      new webpack.DefinePlugin(envKeys)
    ]
  };
};
При необходимости проверьте параметры конфигурации dotenv в документации на github. Вызов .config() в dotenv вернет объект со всеми переменными среды, установленными в вашем файле .env через поле parsed. Теперь давайте проверим наш React код:
const App = () => <h1>{process.env.API_URL}</h1>;
И это работает! Он показывает значение переменной среды API_URL, определенной в .env. Осталась только одна проблема: нам все еще нужно определить различные API_URL для локальной разработки и продакшена.

Различные переменные среды для разных сред

Вся идея состоит в том, чтобы создать разные файлы .env для разных сред и позволить webpack выбрать правильный файл .env в зависимости от активной среды. Поэтому создайте два файла в корневом каталоге проекта:
  • .env (содержит все переменные среды для продакшн)
  • .env.development (содержит все переменные среды для локальной разработки)
Чтобы было ясно: мы добавляем к имени файла .env сопоставление имени среды. Общепринятой практикой является использование исходного файла .env для продакшн сборки, поэтому мы не будем добавлять постфикс для продакшн .env .

Настройка активной среды с помощью scripts в package.json

Мы собираемся использовать scripts (как мы это делали в методе 1), чтобы установить текущую среду в нашем package.json:
{
  "scripts": {
    "dev": "webpack --env.ENVIRONMENT=development --config webpack.config.dev.js",
    "build": "webpack --env.ENVIRONMENT=production --config webpack.config.build.js"
  }
}
Так как мы определили нашу среду в нашем package.json, теперь она доступна в нашей конфигурации webpack. Следующим шагом будет переход к webpack конфигурации и дать ему использовать файл .env, принадлежащий активной среде. Как и раньше, мы используем dotenv, но теперь мы указываем пользовательский path в параметрах.
const webpack = require('webpack');
const dotenv = require('dotenv');
const fs = require('fs'); // для проверки существования файла
const path = require('path'); // для получения текущего пути

module.exports = (env) => {
  // получаем корневой путь (предполагаем, что webpack config лежит в корне проекта)
  const currentPath = path.join(__dirname);
  
  // путь по умолчанию (будет использован для продакшена - `.env`)
  const basePath = currentPath + '/.env';

  // склеиваем имя среды с именем файла для получения имени env файла
  const envPath = basePath + '.' + env.ENVIRONMENT;

  // проверяем существует ли env файл, если нет используем имя по умолчанию
  const finalPath = fs.existsSync(envPath) ? envPath : basePath;

  // устанавливаем параметр path в dotenv
  const fileEnv = dotenv.config({ path: finalPath }).parsed;
  
  // сделаем reduce, чтобы получить объект
  const envKeys = Object.keys(fileEnv).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(fileEnv[next]);
    return prev;
  }, {});

  return {
    plugins: [
      new webpack.DefinePlugin(envKeys)
    ]
  };
Эта вся необходимая настройка, но вы можете создать больше .env файлов для большего количества сред (например, .env.staging) по аналогии.