Polymer.js: Viitorul dezvoltării aplicațiilor web?

Acum aproximativ un an, în mai 2013, Google a lansat Polymer.js.

Așa că iată-ne, un an mai târziu. Și întrebarea este: este încă gata pentru prime time? Este încă posibil să se creeze o aplicație pregătită pentru producție folosind tehnici de dezvoltare web Polymer?

Pentru a răspunde la această întrebare, am scos Polymer pentru un test drive pentru a dezvolta o aplicație web și pentru a vedea cât de bine se va comporta. Acest articol este despre acea experiență și despre ceea ce am învățat în acest proces.

Polymer.js: Conceptul

Înainte de a intra în tutorialul nostru Polymer, să definim mai întâi Polymer.js, nu pentru ceea ce pretinde a fi, ci pentru ceea ce este de fapt.

Când începeți să verificați Polymer, nu puteți să nu fiți imediat intrigat de viziunea sa unică asupra lumii. Polimerul se pretinde ca adoptând un fel de abordare care revine la natură care „pune elementele înapoi în centrul dezvoltării web”. Cu Polymer.js, vă puteți crea propriile elemente HTML și le puteți compune în aplicații web complete, complexe, care sunt scalabile și ușor de întreținut. Totul este să creați elemente noi (adică, personalizate) care pot fi apoi reutilizate în paginile dvs. HTML într-un mod declarativ, fără a fi nevoie să cunoașteți sau să înțelegeți elementele interne ale acestora.

La urma urmei, elementele sunt elementele de bază ale rețelei. În consecință, weltanschauung Polymer este că dezvoltarea web ar trebui să se bazeze în mod fundamental pe extinderea paradigmei elementului existent pentru a construi componente web mai puternice, mai degrabă decât înlocuirea marcajului cu „gobs of script” (pentru a folosi cuvintele lor). Altfel spus, Polymer crede în folosirea tehnologiilor „native” ale browserului, în loc să se bazeze pe un labirint din ce în ce mai complex de biblioteci JavaScript personalizate (jQuery et. al.). Într-adevăr, o noțiune intrigantă.

OK, deci asta e teoria. Acum să aruncăm o privire asupra realității.

Dezvoltare Web cu polimeri: realitatea

În timp ce abordarea filozofică a lui Polymer are cu siguranță merite, este, din păcate, o idee care (cel puțin într-o oarecare măsură) este înaintea timpului său.

Polymer.js impune un set important de cerințe pentru browser, bazându-se pe o serie de tehnologii care sunt încă în proces de standardizare (de către W3C) și nu sunt încă prezente în browserele de astăzi. Exemplele includ shadow dom, elemente șablon, elemente personalizate, importuri HTML, observatori de mutații, vizualizări bazate pe model, evenimente pointer și animații web. Acestea sunt tehnologii minunate, dar cel puțin de acum, care nu au ajuns încă la browserele moderne.

Strategia Polymer este ca dezvoltatorii front-end să folosească aceste tehnologii de vârf, care urmează să apară, bazate pe browser, care sunt în prezent în proces de standardizare (de către W3C), pe măsură ce devin disponibile. Între timp, pentru a umple golul, Polymer sugerează utilizarea polyfills (cod JavaScript descărcabil care oferă caracteristici care nu sunt încă încorporate în browserele de astăzi). Polifillurile recomandate sunt proiectate în așa fel încât (cel puțin teoretic) să fie fără întreruperi pentru a fi înlocuite odată ce versiunile de browser native ale acestor capabilități devin disponibile.

OK bine. Dar lasă-mă să înțeleg asta. Cel puțin pentru moment, vom folosi biblioteci JavaScript (adică, polyfills) pentru a evita utilizarea bibliotecilor JavaScript? Ei bine, asta e „fascinant”.

Concluzia, atunci, este că suntem într-un fel de mod limbo cu Polymer, deoarece se bazează în cele din urmă pe (sau poate mai precis, aproximând) tehnologii de browser care nu există încă. În consecință, Polymer.js astăzi pare mai degrabă un studiu despre modul în care aplicațiile centrate pe elemente pot fi construite în viitor (adică, când toate caracteristicile necesare sunt implementate în browserele majore și nu mai sunt necesare polifillurile). Dar, cel puțin în prezent, Polymer pare mai degrabă un concept intrigant decât o opțiune reală pentru crearea de aplicații robuste care vă schimbă viziunea asupra lumii chiar aici și acum, ceea ce face scrierea (sau găsirea) unui tutorial Polymer dificilă în exterior. din documentația Google.

