Google Polymer - Cum se va schimba modul în care sunt construite aplicațiile Web
Împreună cu Google Foto, Google a reconstruit Polymer de la zero, adresându-se îmbunătățirii performanței și eficienței. Gândiți-vă la Polymer ca un Kit de Dezvoltare a Software-ului (SDK) pentru Web, unul care îl face dezvoltarea de aplicații web atât de mult, folosind un nou standard numit Web Components.
Componentele Web ne permit creați elemente personalizate și etichete pentru site-urile noastre. În acest articol vom analiza modul în care elementele personalizate din Google Polymer pot ajuta la dezvoltarea aplicațiilor web. În plus, vom analiza și câteva demo-uri despre modul în care pot fi puse la dispoziție aceste elemente personalizate.
Despre Componentele Web
Cea mai bună modalitate de a înțelege modul în care funcționează Web Components este analizarea elementelor standard actuale, cum ar fi . Când adăugăm împreună cu sursele URL ale audio-ului, browserele web vor face acest element ca un player audio cu butonul de redare și pauză, butonul de timp, precum și cursorul de volum. Te-ai intrebat vreodata cum sunt construite si stilizate controalele playerului?
Playerul de control UI este ascuns sub Shadow Roots, de asemenea cunoscut sub numele de Umbra DOM. Pentru a vizualiza Shadow DOM, lansați Chrome DevTools > faceți clic pe zimț icon> selectați Afișați umbra DOM de la agentul de utilizator opțiune.
În următoarea captura de ecran, puteți găsi un teanc de Astăzi, cu Web Components, putem numi și ele propriile noastre elemente. Putem construi un element de genul, Mai mult, aceste elemente personalizate pot avea și câteva atribute personalizate acceptate. În ceea ce privește Polimerul vine cu o grămadă de elemente care suportă (aproape) fiecare nevoie de aplicații web. Google divizează aceste elemente în grupuri: Elemente de fier, Elemente de hârtie, Componente Google Web, Elemente de aur, Elemente Neon, Elemente Platină și Molecule. Elementele de fier sunt o colecție de elemente de bază. Aceste elemente de bază sunt cele pe care le folosim în mod obișnuit construi o pagină web cum ar fi o intrare, o formă și o imagine. Diferența este că Polymer adaugă unele puteri suplimentare acestor elemente. Toate elementele din acest grup sunt Exemplul de mai sus va arăta mai întâi substituentul de imagine și apoi va dispărea în imaginea reală din Elemente de hârtie este un grup de elemente de design material. Designul materialelor este limbajul de design Google pentru a face interfața utilizatorilor și experiența pe platformele Google, atât aplicațiile Web cât și aplicațiile Android mai vizibile. Unele elemente care sunt unice pentru Designul de Material sunt Paper and Floating Action Button (FAB). Hârtie este metafora Google pentru mediul care stă la baza conținutului. Pentru a adăuga o hârtie cu Polymer, folosim Butonul de acționare plutitoare (FAB) este un buton circular cu o pictogramă care plutește pe ecran, de obicei cu o culoare în stand-out. Google sugerează că acest buton poartă o funcție frecvent accesată. Iată un exemplu: Următorul fragment de cod adaugă un material de hârtie cu o imagine și un FAB. Vom avea următorul rezultat: Avem o fotografie cu “inimă” buton plutitor pe partea de sus a acesteia. Faceți clic pe acesta pentru a vă place fotografia, iar butonul declanșează un efect de inflexiune pentru a confirma clicul. Componentele Google Web Components sunt elemente speciale care se confruntă cu API-urile și serviciile Google, cum ar fi Google Maps, Youtube, precum și Google Feed, pentru a numi câteva. Elemente din acest grup interacționați cu serviciile Google la doar câteva linii distanță. Următorul este un exemplu pentru a afișa o hartă Google utilizând După cum puteți mai sus, Doriți să afișați un videoclip YouTube? aveți posibilitatea să utilizați În mod similar, personalizăm ieșirea prin atribute. Elementele de aur sunt elemente concepute special pentru aplicațiile de comerț electronic. Aici veți găsi un element pentru a afișa cartea de credit, e-mail, telefon și intrare ZIP pe care toate au fost echipate formatul de validare pentru a asigura introducerea și securitatea corectă a datelor. Iată un exemplu pentru a adăuga introducerea cărții de credit Visa. Elementele rămase includ elemente de neon pentru animație și efecte speciale, elemente Platinum pentru notificări offline și push și, în cele din urmă, molecule, împachetări pentru biblioteci terțe. Nota editorului: La momentul acestei scrieri, elementele neonului, elementele platinei și moleculele nu sunt încă disponibile. Doriți să utilizați Polymer în dezvoltarea web? Iată cum se instalează și se integrează în paginile dvs. Web. Deoarece cele mai multe elemente Polimer se bazează pe unul pe altul, cel mai bun mod de a instala Polymer este prin Bower. Bower este un manager de dependențe de proiecte, care facilitează instalarea de scripturi sau stiluri necesare pentru a rula proiectul. Consultați postarea noastră anterioară despre cum să instalați, actualizați și eliminați librăriile web cu Bower. Pentru a integra Polymer, lansați Terminal, apoi navigați la directorul de proiect, presupunând că ați creat unul. Atunci fugi Această configurație presupune că vom folosi toate elementele din fiecare grup. Puteți elimina ceea ce nu aveți nevoie de pe lista de dependență. Pe măsură ce sunt setate dependențele, executați Acest proces poate dura ceva timp, deoarece implică strângerea unei cantități uriașe de fișiere din depozite. După ce ați terminat, ar trebui să le găsiți salvate în bower_components pliant. Deschideți fișierul HTML pe care doriți să îl utilizați componentele Polymer. În capul documentului, link-ul WebComponents.js care este polyfill pentru browserele care încă nu acceptă WebComponents și importă fișierele componente utilizând Import HTML. Iată un exemplu: Această configurare ne va permite să folosim Iată câteva dintre aplicațiile web care utilizează deja Google Polymer. Google a folosit Google Polymer pe pagina web a Google IO 2015; Google Fi, serviciul wireless Google pentru parteneri și furnizori; și Muzică Google. CustomElements este un hub unde puteți găsi elemente personalizate construite cu Web Components. Folosește elementul Hârtie pentru a conține și a construi lista. De asemenea, oferă o cale convenabilă pentru instalarea acestor elemente prin Bower și NPM. O aplicație Chrome pentru editare de cod care funcționează surprinzător de bine. Această aplicație utilizează butoanele FAB, meniul Hârtie și elementele de dialog Hârtie din interfața cu utilizatorul. Un instrument pentru a construi aplicația web cu elemente Polymer folosind o interfață drag-and-drop. Un raport de bursă și o prognoză construită integral cu elemente Polymer. O aplicație client de e-mail pentru Gmail. Arată frumos și fluid, deși, trist, nu funcționează pe deplin. Polimerul are un domeniu enorm și ar putea să vă ducă ceva timp să vă obișnuiți cu toate elementele personalizate, precum și cu API-ul său. Cu toate acestea, Web Components și Polymer vor influența cu siguranță modul în care construim aplicații web. Stați în fața mulțimii citiți mai multe despre Web Components - referințele sunt găsite mai jos. elemente care construiesc controalele player-ului UI în secret. 
nume de utilizator care va fi folosit pentru a specifica numele de utilizator Twitter.
Elemente personalizate din polimer
1. Elemente de fier
fier- prefixate, de exemplu preîncărcare, decolorare, și înlocuitor atribute:
src deoarece este complet încărcat, efectuând un efect de încărcare a imaginii fără probleme.2. Elemente de hârtie
Hârtie
elevație pentru a ridica hârtia, adăugând astfel o umbră pentru a întări elevațiaanimat va aplica animația ca schimbare al hârtiei.Buton de acționare plutitoare (FAB)
3. Componentele Google Web
latitudine și longitudine pentru a specifica locația pe hartă. De asemenea, putem cuibui
4. Elemente de aur
5. Alte elemente
Integrarea polimerului
bower init comanda pentru a iniția fișierul bower.json în proiectul dvs. care va fi folosit pentru a înregistra dependențele proiectului. Deschideți bower.json și adăugați următoarele linii. "dependențe": "polymer": "Polimer / polimer # ^ 1.0.0", "google-web-components" Elemente de polimer / elemente de fier # ^ 1.0.0 "," elemente de hârtie ":" Polimeri / Elemente de hârtie # ^ 1.0.0 "," Elemente de aur ":" Elemente de polimer / Elemente de aur # 1.0.0 "
bower install comanda pentru a instala dependențele din listă.
vitrinelor
Google
Elemente personalizate
Chrome Dev Editor
Designer de polimeri
Prognoza zilnică de stoc
Polymer Mail
Gândurile finale
Referințe utile
