Web Components mit Polymer

Web Components mit Polymer

by Martin Splitt
Released May 2017
Publisher(s): dpunkt
ISBN: 9783864903861

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Mit diesem Buch lernen Sie komponentenbasierteWebanwendungsentwickl​ung auf Basis von Web Components mittels deklarativer Elemente, die sich leicht zu Anwendungenzusammensetzen lassen. Dadurch erhalten Sie nicht nur Kenntnisse der zugrundeliegenden Web-Components-Technologien, sondern aucheine praktische Einführung in die Verwendung von Web Components mittels Polymer.Zunächst skizziert Martin Splitt die Probleme der klassischen Webentwicklung, gibt eine kurze Einführung in die Verwendung der Web-Components-Standards (Template-Element, Shadow DOM, Custom-Elements und HTML-Imports) und erläutert, wie diese die gezeigten Probleme lösen und ein solides Konzept für Webentwicklungdarstellen.Danach stellt er Polymer als weitergehende Vereinfachung für den Einsatz dieser Technologien vor. Der Einstieg beginnt mit der Weltsichtvon Polymer (»Alles ist ein Element«), wobei anhand eines Beispiels die Vorzüge von Polymer gegenüber reinen Standard-Web-Componentsdemonstriert werden. Anschließend führt Sie der Autor mit der Erstellung einer einfachen Anwendung, die alle wichtigen Grundlagen der Entwicklung von Polymer-Anwendungen beinhaltet und erläutert, in die Arbeit mit Polymer ein.Des Weiteren erfahren Sie, wie man Komponenten – seien es eigene oder extern bereitgestellte – miteinander kombiniert und durch DataBinding verbindet, und lernen abschließend, Komponenten wiederverwendbar zu gestalten und Anwendungen mit Themes anpassbar zu machen.Nach der Lektüre dieses Buches sind Sie in der Lage, vollständige Webanwendungen in Polymer zu realisieren – mit eigenen und fremdenKomponenten.Voraussetzung ist das Verständnis von:• HTML• JavaScript• CSS

