Komponenty sieciowe zmienią wszystko, co wiesz na temat tworzenia witryn internetowych. Po raz pierwszy w sieci pojawią się interfejsy API niskiego poziomu, które pozwolą nam nie tylko tworzyć własne tagi HTML, ale też stosować logikę i elementy CSS. Koniec z globalnymi arkuszami stylów i schematem kodu! To nowy, wspaniały świat, w którym wszystko jest jednym z elementów.
W rozmowie z DotJS omówię możliwości komponentu Web Komponenty i przedstawiam, jak je tworzyć przy użyciu nowoczesnych narzędzi. Pokażę Ci Yeoman – narzędzie usprawniające tworzenie aplikacji internetowych z wykorzystaniem Polymera – biblioteki elementów polyfill i cukru, przeznaczonych do tworzenia aplikacji za pomocą komponentów sieciowych w nowoczesnych przeglądarkach.
Tworzenie elementów niestandardowych i instalowanie elementów utworzonych przez innych
Tematy poruszane w tym artykule:
- Informacje o 4 różnych specyfikacjach tworzących komponenty sieciowe: Elementy niestandardowe, Szablony, Shadow DOM i Importy HTML.
- Jak definiować własne elementy niestandardowe i instalować elementy utworzone przez innych za pomocą Bower
- Szybsze pisanie kodu JavaScript, a więcej czasu na tworzenie stron
- Użyj nowoczesnego narzędzia frontendu (Yeoman) do stworzenia rusztowania aplikacji przy użyciu technologii Polymer z elementami generator-polimer.
- Jak Polymer super zmienia tworzenie komponentów sieciowych.
Aby na przykład zainstalować kod polyfill Składnik sieciowy Polymer i samą bibliotekę, możesz uruchomić ten kod:
bower install --save Polymer/platform Polymer/polymer
Spowoduje to dodanie folderu bower_components i powyższych pakietów. --save doda je do pliku bower.json Twojej aplikacji.
Później, aby zainstalować akordeon Polymer, możesz uruchomić:
bower install --save Polymer/polymer-ui-accordion
a następnie zaimportuj go do aplikacji:
<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">
Aby zaoszczędzić czas, w Yooman możesz przygotować nową aplikację Polymer obejmującą wszystkie niezbędne zależności, gotowy kod i narzędzia do optymalizacji aplikacji.
yo polymer
Dodatkowy przewodnik
Nagrałam też dodatkowy 30-minutowy przewodnik po aplikacji Polymer Jukebox, który zaprezentowałem w rozmowie.
Omówione w filmie bonusowym:
- Co oznacza mantra „wszystko jest elementem”
- Jak używać Bower do instalowania elementów polymerowych i elementów platformy Polymer
- Wykorzystanie naszej aplikacji Jukebox z generatorem i podgeneratorami Yeoman
- Zapoznanie z funkcjami platformy przedstawionymi w formie stałej.
- Jak funkcjonalnie przeniosłem(-am) aplikację Angular do Polymer.
Do budowy nowych elementów polimerowych wykorzystujemy również podrzędne generatory Yeoman, np. do tworzenia schematu wewnętrznego dla elementu foo, który uruchamiamy:
yo polymer:element foo
Wyświetli się pytanie, czy element ma być importowany automatycznie, czy potrzebny jest konstruktor, a także inne ustawienia.
Najnowsze źródła dotyczące aplikacji prezentowanej w obu rozmowach są teraz dostępne na GitHub. Przerobiliśmy to trochę, żeby było bardziej uporządkowane i czytelniejsze.
Wersja testowa aplikacji:
Więcej informacji
Podsumowując, Polymer to biblioteka JavaScript, która pozwala korzystać z komponentów sieciowych w nowoczesnych przeglądarkach internetowych, gdy czekamy na ich natywne wdrożenie. Nowoczesne narzędzia mogą pomóc w usprawnieniu przepływu pracy. Może Ci się też spodobać aplikacja Yeoman i Bower podczas tworzenia własnych tagów.
Kilka innych artykułów na ten temat:
- Tworzenie aplikacji internetowych za pomocą Yeoman i Polymer
- Łączenie komponentów sieciowych za pomocą funkcji Wulkanize
- Chrome Dev Summit: deklaratywne, zamknięte komponenty z polimerem, komponenty wielokrotnego użytku
- Automatyzacja rozwoju w kontekście automatyzacji
- Web Komponenty: przyszłość tworzenia stron internetowych
- Tworzenie aplikacji zgodnie z przepływem pracy Yeoman