client side apps from the future
TRANSCRIPT
![Page 1: Client side apps from the future](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f4535b4c905cd048b570d/html5/thumbnails/1.jpg)
Client-side Apps
From The Future
![Page 2: Client side apps from the future](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f4535b4c905cd048b570d/html5/thumbnails/2.jpg)
Web ComponentsNow Introducing
![Page 3: Client side apps from the future](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f4535b4c905cd048b570d/html5/thumbnails/3.jpg)
Support Is Strong With This One
![Page 4: Client side apps from the future](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f4535b4c905cd048b570d/html5/thumbnails/4.jpg)
ChromeFirefox Safari
![Page 5: Client side apps from the future](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f4535b4c905cd048b570d/html5/thumbnails/5.jpg)
Polymer & X-Tags
![Page 6: Client side apps from the future](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f4535b4c905cd048b570d/html5/thumbnails/6.jpg)
DartAKA that Google thing that had 1759 lines in a Hello World App
![Page 7: Client side apps from the future](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f4535b4c905cd048b570d/html5/thumbnails/7.jpg)
What Are You
Talking About?
![Page 8: Client side apps from the future](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f4535b4c905cd048b570d/html5/thumbnails/8.jpg)
Shadow DOM - Encapsulation
HTML Templates - Structure/Scaffolding
Custom Elements - Extend The DOM
HTML Imports
![Page 9: Client side apps from the future](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f4535b4c905cd048b570d/html5/thumbnails/9.jpg)
Shadow DOM
![Page 10: Client side apps from the future](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f4535b4c905cd048b570d/html5/thumbnails/10.jpg)
![Page 11: Client side apps from the future](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f4535b4c905cd048b570d/html5/thumbnails/11.jpg)
Example
![Page 12: Client side apps from the future](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f4535b4c905cd048b570d/html5/thumbnails/12.jpg)
![Page 13: Client side apps from the future](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f4535b4c905cd048b570d/html5/thumbnails/13.jpg)
HTML Templates
![Page 14: Client side apps from the future](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f4535b4c905cd048b570d/html5/thumbnails/14.jpg)
Parsed But
Not RenderedIt's just DOM...
![Page 15: Client side apps from the future](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f4535b4c905cd048b570d/html5/thumbnails/15.jpg)
Example
![Page 16: Client side apps from the future](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f4535b4c905cd048b570d/html5/thumbnails/16.jpg)
![Page 17: Client side apps from the future](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f4535b4c905cd048b570d/html5/thumbnails/17.jpg)
Custom Elements
![Page 18: Client side apps from the future](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f4535b4c905cd048b570d/html5/thumbnails/18.jpg)
Just like any ol'
trusty HTML Tag
![Page 19: Client side apps from the future](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f4535b4c905cd048b570d/html5/thumbnails/19.jpg)
Declarative
and
Imperative
![Page 20: Client side apps from the future](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f4535b4c905cd048b570d/html5/thumbnails/20.jpg)
Declarative API
![Page 21: Client side apps from the future](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f4535b4c905cd048b570d/html5/thumbnails/21.jpg)
Imperative API
![Page 22: Client side apps from the future](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f4535b4c905cd048b570d/html5/thumbnails/22.jpg)
Shadow DOM + Custom Elements
![Page 23: Client side apps from the future](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f4535b4c905cd048b570d/html5/thumbnails/23.jpg)
![Page 24: Client side apps from the future](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f4535b4c905cd048b570d/html5/thumbnails/24.jpg)
HTML Imports
![Page 25: Client side apps from the future](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f4535b4c905cd048b570d/html5/thumbnails/25.jpg)
![Page 26: Client side apps from the future](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f4535b4c905cd048b570d/html5/thumbnails/26.jpg)
![Page 27: Client side apps from the future](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f4535b4c905cd048b570d/html5/thumbnails/27.jpg)
Model Driven Views
![Page 28: Client side apps from the future](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f4535b4c905cd048b570d/html5/thumbnails/28.jpg)
Sources- W3C Web Components Spec http://www.w3.org/TR/2013/WD-components-intro-20130606/- Polymer http://www.polymer-project.org/- X-tags http://ui.x-tags.org/- Web Components by Eric Bidleman http://html5-demos.appspot.com/static/webcomponents/index.html#1- Shadow DOM 101 http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/