Arhitectura polimerilor

Acum, pe ghidul nostru. Polymer.js este împărțit arhitectural în patru straturi:

Nativ: funcțiile necesare în prezent sunt disponibile nativ în toate browserele majore. Fundație: Polyfills care implementează funcțiile necesare ale browserului care nu sunt încă disponibile nativ în browserele în sine. (Intenția este ca acest strat să dispară în timp, pe măsură ce capabilitățile pe care le oferă devin disponibile nativ în browser.). Core: Infrastructura necesară pentru elementele Polymer pentru a exploata capabilitățile oferite de straturile Native și Foundation. Elemente: Un set de elemente de bază, menite să servească drept blocuri de construcție care vă pot ajuta să vă creați aplicația. Include elemente care oferă: funcționalitate de bază, cum ar fi ajax, animație, aspect flexibil și gesturi. Încapsularea API-urilor complicate ale browserului și a aspectelor CSS. Rendere ale componentelor UI, cum ar fi acordeoane, carduri și bare laterale.

Crearea unei aplicații polimerice

Pentru a începe, există câteva articole și tutoriale care vă ajută să vă prezentați Polymer, conceptele și structura sa. Dar dacă sunteți ca mine, când le-ați parcurs și sunteți gata să vă construiți aplicația, vă dați seama rapid că nu sunteți foarte sigur de unde să începeți sau cum să o creați. Deoarece acum am trecut prin procesul și mi-am dat seama, iată câteva indicații...

Dezvoltarea web cu polimeri se referă la crearea de elemente și este doar despre crearea de elemente. Deci, în concordanță cu viziunea lumii Polymer, aplicația noastră va fi... un element nou. Nimic mai mult și nimic mai puțin. Ok, am înțeles. Deci de aici începem.

Pentru exemplul nostru de proiect Polymer, voi numi elementul de nivel superior al aplicației , deoarece numele elementelor personalizate (indiferent de cadrul pe care îl utilizați pentru a le crea) trebuie să includă o cratimă (de exemplu, etichete x, elemente polimerice etc.).

Următorul pas, totuși, necesită mai multă gândire. Trebuie să decidem cum vom compone aplicația noastră. O abordare ușoară este doar să încercăm să identificăm, din perspectivă vizuală, componentele din aplicația noastră și apoi să încercăm să le creăm ca elemente personalizate în Polymer.

Deci, de exemplu, imaginați-vă că avem o aplicație cu următoarele ecrane:

Putem identifica că bara de sus și meniul barei laterale nu se vor schimba, iar „conținutul” real al aplicației ar putea încărca „vizualizări” diferite.

Așa fiind, o abordare rezonabilă ar fi crearea element pentru aplicația noastră și, în interiorul acelui element, am putea folosi niște Elemente UI Polymer pentru a crea bara de sus și meniul barei laterale.

Apoi putem crea cele două vizualizări principale ale noastre, pe care le vom numi ListView și SingleView, pentru a fi încărcate în zona „conținut”. Pentru articolele din ListView, putem crea un ItemView.

Aceasta va produce apoi o structură de genul acesta:

Veștile bune

Acum că avem exemplul nostru de aplicație Polymer, o putem insera în orice pagină web doar importând „toptal-app.html” și adăugând eticheta. pentru că, la urma urmei, aplicația noastră este doar un element. Asta e tare.

De fapt, aici se află o mare parte din puterea și frumusețea paradigmei Polymer. Elementele personalizate pe care le creați pentru aplicația dvs. (inclusiv cea de nivel superior pentru întreaga aplicație) sunt tratate ca orice alt element dintr-o pagină web. Prin urmare, puteți accesa proprietățile și metodele acestora din orice alt cod sau bibliotecă JavaScript (de exemplu, Backbone.js, Angular.js etc.). Puteți chiar să utilizați acele biblioteci pentru a vă crea propriile elemente noi.

Mai mult, componentele dvs. personalizate sunt compatibile cu alte biblioteci de elemente personalizate (cum ar fi X-Tag de la Mozilla). Deci, nu contează ce folosiți pentru a vă crea propriul element personalizat, este compatibil cu Polymer și orice altă tehnologie de browser.

Prin urmare, nu este surprinzător că am început deja să vedem apariția unei comunități de Creatori de Elemente care își expun și împărtășesc elementele nou create în forumuri precum site-ul Elemente personalizate. Puteți merge acolo și luați orice componentă de care aveți nevoie și doar să o utilizați în aplicația dvs.

