Polymer.js: przyszłość tworzenia aplikacji internetowych?

Około rok temu, w maju 2013 r., Google uruchomił Polymer.js.

Tak więc jesteśmy, rok później. A pytanie brzmi: czy jest już gotowy na prime time? Czy jest jeszcze możliwe stworzenie aplikacji gotowej do produkcji przy użyciu technik tworzenia stron internetowych Polymer?

Aby odpowiedzieć na to pytanie, zabrałem Polymer na jazdę próbną, aby stworzyć aplikację internetową i zobaczyć, jak dobrze będzie się zachowywać. Ten artykuł dotyczy tego doświadczenia i tego, czego nauczyłem się w trakcie.

Polymer.js: koncepcja

Zanim przejdziemy do naszego samouczka Polymer, najpierw zdefiniujmy Polymer.js, nie pod kątem tego, za co się podaje, ale tego, czym w rzeczywistości jest.

Kiedy zaczynasz sprawdzać Polymer, nie możesz powstrzymać się od natychmiastowego zaintrygowania jego samozwańczym unikalnym światopoglądem. Polymer rzekomo przyjmuje coś w rodzaju podejścia z powrotem do natury, które „umieszcza elementy z powrotem w centrum rozwoju sieci”. Dzięki Polymer.js możesz tworzyć własne elementy HTML i komponować je w kompletne, złożone aplikacje internetowe, które są skalowalne i łatwe w utrzymaniu. Wszystko sprowadza się do tworzenia nowych (tj. niestandardowych) elementów, które można następnie ponownie wykorzystać na stronach HTML w sposób deklaratywny, bez konieczności znajomości lub zrozumienia ich wewnętrznych elementów.

W końcu elementy są budulcem sieci. W związku z tym, weltanschauung firmy Polymer polega na tym, że tworzenie stron internetowych powinno zasadniczo opierać się na rozszerzeniu istniejącego paradygmatu elementów w celu tworzenia potężniejszych komponentów sieciowych, a nie na zastępowaniu znaczników „brązami skryptu” (by użyć ich słów). Innymi słowy, Polymer wierzy w wykorzystanie „natywnych” technologii przeglądarki, zamiast polegać na coraz bardziej złożonym labiryncie niestandardowych bibliotek JavaScript (jQuery i in.). Rzeczywiście intrygujący pomysł.

OK, więc taka jest teoria. Przyjrzyjmy się teraz rzeczywistości.

Tworzenie sieci polimerowych: rzeczywistość

Podczas gdy filozoficzne podejście Polymer z pewnością ma swoje zalety, jest to niestety pomysł, który (przynajmniej w pewnym stopniu) wyprzedza swoje czasy.

Polymer.js nakłada na przeglądarkę spory zestaw wymagań, opierając się na wielu technologiach, które wciąż są w trakcie standaryzacji (przez W3C) i nie są jeszcze obecne w dzisiejszych przeglądarkach. Przykłady obejmują cień dom, elementy szablonu, elementy niestandardowe, importy HTML, obserwatorzy mutacji, widoki oparte na modelu, zdarzenia wskaźnika i animacje internetowe. To wspaniałe technologie, ale przynajmniej na razie, które nie są jeszcze dostępne w nowoczesnych przeglądarkach.

Strategia Polymer polega na tym, aby deweloperzy front-end wykorzystywali te wiodące, wciąż przyszłe technologie oparte na przeglądarkach, które są obecnie w trakcie standaryzacji (przez W3C), gdy tylko staną się dostępne. W międzyczasie, aby wypełnić lukę, Polymer sugeruje użycie wypełniaczy (kod JavaScript do pobrania, który zapewnia funkcje, które nie są jeszcze wbudowane w dzisiejsze przeglądarki). Zalecane wypełnienia są zaprojektowane w taki sposób, aby (przynajmniej teoretycznie) można je było bezproblemowo zastąpić, gdy tylko natywne wersje tych funkcji w przeglądarce staną się dostępne.

Ok dobrze. Ale pozwól, że wyjaśnię to wprost. Przynajmniej na razie będziemy używać bibliotek JavaScript (tj. wypełniaczy), aby uniknąć korzystania z bibliotek JavaScript? Cóż, to jest „fascynujące”.

Najważniejsze jest to, że jesteśmy w stanie zawieszenia z Polymerem, ponieważ ostatecznie opiera się na (a może dokładniej, przybliżając) technologiach przeglądarek, które jeszcze nie istnieją. W związku z tym Polymer.js wydaje się dziś bardziej przypominać studium tego, jak w przyszłości można budować aplikacje zorientowane na elementy (tj. kiedy wszystkie niezbędne funkcje zostaną zaimplementowane w głównych przeglądarkach, a wypełniacze nie będą już potrzebne). Ale przynajmniej w chwili obecnej Polymer wydaje się bardziej intrygującą koncepcją niż rzeczywistą opcją tworzenia solidnych aplikacji zmieniających swój pogląd na świat tu i teraz, co utrudnia pisanie (lub znajdowanie) samouczka Polymer na zewnątrz dokumentacji Google.

