Polymer Web Development

In the course Polymer Web Development participants learn to use the Polymer JavaScript Framework when developing modern single page Web Applications.

Web Components

Polymer is an open source JavaScript library for building web applications based on Web Components. Modern design principles are implemented in a separate Material Design project.

Polymer Fundamentals

Polymer is not a complete framework for building web applications such as Angular, but instead emphasizes reusable Web Components.

Polymer Core Library

While Angular has APIs for things like services, routing and server communication, Polymer offers these things as Web Components in the core library. These Web Components are not bound to Polymer but can be used like lego blocks in other web application frameworks.

Shadow en Shady DOM

The course starts with the installation of Polymer and with an intro about the fundamental concepts that play a role in Web Component specifications such as HTML Templates, HTMLImports, Shadow and Shady DOM.

Custom Elements

Subsequently the development of Custom Elements in Polymer, data binding and the implementation of life cycle callbacks are discussed. The various Material Design custom elements that Polymer makes available as standard are also addressed.

Styling

There is ample attention for reuse and styling with CSS where DOM manipulation, encapsulation of style and shims are discussed.

Event Handling

Finally event handling, Polymer tooling and application building are treated.

Audience Polymer Web Development

The course Polymer Web Development is intended for Web Developers who want to use the newest version of the Polymer JavaScript Framework in developing elements for modern single-page Web Applications.

Prerequisites Course Polymer Web Development

A good knowledge of JavaScript and JavaScript programming experience and is required to participate in the Polymer Web Development course.

Realization Training Polymer Web Development

The theory is treated on the basis of presentations. The concepts are illustrated with demos. The theory is interspersed with exercises. The course times are from 9.30 to 16.30.

Certification Polymer Web Development

The participants receive an official certificate Polymer Web Development after successful completion of the course.

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