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ż osadzać logikę i CSS. Koniec z globalnymi arkuszami stylów i powtarzalnym kodem. To nowy, wspaniały ś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 użytkowników za pomocą Bower
- Spędzaj mniej czasu na pisanie kodu JavaScript, a więcej na tworzeniu 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ć Yeomana do stworzenia szablonu nowej aplikacji Polymer ze wszystkimi potrzebnymi 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.
W filmie dodatkowym omówiono:
- 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 zaimplementowanych 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. Zmieniliśmy go nieco, 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