Зачем использовать генератор кода?

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

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

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

В Infraspeak мы используем генератор кода под названием hygen.io. Эта библиотека позволяет нам добавлять несколько файлов шаблонов, внедрять код в существующие, получать подсказки о действиях пользователя и многое другое. Благодаря этим новым функциям наши разработчики смогли:

  • Экспоненциально уменьшите потребность в копировании и вставке;
  • Убедитесь, что все делают что-то «правильно»;
  • Облегчить проверку кода;
  • Упрощение адаптации новых разработчиков;
  • Ускорить процесс разработки.

Вышеперечисленные пункты очень важны при работе в большой команде, где у каждого свой стиль написания кода; к вашей команде продолжают присоединяться новые участники, а технические характеристики постоянно растут.

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

Путь генерации кода (с помощью Vue)

В этом разделе мы предоставим пошаговый анализ того, как вы можете использовать библиотеку hygen для создания заранее обдуманного файла Vue. В Infraspeak мы работаем с Vue и TypeScript. Поэтому любой сгенерированный файл должен быть построен в соответствии с этой структурой и типизированным языком программирования (узнайте больше о том, почему Infraspeak выбрала TypeScript). Мы используем эту библиотеку генератора кода для большого количества спецификаций и функций, но мы сосредоточимся только на некоторых из наиболее часто используемых в Infraspeak.

Этот пример будет состоять из двух частей: сначала построение шаблона hygen (реализация логики), а после этого шага следует генерация результата (создание файла Vue.js)

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

Конструкция

Расширяемость Hygen

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

Характеристики файла:

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

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

Шаблон Хигена

Шаблоны Hygen создаются с помощью механизма EJS (Embedded JavaScript), который позволяет встраивать JavaScript в HTML-код. Шаблон EJS обычно содержит в основном статические элементы, которые отвечают за придание файлу определенной структуры.

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

Этот тип шаблона определяется заголовком с использованием уценки Front-matter и телом с использованием механизма шаблонов EJS.

  • Заголовок. Раздел заголовка используется для указания генератору кода того, что должно произойти и как это будет сделано;
  • Тело шаблона. Тело шаблона определяет, что будет содержать сгенерированный файл.

Быстрое определение

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

На изображении ниже показано приглашение, которое будет выполнено в этом примере. Как показано на изображении, взаимодействие ввода реализовано в подсказке, где интервентер должен ввести сообщение по своему выбору.

Обратите внимание, что файл шаблона использует вставленное сообщение как локальную переменную для добавления комментария. Это возможно, потому что любой аргумент CLI или параметр подсказки автоматически становится локальной переменной в ваших шаблонах.

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

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

Внедрение кода

В некоторых случаях может потребоваться добавить фрагменты кода в существующий файл. Для этого в библиотеке hygen есть так называемые инъекции. Чтобы реализовать инъекцию, вам нужно добавить в шаблон свойство inject и указать файл, в котором вы хотите реализовать этот код. Имейте в виду, что спецификация позиции (после: //Inject console log) должна совпадать с той, которая указана в файле-получателе.

Генерация результатов

Как это работает

Целью этих конфигураций является создание файла, который будет построен в соответствии с логикой шаблона EJS. Благодаря этой автоматизации мы сможем создать файл Vue.js не с нуля, а с логикой, уже встроенной в сам определенный шаблон.

Давайте перейдем к последним шагам создания нашего файла Vue.js и запустим команду, которая заставит работать наш генератор кода.

Чтобы понять, как строится генерирующая команда, необходимо посмотреть на дерево каталогов шаблонов hygen.

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

Переходя к команде для создания файла Vue.js, он будет состоять из трех основных параметров:

  • демонстрация:имя корневого каталога Hygen;
  • hygen-test: каталог, содержащий шаблоны для запуска;
  • Пример: имя создаваемого файла.

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

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

Как вы можете видеть выше, новый файл был сгенерирован и следует реализованной логике EJS.

С помощью определенной подсказки можно было вставить имя создаваемого файла, который комментарий написать, и динамически вставить сообщение журнала консоли. Раздел заголовка шаблона EJS также отвечал за управление путем, по которому будет создан новый файл Vue.js.

Заключение и мысли

Эта библиотека генератора кода может предоставить вашей кодовой базе более контролируемую среду разработки, а также помогает нам следовать DRY (Dне Rповторять Y >себя) впринципе умно. Конечно, в нашем рабочем процессе есть некоторые неизбежные повторяющиеся шаги и процессы, которые требуют ручных решений. Однако разработчикам не нужно писать все снова и снова. Это основная цель генераторов кода.

Помимо ранее рассмотренных преимуществ, генератор кода также может:

  • Помогите сгладить кривую обучения большому проекту;
  • Дать больше независимости разработчикам;
  • Используйте эти шаблоны hygen очень просто;
  • Шаблоны, ориентированные на комментарии, могут привести к более документированному коду;
  • Автоматическое создание тестов с уже интегрированной встроенной логикой может стать подходящим триггером для поощрения внедрения тестов.

Стоит также рассмотреть и другую сторону медали.

При анализе любого типа библиотеки важно понимать проблемы, с которыми вы можете столкнуться при интеграции инструмента в свою кодовую базу. Вот некоторые недостатки, связанные с использованием этого генератора кода:

  • Язык, используемый для построения логики шаблонов, поначалу сложен для понимания;
  • По мере создания более расширенных шаблонов hygen будет становиться все более сложным;
  • При работе над проектом, где обновления и изменения происходят постоянно, устаревшие шаблоны — это нормально. Недостатком является то, что обновление шаблонов требует ручного вмешательства и не является автоматизированным процессом.

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