At Google I/O 2013, Google presented a new web user interface (UI) framework called Polymer. The way it works is indicative of the future of all web UI frameworks.
Polymer
Polymer is composed of the following layers:
- Foundation (platform.js): Foundational building blocks. Most, if not all, of these APIs will eventually become native browser APIs.
- Core (polymer.js): Helpers complementing Foundation.
- Elements: UI and non-UI components built on Core.
The Foundation layer (platform.js)
The Foundation layer comprises the following technologies:
- DOM Mutation Oberservers and Object.observe() (probably ECMAScript 7): for observing changes to DOM elements and plain JavaScript objects.
- Pointer Events: handle mouse and touch in the same manner, on all platforms.
- Shadow DOM: encapsulate structure and style inside elements (e.g. custom ones).
- Custom Elements: define your own HTML5 elements. The names of custom elements must contain a dash, which is a simple way of namespacing them and distinguishes them from standard elements.
- HTML Imports: package custom elements. Such packages include HTML, CSS and JavaScript.
- Model-Driven Views (MDV): Does data-binding directly in HTML. Not yet in the process of being standardized.
- Web Animations: API unifying several of the web's animation approaches.
APIs 3–5 are part of Web Components, a component model for the web. Web components are the most important foundation of Polymer.
platform.js shims these APIs on browsers where they are not (yet) available. It is only 31KB (if minified and gzipped). One of the declared goals of Polymer is to field-test HTML5 UI APIs before standardizing them.
Layers: Core and Elements
Polymer itself is almost like native HTML5: "attributes in, events out". One example of using the UI widget polymer-panels:
<polymer-panels
on-select="panelSelectHandler"
selected="{{selectedPanelIndex}}">
</polymer-panels>
Its architecture is very component-oriented, its components being HTML elements. Some of the elements don't even have a user interfaces themselves. For example, animations are elements (you can nest them etc.), they have no user interface, but instead point to UI elements that they animate. Responsive design is built into many widgets, which means that they will transform so that they work best on a given platform (cell phone, tablet, desktop, etc.).
Read more: ②ality – JavaScript and more
QR: 