Architektura polimerowa

Teraz przejdźmy do naszego przewodnika. Polymer.js jest architektonicznie podzielony na cztery warstwy:

Natywna: potrzebne funkcje są obecnie dostępne natywnie we wszystkich głównych przeglądarkach. Podstawa: wypełniacze, które implementują potrzebne funkcje przeglądarki, które nie są jeszcze dostępne natywnie w samych przeglądarkach. (Zamiarem jest, aby ta warstwa z czasem zniknęła, ponieważ udostępniane przez nią możliwości stają się dostępne natywnie w przeglądarce). Rdzeń: Niezbędna infrastruktura dla elementów Polymer do wykorzystania możliwości zapewnianych przez warstwy Natywne i Podstawowe. Elementy: Podstawowy zestaw elementów, który ma służyć jako bloki konstrukcyjne, które mogą pomóc w tworzeniu aplikacji. Zawiera elementy, które zapewniają: Podstawowe funkcje, takie jak ajax, animacja, elastyczny układ i gesty. Hermetyzacja skomplikowanych interfejsów API przeglądarki i układów CSS. Renderery komponentów interfejsu użytkownika, takie jak akordeony, karty i paski boczne.

Tworzenie aplikacji polimerowej

Aby rozpocząć, istnieje kilka artykułów i samouczków, które pomagają wprowadzić Cię w Polymer, jego koncepcje i strukturę. Ale jeśli jesteś podobny do mnie, po przejściu przez nie i przygotowaniu do tworzenia aplikacji szybko zdajesz sobie sprawę, że naprawdę nie jesteś pewien, od czego zacząć ani jak ją stworzyć. Ponieważ przeszedłem już przez ten proces i rozgryzłem go, oto kilka wskazówek…

Tworzenie stron polimerowych polega na tworzeniu elementów i tylko na tworzeniu elementów. Tak więc, zgodnie ze światopoglądem Polymera, nasza aplikacja będzie… nowym elementem. Nic więcej i nic mniej. Och OK, rozumiem. Więc od tego zaczynamy.

W naszym przykładzie projektu Polymer wymienię element najwyższego poziomu aplikacji , ponieważ niestandardowe nazwy elementów (niezależnie od tego, jakiego frameworka używasz do ich tworzenia) muszą zawierać myślnik (np. tagi x, elementy polimerowe itp.).

Następny krok wymaga jednak nieco więcej przemyślenia. Musimy zdecydować, w jaki sposób będziemy komponować naszą aplikację. Prostym podejściem jest po prostu próba identyfikacji, z perspektywy wizualnej, komponentów w naszej aplikacji, a następnie próba stworzenia ich jako elementów niestandardowych w Polymer.

Na przykład wyobraź sobie, że mamy aplikację z następującymi ekranami:

Możemy stwierdzić, że górny pasek i menu paska bocznego nie ulegną zmianie, a rzeczywista „zawartość” aplikacji może załadować różne „widoki”.

W takim przypadku jednym rozsądnym podejściem byłoby stworzenie dla naszej aplikacji, a wewnątrz tego elementu moglibyśmy użyć niektórych elementów interfejsu użytkownika polimeru, aby utworzyć górny pasek i menu paska bocznego.

Następnie możemy utworzyć nasze dwa główne widoki, które nazwiemy ListView i SingleView, które zostaną załadowane do obszaru „treści”. Dla elementów w ListView możemy utworzyć ItemView.

W ten sposób uzyskasz strukturę podobną do tej:

Dobre wieści

Teraz, gdy mamy już naszą przykładową aplikację Polymer, możemy wstawić ją na dowolną stronę internetową, po prostu importując nasz „toptal-app.html” i dodając tag bo przecież nasza aplikacja to tylko element. To super.

W rzeczywistości na tym polega siła i piękno paradygmatu polimerów. Elementy niestandardowe, które tworzysz dla swojej aplikacji (w tym element najwyższego poziomu dla całej aplikacji) są traktowane jak każdy inny element na stronie internetowej. Dlatego możesz uzyskać dostęp do ich właściwości i metod z dowolnego innego kodu JavaScript lub biblioteki (np. Backbone.js, Angular.js itp.). Możesz nawet użyć tych bibliotek do tworzenia własnych nowych elementów.

Co więcej, twoje niestandardowe komponenty są kompatybilne z innymi niestandardowymi bibliotekami elementów (takimi jak X-Tag Mozilli). Nie ma więc znaczenia, czego używasz do tworzenia własnego niestandardowego elementu, jest on kompatybilny z Polymer i każdą inną technologią przeglądarki.

