building a single page application with polymer
TRANSCRIPT
![Page 1: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/1.jpg)
Bart WoutersUX Designer
Paul van DamFront-end Developer
BUILDING AN APPLICATION WITH POLYMER.
![Page 2: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/2.jpg)
What are we going to do?
How are we going to do it?
![Page 3: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/3.jpg)
![Page 4: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/4.jpg)
![Page 5: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/5.jpg)
HUMAN WORK.Wearing out keyboards.
![Page 6: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/6.jpg)
![Page 7: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/7.jpg)
![Page 8: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/8.jpg)
![Page 9: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/9.jpg)
![Page 10: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/10.jpg)
Filter manager options
Filter groups Filters per group
Change sortorder
Edit filter content
Add filter
![Page 11: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/11.jpg)
Filter manager
![Page 12: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/12.jpg)
NEW CMS.No biggie.
![Page 13: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/13.jpg)
![Page 14: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/14.jpg)
![Page 15: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/15.jpg)
STANDARDIZED COMPONENTS.Sheldon style.
![Page 16: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/16.jpg)
BUT HOW SHOULD WE DO THAT?
![Page 17: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/17.jpg)
COMPONENTS.Don’t Repeat Yourself.
![Page 18: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/18.jpg)
Polymer
WebComponents
![Page 19: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/19.jpg)
![Page 20: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/20.jpg)
![Page 21: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/21.jpg)
![Page 22: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/22.jpg)
HTML CSS JS
![Page 23: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/23.jpg)
HTML
CSS
JS
HTML
CSS
JS
HTML
CSS
JS
![Page 24: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/24.jpg)
POLYMER.Prepare for more code samples.
![Page 25: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/25.jpg)
POLYMER UNBOXED.We’re in the library, sssssst.
Polyfill
Clean declarative syntax
Two-way data binding and property observation
Component library
![Page 26: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/26.jpg)
![Page 27: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/27.jpg)
![Page 28: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/28.jpg)
![Page 29: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/29.jpg)
![Page 30: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/30.jpg)
COMMUNICATION.Hello world.
![Page 31: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/31.jpg)
![Page 32: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/32.jpg)
![Page 33: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/33.jpg)
TOO MUCH COMMUNICATION.Bye world.
![Page 34: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/34.jpg)
Model
Controller-view
Comp.
Comp. Comp.
Comp.
Comp. Comp.
Comp.
Comp. Comp.
![Page 35: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/35.jpg)
API
Model
Controller-view
View
![Page 36: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/36.jpg)
POINTS OF INTEREST.Dot dot dot.
Browser support
Requests
Two-way data binding
Version 0.8 is coming
Clean syntax
Features
Web Componentsfuture standard
![Page 37: Building a single page application with Polymer](https://reader030.vdocuments.us/reader030/viewer/2022032506/55ca3aadbb61eba10d8b46b5/html5/thumbnails/37.jpg)
INTERESTING.A little homework.
github.com/pcvandamcb/polymer-examplecoolblue-polymer-example.divshot.io
webcomponents.orgpolymer-project.org
github.com/polymer/vulcanizeaurelia.io
divshot.com