{"id":1071,"date":"2015-02-16T06:44:23","date_gmt":"2015-02-16T06:44:23","guid":{"rendered":"https:\/\/intelligentbee.com\/blog\/?p=1071"},"modified":"2024-08-28T12:35:06","modified_gmt":"2024-08-28T12:35:06","slug":"test-drive-googles-polymer","status":"publish","type":"post","link":"https:\/\/intelligentbee.com\/blog\/test-drive-googles-polymer\/","title":{"rendered":"Test Drive: Google Polymer"},"content":{"rendered":"<p>Before we get started there is one thing we have to know: the latest version of Polymer at this moment is 0.5.4 and it was launched on January 28th, 2015 and is still in developer preview.<\/p>\n<p>This should give us an idea about the stage of this technology and make us ask ourselves if <em>it really is ready to be used on production?<\/em><\/p>\n<p><!--more--><br \/>\nLuckily, someone from Polymer thoughtfully answered that question:<\/p>\n<blockquote><p>Polymer is currently in \u201cdeveloper preview.\u201d However, despite the label many people have already had success using Polymer in production. Although things might still change, we encourage developers to take Polymer out for a test drive.<\/p><\/blockquote>\n<p>That being said..<\/p>\n<p>&nbsp;<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_68_1 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/intelligentbee.com\/blog\/test-drive-googles-polymer\/#What_is_Polymer_and_what_can_we_do_with_it\" title=\"What is Polymer and what can we do with it?\">What is Polymer and what can we do with it?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/intelligentbee.com\/blog\/test-drive-googles-polymer\/#Polymer_%E2%80%93_%E2%80%9CEverything_is_an_element%E2%80%9D\" title=\"Polymer &#8211; &#8220;Everything is an element&#8221;\">Polymer &#8211; &#8220;Everything is an element&#8221;<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"What_is_Polymer_and_what_can_we_do_with_it\"><\/span>What is Polymer and what can we do with it?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Polymer is both a development library for web components, which uses native implementations where available and polyfills* where not, and a UI library with common elements and patterns built using its own technology.<\/p>\n<p><span style=\"color: #999999;\">*A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively.<\/span><\/p>\n<p>In other words, Polymer&#8217;s main parts are:\u00a0Web Components and Material Design.<\/p>\n<p>Web components are a suite of connected technologies aimed at making elements reusable across the Web.<\/p>\n<p>The suite:<\/p>\n<ul>\n<li>Custom Elements<\/li>\n<li>Shadow DOM<\/li>\n<li>HTML Imports<\/li>\n<li>Templates<\/li>\n<\/ul>\n<p>You can find out more about web components <a title=\"web components\" href=\"https:\/\/www.webcomponents.org\/introduction\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n<p>Let&#8217;s quickly go through the web component suite and see how it\u00a0works.<\/p>\n<h3>Custom Elements<\/h3>\n<p>They allow us to define our own new HTML tags, or to extend already existing ones.<\/p>\n<p>Their purpose\u00a0is to help us write meaningful, maintainable and easy to read code using elements that have attached to themselves custom functionality, a basic API per element.<\/p>\n<p><a title=\"custom element example\" href=\"http:\/\/jsfiddle.net\/0zneLph7\/\" target=\"_blank\" rel=\"noopener\">Here<\/a> you have a basic example of a custom element.<\/p>\n<p>If you want to learn more about custom elements, follow this <a title=\"custom elements in depth\" href=\"http:\/\/www.html5rocks.com\/en\/tutorials\/webcomponents\/customelements\/\" target=\"_blank\" rel=\"noopener\">link<\/a>.<\/p>\n<h3>Shadow DOM<\/h3>\n<p>It solves\u00a0the encapsulation problem! =&gt; they can be\u00a0an alternative to iframes =&gt;\u00a0Great Success for web widgets!<\/p>\n<p>The magic explained\u00a0:<\/p>\n<ul>\n<li>Container page\u2019s javascript\/style can\u2019t accidentally modify your component;<\/li>\n<li>Page\u2019s IDs can\u2019t overlap with component\u2019s IDs;<\/li>\n<\/ul>\n<p>Shadow elements can be styled &#8211; click\u00a0<a title=\"style the shadow dom elements\" href=\"http:\/\/robdodson.me\/shadow-dom-css-cheat-sheet\/\" target=\"_blank\" rel=\"noopener\">Here<\/a>\u00a0to\u00a0see how.<\/p>\n<p>Now, let&#8217;s see the shadow DOM in action. Follow this <a title=\"shadow DOM at work\" href=\"http:\/\/jsfiddle.net\/zydhq9dg\/\" target=\"_blank\" rel=\"noopener\">link<\/a>, please :).<\/p>\n<p>If you check your console on that example, you&#8217;ll see how the shadow content is\u00a0inaccessible from the outside, although the browser renders our desired result.<\/p>\n<h3>HTML Imports<\/h3>\n<p>This is how you include your elements in your page.<\/p>\n<p>Of course there&#8217;s much more to learn about it. Just go <a title=\"html imports\" href=\"http:\/\/www.html5rocks.com\/en\/tutorials\/webcomponents\/imports\/\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Templates (&lt;template&gt;)<\/strong><\/p>\n<p>Contains the markup intended to be used later (the inert DOM structure ). This means that this DOM structure, although parsed by the browser, is not rendered.<\/p>\n<p>See templates in action <a title=\"templates in action\" href=\"http:\/\/jsfiddle.net\/zydhq9dg\/2\/\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n<p>Want to learn more? <a title=\"templates\" href=\"http:\/\/www.html5rocks.com\/en\/tutorials\/webcomponents\/template\/\" target=\"_blank\" rel=\"noopener\">There you go.<\/a><\/p>\n<p>&nbsp;<\/p>\n<h3>Material Design<\/h3>\n<p>Following the next three principles:<\/p>\n<ul>\n<li>material is a metaphor<\/li>\n<li>bold, graphic, intentional<\/li>\n<li>motion provides meaning<\/li>\n<\/ul>\n<p>it&#8217;s more revealing to us by experiencing the feeling\u00a0than to think too much about it. So&#8230;<\/p>\n<p><iframe title=\"Material design\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/Q8TXgCzxEnw?feature=oembed&#038;enablejsapi=1&#038;origin=https:\/\/intelligentbee.com&#038;width=840&#038;height=1000&#038;discover=1\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<p>I feel i can&#8217;t close this chapter without telling you about <strong><a title=\"materialize\" href=\"http:\/\/materializecss.com\/\" target=\"_blank\" rel=\"noopener\">materialize.css<\/a>. <\/strong><\/p>\n<p><strong>&#8220;<\/strong>A modern responsive front-end framework based on Material Design<strong>&#8221;\u00a0<\/strong>they say. I&#8217;ll leave it to you to decide this, so give it a try.<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Polymer_%E2%80%93_%E2%80%9CEverything_is_an_element%E2%80%9D\"><\/span>Polymer &#8211; <em>&#8220;Everything is an element&#8221;<\/em><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>As I earlier said, Polymer embodies a\u00a0development library and a UI library, and we can clearly see this from how it&#8217;s elements\u00a0are grouped in the two main packages: the Core elements and the paper elements.<\/p>\n<p><a title=\"core elements\" href=\"https:\/\/www.webcomponents.org\/collection\/Polymer\/elements\" target=\"_blank\" rel=\"noopener\">Here<\/a> you have the list of core elements.<\/p>\n<p>and<\/p>\n<p><a title=\"paper elements\" href=\"https:\/\/www.webcomponents.org\/collection\/Polymer\/elements\" target=\"_blank\" rel=\"noopener\">here<\/a> you have the list of paper elements.<\/p>\n<p>Play with them so you can get a better feeling about what they&#8217;re useful for.<\/p>\n<p>If you&#8217;re not satisfied with what Polymer is already bringing to the table, you can create your own element anytime. And this is a fairly easy thing to do!<\/p>\n<blockquote><p><strong>OK, so how do I get started?<\/strong><\/p><\/blockquote>\n<ol>\n<li>First thing you&#8217;ll need is a web server. You need it so you can import the template files without upsetting the browser.<\/li>\n<li>Get the Polymer files. One way to do this (and the way I prefer) is to install the package with bower. This infers that you have to install bower first if you didn&#8217;t already do this. Get started <a title=\"bower\" href=\"http:\/\/bower.io\/\" target=\"_blank\" rel=\"noopener\">here<\/a>. After doing this, run the following command:\n<pre class=\"lang:php decode:true\">bower install --save Polymer\/polymer<\/pre>\n<p>This will get you the\u00a0Web Components polyfill library. For other packages you&#8217;ll want to use, you&#8217;d have to install them separately.<\/li>\n<\/ol>\n<h3><strong>If you want to use an existing Polymer element:<\/strong><\/h3>\n<ol>\n<li>Install the corresponding package. You can do this through bower, running a command like this:\n<pre class=\"lang:php decode:true\">bower install Polymer\/&lt;whatever-package&gt;<\/pre>\n<p>You can find the suitable command for each package on the polymer-project components website.<\/li>\n<li>Include and use it. After installing the package, to use the component you&#8217;d have to include the template in your html page.\n<pre class=\"lang:php decode:true\">&lt;link rel=\u201dimport\u201d href=\u201dbower_components\/&lt;whatever-package&gt;\/&lt;whatever-package&gt;.html\u201d \/&gt;<\/pre>\n<p>Using the component could not be easier. Just add the component tag in your page :<\/p>\n<pre class=\"lang:php decode:true\">&lt;whatever-element&gt;&lt;\/whatever-element&gt;<\/pre>\n<p>&nbsp;<\/li>\n<\/ol>\n<h3><strong>If you want to create your own element<\/strong><\/h3>\n<ol>\n<li>Create the element file. What you have to know is that the element name has to be the same as the file name and this name has to include a hyphen . For example if you&#8217;d want an element called &#8220;banana-tree&#8221;, the file has to be named &#8220;banana-tree.html&#8221;.<\/li>\n<li>Create your element. You can find a simple\u00a0tutorial on how to create a basic element <a title=\"your own element\" href=\"https:\/\/www.polymer-project.org\/1.0\/start\/first-element\/intro\" target=\"_blank\" rel=\"noopener\">here<\/a>. You&#8217;ll see here the great powers of Polymer elements (like styling handlers or two way binding). Be sure to have used them 100%.<\/li>\n<li>Include it and use it. Do this just like you include an already existing Polymer element. See above.<\/li>\n<\/ol>\n<p>It&#8217;s that simple!<\/p>\n<p>Even though I tried to keep it short and simple, I know that looking through\u00a0all the external references in this article can take some time. If you are part of the generous people who gave some of their time to get to this paragraph, I thank you for that and I hope the information matched your expectations. If so, sharing this article is highly appreciated.<\/p>\n<p>&nbsp;<\/p>\n<p>Have fun creating new useful web elements!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Before we get started there is one thing we have to know: the latest version of Polymer at this moment [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":1171,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[77],"tags":[148,197,244],"yst_prominent_words":[355,646],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/posts\/1071"}],"collection":[{"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/comments?post=1071"}],"version-history":[{"count":5,"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/posts\/1071\/revisions"}],"predecessor-version":[{"id":133211,"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/posts\/1071\/revisions\/133211"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/media\/1171"}],"wp:attachment":[{"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/media?parent=1071"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/categories?post=1071"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/tags?post=1071"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=1071"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}