Tři fáze designování komponent - 1.díl

4. 3. 2021
layout tableDnešní článek je první částí z třídílné série o designování komponent ve třech doporučených krocích (fázích). Nenechte si tedy ujít ani následující dvě části, které budou po vydání tohoto článku následovat, abyste mohli finální výsledek zhodnotit jako celek!
design table

Fáze první (CSS first approach)

Dnes si na konkrétním příkladu tabulkového layoutu ukážeme první fázi, kterou by designování komponent mělo začínat. V současné době komponentových frameworků (knihoven) je skoro nemyslitelné začít designovat tabulkovou komponentu jinak než vytvořením componenty ve vašem oblíbeném frameworku, přidat poté nějaký ten styling, properties a následně začít úspěšně používat. V článku se vám ale pokusím dokázat, že využitím CSS first approach může vést ve finále k lepšímu návrhu designování komponent, než kdybychom tento krok vynechali. V průběhu let se vývoj frontendu poměrně dynamicky měnil, ale co stále zůstává, jsou HTML elementy a CSS jako základní building blocks pro web. Pořád platí, že jde o velmi jednoduchý a přímočarý postup, jak ve výsledku nasadit design na vaše data. Pro CSS jako takové se vyvinula spousta konkurenčních extenzí (preprocesorů) jako SASS, LESS, Stylus - přes všemožná CSS-in-JS řešení. Vznikl také nespočet CSS frameworků jako Bootstrap, Foundation, Semantic UI - až po nejnovější přírůstek Tailwind CSS. Projekt, který pomáhá kodérům po celém světě realizovat design rychle bez nutnosti větší znalosti CSS, responzivního designu nebo animací. A to pomocí sady tree-shakable CSS classes. Je to však konečně pomyslný vítěz a ten jediný správný přístup? Pravděpodobně ne. Jak ukazuje čas, frontendový ekosystém je natolik fragmentovaný a rok od roku komplexnější, že i ten sebelepší framework se jednou přestane k designování používat, a to čeká s největší pravděpodobností také Tailwind CSS. Nebudeme to ale pro tentokrát pokoušet, bundle size nás netrápí, a Tailwind CSS proto nepoužijeme. Vyzkoušíme si raději již zmiňovaný vlastní CSS (SASS) a HTML návrh.

BEM

V dobách, kdy jsme neměli ponětí o zmíněných CSS frameworcích nebo scoped komponentách, přišla ruská společnost Yandex s vlastním řešením jak škálovat CSS návrh, kterému se říká BEM. BEM je dost ukecaný, ale plní svůj účel na výbornou. Tím je hlavně přehlednost a prevence případných naming kolizí. V momentě, kdy nemáme možnost dát scope stylingu komponentu - a v našem případě ani nechceme - použijeme BEM "as the only one way to go".

Requirements

Pojďme si vytyčit cíle naší tabulkové komponenty:
  1. Volitelná hlavička
  2. Podpora pro vnořené tabulky
  3. Podpora pro expandování tabulky
  4. Možnost definovat šířku sloupce fixně nebo je mít responzivní
  5. Možnost jednoduché customizace stylingu
Pozn. red: Tyto požadavky platí pro všechny 3 díly této minisérie o designování.

Design doc, wireframe

Design dokumenty a wireframe rozhodně k návrhu patří. V rámci tohoto ukázkového příkladu však tuto část vynecháme, jelikož může být tato oblast sama o sobě dost obsáhlá a zdlouhavá.

HTML tabulka

Pojďme si tedy názorně ukázat hlavní elementy naší tabulky. V prvé řadě ale nutno říct, že pro návrh záměrně nepoužíváme nativní <table> element (i když je mnohdy lepší, důrazně jej doporučuji pro datové tabulky). Použijeme v příkladu alternativní display: flex přístup. Samotný konkrétní styling pro zjednodušení rozepisovat nebudu. Přiložen je v StackBlitz finálním řešení, kde si můžete se vzhledem tabulky pohrát. V tomto díle se také neřeší a11y nebo JS interakce.

<Table/>

zZ8a0BNqd63
  • b2a-table je pouhou obálkou nad našimi tabulkovými elementy
  • není povinná na root úrovni, nutná je pouze pro možnosti vnoření, slouží jako pomocný selector pro styling

<Cell/>

