What is Google Polymer?

Question

I saw some recent studies on foreign websites about this Google Polymer, but still not understood where it should be used, for example in a mobile application.

I could not find Brazilian blogs or website containing information about Google Polymer.

Answer 1

Polymer is a library that facilitates the creation of Web Components, which are customized, independent and reusable HTML elements.

The idea is that you can create your own components only with HTML, the same having a unique and focused behavior.

Let’s see the element select. He has a single goal: select one or more items(s) from an options list. We can configure your behavior with the attribute Multiple, but the main objective remains the same.

The same should happen with the custom element google-map, quoted in the reply of @gtonioli. He has a single goal: show a Google map. In it, we can point out where we want to see the map according to the attributes lat and long.

It may be that it shows a pin in some place passed by the user, or that it shows some route from city to city, or that it accepts an attribute, called zoom, which shows the map of the coordinates passed from a certain distance. As long as the component remains focused on show a Google map, these features are valid.

---

To make a web Component, the following technologies are used::

• Custom Elements

  Allows us developers to create elements beyond those specified in HTML by registering them before use.

• Shadow DOM

  Allows the creation of fully decoupled elements of the current document and can, for example, contain an ID that already exists in the main document or in another Shadow DOM subtree. The CSS registered in these elements does not exceed for the document.

• HTML Templating

  Allows the creation of templates, which can be lightly compared to those of Underscore.js and lodash, where an HTML tag is created for future use.

• HTML Imports

  Let’s say it’s "a Require.js for HTML implemented by the browser". These are HTML documents that are referenced in another document as an external resource.

How these technologies are still in Working Draft, The Polymer contains several polyfills that bring some of these features to browsers, even with some limitations, such as HTML Imports being made by Xmlhttprequest.

The library facilitates the development of Web Components leaving the creation of custom elements less laborious, with two-way data Binding for component control and polyfills cited above.

For a more comprehensive introduction to Polymer, see those videos (both in English, with English subtitles).

The project website has a quick tutorial for the creation of Web Components using the library.

Answer 2

Complementing the @Danguilherme response follows some important details:

Benefits

There are many benefits of Polymer where we can highlight:

Declarative Programming

Lets you implement Domain Specific Language - DSL using powerful, intuitive, meaningful and expressive Markup.

Composition from Smaller Components

Building blocks using composition

Maintainability

When you read the code you understand immediately decreasing the maintenance cost. Encapsulation allows to develop components with specific function restricting scope and facilitating maintenance.

Real Reusability on the Web

Encapsulation values reusability and tool support like Bower allows use by any developer

Extensibility

Implements standard form to extend native elements and custom elements as in the example:

We can implement inheritance in Polymer using:

<polymer-element name="my-car" extends="my-vehicle">

We have the option to override the methods of the Polymer elements and, if necessary, we can use this.super() to call the function of the inherited element.

Separation of Scope

Allows differentiated scope for CSS, DOM and Apis

Interoperability

The integration is done at low level in the DOM so interoperability is complete. No need to use other Javascript libraries such as jQuery as we can directly use querySelector, querySelectorAll, getElementById, etc since IE 9 and all other browsers already support this.

Accessibility

Implemented by default.

Productivity

It is obvious when we use due to these advantages mentioned above.

Testability

The testability of the components is provided by WCT - Web Component Tester https://github.com/Polymer/web-component-tester

Mixins

Mixins serve to add object behavior to others. It is a Javascript Feature. Polymer has a utility method to support this Feature in the Framework.

Grammar:

Polymer.mixin(target, obj1 [, obj2, ..., objN ])

Exemplo:
var myMixin = {
  sharedMethod: function() {
    // ...
  }
}

<polymer-element name="my-element">

<script>
 Polymer(Polymer.mixin({
   // my-element prototype
 }, myMixin));
</script>

</polymer-element>

Fonts on Github

Sources hosted on github can be accessed via Bower

bower install --save Polymer/core-elements

Layout Containers

Several elements to support Layout eliminates the need to use Bootstrap or similar. Allied to Layout Attributes that works for native elements such as or we have a full feature set for dynamic Layout management.

Support for Themes

use to implement Themes for the application

Support for Transitions

Tags as can be used to define transitions between content in a declarative form

Design Tool

Visual tool available working as a playground for dialogue development and application pages using drag-and-drop.

Answer 3

It would be an extension to HTML. Where many functions would be encapsulated in HTML tags. For example add a map with Google Maps:

<!-- Import element -->
<link rel="import" href="google-map.html">

<!-- Use element -->
<google-map lat="37.790" long="-122.390"></google-map>