Web Components zmienią wszystko, co wiesz o tworzeniu aplikacji internetowych. Po raz pierwszy w internecie będą dostępne interfejsy API na niskim poziomie, które pozwolą nam nie tylko tworzyć własne tagi HTML, ale też otaczać logikę i CSS. Koniec z globalnymi arkuszami stylów i schematycznym kodem. To nowy, lepszy świat, w którym wszystko jest elementem.
W moim wystąpieniu na konferencji DotJS omawiam możliwości komponentów sieciowych i sposób ich tworzenia za pomocą nowoczesnych narzędzi. Pokażę Ci Yeoman, czyli zestaw narzędzi do uproszczenia tworzenia aplikacji internetowych za pomocą Polymer, czyli biblioteki polyfillów i elementów ułatwiających tworzenie aplikacji z użyciem komponentów sieciowych w nowoczesnych przeglądarkach.
Tworzenie elementów niestandardowych i instalowanie elementów utworzonych przez innych
Z tej prezentacji dowiesz się:
- Informacje o 4 specyfikacjach, które składają się na Web Components: Custom Elements, Templates, Shadow DOM i HTML Imports.
- Jak definiować własne elementy niestandardowe i instalować elementy utworzone przez innych za pomocą Bower
- Poświęcaj mniej czasu na pisanie kodu JavaScript, a więcej na tworzenie stron
- Użyj nowoczesnych narzędzi do tworzenia front-endu (Yeoman) do stworzenia szablonu aplikacji z użyciem Polymera za pomocą generator-polymer.
- Jak Polymer zmienia tworzenie komponentów internetowych
Aby na przykład zainstalować polyfille komponentów internetowych i samą bibliotekę Polymer, możesz uruchomić ten pojedynczy wiersz kodu:
bower install --save Polymer/platform Polymer/polymer
Spowoduje to dodanie folderu bower_components i wymienionych wyżej pakietów. --save dodaje je do pliku bower.json aplikacji.
Jeśli później chcesz zainstalować element accordion z Polymeru, możesz wykonać te czynności:
bower install --save Polymer/polymer-ui-accordion
a potem zaimportuj go do aplikacji:
<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">
Aby zaoszczędzić czas, możesz użyć Yeoman do utworzenia szablonu nowej aplikacji Polymer ze wszystkimi niezbędnymi zależnościami, kodów szablonowych i narzędzi do optymalizacji aplikacji. Aby to zrobić, wpisz w jednym wierszu:
yo polymer
Przewodnik po bonusach
Nagranie bonusowe z 30-minutowym omówieniem aplikacji Jukebox w technologii Polymer.
Omówione w filmie dodatkowym:
- Co oznacza mantra „wszystko jest elementem”
- Jak za pomocą Bower zainstalować elementy i polyfille platformy Polymer
- Tworzenie szkieletu aplikacji Jukebox za pomocą generatora Yeoman i podgeneratorów
- Omówienie funkcji platformy za pomocą szablonu
- Jak przeportować aplikację Angular na platformę Polymer.
Do tworzenia szablonów nowych elementów Polymer używamy też podgeneratorów Yeoman. Przykładowo, aby utworzyć szablon elementu foo, uruchamiamy:
yo polymer:element foo
Pojawi się pytanie, czy element ma być importowany automatycznie, czy wymagany jest konstruktor i kilka innych preferencji.
Najnowsze źródła kodu aplikacji pokazanej w obu prezentacjach są teraz dostępne na GitHub. Przerobiłem go trochę, aby był bardziej uporządkowany i łatwiejszy do odczytania.
Podgląd aplikacji:
Więcej informacji
Podsumowując, Polymer to biblioteka JavaScriptu, która umożliwia korzystanie z komponentów internetowych w nowoczesnych przeglądarkach, dopóki nie zostaną one zaimplementowane natywnie. Nowoczesne narzędzia mogą usprawnić Twój proces pracy. Warto też wypróbować Yeoman i Bower podczas tworzenia własnych tagów.
Oto kilka innych artykułów na ten temat:
- Tworzenie aplikacji internetowych za pomocą Yeoman i Polymer
- Konkatenowanie komponentów internetowych za pomocą Vulcanize
- Chrome Dev Summit: deklaratywna, zakapsułkowana i wielokrotnie użyteczna biblioteka Polymer
- Automatyzacja procesu rozwoju
- Komponenty sieciowe – przyszłość tworzenia stron internetowych
- Tworzenie aplikacji za pomocą Yeoman Workflow