I've seen some recent studies on foreign websites about this Google Polymer , but I still do not understand where it should be used, for example in a mobile application.
I did not find Brazilian blogs or websites containing information about Google Polymer.
Polymer is a library that makes it easy to create Web Components , which are independent, reusable HTML elements.
The idea is that you can create your own HTML-only components, which have a unique and focused behavior.
Let's look at the select element. It has a single goal: select one or more item (s) from a list of options . We can configure your behavior with attribute multiple , but the main goal remains the same.
The same should happen with the custom element google-map , quoted in @gtonioli response. It has only one goal: Show a Google Map . In it, we can point to where we want to see the map according to the attributes lat and long .
It may show 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 from a certain distance. As long as the component remains focused on show a Google Map , those features are valid.
To make a web component , the following technologies are used:
Allows us developers to create elements other than those specified in HTML by registering them before use.
Allows the creation of fully decoupled elements of the current document, for example, containing an ID that already exists in the main document or in another Shadow DOM subtree . The CSS registered in these elements does not go beyond the document.
Allows the creation of templates, which can be lightly compared to those of Underscore.js and < in> lodash , where an HTML markup is designed to be used in the future.
Let's say it's a Require.js for browser-implemented HTML. " These are HTML documents that are referenced in another document as an external resource.
As these technologies are still in Working Draft , the Polymer contains several polyfills that bring some of these features to browsers, yet with some limitations, such as HTML Imports being made by XMLHTTPRequest .
The library facilitates the development of Web Components by letting the creation of custom elements less laborious, with two-way data binding for component control, polyfills cited above.
For a more comprehensive introduction to Polymer, see these videos
The project site has a quick tutorial to create Web Components using the library.
Complementing @Danguilherme's answer follows some important details:
There are many benefits to Polymer where we can highlight:
Allows you to implement Domain Specific - DSL using powerful, intuitive, meaningful and expressive Markup.
Building blocks using composition
When you read the code you immediately understand lowering the cost of maintenance. Encapsulation allows you to develop components with a specific function restricting scope and facilitating maintenance.
Encapsulation enhances reusability and tool support as Bower allows use by any developer
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.
Allows differentiated scope for CSS, DOM, and APIs
Integration is done at low level in the DOM so interoperability is complete. It is not necessary to use other JavaScript libraries such as jQuery because we can directly use querySelector, querySelectorAll, getElementById, etc since IE 9 and all other browsers already support this.
Implemented by default.
It is obvious when we use it because of these advantages mentioned above.
The testability of components is provided by the WCT - Web Component Tester link
Mixins serve to add behavior of objects in 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 hosted on github can be accessed via Bower
bower install --save Polymer/core-elements
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 set of features for dynamic Layout management.
use to implement Themes for the application
Tags can be used to declaratively transpose content between transitions
Visual tool available as a playground for developing dialogs and application pages using drag-and-drop.
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>