Рубрики
Без рубрики

Создание UI-набора для реагирования проектов

Как мы построили наш UI-Kit на Homelike, а также повышенную производительность и производительность внедорожника.

Автор оригинала: Osamah Aldoaiss.

Я ведут разработчик Frontend на Homelike, Proptech Start-up из Кельна, Германия. Я специализируюсь на Reactjs и ее экосистеме, а также клиенту Apollo для наших запросов GraphQL.

Большая часть моего опыта самостоятельно преподается в течение нескольких лет и несколько проектов, в том числе в год борьба с угловым 4/5. Это также научило меня намного больше о создании более полной архитектуры приложений и тестирования единиц.

Проблема, которую мы хотели решить

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

Так каково наше решение?

HomeLike UI-Kit – это очень настраиваемая библиотека интернет-пользовательской интерфейсы, которая добавляет презентационные компоненты с определенными взаимодействиями, как OnClick S и Onchange с. Они определяются нашей командой дизайна, потому что они уже думают в тех же концепциях, что и нам в команде Dev.

Большой проект, который привел к созданию нашего UI-набора, было переосмысление потока бронирования на Homelike. Мы имели также в виду, что все компоненты, построенные там, должны быть доступны в других микросервисах и частях нашего приложения, например, приборной панели и страницы поиска.

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

Ядро нашего UI-набора реагирует с Стильные компоненты Отказ Мы выбрали Стильные компоненты Поскольку это один из основных библиотек CSS-js в экосистеме реагирования. Поскольку мы хотели построить только презентационные компоненты, это пришло очень удобно, поскольку наши компоненты просто состояли из CSS, которые реагируют на определенные реквизиты.

Вот пример Карта , Carddbody и Cardfooter Компонент, с которым мы можем стирать нашу макет карты в приборной панели на мобильном экране.

Карта

import styled from 'styled-components';

import Panel from '../Panel';
import * as variables from '../../styles/variables';

const Card = styled(Panel)`
  padding: 0;
  display: flex;
  flex-direction: column;
  margin-bottom: ${variables.spacing * 1.5}px;
`;

export default Card;

Carddoy.js.

import styled from 'styled-components';

import * as variables from '../../styles/variables';

const CardBody = styled.div`
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: ${variables.spacing * 1.5}px;
`;

export default CardBody;

Cardfooter.js.

import styled from 'styled-components';
import PropTypes from 'prop-types';

import * as colors from '../../styles/colors';
import { spacing } from '../../styles/variables';

const CardFooter = styled.div`
  display: flex;
  width: 100%;
  padding: ${spacing * 0.5}px 0;
  background-color: ${({ bgColor }) => colors[bgColor || 'white']};
`;

CardFooter.defaultProps = {
  bgColor: 'white'
};

CardFooter.propTypes = {
  bgColor: PropTypes.string
};

export default CardFooter;

С тем, что теперь мы можем использовать их такие, и создавать наш интерфейс без повторяющихся CSS и различных состояний стилей и т. Д.

import React from 'react';
import { Card, CardBody, CardFooter } from 'my-ui-kit';

const ExampleCard = ({ name, description, image, action }) => {
  return (
    
      
        
        {name}
        {description}
      
      
        
      
    
  );
};

export default ExampleCard;

Назначение ключей

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

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

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

Советы и советы

Это несколько советов, которые я могу дать вам:

  1. Любая кодовая база inventjs должна реализовать UI-библиотеку как можно скорее, даже если она увеличивает время разработки в начале, это будет огромная победа в долгосрочной перспективе.

  2. Выберите библиотеку CSS-In-JS, с которой вам удобно, и что позволяет вам настроить как можно больше.

  3. Сократите время между обновлениями пакетов в проектах с использованием NPM Link ../Path/to/package в процессе разработки.

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

  5. Реализуйте тестирование единиц-тестирования и снимка как можно скорее, чтобы предотвратить разрыв UI.

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

Окончательные мысли и следующие шаги

Поскольку библиотека никогда не будет на 100%, у нас много вещей в трубопроводе:

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

  • Мы добавим библиотеку, как SaleBooks в нашу UI-библиотеку, чтобы иметь визуальную документацию.

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

  • Мы, вероятно, будем открывать его в один момент.

Если у вас есть еще вопросы, ударим меня на Twitter Отказ Я был бы счастлив поболтать о чем-то реагировать и JavaScript связан.

Читайте ещё по теме: