Google Polymer - Jak to změní způsob, jakým jsou webové aplikace postaveny
Spolu s Google Photos, Google také přestavěl Polymer od nuly, řešení zlepšení výkonu a efektivity. Považujte polymer za SDK (Software Development Kit) pro web, který dělá vývoj webových aplikací mnohem rychleji pomocí nového standardu Web Components.
Webové komponenty nám umožňují vytvářet vlastní prvky a značky pro naše webové stránky. V tomto příspěvku se podíváme na to, jak mohou vlastní prvky služby Google Polymer pomoci při vývoji webových aplikací. Navíc se podíváme na několik ukázek o tom, jak tyto vlastní prvky mohou fungovat.
Informace o webových komponentách
Nejlepším způsobem, jak pochopit, jak Web Components funguje, je zobrazení aktuálních standardních prvků jako . Když přidáme spolu s URL zdroji zvuku, webové prohlížeče vykreslí tento prvek jako audio přehrávač s tlačítkem přehrávání a pauzy, časovou lištou a posuvníkem hlasitosti. Někdy se divíte, jak jsou ovládací prvky přehrávače postaveny a stylizovány?
Hráč ovládání UI je ukryt pod jako Stínové kořeny, také známý jako Stín DOM. Chcete-li zobrazit Stín DOM, spusťte Chrome DevTools > klikněte na Cog ikona> vyberte možnost Zobrazit uživatelský agent stín DOM volba.
Na následujícím obrázku můžete najít zásobník Dnes, s Web Components, můžeme pojmenovat také naše vlastní prvky. Můžeme vytvořit takový prvek, Tyto vlastní prvky mohou mít také několik přijatých vlastních atributů. Co se týče Polymer je dodáván se spoustou prvků, které představují (téměř) každou webovou aplikaci potřebují. Google tyto prvky rozděluje do skupin: Železné prvky, Prvky papíru, Webové komponenty Google, Zlaté prvky, Neonové prvky, Platinové prvky a Molekuly. Iron Elements je soubor základních prvků. Tyto základní prvky jsou to, co běžně používáme vytvořit webovou stránku jako je vstup, forma a obraz. Rozdíl je v tom, že polymer přidává těmto prvkům některé další pravomoci. Všechny prvky v této skupině jsou Výše uvedený příklad nejprve zobrazí zástupný symbol obrázku a poté se ztmavne do skutečného obrazu v Prvky papíru je skupina prvků návrhu materiálu. Materiálový design je designový jazyk společnosti Google, díky němuž je uživatelské rozhraní a zkušenosti napříč platformami Google více vizuálně konzistentní. Některé prvky, které jsou jedinečné pro materiálový design, jsou tlačítka papíru a plovoucí akce (FAB).. Papír je metaforou společnosti Google médium, které je základem obsahu. Pro přidání papíru s polymerem používáme Tlačítko Plovoucí akce (FAB) je kruhové tlačítko s ikonou, plovoucí na obrazovce, obvykle s odstínovou barvou. Google navrhuje, aby toto tlačítko obsahovalo často přístupnou funkci. Zde je příklad: Následující fragment kódu přidá papírový materiál s obrázkem a FAB. Budeme mít následující výsledek: Máme fotku s “srdce” tlačítko plovoucí na vrcholu. Klikněte na něj, aby se vám zobrazila podobná fotografie. Webové komponenty Google jsou speciální prvky, které se vyrovnávají s rozhraními Google API a službami, jako jsou Mapy Google, Youtube, stejně jako Google Feed, abychom jmenovali alespoň některé. Prvky v této skupině umožnit interakci se službami Google jen pár řádků. Níže je uveden příklad zobrazení mapy Google pomocí Jak můžete výše, Chcete zobrazit video YouTube? můžete použít Podobně přizpůsobíme výstup prostřednictvím atributů. Zlaté prvky jsou prvky určené speciálně pro aplikace elektronického obchodu. Zde najdete prvek pro zobrazení kreditní karty, e-mailu, telefonu a ZIP vstupu, které jsou všechny vybaveny ověření formátu zajištění správného zadávání a zabezpečení dat. Zde je jeden příklad, jak přidat vstup kreditní karty Visa. Zbývající prvky zahrnují prvky Neon pro animaci a speciální efekty, Platinové prvky pro offline a push oznámení a nakonec Molecules, wrappery pro knihovny třetích stran. Poznámka editora: V době psaní tohoto článku ještě nejsou k dispozici Neon Elements, Platinum Elements a Molecules. Chcete použít polymer ve svém vývoji webu? Zde je návod, jak jej nainstalovat a integrovat do svých webových stránek. Vzhledem k tomu, že většina polymerních prvků se na sobě spoléhá, je nejlepším způsobem instalace polymeru Bower. Bower je správce závislostí projektu, který usnadňuje instalaci skriptů nebo stylů potřebných pro spuštění projektu. Podívejte se na náš dřívější příspěvek o tom, jak snadno instalovat, aktualizovat a odstraňovat webové knihovny pomocí Bower. Chcete-li integrovat polymer, spusťte Terminál a přejděte do adresáře projektu za předpokladu, že jste jej vytvořili. Pak běž Toto nastavení předpokládá, že použijeme všechny prvky z každé skupiny. Z seznamu závislostí můžete odebrat, co nepotřebujete. Jak jsou závislosti nastaveny, spusťte program Tento proces může chvíli trvat, protože zahrnuje pořízení obrovského množství souborů z úložišť. Jakmile budete hotovi, měli byste je najít uložené v bower_components složky. Otevřete soubor HTML, ve kterém chcete použít komponenty Polymer, propojit WebComponents.js který je polyfill pro prohlížeče, které dosud nepodporují WebComponents, a importovat soubory komponent pomocí importu HTML. Zde je příklad: Toto nastavení nám umožní používat Zde jsou některé webové aplikace, které již Google Polymer používají. Google použil Google Polymer na webové stránce Google IO 2015; Google Fi, bezdrátová služba Google pro dopravce a dodavatele v partnerství; a Google Music. CustomElements je rozbočovač, kde můžete najít vlastní prvky vytvořené pomocí komponent Web Components. Využití elementu Papír obsahuje a sestavuje seznam. Poskytuje také pohodlnou cestu k instalaci těchto prvků pomocí Bower a NPM. Aplikace Chrome pro úpravy kódu, která funguje překvapivě dobře. Tato aplikace používá v uživatelském rozhraní tlačítko FAB, nabídku Papír a dialogové okno Papír. Nástroj pro tvorbu webové aplikace s prvky polymeru pomocí rozhraní drag-and-drop. Zpráva burzy a prognóza postavená výhradně s prvky polymeru. Aplikace pro e-mailového klienta pro Gmail. Vypadá to pěkně a plynule, i když bohužel není plně funkční. Polymer má ohromný rozsah a může vám chvíli trvat, než si zvyknete na všechny vlastní prvky a API. Web Components a Polymer však jistě ovlivní způsob, jakým budujeme webové aplikace. Čtěte více o Web Components - odkazy naleznete níže. prvky, které utajují ovládání přehrávače UI. 
uživatelské jméno který bude použit k zadání uživatelského jména služby Twitter.
Vlastní prvky v polymeru
1. Železné prvky
žehlička- například předčíslí předpětí, slábnout, a zástupný symbol atributy:
src je plně naložený, provádějící hladký efekt načítání obrazu.2. Papírové prvky
Papír
nadmořská výška Chcete-li papír zvednout, přidejte stín, který posílí výškuanimovaný aplikuje animaci jako změnu výšky papíru.Tlačítko plovoucí akce (FAB)
3. Webové komponenty Google
zeměpisná šířka a zeměpisná délka určit umístění na mapě. Můžeme také hnízdit
4. Zlaté prvky
5. Další prvky
Integrující polymer
bower init k inicializaci souboru bower.json do projektu, který bude použit k záznamu závislostí projektu. Otevřete bower.json a přidejte následující řádky. "závislosti": "polymer": "polymer / polymer # ^ 1.0.0", "google-web-components": "GoogleWebComponents / google-web-components # ^ 1.0.0", "železné prvky": " PolymerElementy / železné prvky # ^ 1.0.0 "," papírové prvky ":" PolymerElements / paper-elements # ^ 1.0.0 "," zlaté prvky ":" PolymerElements / zlaté prvky # ^ 1.0.0 "
instalovat k instalaci závislostí na seznamu.
Vitríny
Google
Vlastní prvky
Chrome Dev Editor
Polymer Designer
Denní prognóza akcií
Pošta polymeru
Závěrečné myšlenky
Užitečné odkazy
