Opleiding: 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
