Использование генераторов для повышения производительности разработчиков

Несколько недель назад на конференции N26 мы провели неделю «Сделай что-нибудь», в течение которой команды разработчиков продуктов и инженеров имеют возможность попробовать или построить все, что им нравится.

Я решил потратить эту неделю на добавление инструмента генерации кода в веб-проект.
Это позволит автоматизировать часть работы по кодированию и одновременно улучшить работу разработчиков.

В этой статье я расскажу об опыте и результатах внедрения инструмента для генерации кода 👨💻.

Что такое генератор кода?

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

Вот несколько популярных из них 👇

  • create-react-app
  • create-next-app
  • create-react-native-app

Все они будут создавать код на основе определенных правил с учетом вводимых пользователем данных. Вот простой пример 👇.

В чем проблема?

Представьте, вы начинаете день, работая над новой задачей, и вам нужно создать функцию, перед написанием кода вам нужно будет учесть несколько вещей:

  • Структура папок и архитектура 📂
  • Соглашение об именовании файлов 📑
  • Куда поместить функцию 🗂
  • Как следует писать тесты 🧪

Я уверен, что в проекте, над которым вы работаете, есть список конвенций и паттернов, которые объясняют, как вы должны работать в кодовой базе.

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

Где находится источник истины? 🧐

  • Документация 📝
  • Записи архитектурных решений 🏗
  • Похожие файлы в кодовой базе 🕵️
  • Товарищ по команде 🧑💻

Как инженеры-программисты мы очень стараемся не повторять код, создавая абстракции, автоматизируя ручные рабочие процессы…

А как насчет написания кода? Точно так же, как мы выступаем за автоматизацию таких процессов, как развертывание, мы должны приложить усилия и к такой нетворческой части кодирования, как scaffolding.

Почему вы должны их использовать?

Генерация кода сэкономит ваше время ⏰ и повысит производительность команды 📈.

Опыт разработчиков

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

Наличие отличного опыта разработчика повышает доверие разработчика к кодовой базе.

Доверие, позволяет людям быть более продуктивными и гибкими ⚡️, и это лишь некоторые из многих преимуществ, которые вы получите, используя генераторы:

  • Убедитесь, что все делают все «как положено» в соответствии с проектными соглашениями 💖
  • Уменьшить трение при работе с кодовой базой 🤔
  • Облегчить прием новых участников 🆕
  • Сокращение времени разработки 🚀

Усталость от принятия решений

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

Оказывается, наш процесс принятия решений становится тем хуже, чем больше решений мы принимаем.

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

Использование генераторов кода

Звучит неплохо 😍? Давайте рассмотрим, как мы можем использовать генераторы кода в нашем проекте 👀.

Выбор правильного инструмента

Я не хотел изобретать велосипед, мой фокус был направлен на результат генерации кода, а не на создание инструмента, решающего эту проблему.

Существует множество проектов с открытым исходным кодом, которые отлично справятся с генерацией кода. Вот список тех, которые я рассматривал:

  • Hygen
  • Plop
  • Yeoman

Я решил выбрать Hygen в N26, потому что:

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

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

Yeoman — еще один хороший вариант, но поддержка генераторов требует управления и публикации пакетов в реестре, и я бы сказал, что этот инструмент больше подходит для создания проектов, а не небольших частей кодовой базы.

Начало работы

Пришло время создать наш генератор кода 🥳. Во-первых, установите Hygen как devDependency в свой проект:

$ npm install -D hygen
Войдите в полноэкранный режим Выйти из полноэкранного режима

Определите скрипт внутри package.json для использования бинарного скрипта:

