Initial knowledge of polymer framework

What is polymer?

Built by Google's Palm webOS team and launched at the Google I/O Conference, Polymer is designed to implement Web components, with minimal code, and to unblock framework-constrained UI frameworks.

The core idea of polymer is "everything was an element", all components.

Polymer can be bower by the package manager of Twitter, which facilitates the management of components (Elements) and package dependencies without having to download components from Git yourself.

Polymer layered Structure:

The element layer (elemets), which is a basic building block, is divided into UI elements (such as Select, tab), Non-ui elements (such as Ajax, animate).

Core layer: The helper that implements the base layer, polymer.html+polymer.js, is the necessary dependency to create the polymer element.
Base layer: Platform.js, which is a necessary reliance on platform-compatible, and responsive code implementations, must first be introduced to create an application. Most of these APIs will eventually become native browser APIs.

Introduce components via the <link rel= "import" href= "component-name.html" >, which is the imports specification for Web Parts.

Base Layer

The base layer contains the following tips:
1. Dom Mutation Oberservers and Object.observe (): Used to observe changes in DOM elements, is a pure JavaScript object.
2. Pointer event: Handles mouse and touch manipulation to support all platforms.
3. Shadow DOM: Encapsulates the structure and style within an element, suitable for custom elements.
4. Custom elements: You can customize the elements of the HTML5. The name of the custom element must contain a dash, which is a shorthand namespace identifier to distinguish it from the standard element.
5. HTML Import: Package a custom element. These packages may contain HTML, CSS, and JavaScript.
6. Model-driven View (MDV): Bind data directly to HTML.
7. Web Animation: A set of the same Web animation API.

　　

Core layer and Element layer

The polymer framework is inherently biased towards local HTML5. Example of a panel UI widget that applies the polymer framework:

<polymer-panels        on-select= "Panelselecthandler"        selected= "{{selectedpanelindex}}" >    </ Polymer-panels>

WEB components?

It is a specification designed to provide a component outside the browser's native way, and it is regulated as follows
1. Template (Templates)

You can put the elements that do not have to be rendered immediately, without having to immediately execute the script here.
2. Adorner (decorators)
3. Shadow DOM
4. Custom Element (Elements),

Implement custom HTML tags, and properties. Has the same life cycle as the native component
5, Imports,

Specifying the imported component documentation and type

(You do not need to implement all of its specifications.) The polymer element is created and introduced in reference to this specification)

Shadow DOM?

is a DOM element subtree that is not visible to the user, i.e. it cannot be seen in the regular DOM tree. It is the implementation of the Web Components package
The necessary capacity. However, currently only Chrome supports it. It has the following functions:
1, avoid the different components of the page ID, CSS, JS interference with each other
2, make the component easy to maintain, the change of the component implementation does not affect its use
3, speed up the query of the DOM node, Shadow the elements in the DOM is not queried.

For ease of indexing, the content (text) should not be placed in the shadow Dom.
You can use the <content> element to specify the insertion point for child elements.

The norm is a necessary condition to promote the benign and sustainable development of technology and to form a good ecological system. This is equivalent to the role of law.

Grid layouts CSS Grid layout?

The layout has undergone a change from table layout to div layer layout, and today, with so many devices, the screen size resolution is very different. We expect to find a way to achieve a unified layout, which is the responsive layout. And the responsive layout is a great expectation of the grid layout.
As the name implies , the grid is used to divide the page. There are two requirements, that is, multi-column, scalable.
The multiple columns here do not use floats to complete, using the Grid-columns property.
The key to scalability is the fractional unit FR, which refers to the ratio of the column or row to the remaining space, X (FR)/total (FR)

If you want to achieve more precise control, you need to introduce the media query in CSS3, @media support. To provide styles on different devices, different screen sizes and different device orientations.

Grid layout for the draft, the current only partial support IE10 (ie ran to the front).

MVVM mode?

Why should we talk about this pattern? Polymer has a design principle, model-driven views (MDV), data-driven models, and the MVVM pattern is a good embodiment of this principle.

Model-view-viewmodel, the controller was replaced with ViewModel in relation to the MVC pattern.

Model is a data format constraint that defines how data should be accessed and organized. From data access, data transformation, processing, data presentation, you must rely on this data model.

View is usually the visual part of a component, and the data model, business logic is generally stable and highly reusable, but the view can change frequently,

The ViewModel (view model) is primarily used for data processing (logical processing) and provides data binding for the view (binding the model's class properties to the corresponding component properties of the view).

Their dependency is the view dependent Viewmodel,viewmodel model, which is a one-way dependency, so that view changes do not have any effect on Vm,model. But if the model changes, it will affect the VM, view.

The angular will be based on the polymer development widget, which is the voice from angular. The angular is designed using the MVVM pattern, which is well suited for component development, has very low coupling, and is easy to modify and maintain.

Initial knowledge of polymer framework