Along with Google Photos, Google has also rebuilt Polymer from scratch, addressing performance improvement and efficiency. Think of Polymer as an SDK (Software Development Kit) for the Web, one which makes web application development so much faster using a new standard called Web Components.
Web Components allow us to create custom elements and tags for our websites. In this post we will look at how the custom elements in Google Polymer can help aid web app development. Plus, we will also look at a few demos on how these custom elements can be put to work.
About Web Components
The best way to understand how Web Components works is by looking at the current standard elements like <audio>. When we add <audio> along with the URL sources of the audio, web browsers will render this element as an audio player with the play and pause button, the time rail as well as the volume slider. Ever wonder how the player controls are built and styled?
The UI control player is hidden beneath as Shadow Roots, also known as Shadow DOM. To view Shadow DOM, launch the Chrome DevTools > click on the Cog icon > select the Show user agent shadow DOM option.
In the following screenshot, you can find a stack of <div> and <input> elements that build the UI player controls in secret.
Today, with Web Components, we can name our own elements as well. We can build an element like, <twitter> to embed a Twitter feed or (maybe) <chart> to embed a chart.
Furthermore, these custom elements may also have a couple of accepted custom attributes. In regard to the <twitter> element, you set an attribute called username which will be used to specify the Twitter username.
<twitter username="hongkiat"></twitter>
Custom Elements in Polymer
Polymer comes with a bunch of elements that account for (almost) every web application need. Google divides these elements into groups: Iron Elements, Paper Elements, Google Web Components, Gold Elements, Neon Elements, Platinum Elements, and Molecules.
1. Iron Elements
Iron Elements is a collection of basic elements. These basic elements are what we normally use to build a web page such as an input, form and image. The difference is Polymer adds some extra powers to these elements.
All elements in this group are iron- prefixed, for example <iron-image>, which is used to display an image. The <iron-image> element has been equipped with some extra attributes that we cannot apply in the regular <img> element. We can, for example, add preload, fade, and placeholder attributes:
<iron-image preload fade placeholder="http://lorempixel.com/600/400" src="http://www.hongkiat.com/img/awesome-image.jpg"></iron-image>
The above example will first show the image placeholder and then fade into the actual image in the src as it is fully loaded, performing a smooth image loading effect.
2. Paper Elements
The Paper Elements is a group of Material Design elements. Material Design is Google design language to makes user interface and experience across Google platforms both the Web and Android apps more visually consistent. Some elements that are unique to Material Design are Paper and Floating Action Button (FAB).
Paper
Paper is Google’s metaphor for the medium that underlies the content. To add a paper with Polymer, we use the <paper-material> element. This element takes 2 attributes:
elevationto lift the Paper, hence adding a shadow to reinforce the elevationanimatedwill apply animation as the Paper elevation change.
Floating Action Button (FAB)
The Floating Action Button (FAB) is a circular button with an icon, floating on the screen, usually with a stand-out color. Google suggests that this button carries a frequently-accessed function. Here’s an example:
The following code snippet adds a Paper Material with an image and an FAB.
<paper-material elevation="1" class="paper">
<iron-image sizing="cover" src="img/berries.jpg" class="image"></iron-image>
<paper-fab icon="favorite" title="heart" tabindex="0" class="button"></paper-fab>
</paper-material>
We will have the following result:
We have a photo with a “heart” button floating on top of it. Click it to Like the photo, adn the button gives off a ripple effect to acknowledge the click.
3. Google Web Components
The Google Web Components are special elements that cope with Google APIs and services such as Google Maps, Youtube, as well as Google Feed, to name a few. Elements in this group make interacting with Google services just a few lines away.
The following is an example to show a Google Map using the <google-map> element.
<google-map latitude="37.422" longitude="-122.084058" zoom="19">
<google-map-marker latitude="37.422" longitude="-122.084058" draggable="true">This is Googleplex</google-map-marker>
</google-map>
As you can above, the <google-map> element takes the latitude and longitude to specify the location on the map. We can also nest <google-map-marker> to show a map marker of that location along with a text which will appear upon clicking on the marker.
Want to show a Youtube video? you can use the <google-youtube> element.
<google-youtube video-id="VgmyVHYV1mE" height="360px" width="640px"></google-youtube>
Similarly we customize the output through attributes.
4. Gold Elements
The Gold Elements are the elements designed specifically for e-commerce apps. Here you will find element to show credit card, email, phone and ZIP input which all have been equipped with format validation to ensure correct data input and security. Here is one example to add Visa credit card input.
<gold-cc-cvc-input card-type="visa"></gold-cc-cvc-input>
5. Other Elements
The remaining elements include Neon elements for animation and special effects, Platinum elements for offline and push notifications and lastly Molecules, wrappers for third-party libraries.
Editor’s Note: At the time of this writing, Neon Elements, Platinum Elements and Molecules are still not available.
Integrating Polymer
Want to use Polymer in your web development? Here’s how to install and integrate it into your web pages. As most Polymer elements rely on one another, the best way to install Polymer is through Bower.
Bower is a project dependencies manager that makes it easier to install scripts or styles required to run the project. Check out our earlier post on how to install, update &remove web libraries easily with Bower.
To integrate Polymer, launch Terminal then navigate to your project directory, assuming you have created one. Then run bower init command to initiate bower.json file into your project that will be used to record the project dependencies. Open bower.json and add the following lines.
"dependencies":
"polymer": "Polymer/polymer#^1.0.0",
"google-web-components": "GoogleWebComponents/google-web-components#^1.0.0",
"iron-elements": "PolymerElements/iron-elements#^1.0.0",
"paper-elements": "PolymerElements/paper-elements#^1.0.0",
"gold-elements": "PolymerElements/gold-elements#^1.0.0"
This setup assumes that we are going to use all the elements from each group. You may remove what you do not need from the dependency list. As the dependencies are set, run the bower install command to install the dependencies on the list.
This process may take a while as it involves grabbing a huge amount of files from the repositories. Once done, you should find them saved in the bower_components folder.
Open the HTML file you want to use the Polymer components in. Within the document head, link the WebComponents.js which is the polyfill for browsers that do not support WebComponents yet, and import the component files using HTML Import.
Here is an example:
<head>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/iron-image/iron-image.html">
<link rel="import" href="bower_components/paper-fab/paper-fab.html">
<link rel="import" href="bower_components/google-map/google-map.html">
</head>
This setup will enable us to use the <iron-image>, <paper-fab>, <google-youtube> elements.
Showcases
Here are some of the web apps that are already using Google Polymer.
Google used Google Polymer in the Google IO 2015 web page; Google Fi, the Google wireless service for carriers and vendors in partnership; and Google Music.
Custom Elements
CustomElements is a hub where you can find custom elements built with Web Components. It makes use of the Paper element to contain and build the list. It also provides a convenient route to install these elements through Bower and NPM.
Chrome Dev Editor
A Chrome application for code editing that works surprisingly well. This app uses the FAB button, Paper menu, and Paper dialog elements in the user interface.
Polymer Designer
A tool to build web application with Polymer elements using a drag-and-drop interface.
Daily Stock Forecast
A stock exchange report and forecast built entirely with Polymer elements.
Ele
Ele is a code editor to create and share Polymer and custom elements built with Polymer API.
Polymer Mail
An email client app for Gmail. It looks nice and fluid, although sadly, it is not fully functioning.
Final Thoughts
Polymer has an enormous scope and it might take you a while to get used to all the custom elements as well as its API. Nonetheless, Web Components and Polymer will certainly influence the way we build web applications. Stay ahead of the crowd by reading more about Web Components – references are found below.
Useful References
- The State of Web Components
- A Detailed Introduction To Custom Elements
- Official Blog of Google Polymer
Google Polymer – How It’ll Change the Way Web Apps are Built