Nic więc dziwnego, że już zaczęliśmy dostrzegać pojawienie się społeczności twórców elementów, którzy udostępniają i udostępniają swoje nowo utworzone elementy na forach, takich jak witryna Elementów niestandardowych. Możesz tam iść i pobrać dowolny komponent, którego potrzebujesz i po prostu użyć go w swojej aplikacji.

Z drugiej strony…

Polimer jest wciąż na tyle nową technologią, że programiści, zwłaszcza początkujący programiści aplikacji, prawdopodobnie uznają go za nieco kruchy, z wieloma niezbyt trudnymi do znalezienia ostrymi krawędziami.

Oto próbka:

• Brak dokumentacji i wytycznych.
  • Nie wszystkie elementy interfejsu użytkownika i elementy spoza interfejsu użytkownika Polymer.js są udokumentowane. Czasami jedyną „wskazówką” jak ich używać jest kod demo. W niektórych przypadkach konieczne jest nawet odniesienie się do kodu źródłowego elementu polimerowego, aby lepiej zrozumieć, jak działa i może/powinien być używany.
  • Nie jest do końca jasne, jak organizować większe aplikacje. W szczególności, jak masz przekazywać pojedyncze obiekty między elementami? Którą strategię powinieneś zastosować, aby przetestować swoje niestandardowe elementy? Wytyczne dotyczące tego typu problemów w tym momencie są w najlepszym razie skąpe.

• Błędy zależności i wersja-itis. Nawet jeśli pobierzesz elementy Polymer.js zgodnie z zaleceniami, możesz napotkać błąd zależności, wskazujący na różne zależności wersji w tym samym elemencie. Chociaż rozumie się, że elementy polimerowe są obecnie intensywnie rozwijane, tego rodzaju problemy mogą sprawić, że tworzenie będzie dość trudne, podważając zaufanie i zainteresowanie deweloperów.

• Problemy na platformach mobilnych. Wydajność Polymer.js na platformach mobilnych często może być frustrująca lub problematyczna.
  • Pobieranie całej biblioteki i wypełniaczy (bez gzipowania) jest powolne i musisz pobrać każdy element polimerowy, którego zamierzasz użyć.
  • Przetwarzanie wypełnień, bibliotek i elementów niestandardowych wydaje się być kosztownym zadaniem na platformach mobilnych. Nawet po zakończeniu pobierania często przez kilka sekund ekran jest pusty.
  • Zwłaszcza w przypadku bardziej złożonych funkcji (takich jak przeciąganie i upuszczanie lub renderowanie do kanwy) może się okazać, że funkcja, która działa dobrze na komputerze stacjonarnym, po prostu nie działa poprawnie lub nie jest jeszcze obsługiwana na platformie mobilnej. W moim konkretnym przypadku jedną z takich frustracji, z jaką się spotkałem, było renderowanie na płótno na iOS.
• Nieodpowiednie lub mylące raportowanie błędów. Czasami, gdy błędnie wpiszesz nazwę atrybutu lub po prostu zepsujesz coś związanego z samą warstwą rdzenia, otrzymasz dziwny komunikat o błędzie na konsoli z dwoma stosami wywołań, które musisz zbadać, aby spróbować określić, gdzie jest problem. Czasami jest to łatwe do rozwiązania, ale czasami trzeba wypróbować zupełnie inną strategię, aby uniknąć błędu, ponieważ nie można wyśledzić jego źródła.

Wniosek

Polimer to intrygująca technologia, ale niewątpliwie jest jeszcze w powijakach. W związku z tym nie jest jeszcze dobrze przystosowany do tworzenia dużych, gotowych do produkcji aplikacji na poziomie przedsiębiorstwa. Ponadto nie ma wielu przewodników ani samouczków dotyczących tworzenia stron internetowych Polymer.js.

Jeśli chodzi o to, czy podejście skoncentrowane na JavaScript czy DOM jest naprawdę zasadniczo lepsze, jury nadal nie ma. Polymer przedstawia przekonujące argumenty, ale kontrargumenty istnieją.

Być może przede wszystkim Polymer wymaga dość znacznego poziomu wiedzy w zakresie korzystania z technologii przeglądarek, takich jak DOM. Wracasz na wiele sposobów do czasów sprzed jQuery, ucząc się API DOM do wykonywania prostych zadań, takich jak dodawanie lub usuwanie klasy CSS z elementu. To z pewnością sprawia, że ​​czujesz, przynajmniej na pewnym poziomie, jakbyś robił krok do tyłu, a nie do przodu.

Ale to powiedziawszy, wydaje się prawdopodobne, że niestandardowe elementy będą w przyszłości ważną częścią tworzenia stron internetowych, więc zagłębienie się raczej wcześniej niż później byłoby prawdopodobnie rozsądnym dla dzisiejszego twórcy stron internetowych. A jeśli nigdy wcześniej nie próbowałeś tworzyć własnych elementów niestandardowych, Polymer (i ten samouczek) jest prawdopodobnie rozsądnym miejscem do rozpoczęcia.