Google Polymer - ako to zmení spôsob, akým sú vytvorené webové aplikácie
Spolu so službou Google Photos spoločnosť Google tiež znovu vytvorila Polymer od začiatku, pričom sa zaoberala zlepšovaním výkonnosti a efektívnosťou. Myslite na polymér ako SDK (Software Development Kit) pre web, ktorý robí vývoj webových aplikácií oveľa rýchlejšie pomocou nového štandardu Web Components.
Webové komponenty nám umožňujú vytvárať vlastné prvky a značky pre naše webové stránky. V tomto príspevku sa budeme zaoberať tým, ako môžu vlastné prvky služby Google Polymer pomôcť pri vývoji webových aplikácií. Navyše sa pozrieme aj na niekoľko ukážok o tom, ako môžu byť tieto vlastné prvky uvedené do práce.
Informácie o webových komponentoch
Najlepší spôsob, ako pochopiť, ako fungujú webové komponenty, je preskúmanie súčasných štandardných prvkov, ako je napríklad . Keď pridáme spolu s zdrojmi adries URL zvuku, webové prehliadače vykresľujú tento prvok ako zvukový prehrávač s tlačidlami pre prehrávanie a pozastavenie, časovou lištou a posuvníkom hlasitosti. Niekedy sa zaujímate, ako sú ovládacie prvky prehrávača postavené a štylizované?
Ovládací prvok používateľského rozhrania je skrytý ako Shadow Roots, známy tiež ako Stín DOM. Ak chcete zobraziť funkciu Shadow DOM, spustite program Chrome DevTools > kliknite na zub ikona> vyberte položku Zobraziť používateľský agent stín DOM voľba.
Na nasledujúcej snímke nájdete stoh Dnes s Web Components môžeme pomenovať aj naše vlastné prvky. Môžeme vytvoriť prvok, ako je, Okrem toho môžu mať tieto vlastné prvky aj niekoľko prijímaných vlastných atribútov. Pokiaľ ide o Polymer je dodávaný s množstvom prvkov, ktoré zodpovedajú (takmer) každej webovej aplikácii. Spoločnosť Google rozdeľuje tieto prvky do skupín: prvky železa, prvky papiera, komponenty Google Web Components, zlaté prvky, neónové prvky, elementy platiny a molekuly. Iron Elements je zbierka základných prvkov. Tieto základné prvky sú to, čo zvyčajne používame vytvoriť webovú stránku ako je vstup, forma a obrázok. Rozdiel je, že Polymer pridáva k týmto prvkom dodatočné právomoci. Všetky prvky v tejto skupine sú V hore uvedenom príklade sa najprv zobrazí symbol zástupcu obrázka a potom sa zmizne na aktuálny obrázok v priečinku Papierové prvky je skupina prvkov materiálového dizajnu. Materiálový dizajn je dizajnový jazyk spoločnosti Google, ktorý používateľskym rozhraním a skúsenosťami v rámci platforiem Google poskytuje viac vizuálnej konzistencie aplikácií na webe aj Android. Niektoré prvky, ktoré sú jedinečné pre materiálový dizajn, sú papierové a pohyblivé akčné tlačidlo (FAB). papier je metafora spoločnosti Google pre médium, ktoré je základom obsahu. Ak chcete pridať papier s polymérom, použijeme Tlačidlo s pohyblivou akciou (FAB) je kruhové tlačidlo s ikonou, ktorá pláva na obrazovke, zvyčajne s vystupujúcou farbou. Google naznačuje, že toto tlačidlo nesie často prístupnú funkciu. Tu je príklad: Nasledujúci útržok kódu pridá materiál papiera s obrázkom a FAB. Budeme mať nasledujúci výsledok: Máme fotku s “Srdce” tlačidlo na pláte. Kliknutím na tlačidlo sa vám páči fotografia a tlačidlo vydáva zvlnený efekt na potvrdenie kliknutia. Webové komponenty Google sú špeciálne prvky, ktoré zvládajú rozhrania Google API a služby, ako sú napríklad Mapy Google, Youtube a tiež Google Feed. Prvky v tejto skupine interakciu so službami Google len pár riadkov. Nasledujúci príklad ukáže Google Map pomocou Ako už bolo uvedené vyššie Chcete zobraziť video v službe Youtube? môžete použiť Podobne prispôsobujeme výstup prostredníctvom atribútov. Zlaté prvky sú prvky navrhnuté špeciálne pre aplikácie elektronického obchodu. Tu nájdete prvok na zobrazenie kreditnej karty, e-mailu, telefónu a ZIP vstupu, ktoré sú všetky vybavené formátovanie aby sa zabezpečil správny vstup a bezpečnosť dát. Tu je jeden príklad pridania kreditnej karty Visa. Medzi zostávajúce prvky patria elementy Neon pre animáciu a špeciálne efekty, elementy platiny pre oznámenia offline a push a nakoniec molekuly, obaly pre knižnice tretích strán. Upozornenie editora: V čase tohto písania stále nie sú k dispozícii prvky Neon, Platinové prvky a molekuly. Chcete použiť Polymer vo vašom vývoji webu? Tu je návod, ako ho nainštalovať a integrovať do svojich webových stránok. Keďže väčšina prvkov polyméru sa na sebe spolieha, najlepší spôsob inštalácie polyméru je cez Bower. Bower je manažér závislostí projektov, ktorý uľahčuje inštaláciu skriptov alebo štýlov potrebných na spustenie projektu. Pozrite sa na náš predchádzajúci príspevok o tom, ako s Bower jednoducho inštalovať, aktualizovať a odstrániť webové knižnice. Ak chcete integrovať polymér, spustite Terminal a potom prejdite do adresára projektu, za predpokladu, že ste ho vytvorili. Potom spustite Toto nastavenie predpokladá, že budeme používať všetky prvky z každej skupiny. Od zoznamu závislostí môžete odstrániť to, čo nepotrebujete. Pri nastavení závislostí sa spustite Tento proces môže chvíľu trvať, pretože zahŕňa chytenie obrovského množstva súborov z repozitárov. Po dokončení by ste ich mali uložiť do priečinka bower_components zložka. Otvorte súbor HTML, v ktorom chcete používať komponenty Polymer. V hlavičke dokumentu, prepojte WebComponents.js Ktoré je polyfill pre prehliadače, ktoré ešte nepodporujú WebComponents, a import súborov komponentov pomocou importu HTML. Tu je príklad: Toto nastavenie nám umožní používať Tu sú niektoré webové aplikácie, ktoré už používajú službu Google Polymer. Spoločnosť Google používala službu Google Polymer na webovej stránke Google IO 2015; Google Fi, bezdrôtová služba Google pre partnerov a prepravcov; a Hudba Google. CustomElements je rozbočovač, kde môžete nájsť vlastné prvky vytvorené pomocou webových komponentov. Používa prvok papiera, ktorý obsahuje a vytvorí zoznam. Poskytuje tiež vhodnú cestu na inštaláciu týchto prvkov prostredníctvom Bower a NPM. Aplikácia Chrome na úpravu kódu, ktorá funguje prekvapivo. Táto aplikácia používa v používateľskom rozhraní tlačidlo FAB, ponuku papiera a dialógové prvky papiera. Nástroj na vytváranie webových aplikácií s prvkami Polymer pomocou rozhrania drag-and-drop. Burzový výkaz a prognóza postavená výhradne s prvkami Polymer. Aplikácia e-mailového klienta pre službu Gmail. Vyzerá pekne a plynulo, aj keď bohužiaľ, nie je plne funkčný. Polymér má obrovský rozsah a môže chvíľu trvať, kým si zvyknete na všetky vlastné prvky, ako aj na jeho API. Napriek tomu Web Components a Polymer určite ovplyvnia spôsob, akým budeme vytvárať webové aplikácie. Zostaňte pred davom a prečítajte si viac o webových komponentoch - referencie nájdete nižšie. prvky, ktoré postavia ovládacie prvky prehrávača UI tajne. 
užívateľské meno ktoré sa použijú na zadanie používateľského mena služby Twitter.
Vlastné prvky v polyméri
1. Železné prvky
železo- napr predpätie, zvädnúť, a zástupný atribúty:
src pretože je plne nabitá, efekt plynulého načítania obrazu.2. Papierové prvky
papier
nadmorská výška zdvihnúť papier, a tým pridať tieň na posilnenie elevácieanimovaný použije animáciu ako zmenu výšky papiera.Tlačidlo s pohyblivou akciou (FAB)
3. Webové komponenty Google
zemepisná šírka a zemepisná dĺžka na určenie polohy na mape. Môžeme tiež hniezdiť
4. Zlaté prvky
5. Ďalšie prvky
Integrácia polyméru
bower init príkaz spustiť súbor bower.json do projektu, ktorý sa použije na zaznamenávanie závislostí projektu. Otvorte bower.json a pridajte nasledujúce riadky. "závislosti": "polymer": "Polymér / polymér # ^ 1.0.0", "Google-web-komponenty": "GoogleWebComponents / google-web-components-1.0.0" Polymérne prvky / železné prvky # ^ 1.0.0 "," papierové prvky ":" Polymerové prvky / papierové prvky # ^ 1.0.0 "," zlaté prvky ":" PolymerElements / zlaté prvky # 1.0.0 "
bower install príkaz na inštaláciu závislostí zo zoznamu.
vitríny
Google
Vlastné prvky
Editor Chrome Dev
Návrhár polymérov
Denná predpoveď zásob
Polymer Mail
Záverečné myšlienky
Užitočné odkazy
