{"id":24120,"date":"2015-06-16T21:01:01","date_gmt":"2015-06-16T13:01:01","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=24120"},"modified":"2024-05-27T22:06:58","modified_gmt":"2024-05-27T14:06:58","slug":"google-polymer","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/google-polymer\/","title":{"rendered":"Explore Google Polymer: Transforming Web App Development"},"content":{"rendered":"

Along with Google Photos<\/a>, Google has completely revamped Polymer<\/a>, enhancing its performance and efficiency. Think of Polymer as a Software Development Kit (SDK) tailored for the Web, accelerating web application development<\/strong> through the adoption of Web Components<\/a>.<\/p>\n

Web Components enable us to create custom elements and tags for our websites<\/strong>. This post will explore how Polymer\u2019s custom elements can streamline web app development, complemented by practical demos to showcase these elements in action.<\/p>\n

Understanding Web Components<\/h2>\n

The easiest way to grasp Web Components is by looking at existing standard elements like <audio><\/code>. When you insert <audio><\/code> along with its source URLs into a webpage, web browsers automatically render this tag as an audio player, complete with play and pause buttons, a time rail, and a volume slider. Have you ever wondered how these player controls are constructed and styled?<\/p>\n

These UI controls are built using a feature known as Shadow Roots, or Shadow DOM<\/strong>. To see the Shadow DOM, open Chrome DevTools<\/strong>, click on the Cog<\/strong> icon, and then select Show user agent shadow DOM<\/strong>.<\/p>\n

The image below displays how a stack of <div><\/code> and <input><\/code> elements secretly construct the player\u2019s UI controls.<\/p>\n

\"Detailed<\/figure>\n

With Web Components, we can also create our own custom elements. Imagine building an element like <twitter><\/code> to seamlessly integrate a Twitter feed, or <chart><\/code> to display interactive charts.<\/p>\n

These custom elements can support various attributes. For example, for the <twitter><\/code> element, you can set an attribute named username<\/code>, which specifies the Twitter handle to display.<\/p>\n

\r\n <twitter username=\"hongkiat\"><\/twitter>\r\n<\/pre>\n
Exploring Custom Elements in Polymer<\/h2>\n
Polymer offers a comprehensive suite of elements designed to meet nearly every need in web application development. Google categorizes these into several groups: Iron Elements, Paper Elements, Google Web Components, Gold Elements, Neon Elements, Platinum Elements, and Molecules.<\/p>\n
1. Iron Elements<\/h3>\n
Iron Elements<\/a> comprise a set of foundational elements that are typically used to construct web pages<\/strong>, such as inputs, forms, and images. However, Polymer enhances these elements with additional capabilities.<\/p>\n
For instance, the <iron-image><\/code> element, prefixed with \u2018iron-\u2018, includes extra attributes not found in the standard <img><\/code> tag. These include preload<\/code>, fade<\/code>, and placeholder<\/code> attributes, enabling features like:<\/p>\n
\r\n <iron-image preload fade placeholder=\"http:\/\/lorempixel.com\/600\/400\" src=\"https:\/\/www.hongkiat.com\/img\/awesome-image.jpg\"><\/iron-image>\r\n<\/pre>\n
This setup initially displays a placeholder, then smoothly transitions to the actual image as it loads, creating a pleasing visual effect.<\/p>\n
2. Paper Elements<\/h3>\n
Paper Elements<\/strong> reflect Google\u2019s Material Design approach, which aims to unify the user interface and experience across its web and Android platforms. This group includes unique Material Design components like Paper<\/a> and Floating Action Buttons (FAB)<\/a>.<\/p>\n
Paper<\/strong>, a metaphor for the digital canvas underlying content, can be incorporated using the <paper-material><\/code> element with attributes such as elevation<\/code>, which adds a shadow to suggest depth, and animated<\/code>, which applies animations during changes in elevation.<\/p>\n
The Floating Action Button (FAB)<\/strong> is a distinctive, circular button that floats on the interface, typically used for frequently accessed functions. Here\u2019s how to add it:<\/p>\n
\r\n <paper-material elevation=\"1\" class=\"paper\">\r\n <iron-image sizing=\"cover\" src=\"img\/berries.jpg\" class=\"image\"><\/iron-image>\r\n <paper-fab icon=\"favorite\" title=\"heart\" tabindex=\"0\" class=\"button\"><\/paper-fab>\r\n <\/paper-material>\r\n<\/pre>\n
This results in an engaging user interaction: a photo with a \u2018heart\u2019 button that emits a ripple effect when clicked, acknowledging the user\u2019s action.<\/p>\n
\"Interactive<\/figure>\n
By clicking the \u2018heart\u2019 button, you can like the photo, enhancing the user experience with a tactile feedback effect.<\/p>\n
<\/i> View the Paper Demo<\/span><\/a><\/p>\n
3. Google Web Components<\/h3>\n
Google Web Components seamlessly integrate with Google\u2019s APIs and services like Google Maps, YouTube, and Google Feed, among others. These elements simplify interactions with Google services to just a few lines of code<\/strong>.<\/p>\n
Here\u2019s how you can display a Google Map with the <google-map><\/code> element:<\/p>\n
\r\n<google-map latitude=\"37.422\" longitude=\"-122.084058\" zoom=\"19\">\r\n    <google-map-marker latitude=\"37.422\" longitude=\"-122.084058\" draggable=\"true\">This is Googleplex<\/google-map-marker>\r\n<\/google-map>\r\n<\/pre>\n
As shown, the <google-map><\/code> element utilizes latitude<\/code> and longitude<\/code> parameters to pinpoint the location. A nested <google-map-marker><\/code> marks a specific spot and displays text when interacted with.<\/p>\n
<\/i> View the Map Demo<\/span><\/a><\/p>\n
To embed a YouTube video, simply use the <google-youtube><\/code> element:<\/p>\n
\r\n<google-youtube video-id=\"VgmyVHYV1mE\" height=\"360\" width=\"640\"><\/google-youtube>\r\n<\/pre>\n
You can tailor the element\u2019s appearance and behavior with various attributes.<\/p>\n
<\/i> View the YouTube Demo<\/span><\/a><\/p>\n
4. Gold Elements<\/h3>\n
Gold Elements are designed specifically for e-commerce applications, offering elements for displaying and validating credit card, email, phone, and ZIP code inputs to ensure accurate data entry and enhanced security. Here\u2019s an example of integrating a Visa credit card input:<\/p>\n
\r\n<gold-cc-cvc-input card-type=\"visa\"><\/gold-cc-cvc-input>\r\n<\/pre>\n
5. Other Elements<\/h3>\n
This category includes Neon Elements for animations and special effects, Platinum Elements for enhancing offline capabilities and push notifications, and Molecules, which are wrappers for third-party libraries.<\/p>\n
Editor\u2019s Note:<\/strong> As of this writing, Neon Elements, Platinum Elements, and Molecules are still under development.<\/p>\n
How to Integrate Polymer into Your Web Projects<\/h2>\n
Interested in using Polymer for your web development? Here\u2019s a step-by-step guide to installing and integrating it into your web pages. Since many Polymer elements are interdependent, the most efficient way to install Polymer is through Bower.<\/p>\n
Bower is a project dependencies manager that simplifies the installation of scripts or styles necessary for running your project. For more information on Bower, check out our previous post on how to install, update & remove web libraries easily with Bower<\/a>.<\/p>\n
To start with Polymer, open your Terminal, navigate to your project directory (create one if you haven\u2019t already), and run the bower init<\/code> command to create a bower.json file. This file will manage your project\u2019s dependencies. Add the following lines to your bower.json:<\/p>\n
\r\n\"dependencies\": {\r\n  \"polymer\": \"Polymer\/polymer#^1.0.0\",\r\n  \"google-web-components\": \"GoogleWebComponents\/google-web-components#^1.0.0\",\r\n  \"iron-elements\": \"PolymerElements\/iron-elements#^1.0.0\",\r\n  \"paper-elements\": \"PolymerElements\/paper-elements#^1.0.0\",\r\n  \"gold-elements\": \"PolymerElements\/gold-elements#^1.0.0\"\r\n}\r\n<\/pre>\n
This configuration includes all the necessary elements from each group. Feel free to modify the dependency list by removing any elements you don\u2019t need. Once your dependencies are configured, execute the bower install<\/code> command to install them.<\/p>\n
\"Installing<\/figure>\n
The installation process may take some time, as it involves downloading numerous files from the repositories. When complete, the files will be located in the bower_components<\/strong> folder.<\/p>\n
\"Files<\/figure>\n
To utilize Polymer components in your HTML file, open the document head and link the WebComponents.js<\/strong> polyfill for browsers that do not yet support Web Components, and import the component files<\/strong> using HTML Import<\/a>.<\/p>\n
Here\u2019s an example:<\/p>\n
\r\n<head>\r\n  <script src=\"bower_components\/webcomponentsjs\/webcomponents.js\"><\/script>\r\n  <link rel=\"import\" href=\"bower_components\/iron-image\/iron-image.html\">\r\n  <link rel=\"import\" href=\"bower_components\/paper-fab\/paper-fab.html\">\r\n  <link rel=\"import\" href=\"bower_components\/google-map\/google-map.html\">\r\n<\/head>\r\n<\/pre>\n
This setup allows you to incorporate elements such as <iron-image><\/code>, <paper-fab><\/code>, and <google-map><\/code> into your web pages.<\/p>\n
Concluding Thoughts on Polymer<\/h2>\n
Polymer offers extensive capabilities and may require some time to fully grasp its custom elements and API. However, Web Components and Polymer are set to significantly shape the future of web application development. To stay ahead, continue exploring Web Components through the resources listed below.<\/p>\n
<\/i> View Demo<\/span><\/a>\n<\/i> Download Source<\/span><\/a><\/p>\n
Recommended Reading<\/h2>\n