Share
Editori Notă: Acest articol a fost actualizat pentru a elimina referințele la componentele depreciate, în special, polimer-ajax, care a fost înlocuit de core-ajax. Mulțumită Rob Dodson, promotor de dezvoltatori la Google, pentru feedback.
Crearea de aplicații web moderne necesită o mulțime de instrumente. Aceasta include preprocesoare, cadre JavaScript, instrumente de testare și multe altele. Și, pe măsură ce complexitățile acestor aplicații cresc, la fel și dimensiunea instrumentelor și serviciilor necesare pentru a le gestiona. Nu ar fi minunat dacă unele lucruri s-ar simplifica?
Componentele web urmăresc să rezolve unele din aceste complexități oferind o modalitate unificată de a crea elemente noi care să cuprindă funcționalități bogate fără a fi nevoie de toate bibliotecile suplimentare. Componentele web sunt compuse din patru specificații diferite (elemente personalizate, șabloane, importuri Shadow DOM și HTML) care sunt elaborate în W3C.
Pentru a reduce decalajul și pentru a oferi dezvoltatorilor acces la această bogată funcționalitate acum, Google a creat biblioteca Polymer care servește ca un set de polyfills pentru a vă aduce astăzi promisiunea Web Components. Să ne aruncăm puțin mai adânc.
După cum am menționat, biblioteca Polymer este un set de polyfills care vă ajută să creați Web Components pe toate browserele moderne moderne. Acesta oferă cadrul pentru definirea, crearea și redarea elementelor personalizate complexe într-un mod simplist similar cu etichetele cu care ați crescut. Ceea ce vreau să spun prin aceasta este faptul că ajută la simplificarea modului în care folosim componente complexe prin:
Dar lucru important de reținut este faptul că cadrul propriu-zis este dezvoltat pe baza direcției specificațiilor individuale fiind verificate de W3C, oferind astfel o fundație care ar trebui să evolueze cu direcția principalului organism de standardizare.
Ce poate face această bibliotecă ne permite să creăm componente reutilizabile care funcționează ca elemente DOM autentice, ajutând în același timp la minimizarea dependenței noastre de JavaScript pentru a face manipularea DOM complexă pentru a face rezultate bogate în UI.
Iată un exemplu rapid de la site-ul Polymer. Spun că am vrut să fac un ceas de lucru pe pagina mea. Acest lucru ar implica în mod obișnuit un cod JavaScript greu de făcut, dar folosind Polymer, pot folosi pur și simplu următoarea sintaxă:
Acesta arata ca sintaxa tagului HTML cu care am crescut si este mult mai usor de implementat, citit si mentinut decat un cod JavaScript complex. Iar rezultatul final arată astfel:
Și deoarece este un element normal în DOM, puteți să-l stilizați și folosind CSS, astfel:
Accentsconagua
polimer-ui-ceas (lățime: 320 pixeli; înălțime: 320px; afișare: inline-block; fundal: url ("... /assets/glass.png") nu-repeta; dimensiunea fundalului: capac; margine: rpx (32, 32, 32, 0.3) solidă; Cu siguranță nu este cel mai frumos ceas, dar asta nu este punctul. Faptul este că puteți personaliza componenta după preferințele dvs. și apoi reutilizați-o printr-o sintaxă mai ușor de întreținut.
Există trei moduri de instalare și utilizare a polimerului:
Dintre cele trei, modul cel mai simplu și recomandat este utilizarea lui Bower, deoarece nu numai că este incredibil de ușor de făcut, dar Bower gestionează, de asemenea, orice dependență pe care Polymer le-ar putea avea. Aceasta înseamnă că, dacă alegeți să instalați un anumit element UI care are o dependență de altul, Bower se poate ocupa de asta pentru dvs..
Bower este instalat ca un modul Node Packaged, deci va trebui să aveți instalat Node.js. Din linia de comandă, introduceți următoarele:
npm install -g bower
Acest lucru ar trebui să trageți Bower din registrul npm și să îl instalați, astfel încât acesta să fie disponibil la nivel global. De acolo, instalările ulterioare Bower se bazează pe următoarea formă:
bower install
La un nivel minim, veți dori să instalați platforma și componentele de bază ale platformei Polymer, deoarece acestea oferă fundația pentru a vă crea și a executa elementele clientului.
bower install --save Polimer / platformă bower instalare - păstrați polimer / polimer
Puteți introduce această comandă prin tastarea:
bower install --save Polimer / platformă Polimer / polimer
Polimerul vine, de asemenea, cu un set bogat, predefinit de elemente pe care puteți începe să profitați de imediat. Ele sunt alcătuite din elemente UI și non-UI care oferă funcționalități cum ar fi:
Și asta e doar răzuirea suprafeței. Există o mulțime deja acolo cu codul sursă complet disponibil pentru a servi ca un instrument de învățare, precum și pentru a vă permite să personalizați capabilitățile la nevoile dvs..
Aveți posibilitatea să alegeți cum să instalați aceste componente. Puteți instala orice sau numai acelea pe care doriți să le utilizați. Pentru a instala totul, introduceți:
bower install Polimer / element de bază bower instalare Polimer / polimer-ui-elemente
Aceasta este abordarea chiuveta de bucătărie și când începeți să învățați Polymer, este probabil mai ușor doar să faceți acest lucru, pentru a vă ajuta să obțineți o senzație pentru ceea ce este disponibil.
Odată ce sunteți mai familiarizat cu cadrul, puteți selecta componentele individuale pe care doriți să le utilizați și le instalați astfel:
bower instalare Polimer / polimer-ui-acordeon
Aceasta este frumusețea utilizării Bower. Fiecare componentă vine cu un bower.json fișierul de configurare care conturează dependențele acestuia. Deci, dacă instalați acordeon componenta, uita la config, putem vedea că are dependențe de principalele polimer precum și selector și rabatabil componente.
"nume": "polimer-ui-acordeon", "privat": adevărat, "dependențe": "polimer": " # 0.2.0 "," polymer-ui-collapsibil ":" Polimer / polimer-ui-collapsibil # 0.2.0 "," versiune ":" 0.2.0 "
Cheia esențială este că nu trebuie să-ți faci griji pentru asta, pentru că Bower reușește asta pentru tine. Acesta este motivul pentru care este instrumentul preferat pentru instalarea Polymer.
Instalarea prin Bower va crea un folder numit bower_components în dosarul proiectului, în care se află toate lucrurile de care are nevoie polimerul.
Site-ul Polymer furnizează o descriere a elementelor personalizate:
"Elementele personalizate reprezintă componentele principale ale aplicațiilor bazate pe polimeri. Creați aplicații prin asamblarea elementelor personalizate, fie ele furnizate de Polymer, cele pe care le creați sau elementele terță parte. "
Polimerul ne dă posibilitatea de a crea propriile elemente personalizate de la zero și chiar de a reutiliza alte elemente pentru a extinde cele personalizate. Aceasta se face prin crearea mai întâi a unui șablon al elementului personalizat. Pentru toate intențiile, acest șablon este o combinație de cod HTML, CSS și JavaScript și include funcționalitatea care va fi disponibilă atunci când utilizați elementul. Se bazează pe specificația HTML Șabloanelor WhatWG, care este menită să furnizeze suport nativ pentru template-urile de pe partea clientului.
Să ne uităm la acest exemplu simplu de șablon de polimer:
Lorem ipsum dolor este așezat în amonte, în funcție de timpul de aderare, de la locul de muncă temporar la locul de muncă și de la alte persoane. Ut enim ad minim veniam, quis exerciții de muncă ultima lucrătoare aliquip ex a commodo consequat. Duis aute irure dolor în republicarea în voluptate comandă esse cillum dolore eu fugiat nulla pariatur. Cu excepția cazului în care nu există un prozident, sunt în culpa qui officia deserted molit anim id est laborum.
Acest element vă permite să adăugați cu ușurință textul Lorem Ipsum în codul dvs. utilizând pur și simplu următorul tag:
Primul lucru care trebuie inclus este Polymer Core, care este principalul API care vă permite să definiți Elementele personalizate:
Următorul pas este definirea numelui noului element folosind Polymer's polimer element directivă:
În acest caz, mi-am denumit noul element lorem element. Numele este un atribut obligatoriu și trebuie să conțină o linie ("-").
De acolo folosim șablon directivă pentru a împacheta etichetele corpului principal și codul care va alcătui noul nostru element. Pentru acest exemplu simplu, am apucat textul Lorem Ipsum și l-am înfășurat cu etichete paragraf.
Asta e! Elementul personalizat este făcut și îl pot folosi acum.
Rețineți că această componentă va fi importată în alte pagini din aplicația dvs. web, care ar putea să le folosească. Acest lucru este posibil datorită implementării de către Polymer a specificației HTML Imports care vă permite să includeți și să reutilizați documente HTML în alte documente HTML.
În primul rând, trebuie să includeți platform.js care furnizează poliflul care mimeste API-urile native:
Apoi, trebuie să importați elementul personalizat în pagina noastră web:
Odată ce ați făcut acest lucru, elementul personalizat nou este acum disponibil, permițându-vă să faceți astfel:
Aveți, de asemenea, capacitatea de a modela pe deplin elementul:
Acesta este un exemplu destul de simplu. Să facem un pas mai departe.
Dacă vă aduceți aminte, am menționat cum puteți influența elementele existente pentru a vă îmbunătăți pe cea personalizată. Să aruncăm o privire la acest exemplu.
Să presupunem că am vrut să am un element care a ieșit la Reddit și a luat date de la unul din subrediturile. Aș putea profita de componenta Ajax existentă de Polymer prin includerea acestui element personalizat în felul următor:
Resp.data.public_description
Observați că importesc componenta Polymer Ajax și apoi o scot în șablonul meu. Acest lucru face acum ușor să fac referire la noul meu element care face apelul XHR să retragă datele JSON și să-l completeze în etichetele paragrafelor mele cu descrierea publică a subreditului:
Lucruri care te fac să mergi AWW! Ca puii. Și iepurași ... și așa mai departe ... Un loc pentru poze, clipuri video și povești cu adevărat drăguțe! "
Răspunsul este returnat, iar Polymer stabilește o legare a datelor în două direcții, care îmi permite să pot utiliza datele prin împachetarea în bretele duble cotite Resp.data.public_description.
Acest lucru este minunat, dar în majoritatea cazurilor, nu vom codifica cu greu un URL pentru o anumită resursă. Să ne extindem mai departe adăugând atribute elementului nostru personalizat. Acest lucru este incredibil de simplu. În primul rând, trebuie să actualizați polimer element directivă pentru a reflecta atributele pe care le doriți pentru elementul personalizat:
În acest caz, vreau să fiu în măsură să transmit un subredit la elementul meu și să-l trag înapoi pe baza datelor. Acum pot schimba apelul polimer-ajax asa:
Observați cum folosesc capacitățile de legare a datelor de la Polymer pentru a construi dinamic adresa URL bazată pe valoarea atributului Subreddit. Acum, pot să actualizez modul în care fac referire la elementul personalizat pentru a trece în subdreapta pe care o doresc:
Ultimul lucru pe care vreau să-l fac este să vă asigur că există o valoare implicită pentru atributul meu, astfel încât codul meu să nu explodeze. Fac acest lucru prin adăugarea următoarelor elemente în șablonul elementului meu:
Acest lucru asigură că voi avea întotdeauna o valoare implicită pentru atributul public al elementului meu. Iată cum arată codul final:
Resp.data.public_description
Există destul de mult mai multe lucruri pe care le puteți face, inclusiv adăugarea de agenți de procesare a apelurilor personalizate personalizați, gestionarea evenimentelor, configurarea observatorilor de mutații pentru a procesa modificările DOM și mult mai mult.
Componentele Web vor schimba modul în care construim aplicații web, iar Polymer ne aduce acest lucru astăzi. Aveți acum posibilitatea de a vă crea propriile componente personalizate și care pot fi întreținute, care pot fi adaptate nevoilor specifice ale aplicației dvs. Aceste componente pot fi împărțite ușor, permițând altor echipe sau comunității să împărtășească cu ușurință și să beneficieze de aceste blocuri încapsulate.
