Tato část popisuje sadu moderních standardů pro „webové komponenty“.
V současné době jsou tyto standardy ve vývoji. Některé funkce jsou dobře podporovány a integrovány do moderního standardu HTML/DOM, zatímco jiné jsou zatím ve fázi návrhu. Příklady si můžete vyzkoušet v jakémkoli prohlížeči, Google Chrome je s těmito funkcemi asi nejaktuálnější. Pravděpodobně je to proto, že za mnoha souvisejícími specifikacemi stojí členové společnosti Google.
Co je společné mezi…
Celá myšlenka komponent není nic nového. Používá se v mnoha rámcích a jinde.
Než přejdeme k detailům implementace, podívejte se na tento velký úspěch lidstva:
To je Mezinárodní vesmírná stanice (ISS).
A takto je to uvnitř (přibližně):
Mezinárodní vesmírná stanice:
- Skládá se z mnoha součástí.
- Každý komponent má uvnitř mnoho menších detailů.
- Komponenty jsou velmi složité, mnohem komplikovanější než většina webových stránek.
- Součásti jsou vyvíjeny mezinárodně týmy z různých zemí, které mluví různými jazyky.
…A tato věc létá, udržuje lidi naživu ve vesmíru!
Jak vznikají tak složitá zařízení?
Které principy bychom si mohli vypůjčit, aby byl náš vývoj na stejné úrovni spolehlivý a škálovatelný? Nebo se tomu alespoň blíží?
Architektura komponent
Dobře známé pravidlo pro vývoj složitého softwaru zní:nevytvářejte složitý software.
Pokud se něco stane složitým – rozdělte to na jednodušší části a spojte je nejviditelnějším způsobem.
Dobrý architekt je ten, kdo dokáže složitě zjednodušit.
Uživatelské rozhraní můžeme rozdělit na vizuální komponenty:každá z nich má své místo na stránce, může „dělat“ dobře popsaný úkol a je oddělená od ostatních.
Podívejme se na webovou stránku, například Twitter.
Přirozeně se rozdělí na komponenty:
- Navigace nahoře.
- Informace o uživateli.
- Postupujte podle návrhů.
- Odeslat formulář.
- (a také 6, 7) – zprávy.
Komponenty mohou mít dílčí komponenty, např. zprávy mohou být součástí vyšší úrovně komponenty „seznam zpráv“. Samotný klikací uživatelský obrázek může být součástí a tak dále.
Jak se rozhodneme, co je to součást? To vychází z intuice, zkušeností a zdravého rozumu. Obvykle se jedná o samostatnou vizuální entitu, kterou můžeme popsat z hlediska toho, co dělá a jak interaguje se stránkou. Ve výše uvedeném případě má stránka bloky, z nichž každý hraje svou vlastní roli, je logické vytvořit tyto komponenty.
Komponenta má:
- Jeho vlastní třída JavaScript.
- Struktura DOM spravovaná výhradně svou třídou, vnější kód k ní nemá přístup (princip „zapouzdření“).
- Styly CSS použité na komponentu.
- API:události, metody tříd atd. pro interakci s ostatními komponentami.
Ještě jednou, celá ta „komponenta“ není nic zvláštního.
Existuje mnoho rámců a vývojových metodologií pro jejich vytvoření, z nichž každý má své vlastní zvonky a píšťalky. Obvykle se používají speciální třídy CSS a konvence, které poskytují „komponentový dojem“ – rozsah CSS a zapouzdření DOM.
„Webové komponenty“ k tomu poskytují vestavěné funkce prohlížeče, takže je již nemusíme emulovat.
- Vlastní prvky – k definování vlastních prvků HTML.
- Stínový DOM – pro vytvoření interního DOM komponenty, skrytého před ostatními.
- Rozsah CSS – k deklaraci stylů, které se použijí pouze uvnitř Shadow DOM komponenty.
- Retargeting na události a další drobnosti, aby se vlastní komponenty lépe přizpůsobily vývoji.
V další kapitole se podíváme na podrobnosti o „Vlastních prvcích“ – základní a dobře podporované funkci webových komponent, která je sama o sobě dobrá.