Tři fáze designování komponent – 2.díl

29. 4. 2021
angular logo red white mid1

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á a jedna bez druhé může koexistovat. Návrh komponent jen za pomocí HTML a CSS může být mnohdy žádoucí a preferovaný. A důvodů, proč tomu tak je, existuje více - jako např. nativní performance, a11y nebo i jednoduchost použití - opravdu nutně potřebujeme komponentu pro vykreslení button elementu?

Jako u všeho to však není jediná cesta. A dneska si ukážeme, jak na to jít jinak 😉

Fáze druhá

Tabulka v prvním díle je prakticky plně použitelná. To ano, má ale jeden zásadní neduh, a tím je řekněme "ukecanost" kódu. Resp. potřeba generovat na první pohled větší množství kódu nutného pro její vykreslení. Proto v posledních letech vznikly pro usnadnění tzv. komponentové frameworky, kde lze spoustu "extra" kódu, nutného pro správné vykreslení, schovat do již zmíněných komponent (leaf, layout, smart...). Postupně budeme tedy transformovat BEM elementy do jejich komponentového protějšku.

Ukázka původní tabulky představené v prvním díle této série:

tři fáze

Angular tabulka

Pro komponentové zapouzdření reálně použijeme framework Angular vyvíjený společností Google. U nás v B2A se jedná o "framework of choice" a jde zároveň o jeden z oné velké čtverky frameworků na trhu.

Pro další čtení není nutné tento framework dopodrobna znát, v článku budeme totiž využívat obecné principy aplikované jako všude jinde.

<Cell/>

V předchozím díle jsme deklarovaly buňky pro hlavičku a body pomocí CSS tříd b2a-table_ _cell, b2a-table_ _cell--with a b2a-table_ _cell--expand.

Pomocí komponentového přístupu nám nyní postačí pouze dvě komponenty, a to b2a-table-cell a b2a-table-cell-expand. Další komponenta není nutná, protože b2a-table-cell v sobě zapouzdří obojí, a to již zmíněnou b2a-table_ _cell a b2a-table_ _cell--with funkcionalitu CSS tříd. Takto by šlo pokračovat dále a odstranit také "expand" verzi, jednalo by se však již o subjektivní pohled na věc samotné sémantiky komponent.

<Header.Cell/>

tři fáze

<Body.Cell/>

tři fáze

<Header/>

Zde je názorná ukázka použití Inputu width na buňce v hlavičce, namísto nutné deklarace b2a-table_ _cell--with CSS třídy společně s inline stylem style="width: 150px" (v jiných frameworcích je zvykem pojmenovávat Input jako Property, Angular používá označení Input, resp. @Input, protože Property může být jednoduše zaměnitelná s JS class property).

Je ale nutné zmínit, že inline styly nebo CSS třídy je možné nadále na úrovni komponenty používat, protože vše je opět deklarované samotnou komponentou na host elementu.  A lze to bez kdejakých rádoby "hacků" libovolně přestylovat. Což nám dává ohromné možnosti v customizaci - o tom ale až v dalším díle.

Pravidla mergování stylů a tříd jsou od verze 9 (Angular Ivy) logičtější a přehledně definovány v dokumentaci Angularu dostupné na stránce Style Precedence.

carbon 1

<Body/>

Asi nejvýznamnějším rozdílem ve velikosti generovaného kódu lze vypozorovat v části tabulky zvané "body".

  1. Není nutné repetitivně deklarovat CSS třídy a místo toho používáme přímo komponentu s b2a-table__row CSS třídou deklarovanou na host elementu.
  2. Snížili jsme potřebu zanoření na jednu úroveň, protože nemusíme generovat elementy .b2a-table__row a .b2a-table_ _cell-group. Tyto elementy jsou deklarované v layout komponentě b2a-table-row, a tudíž používáme pouze tuto komponentu.
  3. Přímočará deklarace zanořené tabulky na stejnou úroveň, kde deklarujeme b2a-table-cell, tedy první potomek komponenty b2a-table-row. Tady nám hodně pomáhá "angulaří" Content Projection feature.

Navíc si pro generování řádků tabulky můžeme pomoci frameworkem a deklarativně iterovat pomocí NgForOf strukturální direktivy - možné imperativní řešení jde také vždy použít 😉

Na obrázku můžete vidět výrazné zjednodušení oproti předchozí verzi:

iterable table

B2aTableComponent

Můžete si také všimnout, že nám chybí deklarace CSS třídy b2a-table_ _row-group, díky které je úroveň zanoření ve výsledku o dvě úrovně nižší, než tomu bylo v předchozím díle. Kouzlo toho tkví v chytrém použití rootovské komponenty b2a-table, která využívá principu Content Projection a deklaruje CSS třídu b2a-table_ _row-group uvnitř.

B2aTableComponent 1

B2aTableRowComponent

Ukázka iterable body komponenty s využitím Content Projection a deklarací CSS třídy b2a-table__row na host elementu.

B2aTableRowComponent

Závěr

V tomto díle jsme si názorně ukázali jak jde pure HTML a CSS návrh zeštíhlit pomocí komponent. Využili jsme k tomu Content Projection a deklarovali CSS třídy na úrovni host elementu - features, které nám poskytuje framework Angular a zjednodušují výsledné použití komponent. Finální zdrojový kód si můžete prohlédnout na B2A Github repository nebo jako StackBlitz editovatelné preview.

V dalším díle se zaměříme na zlepšení použitelnosti CSS, které jsme doteď do jisté míry opomíjeli. Zamyslíme se také nad použitím direktiv namísto komponent (či obojího), a dále zjednodušíme a zautomatizujeme používání tabulky v našem kódu. Finále se blíží 🙂

< 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
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
4. 3. 2021
Tři fáze designování komponent - 1.díl

Dneš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! 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 […]

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