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

Допустим, вы создали свое приложение без набора инструментов многократного использования. По мере роста приложения код становится все более громоздким и трудным в обслуживании, поскольку база кода становится больше. Управление зависимостями превратится в ад зависимостей, если его не держать под контролем, а технологический долг отнимет большую часть времени разработки. Если вы хотите создать новое приложение с таким же внешним видом, как и другое ваше приложение, у вас не будет этих многоразовых инструментов, которые можно было бы использовать, что приведет к дублированию работы.

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

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

Последовательная тематика

Создание библиотеки компонентов темы позволит вам поддерживать единообразный фирменный стиль во всех ваших приложениях. Это также ускорит разработку за счет создания многократно используемого набора стилизованных компонентов. Для этой цели отличным выбором станет библиотека styled-comments. Он имеет встроенные возможности создания тем, которые можно использовать, а возможность создавать собственные компоненты для экспорта означает, что вы можете хранить все свои темы в одной библиотеке.

Безголовые формы

Если вы создаете веб-приложение, вполне вероятно, что в какой-то момент вам придется создавать формы. Поскольку мы уже делегировали задачу оформления нашей библиотеке тем, нам нужно создать библиотеку безголовых форм. Двумя фаворитами в этой категории являются formik и react-hook-form. Ваша библиотека форм должна иметь возможность принимать стилизованные компоненты из библиотеки тем и использовать их для стилизации ваших форм. Это дает вам возможность менять тему, не требуя внесения каких-либо изменений в библиотеку форм. Поскольку библиотека форм отвечает за логику обработки операций с формами, нам необходимо построить повторно используемую систему для создания форм. Хороший способ справиться с этой проблемой — создать объектную модель для определения ваших форм. Эти объекты затем будут прочитаны вашим инструментом с функциями для программного создания проверок с использованием да и отображения различных типов полей формы. Это позволяет вам определить каждый тип поля в одном месте.

Безголовые столы

Как и в случае с формами, вам понадобятся таблицы для отображения информации. Конструкция этой библиотеки будет аналогична библиотеке форм с возможностью приема стилизованных компонентов таблицы. Для достижения этой цели вы можете использовать библиотеку react-table. Структура таблицы может быть определена в объектной модели, которая считывается библиотекой. Таким образом, вы получите ту же возможность повторного использования, которую вы получили с библиотекой безголовых форм.

SDK

На стороне приложения взаимодействие с вашими API не должно включать необходимость поиска URL-адресов, поиска данных, которые ожидает конечная точка, или угадывания того, какие данные будут возвращены. Все это может быть обработано вашим SDK. Поддержание модульного SDK позволит разработчикам приложений работать быстрее, поскольку для получения избранного пользователем нужно просто написать await UserModule.getFavorites(), а не перейти к какому-то URL-адресу, который, вероятно, не делает ваш разработчик. знаю навскидку. Добавление строгой типизации в ваш SDK еще больше упростит работу разработчиков ваших приложений.

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