What is Google Polymer?
It’s a core library makes it easier than ever, to make fast, beautiful, and interoperable web components, Google Polymer is built on top of the concept of Web Components. Polymer is developed by Google and its latest production ready version is Polymer 1.0.
Type of Elements polymer 1.0 offers
- Iron Elements: A set of visual and non-visual utility elements. Includes elements for working with layout, user input, selection, and scaffolding apps.
- Paper Elements: Paper elements are a set of visual elements that implement Google’s Material Design.
- Google Web Components: Finished elements Developed By Google.
- Gold Elements: The gold elements are built for e-commerce use-cases like checkout flows.
- Neon Elements:“Neon elements implement special effects.”
- Platinum Elements: Elements to turn your web page into a true web app, with push, offline, Bluetooth and more.
Syntax of elements
Custom element names (regardless of what framework you use to create them) must include a hyphen.
What is Web Components?
Web Components consists of several separate technologies. You can think of Web Components as reusable user interface widgets that are created using open Web technology. They are part of the browser, and so they do not need external libraries like jQuery or Dojo. An existing Web Component can be used without writing code, simply by adding an import statement to an HTML page. Web Components use new or still-developing standard browser capabilities.
Web Components consists of these four technologies (although each can be used separately):
- Custom Elements
- HTML Templates
- Shadow DOM
- HTML Imports
What is Polyfills?
To support Web Components we need polyfills. The webcomponent.js polyfills enable Web Components in (evergreen) browsers that lack native support. webcomponents.js is a set of polyfills built on top of the Web Components specifications. It makes it possible for developers to use these standards today across all modern browsers.
In my opinion, Bower is the best way to install Polymer. Because, bower installation is smooth and free of many complex tasks.
After the installation folder structure of your polymer will be as follows.
Notice the polymer folder under the ./bower_components/
To figure out why we need polymer and what are the previous technologies, we need to do a short analysis of History of Web.
Top and mostly used polymer components
Every polymer components is useful in its own way, but, there are few which is most used by Developers.
- google-maps (https://elements.polymer-project.org/elements/google-map) It renders google map on your application(element) page.
- google-chart (https://elements.polymer-project.org/elements/google-chart) Displays nice charts at UI level.
- google-analytics-view-selector (https://elements.polymer-project.org/elements/google-analytics) Used for google paralytics connectivity.
- iron-ajax (https://elements.polymer-project.org/elements/iron-ajax) without iron-ajax, ajax request are not possible.
- google-YouTube ( https://elements.polymer-project.org/elements/google-youtube) attaches YouTube player into a web component.
- paper-input (https://elements.polymer-project.org/elements/paper-input) Most frequently used by developers, excellent UI for a input element.
- paper-button ( https://elements.polymer-project.org/elements/paper-button) This button has ripple effect emanates from the point of contact. It may be flat or raised. A raised button is styled with a shadow.
- platinum-https-redirect ( https://elements.polymer-project.org/elements/platinum-https-redirect ) This element redirects the current page to HTTPS.
Advantages and disadvantages of using Polymer
- Polymer web development is all about creating elements and is only about creating elements. So, consistent with the Polymer world view, our application is going to be… a new element. Nothing more and nothing less. Oh OK, I get it. So that’s where we start.
- Completely new way of thinking, a totally new approach towards web development. We can say Element-centric approach, whatever application you will develop will be treated and called as a new element in the web world.
- Lack of documentation and guidance.
- It’s not entirely clear how to organize larger applications.
- Dependency error, pointing to different version dependencies.
- Problems on mobile platforms.
- Downloading the entire library and polyfills.
- Improper error reporting.
- Not yet well suited to development of a large, enterprise level, production-ready application.
What is google polymer designer?
Google polymer designer tool allow developers to design quick view of their elements. It contains so many core and custom elements. As per 13/01/2016 listing of the elements in a palette are as follows.
- chart-js (Easy, object oriented client side graphs for designers and developers.) https://github.com/PolymerLabs/chart-js/blob/master/chart-js.html
- code-mirror ( This repo is deprecated, as it targets Polymer 0.5. ) https://github.com/PolymerLabs/code-mirror.
- cool-clock (Display an analog clock using canvas ) https://github.com/PolymerLabs/cool-clock.
- Google Map (The google map element renders a Google Map.) https://github.com/GoogleWebComponents/google-map
- Google Map Direction (activate map with a start and end address ) https://github.com/GoogleWebComponents/google-map/blob/master/google-map-directions.html
- Google Map Search (It provides Google Maps Places API functionality ) https://github.com/GoogleWebComponents/google-map/blob/master/google-map-search.html
- Notification (API wrapper that allows you to do Notifications using Polymer ) https://github.com/mateusortiz/notification-elements
- Smoothie Chart (used for Smoothie charts) https://github.com/PolymerLabs/smoothie-chart
- Speech Mic (element has a mic icon and tapping on the mic will start the speech recognition and invite the user to allow a page access to their microphone.) https://github.com/PolymerLabs/speech-mic
- Youtube Search Video (render youtube) https://github.com/PolymerLabs/youtube
- Ajax (it’s replaced by iron-ajax used for REST calls) https://github.com/polymerelements/iron-ajax
- Animated Pages (core-animated-pages selects one of its children “pages” to show and runs a transition when switching between them. ) https://github.com/Polymer/core-animated-pages/
- Card (card UI component) https://github.com/PolymerElements/paper-card
- Drawer Panel (
core-drawer-panelcontains a drawer panel and a main panel. ) https://github.com/polymer/core-drawer-panel
- Field (The
core-fieldsupplies a horizontal layout, anticipating an input. ) https://github.com/Polymer/core-field
- Header Panel (
core-header-panelcontains a header section and a content panel section. ) https://github.com/Polymer/core-header-panel
- Icon Button
- Menu Button
- Scroll Header Panel
- Sub Menu
Demo (some of the finished elements by polymer team)
- Quiz Demo Front Page
- Quiz Demo Grid
- Quiz Demo Question
- Quiz Demo Score
Paper (UI elements by Polymer team)
- Floating Action Button
- Floating Action Button Panel
- Icon Button
- Panel with Tabs
- Radio Button
- Radio Group
- Toggle Button
Topeka (it’s a Demo Project from google)
- Avatar Selector
- Quiz View
That’s all about Google Polymer, Its component and using Google Polymer Advantages and Disadvantages. If you find the information in this post useful, be sure to share it with your fellow bloggers and friends via Facebook, Twitter, Google Plus or any of your social media forums.