1.1 Für wen dieses Buch gedacht ist Einleitung Danksagung... 2

Größe: px

Ab Seite anzeigen:

Download "1.1 Für wen dieses Buch gedacht ist Einleitung Danksagung... 2"

Jasmin Weiss
vor 5 Jahren
Abrufe

1 D3kjd3Di38lk323nnm v 1 Vorwort Für wen dieses Buch gedacht ist Einleitung Danksagung Einführung in Web Components Von Dokumenten zu Anwendungen: neue Ansätze für neue Anforderungen im Web Web-Component-Standards im Überblick Template-Element Shadow DOM Custom-Elements HTML-Imports Templating Konventionelle Templating-Systeme Das Template-Element Performance von Templates CSS für Komponenten Isolierte Styles dank Shadow DOM Eingefügte Inhalte, Shadow und CSS Eigene Tags für Komponenten Bisherige Ansätze Custom Elements Das <content>-element Auf eingebettete Inhalte zugreifen mit getdistributednodes Auf Elemente innerhalb von <content> zugreifen Eigene Attribute und Methoden Existierende HTML-Elemente erweitern Komponenten wiederverwenden Anwendungsdokument und Komponentendokument Ein Grundgerüst für eigene Komponenten

2 vi 3 Entwickeln mit Web Components »Hallo Web Components!«Ein erstes Beispiel Der Anwendungsentwurf Die Anwendungslogik Aufbau und Gliederung der Benutzeroberfläche Aufgabenliste Notizen Implementierung Komponenten für unsere Anwendung Testen unserer Komponenten Das Testsystem Das todo-item Tests Implementierung Link-List Tab-Komponente Fazit Polymer-Grundlagen Aufbau einer Polymer-Anwendung Das Polymer-Framework Die Polymer-Polyfills: webcomponents.js Eigene Elemente, fremde Elemente und Pages Polymer-Elemente registrieren Hallo-Polymer Lifecycle-Callbacks Local DOM und Light DOM Properties als Element-API Attribute, Properties und Eigenschaften Namensgebung Datentypen Data-Binding Was ist Data-Binding? Bidirektionale Bindings Events in Polymer-Elementen Event-Behandlung in Polymer Dynamische Listener Eigene Events definieren

3 vii Gesten in Polymer Die track-geste Events und das Shadow DOM Event-Retargeting und Shady DOM Styling und Theming in Polymer-Elementen Besonderheiten von CSS für Shady DOM CSS-Custom-Properties und Mixins Styles dynamisch ändern und abrufen Einschränkungen des Polyfills Styles und Custom-CSS-Properties auf Dokumentenebene Styles wiederverwenden mit Style Modules Zusätzliche Bibliotheken, Polymer-Elemente und CSS Fortgeschrittene Techniken in Polymer Besonderheiten der Polyfills Eigenschaften des Polyfills-Custom-Elements Eigenschaften des Polyfills-HTML-Imports Eigenschaften des Polyfills Shadow DOM (»Shady DOM«) Shady DOM als Polyfill-Alternative Globale Einstellungen Shadow oder Shady DOM wählen Verzögerte Registrierung mit lazyregister Das Local DOM und die Polymer-DOM-API Light DOM und Distributed Children Effektive Kindelemente Observer im Local DOM Properties im Detail Die Datentypen Boolean, Object und Array Properties und Konstruktoren Properties vom Typ Object und Standardwerte Properties und Attribute synchronisieren Properties vor Änderung schützen Abgeleitete Properties Property-Änderungen behandeln mit Observern Zusammengesetzte Observer Komplexe Observer und komplexe zusammengesetzte Properties Data-Binding Property- und Attribut-Bindings im Detail HTML in Text-Bindings Uni- und bidirektionale Bindings

4 viii Fortgeschrittenes Data-Binding Computed Bindings Data-Binding für native Elemente Data-Binding-Helfer Elemente erweitern mit Behaviors Zweck und Umfang von Behaviors Ein Beispiel: JsonApiClientBehavior Reihenfolge von Behaviors und Callbacks Behaviors erweitern Namespacing Behaviors und einmalige Aktionen Testen von Polymer-Komponenten Die Grenzen von QUnit Der Web Components Tester WCT mit einem beliebigen Webserver WCT als Kommandozeilen-Werkzeug Tests mit WCT Assertions und Expectations Fixtures Asynchrone Tests Stubs Integrationstests Die iron-test-helpers MockInteractions Weitere Test-Helfer Mehrere Test-Suites Testen gegen Shady DOM und Shadow DOM Barrierefreiheit testen mit der a11y-suite Eine Polymer-Anwendung von A bis Z Anwendungsentwurf Aufbau der Anwendung Suchfunktion Filmdetails Favoriten Merkliste Archiv Projektstruktur Die Abhängigkeiten vorbereiten

5 ix 7.4 Das Anwendungsdokument Das Grundgerüst Struktur und Layout Das vorläufige Anwendungsdokument Routing und Pages Routing-Grundlagen: Fragment-URLs und History API Routing in Polymer mit dem App-Router Die Elemente für unsere Anwendung Die Datenschicht Die Ergebniskachel Die sortierbare Tabelle Die sortierbare Liste Die Pages für unsere Anwendung Suche Filmdetails Favoriten Merkliste Archiv Das vollständige Anwendungsdokument Die Anwendung für den Produktiveinsatz vorbereiten A Anhang Exkurs: Bower 243 A.1 Was ist Bower? A.2 Warum Bower? A.3 Bower installieren A.4 Bower nutzen A.5 Abhängigkeiten versionieren A.6 Eigene Bower-Module bereitstellen Schlusswort 253 Index 255

Ähnliche Dokumente

WebComponents. Bausteine des modernen Web

WebComponents. Bausteine des modernen Web WebComponents Bausteine des modernen Web Thomas Kruse Entwickler, Trainer, Berater www.trion.de @everflux Java User Group Münster Frontend Freunde Münster Karsten Sitterberg Entwickler, Trainer, Berater