<Header.Cell/>
1bMbdNVe9mkLnRksR94kWY8ZMKUKID0ZfgQa2gtu83U8ubkiwprXSzuUOLvTUyDqM9MI8ghq5Qpi68ht3EArDOpZPK0i1CfhD4XGDsqpOxRyxJ1FcSzbGKqRSv X V4Mz6qetUw
<Body.Cell/>
qu5RIthrwMrfbU5cyNIre q5O
  • b2a-table_ _cell je sdílený element používaný v hlavičce nebo v body
  • jde o tzv. leaf element, nepodporuje nesting a řekněme, že je základní jednotkou samotné tabulky
  • vyskytuje se ve třech variantách, a to:
    • b2a-table_ _cell
      • dynamická šířka buňky
    • b2a-table_ _cell--with
      • fixní defaultní šířka buňky, možnost přetížení výchozí hodnoty např. přes style=”width: 150px”
    • b2a-table_ _cell--expand
      • volitelný element v případě, že potřebujeme zobrazit buňku na expandování řádku

<Header/>

ObC8hDXURlgkYzFZjXQVyRrk7xkgyylYSQDqC9rbFijpLo wIBm75cS3TG3s9fY7KhtAsChIlL ciTmAJRG2F7Oa tGVYgnino3nhvJkjGe9gMpNeANgg3j3C7I4oe1kNLAb5yk
  • b2a-table_ _header element sdílí stejný kód s již zmíněným b2a-table_ _cell-group (pouze kvůli nutnosti typově odlišit cell elementy nese jiný název)
  • cell elementy v hlavičce obsahují dodatečný styling typický pro hlavičku tabulky
  • hlavička může obsahovat pouze tyto elementy:
    • b2a-table_ _cell
    • b2a-table_ _cell--width
    • b2a-table_ _cell--expand

<Body/>

Dgopm0S0MqHxdDm4UDB4jkt7FJnuhLTplaBl57ZocyNxN5a DjfBtRJwgfagmz36ZlA8ZIGDHe1KYxFS4s WeibPOeZ421r Yj3z4qVYn2JPkmAtFK1oRFQArMplonrut12piGc
  • b2a-table_ _row-group
    • obálka pro row elementy, typově vhodná pro odlišení stylingu pro root a vnořené tabulky
  • b2a-table_ _row
    • iterable element, reprezentuje jeden řádek v tabulce (v nativní table známý jako “tr”)
    • volitelně slouží jako obálka pro vnořené tabulky viz. NESTED table comment.
  • b2a-table_ _cell-group
    • Podobný element jako b2a-table__header lišící se pouze typem.
    • Obálka pro cell elementy v body.

Disclaimer

Nutno upozornit, že celá třídílná série popisuje kroky doporučené, nikoliv však povinné. Na konci každého dílu je vždy uvedena StackBlitz ukázka pro možnosti editace či použití ve vlastním kódu. I přesto prezentovaná řešení nemusí sedět vašim potřebám. Na internetu lze nalézt spoustu drop-in replacement řešení, díky čemuž si nemusíte nad technickým řešením vlastní tabulky lámat hlavu. V praxi je však někdy nutné k vlastnímu řešení přistoupit, a tato třídílná minisérie vám ukáže krok za krokem, jak na to.

Závěr

V tomto díle jsme si ukázali tvorbu jednoduché tabulky pomocí custom display:flex implementace. Celá funkční tabulková komponenta včetně stylingu je k dispozici jako StackBlitz editovatelné preview dostupné na adrese https://stackblitz.com/edit/b2a-table-1. (GitHub repo: https://github.com/b2aswd/blog/tree/main/web/b2a-table) V dalším díle si tuto tabulku oživíme JavaScriptem a obalíme ji do dalších komponent. Budeme také zkoušet pracovat na lepší použitelnosti. Máte se tedy na co těšit 🙂 sledujte nás proto i nadále!
< Zpět na VÝPIS AKTUALIT

Další články z kategorie

23. 12. 2021
Úspěšný vstup do nového roku a svátky plné pohody, klidu a odpočinku přeje celý tým B2A!

Přejeme všem obchodním partnerům i dalším příznivcům vánoční svátky přesně takové, jaké máte nejraději. Plné pohody, odpočinku, dobrého jídla a společnosti těch nejbližších. Děkujeme za perfektní spolupráci v roce 2021 a přejeme šťastný a úspěšný vstup do roku 2022!

