"Go" talk about the future of Google Polymer and the Web UI framework

Translated from: Http://www.csdn.net/article/2013-05-27/2815450-google-polymer

absrtact: developer Axel Rauschmayer in his blog on the Google Polymer design concept and composition structure, won the polymer developer's approval. He thinks that the design of polymer such high interoperability should be the future of web development.

Although this year's Google I/O is over, the new technology and tools unveiled at the meeting are still exciting for developers. Web development in particular Ploymer and Web Components.

Created by the original Palm webOS development team who joined Google, Polymer is a Web UI framework that is designed with "all components, minimal code volume, and Minimal framework constraints." WEB components provide a more complete decoupling approach, more convenient for UI development and modularity, which can be said to be one of the foundations of polymer.

Developer Axel Rauschmayer on his blog about Polymer's design philosophy and composition, and won the approval of polymer developer Sjmiles (Scott J. Miles). Csdn compiled as follows:

In just the end of Google I/O 2013, Google released a new Web UI framework,--polymer, that seems to indicate the direction of development for all Web UI frameworks.

1. Polymer

The polymer consists of the following layers:

• Base Layer (Foundation)--platform.js: basic building blocks, most of which will eventually become native browser APIs.
• Core tier (CORE)--polymer.js: an auxiliary tool for the implementation of the base layer.
• Element Layer (Elements): Includes UI and non-UI components built on top of the core layer.

1.1 Base Layer (platform.js)

Among them, the base layer uses the following technologies:

1. Dom Mutation Oberservers and Object.observe (): Used to monitor changes in DOM elements and simple JavaScript objects. This feature may be formally standardized in ECMAScript 7.
2. Pointer Events: Handles mouse and touch operations in the same way on all platforms.
3. Shadow DOM: Encapsulates structures and styles within an element (such as a custom element).
4. Custom Elements: Define your own HTML5 element. The name of a custom element must include a dash that acts like a namespace in order to differentiate it from standard elements.
5. HTML Imports: Encapsulates custom elements, including HTML, CSS, and JavaScript elements in the package.
6. Model-driven Views (MDV): Data binding is implemented directly in HTML. There are still no standardized plans.
7. Web animations: Unified Web Animation Implementation API.

The above 第3-5个 APIs are part of the Web Component. Obviously, the importance of WEB components to polymer is unusually important.

The role of Platform.js is to provide these APIs instead of browsers, which are only 31KB after being fully compressed. And based on the information that has been disclosed, we also know that one of polymer's goals is to test these non-standardized HTML5 UI APIs.

1.2 Core layer and element layer

The polymer itself is very much like the native HTML5: "Attributes in, events out." Take Uiwidget (widget) Polymer-panels as an example:

[HTML]View Plaincopy

1. <polymer-panels
2. on-select="Panelselecthandler"
3. selected="{{selectedpanelindex}}">
4. </polymer-panels>

It can be seen that its structure is very "component-oriented (component-oriented)" and that all components are HTML elements. Some elements themselves do not provide a UI, such as the animations element does not provide a UI, but you can associate it with a UI element for animation. In addition, many of polymer's widgets are built with responsive design, that is, they will change depending on the platform to the most suitable shape.

1.3 Interoperability

The polymer is designed like a menu and can be selected on demand. Thanks to Web Components, its elements are highly interoperable. At the I/O conference we saw an example: the element X-tag in the Mozilla project (also based on Web Components) works very well with polymer.

1.4 When can I use polymer?

Polymer is still an alpha preview, so it is not recommended for use in public projects. However, as an open source project, you can always use its code.

How does the 1.5 polymer compare to other web frameworks?

Polymer is not intended to end other frameworks, but the existing frameworks can also be built on the same base layer. If you've tried a UI framework like Ember.js and Angularjs, you'll find a lot of APIs familiar. Angularjs even announced on Twitter: "Angular will be based on the polymer development widget, which will be a win to the solution." “

2. What exactly does polymer mean?

No one would want to use the framework, we just want to develop the Web UI efficiently, but the framework satisfies our needs. In contrast, native HTML lacks these features:

• A rich set of widgets. In my opinion, the most important thing about WEB components is this. Thanks to the Web Components, we will be able to easily access a large number of widgets, free to use.
• User interface layout. I have great hopes for CSS grid layout, which is native HTML, and naturally it works well with the Web component.
• A "binder" between widgets (such as data binding).

For the time being, the frameworks are still difficult to be compatible with each other: using their own toolchain, inheriting APIs, widget infrastructure, and so on. The development patterns described in this article, and the classes and modules in ECMAScript 6, indicate that the future of web development should be higher interoperability. The benefits to the Web development ecosystem are obvious.

Related Resources

If you want to know more about polymer, you can visit the following URLs:

• Speeches in Google I/O 2013:
• "Web Components:a tectonic Shift for Web development"--eric Bidelman
• "Web in Action"--matthew McNulty, Alex Komoroske (based on the above speech, also mentions polymer)
• HTML5 rocks on the Web Component article.
• Polymer Project Home: polymer-project.org

Original link: 2ality

"Go" talk about the future of Google Polymer and the Web UI framework