Google Polymer - kako će promijeniti način na koji su web aplikacije izgrađene

i elemenata koji u tajnosti stvaraju kontrole korisničkog sučelja.

Danas, s web-komponentama, možemo imenovati i vlastite elemente. Možemo izgraditi element poput, ugraditi Twitter feed ili (možda) da biste ugradili grafikon.

Nadalje, ovi prilagođeni elementi mogu imati i nekoliko prihvaćenih prilagođenih atributa. U odnosu na element, postavljate atribut koji se zove Korisničko ime koji će se koristiti za određivanje Twitter korisničkog imena.

Prilagođeni elementi u polimeru

Polimer dolazi s hrpom elemenata koji zaslužuju (gotovo) svaku potrebu za web aplikacijom. Google dijeli ove elemente u grupe: željezni elementi, papirni elementi, Googleove web-komponente, zlatni elementi, neonski elementi, platinasti elementi i molekule.

1. Željezni elementi

Iron Elements je skup osnovnih elemenata. Ovi osnovni elementi su ono što obično koristimo izgraditi web stranicu kao što su ulaz, oblik i slika. Razlika je u tome što Polymer dodaje neke dodatne moći tim elementima.

Svi elementi u ovoj skupini su željezo- na primjer , koja se koristi za prikaz slike. element je opremljen s nekim dodatnim atributima koje ne možemo primijeniti u redovitim element. Možemo, na primjer, dodati preload, uvenuti, i rezerviranog mjesta atributa:

Gornji primjer će najprije prikazati rezervirano mjesto slike, a zatim izblijediti u stvarnu sliku u src dok je potpuno napunjen, obavljanje glatkog učinka učitavanja slike.

2. Elementi papira

Elementi papira je skupina elemenata dizajna materijala. Dizajn materijala je jezik Googleovog dizajna kako bi korisničko sučelje i iskustvo na svim Googleovim platformama i web-aplikacije i aplikacije za Android bile vizualno konzistentnije. Neki elementi koji su jedinstveni za Materijalni dizajn su papir i plutajući gumb za rad (FAB).

Papir

Papir Google je metafora za medij koji je temelj sadržaja. Za dodavanje papira s Polymerom koristimo element. Ovaj element ima 2 atributa:

• visina da biste podigli papir, dodajući sjenu kako bi ojačala visinu
• animirani će primijeniti animaciju kao promjenu visine papira.

Plutajući gumb za rad (FAB)

Plutajući gumb djelovanja (FAB) je kružni gumb s ikonom koja lebdi na zaslonu, obično u boji koja se ističe. Google predlaže da ovaj gumb nosi funkciju koja se često pristupa. Evo primjera:

Sljedeći isječak koda dodaje papirni materijal sa slikom i FAB-om.

Imat ćemo sljedeći rezultat:

Imamo fotografiju s a “srce” gumb koji lebdi nad njim. Kliknite na Like Like photo, i gumb daje efekt mreškanja koji potvrđuje klik.

• Pogledajte Demo papira

3. Googleove web-komponente

Googleove web-komponente su posebni elementi koji se nose s Google API-jem i uslugama kao što su Google Karte, Youtube, kao i Google Feed, da navedemo samo neke. Elementi u ovoj skupini učiniti interakciju s Google uslugama samo nekoliko redaka.

Slijedi primjer za prikazivanje Google karte pomoću element.

  Ovo je Googleplex  

Kao što možete gore, element uzima širina i dužina da biste odredili lokaciju na karti. Možemo također gnijezditi da biste prikazali oznaku karte te lokacije i tekst koji će se pojaviti nakon klika na oznaku.

• Pogledajte Demo karte

Želite li prikazati Youtube videozapis? možete koristiti element.

Slično tome, prilagođavamo izlaz kroz atribute.

• Pogledajte demo YouTube

4. Zlatni elementi

Zlatni elementi su elementi dizajnirani posebno za aplikacije e-trgovine. Ovdje ćete pronaći element za prikaz kreditne kartice, e-pošte, telefona i ZIP ulaza koji su svi opremljeni validacija formata kako bi se osigurao ispravan unos podataka i sigurnost. Evo jednog primjera za dodavanje unosa Visa kreditne kartice.

