Google Polymer Web Component’s Advantages and Disadvantages

3422

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

  1. Iron Elements: A set of visual and non-visual utility elements. Includes elements for working with layout, user input, selection, and scaffolding apps.
  2. Paper Elements: Paper elements are a set of visual elements that implement Google’s Material Design.
  3. Google Web Components: Finished elements Developed By Google.
  4. Gold Elements: The gold elements are built for e-commerce use-cases like checkout flows.
  5. Neon Elements:“Neon elements implement special effects.”
  6. Platinum Elements: Elements to turn your web page into a true web app, with push, offline, Bluetooth and more.
  7. Molecules: Molecules are elements that wrap other javascript libraries. More of these coming soon!

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):

  1. Custom Elements
  2. HTML Templates
  3. Shadow DOM
  4. 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.

Install with Bower bower install webcomponentsjs

Install with npm npm install webcomponents.js

Installation

In my opinion, Bower is the best way to install Polymer. Because, bower installation is smooth and free of many complex tasks.

bower install –save Polymer/polymer#^1.2.0

After the installation folder structure of your polymer will be as follows.

Folder Structure After Polymer Installation
Folder Structure After Polymer Installation

Notice the polymer folder under the ./bower_components/

History

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.

  1. google-maps (https://elements.polymer-project.org/elements/google-map) It renders google map on your application(element) page.
  2. google-chart (https://elements.polymer-project.org/elements/google-chart) Displays nice charts at UI level.
  3. google-analytics-view-selector (https://elements.polymer-project.org/elements/google-analytics) Used for google paralytics connectivity.
  4. iron-ajax (https://elements.polymer-project.org/elements/iron-ajax) without iron-ajax, ajax request are not possible.
  5. google-YouTube ( https://elements.polymer-project.org/elements/google-youtube) attaches YouTube player into a web component.
  6. paper-input (https://elements.polymer-project.org/elements/paper-input) Most frequently used by developers, excellent UI for a input element.
  7. 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.
  8. 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

With the introduction to HTML 5, Web Components are introduced, which makes the browser more powerful. Hence, dependency on custom Javascript libraries like (AngularJS, Backbones, ember.js, react.js, etc.) is heavily reduced.

Pros:

  1. Polymer believes in leveraging the browser’s “native” technologies rather than relying on an increasingly complex labyrinth of custom JavaScript libraries.
  2. 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.
  3. 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.

Cons:

  1. But let me get this straight. At least for now, we’re going to use JavaScript libraries (i.e., polyfills) to avoid the use of JavaScript Libraries? Well, that’s “fascinating”.
  2. Lack of documentation and guidance.
  3. It’s not entirely clear how to organize larger applications.
  4. Dependency error, pointing to different version dependencies.
  5. Problems on mobile platforms.
  6. Downloading the entire library and polyfills.
  7. Improper error reporting.
  8. Not yet well suited to development of a large, enterprise level, production-ready application.

What is google polymer designer?

Google Polymer Designer
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.

Components

    1. ace-element (Ace is a code editor written in JavaScript) https://github.com/PolymerLabs/ace-element
    2. chart-js (Easy, object oriented client side graphs for designers and developers.) https://github.com/PolymerLabs/chart-js/blob/master/chart-js.html
    3. code-mirror ( This repo is deprecated, as it targets Polymer 0.5. ) https://github.com/PolymerLabs/code-mirror.
    4. cool-clock (Display an analog clock using canvas ) https://github.com/PolymerLabs/cool-clock.
    5. Google Map (The google map element renders a Google Map.) https://github.com/GoogleWebComponents/google-map
    6. Google Map Direction (activate map with a start and end address ) https://github.com/GoogleWebComponents/google-map/blob/master/google-map-directions.html
    7. Google Map Search (It provides Google Maps Places API functionality ) https://github.com/GoogleWebComponents/google-map/blob/master/google-map-search.html
    8. Notification (API wrapper that allows you to do Notifications using Polymer ) https://github.com/mateusortiz/notification-elements
    9. Smoothie Chart (used for Smoothie charts) https://github.com/PolymerLabs/smoothie-chart
    10. 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
    11. Youtube Search Video (render youtube) https://github.com/PolymerLabs/youtube

 Core

    1. Ajax (it’s replaced by iron-ajax used for REST calls) https://github.com/polymerelements/iron-ajax
    2. 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/
    3. Card (card UI component) https://github.com/PolymerElements/paper-card
    4. Drawer Panel (core-drawer-panel contains a drawer panel and a main panel. ) https://github.com/polymer/core-drawer-panel
    5. Field (The core-field supplies a horizontal layout, anticipating an input. ) https://github.com/Polymer/core-field
    6. Header Panel (core-header-panel contains a header section and a content panel section. ) https://github.com/Polymer/core-header-panel
    7. Icon
    8. Icon Button
    9. Input
    10. Item
    11. Menu
    12. Menu Button
    13. Pages
    14. Scaffold
    15. Scroll Header Panel
    16. Section
    17. Selector
    18. Sub Menu
    19. Toolbar
    20. Tooltip

Demo (some of the finished elements by polymer team)

    1. Quiz Demo Front Page
    2. Quiz Demo Grid
    3. Quiz Demo Question
    4. Quiz Demo Score

Paper (UI elements by Polymer team)

    1. Button
    2. Calculator
    3. Checkbox
    4. Floating Action Button
    5. Floating Action Button Panel
    6. Icon Button
    7. Input
    8. Item
    9. Panel with Tabs
    10. Progress
    11. Radio Button
    12. Radio Group
    13. Ripple
    14. Slider
    15. Tab
    16. Tabs
    17. Toast
    18. Toggle Button

Topeka (it’s a Demo Project from google)

    1. App
    2. Avatar
    3. Avatar Selector
    4. Background
    5. Categories
    6. Category
    7. Datasource
    8. Demo
    9. Icon
    10. Leaderboard
    11. Profile
    12. Quiz View
    13. Quizzes

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.