Рассказывает Акпети Траст, один из трех создателей лего-билдов.

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

Проблема (почему)

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

Хотите создать всего лишь небольшой компонент? Вам нужно создать примерно 3 или 4 файла — файл компонента, файл CSS, файл индекса и, в некоторых случаях, тестовый файл. Теперь представьте, что вы делаете это вручную примерно 10 раз для проекта с 10 компонентами (который даже можно считать небольшим проектом!). Хуже, когда вы начинаете добавлять дополнительные библиотеки, такие как Redux. Нужно новое государство? Создайте новый файл (редуктор) или даже два! (плюс действие). Для тех, кто только начинает заниматься фронтенд-разработкой, эта проблема может показаться тривиальной, но тот, кто создал несколько приложений, понимает, насколько повторяющимся, скучным и трудоемким может быть создание всех этих файлов с одним и тем же шаблонным кодом.

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

У нас есть что-то.

Решение (что)

Lego-build — это инструмент командной строки, который помогает выполнять все скучные задачи одной строкой. Вместо того, чтобы создавать 3 файла вручную при создании компонента Nav, автоматизируйте его, просто запустив:

lego-build component Nav

Но lego-build не просто помогает создавать интерфейсные компоненты, инструменты для этого уже существуют. Лего-сборка намного мощнее.

Философия

В то время как большинство инструментов для «генерации компонентов» рассматривают все части вашего приложения как компоненты, lego-build является гибким. Мы рассматриваем внешнее приложение как здание, состоящее из отдельных блоков. Этими блоками могут быть различные вещи (уже перечисленные в начале статьи), такие как компоненты, страницы, макеты, хуки React и так далее. Это могут быть папки (например, компоненты) или даже отдельные файлы (например, редюсер).

Однако главной характеристикой блока является наличие стандартного кода. Например, при создании пользовательских хуков в React вы всегда импортируете useState и возвращаете значение (массив или объект). Lego-build позволяет легко создавать собственные блоки вместе с шаблонным кодом или «шаблоном», которому нужно следовать. Его гибкость делает его полезным в любой интерфейсной среде. Ни один другой инструмент не сравнится с ним по гибкости.

Подробнее о том, как настроить лего-билд под свой рабочий процесс, можно узнать в нашей краткой и понятной документации. Вы также можете увидеть, как другие разработчики используют lego-build на нашей странице сообщества.

А пока читайте дальше, чтобы узнать больше о том, почему мы создали лего-билдинг.

Вдохновение (подробнее о том, почему)

React был первой современной библиотекой JavaScript, которую я изучил, и с тех пор я никогда не оглядывался назад. Я создал несколько веб-приложений (и несколько нативных приложений) с его помощью. Некоторые из этих приложений небольшие, с базовой функциональностью, небольшим количеством компонентов и небольшим управлением состоянием. Другие немного сложнее, с небольшим количеством компонентов, но большим количеством состояния и логики для управления. У других много компонентов (39 в данном случае, не считая страниц и компонентов приложения администратора) и изрядное количество логики для подключения к внутреннему API.

Мне очень нравилось использовать React, но количество стандартного кода, необходимого для создания больших приложений (особенно при использовании Redux), действительно обескураживало. При создании полнофункциональных приложений я использую Laravel для создания своего API. Laravel — это среда MVC, что означает, что в приложении есть три основных блока — модель, представление и контроллер. Laravel поставляется с инструментом CLI под названием Artisan, который вы можете использовать для создания любого из 3 основных блоков, а также имеет множество полезных команд, которые упрощают и ускоряют создание вашего бэкэнда. Мне отчаянно нужен был Ремесленник для React.

Именно эта потребность породила лего-билдинг.

Зачем изобретать велосипед? (Все еще о том, почему)

Простой поиск в Google покажет, что уже есть несколько инструментов CLI для простого создания компонентов React. Мы уже упоминали, что лего-сборка гораздо более гибкая, чем эти инструменты, но давайте поговорим подробнее о том, почему такая гибкость важна. Почему мы сделали лего-билд вместо того, чтобы использовать существующие инструменты?

В Laravel (по крайней мере, версия 9) каждая модель хранится в каталоге apps/Models. У контроллеров тоже есть своя папка, как и у представлений. Эта структура одинакова для каждогоразработчика Laravel. Но React совсем другой, он беспристрастный по своей природе, а это означает, что каждый разработчик структурирует свой проект по-своему. Некоторые разработчики помещают все свои компоненты в каталог src/components, другие используют атомарный дизайн для разделения своих компонентов на атомы и молекулы. Некоторые разработчики используют модульный CSS, некоторые используют обычный CSS, а в проектах React Native CSS-файл отсутствует.

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

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

Теперь вы поняли смысл и мыслительный процесс лего-билдинга, что мешает вам его использовать?

npm i @ogteam/lego-build -g

Начни собирать лего уже сегодня :)

Нам есть что рассказать о процессе сборки лего, если вам понравилась эта статья, пожалуйста, поставьте аплодисменты и/или прокомментируйте. Мы обязательно опубликуем статью о том, как собирать из лего, так что следите за обновлениями!

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