Table of contents

  1. Cover
  2. Titel
  3. Impressum
  4. Inhaltsverzeichnis
  5. 1 Vorwort
    1. 1.1 Für wen dieses Buch gedacht ist
    2. 1.2 Einleitung
    3. 1.3 Danksagung
  6. 2 Einführung in Web Components
    1. 2.1 Von Dokumenten zu Anwendungen: neue Ansätze für neue Anforderungen im Web
    2. 2.2 Web-Component-Standards im Überblick
    3. 2.2.1 Template-Element
    4. 2.2.2 Shadow DOM
    5. 2.2.3 Custom-Elements
    6. 2.2.4 HTML-Imports
    7. 2.3 Templating
    8. 2.3.1 Konventionelle Templating-Systeme
    9. 2.3.2 Das Template-Element
    10. 2.3.3 Performance von Templates
    11. 2.4 CSS für Komponenten
    12. 2.4.1 Isolierte Styles dank Shadow DOM
    13. 2.4.2 Eingefügte Inhalte, Shadow und CSS
    14. 2.5 Eigene Tags für Komponenten
    15. 2.5.1 Bisherige Ansätze
    16. 2.5.2 Custom Elements
    17. 2.5.3 Das <content>-Element
    18. 2.5.4 Auf eingebettete Inhalte zugreifen mit getDistributedNodes
    19. 2.5.5 Auf Elemente innerhalb von <content> zugreifen
    20. 2.5.6 Eigene Attribute und Methoden
    21. 2.5.7 Existierende HTML-Elemente erweitern
    22. 2.6 Komponenten wiederverwenden
    23. 2.6.1 Anwendungsdokument und Komponentendokument
    24. 2.7 Ein Grundgerüst für eigene Komponenten
  7. 3 Entwickeln mit Web Components
    1. 3.1 »Hallo Web Components!« – Ein erstes Beispiel
    2. 3.2 Der Anwendungsentwurf
    3. 3.3 Die Anwendungslogik
    4. 3.3.1 Aufbau und Gliederung der Benutzeroberfläche
    5. 3.3.2 Aufgabenliste
    6. 3.3.3 Notizen
    7. 3.3.4 Implementierung
    8. 3.4 Komponenten für unsere Anwendung
    9. 3.4.1 Testen unserer Komponenten
    10. 3.4.2 Das Testsystem
    11. 3.5 Das todo-item
    12. 3.5.1 Tests
    13. 3.5.2 Implementierung
    14. 3.6 Link-List
    15. 3.7 Tab-Komponente
    16. 3.8 Fazit
  8. 4 Polymer-Grundlagen
    1. 4.1 Aufbau einer Polymer-Anwendung
    2. 4.1.1 Das Polymer-Framework
    3. 4.1.2 Die Polymer-Polyfills: webcomponents.js
    4. 4.1.3 Eigene Elemente, fremde Elemente und Pages
    5. 4.2 Polymer-Elemente registrieren
    6. 4.2.1 Hallo-Polymer
    7. 4.2.2 Lifecycle-Callbacks
    8. 4.3 Local DOM und Light DOM
    9. 4.4 Properties als Element-API
    10. 4.4.1 Attribute, Properties und Eigenschaften
    11. 4.4.2 Namensgebung
    12. 4.4.3 Datentypen
    13. 4.5 Data-Binding
    14. 4.5.1 Was ist Data-Binding?
    15. 4.5.2 Bidirektionale Bindings
    16. 4.6 Events in Polymer-Elementen
    17. 4.6.1 Event-Behandlung in Polymer
    18. 4.6.2 Dynamische Listener
    19. 4.6.3 Eigene Events definieren
    20. 4.6.4 Gesten in Polymer
    21. 4.6.5 Die track-Geste
    22. 4.6.6 Events und das Shadow DOM
    23. 4.6.7 Event-Retargeting und Shady DOM
    24. 4.7 Styling und Theming in Polymer-Elementen
    25. 4.7.1 Besonderheiten von CSS für Shady DOM
    26. 4.7.2 CSS-Custom-Properties und Mixins
    27. 4.7.3 Styles dynamisch ändern und abrufen
    28. 4.7.4 Einschränkungen des Polyfills
    29. 4.7.5 Styles und Custom-CSS-Properties auf Dokumentenebene
    30. 4.7.6 Styles wiederverwenden mit Style Modules
    31. 4.7.7 Zusätzliche Bibliotheken, Polymer-Elemente und CSS
  9. 5 Fortgeschrittene Techniken in Polymer
    1. 5.1 Besonderheiten der Polyfills
    2. 5.1.1 Eigenschaften des Polyfills-Custom-Elements
    3. 5.1.2 Eigenschaften des Polyfills-HTML-Imports
    4. 5.1.3 Eigenschaften des Polyfills Shadow DOM (»Shady DOM«)
    5. 5.1.4 Shady DOM als Polyfill-Alternative
    6. 5.2 Globale Einstellungen
    7. 5.2.1 Shadow oder Shady DOM wählen
    8. 5.2.2 Verzögerte Registrierung mit lazyRegister
    9. 5.3 Das Local DOM und die Polymer-DOM-API
    10. 5.3.1 Light DOM und Distributed Children
    11. 5.3.2 Effektive Kindelemente
    12. 5.3.3 Observer im Local DOM
    13. 5.4 Properties im Detail
    14. 5.4.1 Die Datentypen Boolean, Object und Array
    15. 5.4.2 Properties und Konstruktoren
    16. 5.4.3 Properties vom Typ Object und Standardwerte
    17. 5.4.4 Properties und Attribute synchronisieren
    18. 5.4.5 Properties vor Änderung schützen
    19. 5.4.6 Abgeleitete Properties
    20. 5.4.7 Property-Änderungen behandeln mit Observern
    21. 5.4.8 Zusammengesetzte Observer
    22. 5.4.9 Komplexe Observer und komplexe zusammengesetzte Properties
    23. 5.5 Data-Binding
    24. 5.5.1 Property- und Attribut-Bindings im Detail
    25. 5.5.2 HTML in Text-Bindings
    26. 5.5.3 Uni- und bidirektionale Bindings
    27. 5.5.4 Fortgeschrittenes Data-Binding
    28. 5.5.5 Computed Bindings
    29. 5.5.6 Data-Binding für native Elemente
    30. 5.5.7 Data-Binding-Helfer
    31. 5.6 Elemente erweitern mit Behaviors
    32. 5.6.1 Zweck und Umfang von Behaviors
    33. 5.6.2 Ein Beispiel: JsonApiClientBehavior
    34. 5.6.3 Reihenfolge von Behaviors und Callbacks
    35. 5.6.4 Behaviors erweitern
    36. 5.6.5 Namespacing
    37. 5.6.6 Behaviors und einmalige Aktionen
  10. 6 Testen von Polymer-Komponenten
    1. 6.1 Die Grenzen von QUnit
    2. 6.2 Der Web Components Tester
    3. 6.3 WCT mit einem beliebigen Webserver
    4. 6.4 WCT als Kommandozeilen-Werkzeug
    5. 6.5 Tests mit WCT
    6. 6.5.1 Assertions und Expectations
    7. 6.5.2 Fixtures
    8. 6.5.3 Asynchrone Tests
    9. 6.5.4 Stubs
    10. 6.5.5 Integrationstests
    11. 6.6 Die iron-test-helpers
    12. 6.6.1 MockInteractions
    13. 6.6.2 Weitere Test-Helfer
    14. 6.7 Mehrere Test-Suites
    15. 6.8 Testen gegen Shady DOM und Shadow DOM
    16. 6.9 Barrierefreiheit testen mit der a11y-suite
  11. 7 Eine Polymer-Anwendung von A bis Z
    1. 7.1 Anwendungsentwurf
    2. 7.1.1 Aufbau der Anwendung
    3. 7.1.2 Suchfunktion
    4. 7.1.3 Filmdetails
    5. 7.1.4 Favoriten
    6. 7.1.5 Merkliste
    7. 7.1.6 Archiv
    8. 7.2 Projektstruktur
    9. 7.3 Die Abhängigkeiten vorbereiten
    10. 7.4 Das Anwendungsdokument
    11. 7.4.1 Das Grundgerüst
    12. 7.4.2 Struktur und Layout
    13. 7.4.3 Das vorläufige Anwendungsdokument
    14. 7.5 Routing und Pages
    15. 7.5.1 Routing-Grundlagen: Fragment-URLs und History API
    16. 7.5.2 Routing in Polymer mit dem App-Router
    17. 7.6 Die Elemente für unsere Anwendung
    18. 7.6.1 Die Datenschicht
    19. 7.6.2 Die Ergebniskachel
    20. 7.6.3 Die sortierbare Tabelle
    21. 7.6.4 Die sortierbare Liste
    22. 7.7 Die Pages für unsere Anwendung
    23. 7.7.1 Suche
    24. 7.7.2 Filmdetails
    25. 7.7.3 Favoriten
    26. 7.7.4 Merkliste
    27. 7.7.5 Archiv
    28. 7.8 Das vollständige Anwendungsdokument
    29. 7.9 Die Anwendung für den Produktiveinsatz vorbereiten
  12. A Anhang – Exkurs: Bower
    1. A.1 Was ist Bower?
    2. A.2 Warum Bower?
    3. A.3 Bower installieren
    4. A.4 Bower nutzen
    5. A.5 Abhängigkeiten versionieren
    6. A.6 Eigene Bower-Module bereitstellen
  13. Schlusswort
  14. Index

Product information

  • Title: Web Components mit Polymer
  • Author(s): Martin Splitt
  • Release date: May 2017
  • Publisher(s): dpunkt
  • ISBN: 9783864903861