{
  "scripts": {
    "generators": "hygen"
  }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь мы можем запустить Hygen через скрипт generators:

$ npm run generators
Войти в полноэкранный режим Выйти из полноэкранного режима

После выполнения команды вы увидите, что Hygen сообщает нам, что у нас нет генераторов.

Error: please specify a generator.
Hygen v6.2.0
Войти в полноэкранный режим Выйти из полноэкранного режима

По умолчанию hygen будет читать файлы генераторов из папки с именем _templates.

Если вы хотите изменить это поведение, создайте файл с именем .hygen.js на корневом уровне вашего проекта, как показано ниже:

const path = require('path')

module.exports = {
  templates: path.join(__dirname, 'generators'),
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Создание генератора

Генератор состоит из одного или нескольких действий, каждое действие содержит два элемента:

  • Шаблоны: *.ejs 🧩
  • Подсказки: prompt.js ⁉️.

Давайте построим простой генератор, который создает React компонент 🤓. В конце поста вы найдете репозиторий GitHub с большим количеством различных примеров 👏.

Первое, что нам нужно создать, это папку генератора, которая будет содержать экшен:

  • Generator: component
  • Действие: react
$ mkdir -p generators/component/react
Вход в полноэкранный режим Выход из полноэкранного режима
Шаблоны

Файлы шаблонов определяют код, который будет создан после запуска генератора, эти файлы написаны с использованием языка шаблонов, называемого Embedded JavaScript templates.

Каждый шаблон начинается с заголовка frontmatter. В этом заголовке вы определите метаданные шаблона, используя следующие свойства 🔍.

Свойство Тип Использование
на Строка Место назначения файла после компиляции.
from Строка Использовать внешний файл в качестве шаблона.
принудительно Boolean Перезаписывать существующие файлы
unless_exists Булево Выполнить генератор, если файл уже не существует.
вводить Булево Инжектировать содержимое в существующий файл вместо создания нового.
после Regex Инжектировать шаблон после символа regex
перед Regex Вставьте шаблон перед regex
prepend Булево Вставить шаблон в начало файла
append Булево Вставить шаблон в конец файла
at_line Regex Вставить шаблон в указанный номер строки
пропустить_если Regex Пропустить инъекцию при совпадении regex.
eof_last Булево Обрезать новую строку в конце инъекции.
sh Строка Запуск команды оболочки после компиляции шаблона

Теперь добавим файл шаблона с именем index.ejs в папку экшена react, которую мы создали ранее:

$ touch generators/component/react/index.ejs
Вход в полноэкранный режим Выход из полноэкранного режима

Как я уже говорил, мы хотим создать компонент React, поэтому нам нужно указать расположение файла, в котором будет создан компонент.

Мы можем сделать это с помощью свойства to.

---
to: src/components/<%= h.changeCase.pascalCase(name) %>/index.js
---
Вход в полноэкранный режим Выход из полноэкранного режима

Как вы видите, мы используем переменную name в заголовке. Это значение будет предоставлено подсказками генератора ⁉️.

Затем нам нужно написать тело шаблона, где мы определяем код, который будет сгенерирован после компиляции шаблона. Я повторно использую переменную name в теле, чтобы создать имя и экспорт компонента ✨.

---
to: src/components/<%= h.changeCase.pascalCase(name) %>/index.js
---

const <%= h.changeCase.pascalCase(name) %> = () => (
  <section>
    <h1>Hey! 👋</h1>
    <h2><code><%= h.changeCase.pascalCase(name) %></code></h2>
  </section>
)

export default <%= h.changeCase.pascalCase(name) %>
Вход в полноэкранный режим Выйти из полноэкранного режима
Подсказки

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

Внутри того же react 📁 мы создадим файл prompt.js для запроса переменной, определенной как name в шаблоне:

module.exports = [
  {
    type: 'input',
    name: 'name',
    message: 'Write the name of your component'
  }
]
Войти в полноэкранный режим Выйти из полноэкранного режима

Существует множество различных типов ввода 🔡, посмотрите на эту ссылку, чтобы получить полный список.

Теперь пришло время запустить наш генератор 🥳, используя скрипт вместе с именем и действием:

$ npm run generators component react
Войти в полноэкранный режим Выйти из полноэкранного режима

У вас появятся подсказки и, наконец, волшебство произойдет! 🦄

Демо

Посмотрите на carloscuesta/codegenerators-demo 🕹, если хотите поиграть и посмотреть более сложные примеры!

Автоматизируйте все вещи!

Пришло время найти повторяющиеся задачи и шаблоны, чтобы извлечь их в генератор! 🚀

Я очень доволен повышением производительности и последовательностью, которую такой инструмент может принести команде ❤️.

Оцените статью
Procodings.ru
Добавить комментарий