Google Polymer - Hogyan változtatja meg a webes alkalmazások építését
A Google Fotókkal együtt a Google is újraépítette a Polymert a semmiből, a teljesítmény javítása és a hatékonyság javítása érdekében. Gondolj a Polymerre, mint egy SDK (Software Development Kit) az internetre, ami egy webes alkalmazások fejlesztése sokkal gyorsabb egy új, Web Components nevű szabvány használatával.
A webes összetevők lehetővé teszik számunkra hozzon létre egyéni elemeket és címkéket honlapjainkhoz. Ebben a hozzászólásban megnézzük, hogyan segíthet a Google Polymer egyéni elemei a webes alkalmazásfejlesztésben. Ráadásul néhány demót is megvizsgálunk arról, hogy ezek az egyéni elemek hogyan működhetnek.
A webkomponensekről
A legjobb módja annak, hogy megértsük, hogyan működik a webkomponensek, ha megnézzük az aktuális szabványelemeket . Amikor hozzáadjuk az audió URL forrásaival együtt a webböngészők ezt az elemet hanglejátszóként fogják megjeleníteni a lejátszás és szünet gomb, az idősáv és a hangerő csúszka segítségével. Mindig csodálkoztam, hogyan épülnek fel és stílusosak a játékosok?
Az UI vezérlő lejátszó a Shadow Roots alatt van, más néven Árnyék DOM. A Shadow DOM megjelenítéséhez indítsa el a Chrome DevTools > kattintson a Patkószeg ikon> válassza ki a Felhasználói ügynök árnyék DOM megjelenítése választási lehetőség.
A következő képernyőn található egy halom halom Napjainkban a Web Components-el saját elemeinket is megnevezhetjük. Olyan elemet építhetünk, mint a, Ezenkívül ezek az egyéni elemek tartalmazhatnak néhány elfogadott egyéni attribútumot is. A A polimer egy csomó elemet tartalmaz, amelyek (szinte) minden webalkalmazást igényelnek. A Google ezeket az elemeket csoportokba osztja: Iron Elements, Paper Elements, Google Web Components, Gold Elements, Neon Elements, Platinum Elements és Molecules. Az Iron Elements alapvető elemek gyűjteménye. Ezek az alapvető elemek az, amit általában használunk weblap létrehozása például bemenet, forma és kép. A különbség az, hogy a Polymer további erőket ad ezekhez az elemekhez. A csoport összes eleme A fenti példa először megmutatja a kép helyőrzőjét, majd eltűnik a tényleges képben A Papírelemek az Material Design elemek csoportja. Az anyagtervezés a Google tervezési nyelve, hogy a Google felületén a felhasználói felület és a tapasztalatok mind a webes, mind az Android-alkalmazások vizuálisan egységesebbek legyenek. Néhány elem, amely egyedülálló az anyagtervezésben, a papír és a lebegő művelet gomb (FAB). Papír a Google metaforája a tartalom alapjául szolgáló közeg. Papír hozzáadásához Polymerrel használjuk a A Lebegő művelet gomb (FAB) egy kör alakú gomb, amely a képernyőn lebegő ikonnal, általában álló színnel. A Google azt javasolja, hogy ez a gomb gyakran elérhető funkciót hordozzon. Íme egy példa: A következő kódrészlet egy papíranyagot és egy FAB-t tartalmaz. A következő eredményt kapjuk: Van egy fotó a “szív” gomb lebeg a tetején. Kattints rá, mint a fotó, ha a gomb ripple-effektust ad ki, hogy nyugtázza a kattintást. A Google Webes összetevők olyan speciális elemek, amelyek képesek megbirkózni a Google API-kkal és szolgáltatásokkal, mint például a Google Térkép, a YouTube, valamint a Google Feed, hogy néhányat említsünk. A csoport elemei a Google szolgáltatásokkal való párhuzamosságot csak néhány vonallal távolítsa el. A következő példa egy Google Térkép megjelenítésére a Mint fentebb, a Szeretné megjeleníteni egy Youtube videót? használhatja a Hasonlóképpen testreszabjuk a kimenetet attribútumokon keresztül. Az aranyelemek a kifejezetten az e-kereskedelmi alkalmazásokhoz tervezett elemek. Itt megtalálható a hitelkártya, az e-mail, a telefon és a ZIP bemenet bemutatására szolgáló elem, amely mindegyikük rendelkezik formátum érvényesítése a helyes adatbevitel és biztonság biztosítása érdekében. Itt van egy példa a Visa hitelkártya bemenet hozzáadására. A fennmaradó elemek közé tartoznak a neonelemek az animációhoz és a speciális effektekhez, Platinum elemek offline és push értesítésekhez, és végül a Molekulák, a csomagolás harmadik fél könyvtáraihoz.. A szerkesztő megjegyzése: Ezen írás időpontjában a Neon Elements, a Platinum Elements és a Molecules még nem állnak rendelkezésre. Szeretné használni a Polymert webes fejlesztésében? Itt telepítheti és integrálhatja weboldalait. Mivel a legtöbb polimer elem egymásra támaszkodik, a Polymer legjobb telepítési módja a Bower. A Bower egy projektfüggőség-kezelő, amely megkönnyíti a projekt futtatásához szükséges szkriptek vagy stílusok telepítését. Nézze meg korábbi bejegyzéseinket arról, hogyan telepítheti, frissítheti és távolíthatja el a webkönyvtárakat a Bower segítségével. A Polymer integrálásához indítsa el a terminált, majd navigáljon a projektkönyvtárába, feltéve, hogy létrehozta. Ezután fuss Ez a beállítás feltételezi, hogy minden csoport minden elemét használni fogjuk. Eltávolíthatja azt, amit nem kell a függőségi listából. Mivel a függőségek be vannak állítva, futtassa a Ez a folyamat eltarthat egy ideig, mivel magában foglalja a hatalmas mennyiségű fájl megragadását a tárolókból. Miután elkészült, meg kell találnod őket a bower_components mappa. Nyissa meg azt a HTML fájlt, amelyet a Polymer komponensekhez kíván használni. A dokumentumfejen belül, linkelje a WebComponents.js-t ami a Polyfill olyan böngészők esetében, amelyek még nem támogatják a WebComponents-t, és importálja az összetevő fájlokat HTML importálással. Íme egy példa: Ez a beállítás lehetővé teszi számunkra a Íme néhány olyan webes alkalmazás, amely már használja a Google Polymert. A Google a Google Polymert a Google IO 2015 weboldalán használja; Google Fi, a Google vezeték nélküli szolgáltatása a fuvarozóknak és a szállítóknak partnerségben; és a Google Zene. A CustomElements egy olyan hub, ahol webes összetevőkkel épített egyéni elemek találhatók. Használja a Papír elemet a lista tárolásához és építéséhez. Ez egy kényelmes útvonalat is biztosít ezeknek az elemeknek a telepítéséhez a Bower és az NPM segítségével. Egy Chrome alkalmazás a kódszerkesztéshez, amely meglepően jól működik. Ez az alkalmazás a FAB gombot, a Papír menüt és a Papír párbeszédpaneleket használja a felhasználói felületen. Egy eszköz webalkalmazás létrehozására polimer elemekkel, húzás és csepp felület használatával. A tőzsdei jelentés és előrejelzés teljes egészében a Polymer elemekkel készült. Egy e-mail kliens alkalmazás a Gmail számára. Szépnek és folyékonynak tűnik, bár sajnos nem működik teljesen. A polimernek óriási hatóköre van, és eltarthat egy ideig, hogy megszokja az összes egyedi elemet, valamint az API-t. Mindazonáltal a webes összetevők és a polimerek minden bizonnyal befolyásolják a webes alkalmazások építésének módját. Maradjon a tömeg előtt, ha többet szeretne olvasni a webkomponensekről - az alábbi hivatkozások találhatók. olyan elemek, amelyek titkosan építik a felhasználói felület vezérlőit. 
felhasználónév amelyet a Twitter felhasználónevének megadására használnak.
Egyedi elemek a polimerben
1. Vaselemek
Vas- például előtte előtöltés, áttűnés, és helykitöltő attribútumok:
src mivel teljesen betöltődik, sima képterhelési hatás végrehajtása.2. Papírelemek
Papír
magasság emelje fel a papírt, így hozzátéve egy árnyékot a magasság megerősítéséhezélénk az animációt a Papírmagasság változásakor fogja alkalmazni.Lebegő művelet gomb (FAB)
3. A Google Web összetevői
szélességi kör és hosszúság helyét a térképen. Fészket is tudunk
4. Arany elemek
5. Egyéb elemek
Integráló polimer
bower init parancs a bower.json fájl kezdeményezésére a projektben, amelyet a projektfüggőségek rögzítésére használnak. Nyissa meg a bower.json fájlt, és adja hozzá a következő sorokat. "függőségek": "polimer": "polimer / polimer # ^ 1.0.0", "google webkomponensek": "GoogleWebComponents / google-web-összetevők # ^ 1.0.0", "vaselemek": " PolymerElements / iron-elements # ^ 1.0.0 "," papírelemek ":" PolymerElements / paper-elements # ^ 1.0.0 "," gold-elements ":" PolymerElements / gold-elements # ^ 1.0.0 "
bower install parancsot a listában található függőségek telepítéséhez.
Vitrinek
Google
Egyedi elemek
Chrome Dev Editor
Polimer tervező
Napi készletek előrejelzése
Polymer Mail
Végső gondolatok
Hasznos hivatkozások
