polymer

Using elements

Day 1

1. Intro to Polymer
   1. Explain Web components specifications
   2. Explain Polymer project setup
2. Using elements - basics (0,5 day)
   1. Mediator pattern
   2. [[]] vs {{}}
   3. Intro to "property effects"
   4. dom-repeat and dom-if
   5. Firing events
   6. Lab: create todo app (which lab?)
   7. Advanced scenario with array-selector
   8. Filtering and sorting lists
   9. Lab: todo app ~ create done flag
   10. Explain this.set, this.notifyPath, this.push, etc
3. Layouts (~1h)
   1. Install iron-elements (don't show element catalog yet)
   2. Use style <style include="iron-flex iron-flex-alignment"></style>
   3. Create header, flex content, footer with container 100%
   4. Lab: create layout for todo app
4. Use interface elements (back to using elements) (till end of day)
   1. Pro tip: Faker.js
   2. Introduce polymer elements catalog
   3. Demo iron-pages, iron-list (with grid view), iron-icon-set, iron-icon, iron-image,
   4. paper-toolbar, paper-header-panel, paper-drawer-panel, paper-button, paper-icon-button
   5. paper-menu with mediator pattern (selected prop in menu and iron-pages ~ no code routing)
   6. Lab: use the elements in the todo-app

Day 2

1. Animations (1h ~ 1h15)
   1. Go to catalog and show neon-elements
   2. Copy paste examples from slides
   3. Show demo's (ball animations)
   4. Lab: animate todo-app
2. Forms (~till noon)
   1. Build-in validations (read docs of iron-input, paper-input wraps iron-input)
   2. Custom validations
   3. Demo the custom validation example
3. Routing + lazy loading (~1h)
   1. Go to catalog and show app-elements
   2. Demo app-location and app-routes
      1. Including child routes (provide tail of parent route to child route)
   3. Lazy loading with this.resolveUrl('./my-element.html')
   4. Lazy loaded router
   5. Route the todo-app
4. Offline apps (~2h)
   1. Plain html javascript network detection (navigator.onLine)
   2. Network status behavior (on-offline support)
   3. Service workers in plain javascript
   4. Introduce platinum elements (cool html5 features like bluetooth, push notifications, service workers etc)
   5. platinum-sw, includes work with slightly different syntax
5. Choose: storage / testing / localization
6. Tooling