Pe de altă parte…

Polimerul este încă o tehnologie suficient de nouă încât dezvoltatorii, în special dezvoltatorii de aplicații începători, vor găsi probabil că este oarecum fragil, cu o serie de margini aspre, nu atât de greu de găsit.

Iată o mostră:

• Lipsa documentației și îndrumării.
  • Nu toate elementele Polymer.js UI și non-UI sunt documentate. Uneori, singurul „ghid” cu privire la modul de utilizare a acestora este codul demonstrativ. În unele cazuri, este chiar necesar să faceți referire la codul sursă al unui element polimer pentru a înțelege mai bine cum funcționează și cum poate/ar trebui să fie utilizat.
  • Nu este complet clar cum să organizăm aplicații mai mari. În special, cum ar trebui să treceți obiecte singleton între elemente? Ce strategie ar trebui să utilizați pentru a vă testa elementele personalizate? Îndrumările cu privire la aceste tipuri de probleme în acest moment sunt în cel mai bun caz puține.

• Erori de dependență și versiune-itis. Chiar și atunci când descărcați elemente Polymer.js așa cum este recomandat, s-ar putea să vă aflați cu o eroare de dependență, care indică diferite dependențe de versiuni în același element. Deși se înțelege că elementele polimerice sunt în prezent în curs de dezvoltare intensă, acest tip de probleme pot face dezvoltarea destul de dificilă, erodând încrederea și interesul dezvoltatorului.

• Probleme pe platformele mobile. Performanța Polymer.js pe platformele mobile poate fi adesea între frustrantă și problematică.
  • Descărcarea întregii biblioteci și a polifillurilor (fără gzip'ing) este lentă și trebuie să descărcați fiecare Element Polymer pe care intenționați să îl utilizați.
  • Procesarea polyfills, biblioteci și elemente personalizate pare a fi o sarcină costisitoare pe platformele mobile. Chiar și atunci când descărcarea este completă, deseori aveți încă un ecran gol pentru câteva secunde.
  • În special pentru funcționalități mai complexe (cum ar fi drag-and-drop sau randarea într-o pânză), este posibil să descoperiți că funcționalitatea care funcționează bine pe desktop pur și simplu nu funcționează corect sau nu este încă acceptată pe platforma mobilă. În cazul meu, o astfel de frustrare pe care am întâlnit-o a fost cu randarea într-o pânză pe iOS.
• Raportarea erorilor inadecvate sau confuze. Uneori, când scrieți greșit un nume de atribut sau pur și simplu rupeți ceva legat de stratul de bază în sine, primiți un mesaj de eroare ciudat pe consolă cu două stive de apeluri pe care trebuie să le investigați pentru a încerca să determinați unde este problema. Uneori este ușor să rezolvi acest lucru, dar uneori ajungi să fii nevoit să încerci o strategie complet diferită doar pentru a evita eroarea, deoarece nu poți găsi sursa acesteia.

Concluzie

Polimerul este o tehnologie interesantă, dar este incontestabil încă la început. Ca atare, încă nu este potrivit pentru dezvoltarea unei aplicații mari, la nivel de întreprindere, pregătite pentru producție. În plus, nu există multe ghiduri sau tutoriale disponibile specifice dezvoltării web Polymer.js.

În ceea ce privește dacă abordarea centrată pe JavaScript sau centrată pe DOM este cu adevărat mai bună, juriul este încă afară. Polimerul aduce unele argumente convingătoare, dar contraargumente există.

Poate cel mai remarcabil, Polymer necesită un nivel destul de semnificativ de expertiză în utilizarea tehnologiilor de browser precum DOM. În multe feluri, te întorci la zilele dinaintea jQuery, învățând API-ul DOM să faci sarcini simple, cum ar fi adăugarea sau eliminarea unei clase CSS dintr-un element. Acest lucru cu siguranță face să se simtă, cel puțin la un anumit nivel, ca și cum ai face un pas înapoi mai degrabă decât înainte.

Dar acestea fiind spuse, este probabil ca elementele personalizate să fie o parte importantă a dezvoltării web în viitor, astfel încât să se scufunde mai devreme decât mai târziu ar fi probabil prudent pentru dezvoltatorul web de astăzi. Și dacă nu ați încercat niciodată să vă creați propriile elemente personalizate înainte, Polymer (și acest tutorial) este probabil un loc bun pentru a începe.