PŘEČÍST
6. 12. 2021
První krůčky k digitalizaci zdravotnictví probíhají i u nás v ČR

Dříve trávili novorozenci na oddělení týdny, někdy i měsíce. A rodiče v permanentním stresu pendlovali mezi nemocnicí, domovem a prací. A dnes. Dnes jsme pokročili tak daleko, že pokud to zdravotní stav alespoň trochu dovolí, miminko můžou rodiče po pár dnech vzít domů. Sžívat se a užívat si společné chvíle. A hlavně – být v […]

PŘEČÍST
6. 11. 2021
Proč cílíme na User Centric Approach

Zastáváme názor, že spokojení zaměstnanci jsou těmi největšími tahouny firemního rozvoje. Při vylaďování našich aplikací hrál proto „user centric approach„ vždy zásadní roli… Správně pojmenovat nám jej ale pomohla až společnost Apple. Místo zaměření na procesy, které ještě nefungují, se zaměřujeme právě na přání a priority konkrétních lidí na konkrétních pozicích a stavíme softwarové vrstvy, které přesně odpovídají […]

PŘEČÍST
30. 10. 2021
Petr Kubíček jako host v novém díle podcastu #salesbooster

O tom, proč je metoda „user centric approach“ základním stavebním kamenem úspěšné digitalizace nebo jak se za posledních sedm let změnit náš mindset v B2A, hovořil Petr Kubíček (CEO v B2A) s Petrem Sobotkou v novém díle podcastu SalesBooster. „S Petrem Sobotkou se znám už od dob vysokoškolského studia… a tak jsem jeho nabídku zúčastnit se jako […]

PŘEČÍST
30. 9. 2021
Tři fáze designování komponent – 3.díl

V této závěrečné fázi designování komponent se zaměříme na použitelnost CSS, zamyslíme se nad možným rozšířením o tabulkové direktivy a uvedeme si jejich hlavní výhody. Pro ty z vás, které předchozí dva díly minuly, uvádím níže odkazy k přiblížení tématu: Tři fáze designování komponent – 1.díl Tři fáze designování komponent – 2.díl CSS Vstup do […]

PŘEČÍST
1. 7. 2021
RabbitMQ - implementace message brokera

Message broker Message broker je software, který dovoluje, jak už název vypovídá, různým aplikacím či službám komunikovat a vyměňovat si mezi sebou informace. Tyto brokery využívají ke komunikaci různých protokolů (např. AMQP), což dovoluje aplikacím být na sobě nezávislé a komunikovat mezi sebou i přes to, že jsou napsány v různých jazycích či běží na rozdílných […]

PŘEČÍST
19. 5. 2021
Fastlane z trochu jiného úhlu pohledu

Zřejmě všichni iOS vývojáři již slyšeli o nástroji Fastlane, který se využívá k automatizaci činností v průběhu celého vývoje nejen iOS aplikací. Jako první nás nejspíše napadne jejich generování, testování a vydávání. My se dnes ale podíváme na jiné - možná ne tolik rozšířené - využití, které tento nástroj rovněž poskytuje. Fastlane Fastlane umí podat […]

PŘEČÍST
29. 4. 2021
Tři fáze designování komponent – 2.díl

V předchozím díle jsme si názorně ukázali design tabulkové komponenty tzv. “from scratch” jen za pomocí HTML a CSS. Markup jsme rozčlenili do komponent za pomocí BEM konvence pojmenování CSS tříd, a tímto jsme si předchystali půdu pro pokračování, které je uvedeno v tomto 2.dílu. Celá tato třídílná série je do jisté míry na sobě nezávislá […]

PŘEČÍST
17. 3. 2021
Přínosy digitalizace výroby pro oblast kvality

Společnost Intemac Solutions, s.r.o. - zabývající se poradenstvím českým firmám v oblasti implementace digitálních technologií - nás pozvala, abychom se zúčastnili prvního studiového webináře, který se konal 3.března 2021 v Kuřimi.  Webinář byl zaměřený na téma „Zlepšování kontroly kvality díky digitálním nástrojům“, a to konkrétně na přínosy digitalizace ve výrobních firmách. V rámci webináře jsme […]

PŘEČÍST
16. 3. 2021
Přínosy digitalizace výroby pro oblast kvality
PŘEČÍST

Hledáme lidi s talentem a zapálením pro věc.

Zobrazit pracovní nabídky
menu-circlecross-circle
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram