Байки из библиотеки: пролог
Обеспечение эффективности и возможности повторного использования вашей библиотеки компонентов
Это первая из серии публикаций о библиотеке компонентов React, которую мы недавно завершили на thirteen23. Если вы понятия не имеете, что это такое, есть масса ресурсов по этому шаблону и его преимуществам. Мы рекомендуем следующие статьи здесь, здесь и здесь.
Что мне больше всего нравится в агентской работе, так это инкапсуляция наших проектов: все, что мы делаем, в конечном итоге упаковывается и отправляется нашему клиенту.
На thirteen23 все никогда не устареет, потому что каждые несколько месяцев мы начинаем заново с новой проблемы. Обратная сторона? Разделение может идти в обе стороны. Мы не всегда можем объяснять наш код клиентам. Мы стараемся компенсировать это, отдавая приоритет ясности и возможности многократного использования кода.
Задача
Этот фокус только усилился с нашим последним проектом: веб-библиотекой многоразовых компонентов для компании, которую мы гипотетически назовем… ну, скажем, Acme Corporation.
Итак, входит Acme, и мы, по сути, получаем Ikea, чтобы получить наш типичный результат. Вместо того, чтобы доставлять комплексное приложение, мы делаем детали и оставляем сборку клиенту.
Товары в разобранном виде сложно продать, но Ikea проста в использовании, вплоть до науки. Как разработчики, мы взяли страницу у наших шведских друзей и постарались сделать упор на простую интеграцию с нашим кодом. В частности, мы хотели решить эту проблему с помощью трех направлений:
- Ясность: код должен быть простым для понимания. Это выходит далеко за рамки тщательной документации. Код должен избегать кривых в структуре (меня не волнует, насколько красиво это выглядит, когда вы картируете четыре функции высшего порядка в одной строке). Компоненты должны быть разбиты на подкомпоненты, где это необходимо, чтобы мы могли легко рассуждать о сложном поведении и тестировать его.
- Гибкость: компоненты должны быть достаточно плавными, чтобы работать в любом контейнере или контексте. Они также не могут пропускать CSS или иным образом влиять на свое окружение после интеграции.
- Фрикадельки: Ладно, ладно, здесь мы используем метафору Ikea, но если мы подадим тарелку шведских фрикаделек в середине нашего проекта, наши клиенты будут доволен и жаждет большего.
Инструменты
Если у вас есть возможность выбирать инструменты, вы можете начать оптимизацию для удобства использования, прежде чем писать одну строку кода. Подумайте о таких вещах, как безопасность типов или возможности для чистых функций. Но прежде чем мы начнем, давайте рассмотрим наш стек:
- Машинопись: мы рекомендуем строго типизированный язык, если это возможно - не потому, что мы ненавидим отладку слабых типов (мы делаем),, а потому, что явность типов действует как мощный инструмент для самостоятельной документации.
- Реагировать: Ха-ха! Это был я все это время, Obnoxious React Evangelist ™!
Разрабатывая только компоненты, мы не могли делать никаких предположений о какой-либо вышестоящей архитектуре. Определяя представления как выходы заданных свойств, мы получаем две вещи: во-первых, заставляя нашу информацию поступать извне, мы откладываем выборку данных в любую среду, в которой будет находиться компонент . Во-вторых, мы получаем ясность, когда компоненты диктуют, что им нужно для работы. - Таблицы стилей SCSS: Sassy CSS или SCSS - это находка, позволяющая не только упорядочить таблицы стилей, но и легко их изменить. SCSS поддерживает конструкции, подобные программированию, такие как переменные, функции и даже циклы . Мы рассмотрим это подробнее в следующей публикации.
- Сборник рассказов: демонстрационная среда для демонстрации ваших блестящих новых компонентов. Сборник рассказов подходит для вашего проекта, как модель кухни - для каталога Williams Sonoma. Если вы не развертываете компоненты прямо на существующей странице, вашим компонентам нужно где-то жить, чтобы вы могли продемонстрировать их инвесторам и своей маме. Storybook не только предоставляет этот контекст, но и организует ваши компоненты и предлагает набор плагинов, которые помогают упростить процесс проверки.
Дальнейшие действия
Фундамент = заложен. В следующем посте мы начнем демонстрацию кода с набора советов по таблицам стилей, которые помогут упростить интеграцию ваших компонентов. Будьте на связи!
Найдите нас в Facebook, Twitter и Instagram или свяжитесь с нами на thirteen23.com.