5. Ostali elementi

Ostali elementi uključuju Neonske elemente za animaciju i specijalne efekte, Platinum elemente za offline i push obavijesti i na kraju Molekule, omote za treće strane knjižnice.

Napomena urednika: U vrijeme pisanja ovog teksta, Neon Elements, Platinum Elements i Molecules još uvijek nisu dostupni.

Integracija polimera

Želite li koristiti Polymer u razvoju weba? Evo kako ga instalirati i integrirati u svoje web stranice. Pošto se većina polimernih elemenata oslanja jedni na druge, najbolji način za postavljanje polimera je Bower.

Bower je upravitelj projektnih ovisnosti koji olakšava instaliranje skripti ili stilova potrebnih za pokretanje projekta. Pogledajte naš stariji post o tome kako jednostavno instalirati, ažurirati i ukloniti web-knjižnice pomoću programa Bower.

Da biste integrirali Polymer, pokrenite Terminal, a zatim idite do direktorija projekta, pod pretpostavkom da ste ga stvorili. Onda trči bower init naredbu za pokretanje datoteke bower.json u vaš projekt koji će se koristiti za snimanje ovisnosti projekta. Otvorite bower.json i dodajte sljedeće retke.

 "Zavisnosti": "polimer": "Polimer / polimer # ^ 1.0.0", "google-web-komponente": "GoogleWebComponents / google-web-components # ^ 1.0.0", "elementi željeza": " PolymerElements / iron-elements # ^ 1.0.0 "," papirni elementi ":" PolymerElements / paper-elements # ^ 1.0.0 "," zlatni elementi ":" PolymerElements / gold-elements # ^ 1.0.0 " 

Ova postavka pretpostavlja da ćemo koristiti sve elemente iz svake grupe. Možete ukloniti ono što vam nije potrebno s popisa ovisnosti. Kako su ovisnosti postavljene, pokrenite instalirati naredbu za instaliranje ovisnosti na popis.

Ovaj proces može potrajati jer uključuje prikupljanje velike količine datoteka iz spremišta. Kada završite, trebali biste ih pronaći spremljene u bower_components mapa.

Otvorite HTML datoteku u kojoj želite koristiti komponente Polymer. Unutar glave dokumenta, povezati WebComponents.js koje je polyfill za preglednike koji još ne podržavaju WebComponents i uvozite datoteke komponenti koristeći HTML uvoz.

Evo primjera:

Ovaj će nam postav omogućiti upotrebu , , elementi.

vitrine

Evo nekih web-aplikacija koje već koriste Google Polymer.

Google

Google je koristio Google Polymer na web-stranici Google IO 2015; Google Fi, Googleova bežična usluga za prijevoznike i dobavljače u partnerstvu; i Google Glazba.

Prilagođeni elementi

CustomElements je središte gdje možete pronaći prilagođene elemente izgrađene s web-komponentama. Koristi element papira da sadrži i izgradi popis. Također pruža prikladan put za instaliranje ovih elemenata putem Bowera i NPM-a.

Chrome Dev Editor

Aplikacija Chrome za uređivanje koda koja iznenađujuće dobro funkcionira. Ova aplikacija koristi FAB gumb, izbornik Paper i elemente dijaloga Paper u korisničkom sučelju.

Dizajner polimera

Alat za izgradnju web aplikacije s polimernim elementima pomoću povuci-i-ispusti sučelja.

Dnevna prognoza zaliha

Izvješće o burzi i prognoza izgrađena u potpunosti s elementima Polymer.

Polimerna pošta

Aplikacija klijenta e-pošte za Gmail. Izgleda lijepo i fluidno, iako nažalost ne funkcionira u potpunosti.

Završne misli

Polimer ima ogroman opseg i može vam trebati neko vrijeme da se priviknete na sve prilagođene elemente kao i na njegov API. Ipak, web-komponente i polimeri zasigurno će utjecati na način na koji gradimo web-aplikacije. Ostanite ispred publike čitajući više o web-komponentama - reference se nalaze u nastavku.

• Prikaži demo
• Preuzimanje izvora

Korisne reference

• Stanje web-komponenti
• Detaljan uvod u prilagođene elemente
• Službeni blog Google Polimera