Polymer Web Development

Web Components

Polymer is een open source JavaScript library voor het bouwen van web applicaties op basis van Web Components. Moderne design principes worden geïmplementeerd in een afzonderlijk Material Design project.

Polymer Fundamentals

Polymer is geen compleet framework voor het bouwen van web applicaties zoals Angular, maar legt daarentegen de nadruk op herbruikbare Web Componenten.

Polymer Core Library

Terwijl Angular API's heeft voor zaken als services, routing en server communication biedt Polymer deze zaken als Web Componenten in de core library. Deze Web Componenten zijn niet gebonden aan Polymer maar kunnen zoals lego blokken ook in web applicatie frameworks worden toegepast.

Shadow en Shady DOM

De cursus gaat van start met de installatie van Polymer en met een intro over de fundamentele begrippen die een rol spelen bij Web Component specificaties zoals HTML Templates, HTMLImports, Shadow en Shady DOM.

Custom Elements

Vervolgens wordt ingegaan op de ontwikkeling van Custom Elements in Polymer, data binding en de implementatie van life cycle callbacks. Ook de verschillende Material Design custom elementen die Polymer standaard ter beschikking stelt komen aan de orde.

Styling

Aandacht is er voorts voor hergebruik en styling met CSS waarbij DOM manipulatie, encapsulation van style en shims worden besproken.

Event Handling

Tenslotte zijn ook event handling, Polymer tooling en applicatie building onderdeel van de cursus.

Doelgroep Cursus Polymer Web Development

De cursus Polymer Web Development is bestemd voor Web Developers die de nieuwste versie van het Polymer JavaScript Framework willen gebruiken bij het ontwikkelen van moderne single page Web Applicaties.

Voorkennis Cursus Polymer Web Development

Een goede kennis van JavaScript en ervaring met JavaScript programmeren is vereist om aan de cursus Polymer Web Development te kunnen deelnemen.

Uitvoering Training Polymer Web Development

De theorie wordt behandeld aan de hand van presentaties. De concepten worden toegelicht met demo's. De theorie wordt afgewisseld met oefeningen. De cursustijden zijn van 9.30 tot 16.30.

Officieel Certificaat Polymer Web Development

De deelnemers krijgen na het goed doorlopen van de cursus een officieel certificaat Polymer Web Development.

Modules

Module 1 : Polymer Intro

• What is Polymer?
• Web App Complexity
• What are Web Components?
• Web Component Specifications
• HTML Templates
• Activating Templates
• HTMLImports
• Shadow and Shady DOM
• Downloading Polymer
• Polymer Framework Files
• Installing Polymer
• Polymer Directories

Module 2 : Polymer Elements

• Custom Elements
• Creating and Extending
• Polymer Custom Elements
• Importing HTML
• Hello Polymer Revisited
• Including Hello Element
• Local DOM
• Element Sections
• Class Style Constructor
• Type Extension Element
• Lifecycle Callbacks
• Attaching and Detaching

Module 3 : Properties and Databinding

• Element Properties
• Property Key Value
• Property Types
• Data Binding Objects
• Native Element Binding
• Attribute Binding
• Computed Properties
• Observers
• Observer Array Mutations
• Conditional Templates
• Template Repeater and Array Selector
• Autobinding Template

Module 4 : Polymer Element Catalog

• Material Design
• Iron Elements
• Iron-Ajax-Element
• Paper Elements
• Paper Input Element
• Google Web Components
• Gold Elements
• Gold cc input element
• Neon Elements
• Platinum Elements
• Platinum Service Worker
• App Elements
• Routing with App-Route

Module 5 : Reuse and Styling

• Local DOM
• Insertion Points
• Encapsulation and Scope
• Shadow and hady DOM
• Light DOM
• Accessing the DOM
• Polymer DOM API
• Observe Node Changes
• In and Outside CSS Styling
• CSS Variables and Mixins
• Custom Property API
• Shim Limitations
• Custom and Shared Styles

Module 6 : Events and Behavior

• Polymer Events
• Event Listeners
• on-event Annotations
• Add and Remove Listeners
• Listener on Custom Element
• Listen on Child Elements
• Listener on Outside Elements
• Custom Events
• Gesture Events
• Gesture Event Types
• Event Retargeting
• Property Changed Events
• Behaviors

Module 7 : Polymer Tooling

• Tools Overview
• Polymer CLI
• CLI Commands
• Polyfills
• ES6 Modules
• Create Element Project
• Create Application Project
• Element Documentation
• Testing Elements
• polymer.json Specification
• Node Support
• Using NPM

Module 8 : Building Applications

• App Templates
• app-layout Elements
• Build for Production
• polymer-build
• Build Configuration
• HTTP/2 Push
• Pre Cache
• Lazy Load
• Multiple Builds
• Server Apps
• PRPL Pattern
• Service Workers