Plama
Ant Design w aplikacjach webowych

Głównym celem procesu tworzenia oprogramowania w Akanzie jest stworzenie najwyższej jakości produktu w jak najkrótszym czasie i dostarczenie go klientowi. Na ten proces składa się jednak wiele faz i czynników, które mogą często skutecznie wydłużyć całkowity czas pracy. Ktoś mądry jednak kiedyś wpadł na pomysł opracowania tzw. design systems, które minimalizują występowanie czynników opóźniających.

Czym jest design system?

Jest to zbiór wytycznych, procesów oraz komponentów, których stosowanie ujednolica design produktu oraz znacznie przyspiesza i ułatwia proces jego budowania. Jednymi z popularniejszych design systemów są Material Design od Google czy Fluent od Microsoftu. Dla odbiorców treści tworzonych z użyciem tych systemów najważniejsze są oczywiście ich UI i UX kojarzone z konkretną marką, ale od strony twórców tych treści, a konkretnie programistów, najważniejsze są ułatwienia wprowadzane dzięki nim do procesu developmentu oprogramowania. Dzisiaj skupię się właśnie na tym aspekcie design systems, najważniejszym z mojej perspektywy – jako programisty, czyli odpowiadającej bezpośrednio za implementację. Na przykładzie Ant Design pokażę jak zastosować design system w tworzeniu aplikacji webowej, żeby usprawnić proces jej implementacji.

źródło: https://pro.ant.design/

Ant Design to popularny design system, który często stosowany jest w aplikacjach reactowych, ze względu na bibliotekę antd, dostarczającą zbiór łatwych w implementacji komponentów do Reacta zaprojektowanych według zasad Ant Design. Sprawdźmy jednak w jaki sposób używanie tych komponentów skraca pisanie kodu i jak używanie ich wygląda w praktyce. Użyjemy do tego szybkiego startera z create-react-app (w końcu zależy nam na czasie). Konfiguracja apki tworzonej przy pomocy create-react-app jest bardzo prosta dzięki dodatkowej bibliotece craco-antd, a dokładne kroki znajdziecie w dokumentacji. Biblioteka ta umożliwia nam proste i wygodne konfiguracje globalnego motywu (theme) jak i daje możliwość pisania stylów za pomocą preprocesora Less, który będzie kolejnym elementem przyspieszający nasz workflow.

Ant Design w praktyce

Zajmijmy się czymś praktycznym, czymś czego wszyscy mamy już dawno dość, ale też czymś co idealnie pokaże jak bardzo Ant Design przyspiesza pracę. Zróbmy sobie najszybszą To Do Listę w waszym życiu.

W ramach ułatwienia stan naszej listy będziemy przechowywać w useState komponentu, w końcu zależy mi tutaj przede wszystkim na pokazaniu użyteczności Ant Design. Zacznijmy od zaimportowania komponentów, których będziemy używać. W zupełności nam one wystarczą i całkowicie wyeliminują korzystanie z natywnych elementów HTML.

import React, { useState } from 'react'
import { Row, Col, Typography, List, Input, Button } from 'antd'
import { DeleteOutlined } from '@ant-design/icons'
import { v4 as uuid } from 'uuid'
 
const { Title, Text } = Typography
const { Item } = List

Pomijając standardowe importy Reacta, widzimy cały zbiór komponentów Ant Design (do niektórych musimy dostać się przez destrukturyzacje) oraz import ikonki z paczki ikon autorstwa również Ant Design. Dorzuciłem sobie jeszcze uuid, które jest w tym przypadku kompletnie niepotrzebnym overkillem, ale lubię go używać wszędzie gdzie pojawia mi się konieczność tworzenia id, nazwijcie to skrzywieniem zawodowym.

const [list, setList] = useState([])
const [input, setInput] = useState('')

Następnym krokiem jest przygotowanie stanu komponentu, w tym przypadku zmienna list przechowywać będzie pozycje na naszej liście, a zmienna input będzie kontrolować inputa, do którego wprowadzać będziemy kolejne pozycje.

const addItem = item => setList([...list, item])
 
const removeItem = id => {
  const listCopy = [...list]
  listCopy.splice(
    listCopy.findIndex(item => item.id === id),
    1
  )
  setList(listCopy)
}

Od razu też zajmijmy się utworzeniem funkcji kontrolujących listę. Nazwy funkcji są dosyć self explanatory, tzn. addItem służy do dodania pozycji na liście, a removeItem służy do usunięcia wybranej pozycji.

return (
  <Row justify="center" align="middle">
    <Col>
      <List
        size="small"
        header={
          <Title level={2} style={{ textAlign: 'center' }}>
            Quick List
          </Title>
        }
        footer={
          <Input
            value={input}
            onChange={e => setInput(e.currentTarget.value)}
            onPressEnter={e => {
              addItem({ id: uuid(), text: e.currentTarget.value })
              setInput('')
            }}
            placeholder="Add item..."
          />
        }
        bordered
        dataSource={list}
        renderItem={item => (
          <Item key={item.id}>
            <Text>{item.text}</Text>
            <Button
              onClick={() => removeItem(item.id)}
              icon={<DeleteOutlined />}
              danger
            />
          </Item>
        )}
      />
    </Col>
  </Row>
)

Po przygotowaniu logiki możemy zająć się budową samej listy, która jak sami widzicie nie jest w ogóle skomplikowana. Objaśnijmy sobie może do czego służą konkretne komponenty:

  • Row, Col – kontenery na bazie flexboxa służące do budowania layoutów bez konieczności pisania złożonych styli
  • Title, Text – komponenty służące do prezentacji tekstu w aplikacji
  • Button – przycisk, bez niespodzianek
  • Input – komponent służący do wprowadzania tekstu
  • List, Item – nasz główny komponent odpowiadający za budowanie dynamicznych list komponentów

Każdy z dostarczanych przez Ant Design komponentów ma przygotowany zestaw propsów, które umożliwiają dosyć głęboką konfigurację i łatwe obsługiwanie eventów generowanych przez te komponenty. Kod jest bardzo przejrzysty i gdyby nie ustawienia prettiera to zajmowałby mniej niż 50 linijek. Ktoś kto sięga po tę bibliotekę pierwszy raz nie powinien potrzebować więcej niż 30 minut, żeby z użyciem wyłącznie dokumentacji zbudować własną listę. Oszczędność czasu jest więc ogromna, gdybyśmy mieli tworzyć własne komponenty analogiczne do tych gotowych na pewno stracilibyśmy dużo więcej czasu. Tak prezentuje się nasza ekspresowo napisana lista:

Podsumowanie

Rozwiązania przygotowane przez Ant Design są odpowiednio skalowalne, to też działają w przypadku usprawnienia czegoś tak malutkiego jak przykład wyżej, ale najlepiej sprawdzają się w dużych komercyjnych projektach, w których czas wykonania jest jedną z istotniejszych rzeczy. Mimo, że dopiero zaczynam swoją przygodę z Ant Design to zamierzam użyć go w swoim następnym projekcie i na pewno podzielę się wrażeniami.


Karol Ścibior
Front-End Developer
Akanza

Kategorie
Inne posty