The platform today
Building a widget
- Make some <div> soup
- Style all the things
- More widget trees than a forest
- It's a magic shop
By blondewolf2 at deviantART
Extensible web platform
Give developers the power to guide the platform.
What's an <input>?
- Declarative API
- JS API
- Special rendering...
- ...but no <div> soup!
What if you could build your own <input>?
Better, stronger, faster...
- Custom elements
- Shadow DOM
- Templates
- HTML Imports
Custom elements
- Extend the native vocabulary
- Have a real API
- Callbacks!
The future
Things to know
- Name must contain a dash
- Must inherit from HTMLElement
- One registration per class
Shadow DOM
Invasion of the body snatchers.
Sample app
Hide your insides
No accidental access
shadowRootpropertyolderShadowRootpropertyhostproperty- Special selectors
- Scoped styles
Awesomeness
Composition
Project children into the hidden tree.
Internal Structure
Content Model
Projections
Inheritance
Projecting an ancestor
But declarative?
By remy at deviantART
Templates
That's cool, but what's special?
- No innerHTML
- Fast parser
- Doesn't load resources
HTMLImport me up Scotty
- Package HTML, JS and CSS
- Dependency management
- Parallel loading
Woah,
that's a lot of stuff.
Don't worry, we've got plenty of sugar.
Polymer
- Sugary sweet API
- Beautifully declarative syntax
- Polyfills if needed
- It's just Elements!
Lets see demos!
- This slide deck is polymer :)
When can I use it?
- Custom elements (34)
- Shadow DOM (35)
- Templates (26)
- HTML Imports (37)
What if we hosted the web platform on github?
Demand more
- File bugs at http://crbug.com
- Make cool apps
- Demand better APIs (now)
- Make the web faster