W ubiegłym roku zespół Polymer spędził wiele czasu na uczeniu programistów, jak tworzyć własne elementy. Doprowadziło to do szybkiego rozwoju ekosystemu, za sprawą których w dużej mierze bazują elementy Core i Papier Polymer oraz elementy klocków utworzone przez zespół Mozilla.
Gdy programiści zapoznają się z procesem tworzenia własnych elementów i zaczną myśleć o tworzeniu aplikacji, pojawia się szereg pytań:
- Jak uporządkować interfejs użytkownika aplikacji?
- Jak przejść przez różne stany?
- Jak poprawić skuteczność?
- Jak zapewnić obsługę offline?
W ramach wydarzenia Chrome Dev Summit staram się odpowiedzieć na te pytania, tworząc małą aplikację do obsługi kontaktów i analizując proces jej kompilacji. Oto co przyszło mi do głowy:
Struktura
Dzielenie aplikacji na modułowe elementy, które można łączyć i ponownie wykorzystywać, to centralny najemca komponentów sieciowych. Elementy Rdzeń* i papier-* Polymer ułatwiają rozpoczęcie pracy od małych elementów, takich jak pasek narzędzi na papierze czy przycisk papieru.
Dzięki możliwościom kompozycji połącz je z dowolną liczbą elementów, aby stworzyć rusztowanie dla aplikacji.
Po skonfigurowaniu ogólnego rusztowania możesz zastosować własne style CSS, aby przekształcić je w atrakcję unikalną dla Twojej marki. Komponenty pozwalają tworzyć różne środowiska przy jednoczesnym wykorzystaniu tych samych podstawowych elementów. Mając odpowiednią strukturę, możesz zacząć myśleć o treściach.
Jednym z elementów, który szczególnie dobrze sprawdza się w przypadku dużej ilości treści, jest core-list.
Element core-list może być połączony ze źródłem danych (czyli tablicą obiektów) i oznacza wystąpienie szablonu w przypadku każdego elementu w tablicy. Dzięki systemowi wiązań danych Polymer możesz szybko połączyć treści z materiałami w szablonie.
przejścia.
Po zaprojektowaniu i wdrożeniu różnych sekcji aplikacji kolejnym zadaniem jest określenie sposobu poruszania się między nimi.
Chociaż nadal jest elementem eksperymentalnym, core-animated-pages udostępnia wbudowany system animacji, który umożliwia przełączanie się między różnymi stanami w aplikacji.
Jednak animacje to tylko połowa łamigłówki – aplikacja musi połączyć te animacje z routerem, by odpowiednio zarządzać adresami URL.
W świecie komponentów sieciowych routing może mieć 2 rodzaje: imperatywny i deklaratywny. Połączenie metody core-animated-pages z dowolnym podejściem może być odpowiednie w zależności od potrzeb projektu.
Router imperatywny (np. Flatiron's Director) może nasłuchiwać pasującej trasy, a potem nakazać usłudze core-animated-pages zaktualizowanie wybranego elementu.
Jest to przydatne, jeśli musisz wykonać kilka czynności po dopasowaniu trasy, ale przed przeniesieniem kolejnej sekcji.
Z drugiej strony router deklaracyjny (taki jak router aplikacji) może połączyć routing i core-animated-pages w jeden element, co upraszcza zarządzanie nimi.
Jeśli potrzebujesz bardziej szczegółowej kontroli, możesz skorzystać z biblioteki takiej jak more-routing, którą można połączyć z funkcją core-animated-pages za pomocą powiązania danych. Być może oba te rozwiązania najlepiej się sprawdzą.
Występy
W miarę rozwoju aplikacji musisz zwracać uwagę na wąskie gardła wydajności, zwłaszcza te związane z siecią, ponieważ często są one najwolniejsze.
Zwiększenie wydajności jest wynikiem warunkowego wczytywania polyfill komponentów sieciowych.
Jeśli platforma ma już pełną obsługę, nie ma powodu ponosić takich kosztów. W każdej wersji nowego repozytorium webcomponents.js elementy polyfill również zostały podzielone na osobne pliki. Jest to przydatne, gdy chcesz warunkowo wczytywać podzbiór elementów polyfill.
<script>
if ('import' in document.createElement('link')) {
// HTML Imports are supported
} else {
document.write(
'<script src="bower_components/webcomponentsjs/HTMLImports.min.js"><\/script>'
);
}
</script>
Wykonanie wszystkich importów HTML przy użyciu takiego narzędzia jak Vulcanize może przynieść również znaczne korzyści sieciowe.
Narzędzie Vulkanize połączy zaimportowane dane w jeden pakiet, znacznie zmniejszając liczbę żądań HTTP wysyłanych przez Twoją aplikację.
Offline
Jednak samo stworzenie wydajnej aplikacji nie rozwiąże problemu użytkownika, który ma ograniczone połączenie internetowe lub jego brak. Inaczej mówiąc, jeśli aplikacja nie działa offline, nie jest to właściwie aplikacja mobilna. Obecnie można korzystać z dużej przesadnej pamięci podręcznej aplikacji do zapisywania zasobów w trybie offline, ale patrząc w przyszłości, oprogramowanie Service Worker powinno wkrótce znacznie ułatwić programowanie w trybie offline.
Jake Archibald opublikował niedawno wspaniałą książkę kucharską z wzorcami pracy service worker, ale chcę Ci szybko pomóc Ci w pracy:
Instalacja mechanizmu service worker jest bardzo prosta. Utwórz plik worker.js i zarejestruj go po uruchomieniu aplikacji.
Ważne jest, aby znaleźć worker.js w katalogu głównym aplikacji, ponieważ umożliwi to przechwytywanie żądań z dowolnej ścieżki w aplikacji.
W module obsługi instalacji instancji roboczej buforuję zasoby (w tym dane wykorzystywane przez aplikację).
Dzięki temu moja aplikacja może zapewnić użytkownikowi przynajmniej możliwość korzystania z niej w trybie offline.
Na przód!
Komponenty sieciowe to duży dodatek do platformy internetowej, a wciąż są na wczesnym etapie rozwoju. Wraz z pojawianiem się coraz większej liczby przeglądarek to my, społeczność programistów, należy do nas, społeczności programistów, określić sprawdzone metody tworzenia struktury aplikacji. Powyższe rozwiązania stanowią punkt wyjścia, ale musisz jeszcze o wiele więcej się dowiedzieć. Teraz czas na tworzenie lepszych aplikacji.