275 lines
No EOL
14 KiB
HTML
275 lines
No EOL
14 KiB
HTML
<!doctype html>
|
||
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
|
||
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
|
||
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
|
||
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
<title>Why we use web components and Polymer - Home Assistant</title>
|
||
<meta name="author" content="Paulus Schoutsen">
|
||
<meta name="description" content="In this blog post I talk about the reasoning to use web components and Polymer.">
|
||
|
||
<meta name="viewport" content="width=device-width">
|
||
<link rel="canonical" href="https://home-assistant.io/blog/2016/05/18/why-we-use-polymer/">
|
||
|
||
<meta property="fb:app_id" content="338291289691179">
|
||
<meta property="og:title" content="Why we use web components and Polymer">
|
||
<meta property="og:site_name" content="Home Assistant">
|
||
<meta property="og:url" content="https://home-assistant.io/blog/2016/05/18/why-we-use-polymer/">
|
||
<meta property="og:type" content="article">
|
||
<meta property="og:description" content="In this blog post I talk about the reasoning to use web components and Polymer.">
|
||
<meta property="og:image" content="https://home-assistant.io/images/default-social.png">
|
||
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:site" content="@home_assistant">
|
||
<meta name="twitter:creator" content="@balloob">
|
||
<meta name="twitter:title" content="Why we use web components and Polymer">
|
||
<meta name="twitter:description" content="In this blog post I talk about the reasoning to use web components and Polymer.">
|
||
<meta name="twitter:image" content="https://home-assistant.io/images/default-social.png">
|
||
|
||
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet">
|
||
<link href="/atom.xml" rel="alternate" title="Home Assistant" type="application/atom+xml">
|
||
<link rel='shortcut icon' href='/images/favicon.ico' />
|
||
<link rel='icon' type='image/png' href='/images/favicon-192x192.png' sizes='192x192' />
|
||
</head>
|
||
|
||
<body >
|
||
|
||
<header>
|
||
<div class="grid-wrapper">
|
||
<div class="grid">
|
||
|
||
<div class="grid__item three-tenths lap-two-sixths palm-one-whole ha-title">
|
||
<a href="/" class="site-title">
|
||
<img width='40' src='/demo/favicon-192x192.png'>
|
||
<span>Home Assistant</span>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="grid__item seven-tenths lap-four-sixths palm-one-whole">
|
||
<nav>
|
||
<input type="checkbox" id="toggle">
|
||
<label for="toggle" class="toggle" data-open="Main Menu" data-close="Close Menu"></label>
|
||
<ul class="menu pull-right">
|
||
|
||
<li><a href="/getting-started/">Getting started</a></li>
|
||
<li><a href="/components/">Components</a></li>
|
||
<li><a href="/ecosystem/">Ecosystem</a></li>
|
||
<li><a href="/cookbook/">Examples</a></li>
|
||
<li><a href="/developers/">Developers</a></li>
|
||
<li><a href="/blog/">Blog</a></li>
|
||
<li><a href="/help/">Need help?</a></li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
|
||
|
||
<div class="grid-wrapper">
|
||
<div class="grid grid-center">
|
||
|
||
<div class="grid__item two-thirds lap-one-whole palm-one-whole">
|
||
|
||
|
||
<article class="post">
|
||
|
||
<header>
|
||
|
||
<h1 class="title indent">Why we use web components and Polymer</h1>
|
||
|
||
|
||
|
||
<div class="meta clearfix">
|
||
<time datetime="2016-05-18T00:09:00+00:00" pubdate data-updated="true"><i class="icon-calendar"></i> May 18, 2016</time>
|
||
<span class="byline author vcard"><i class='icon-user'></i> Paulus Schoutsen</span>
|
||
<span><i class='icon-time'></i> three minutes reading time</span>
|
||
<span>
|
||
<i class="icon-tags"></i>
|
||
<ul class="tags unstyled">
|
||
|
||
|
||
<li>Technology</li>
|
||
|
||
|
||
</ul>
|
||
</span>
|
||
|
||
<a class='comments'
|
||
href="#disqus_thread"
|
||
>Comments</a>
|
||
|
||
</div>
|
||
|
||
</header>
|
||
|
||
|
||
<p>I’ve been planning to write this post for a while now as we get questions like this a lot: <em>“Why does Home Assistant use Polymer? Why not React, Redux and what not?”</em></p>
|
||
|
||
<p>It’s understandable, Polymer is quite the underdog in the world of web frameworks. A corporate backer does not guarantee popularity or an active community and this shows in the number of projects using Polymer.</p>
|
||
|
||
<p>Still, <a href="https://home-assistant.io/demo">we use Polymer and it’s awesome</a>. To explain why, I’ll be referencing the React workflow quite a bit, as they do a lot of things right, and show how it is done in Polymer.</p>
|
||
|
||
<p>Polymer gives us components for the web, just like React, but based on web standards: <a href="https://www.w3.org/standards/techs/components#w3c_all">web components</a>, <a href="https://www.w3.org/TR/css-variables/">CSS variables</a>. These standards don’t have wide browser support yet but it’s being implemented by every major browser: It’s the future. For now they are being polyfilled and that works just fine but in the future the Home Assistant web app will be able to run native in the browsers == fast.</p>
|
||
|
||
<a name="read-more"></a>
|
||
|
||
<p>Polymer does not have the nice developer experience that one can have with React and the <a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en">React Dev Tools</a> but that’s a matter of time. The developer tools in every browser have seen a lot of improvements recently and each improvement helps support for web components.</p>
|
||
|
||
<p>Another major benefit of Polymer for Home Assistant is that we get <a href="https://elements.polymer-project.org/browse?package=paper-elements">material design for free</a>. The material design components that come with Polymer have a very high quality. Google is using these components themselves and make sure that performance and accessibility using screen readers/keyboards are great. As an open source project, the more we can outsource, the better - so our contributors can focus on the core product: home automation.</p>
|
||
|
||
<p>What about Flux, data management and interaction between components? It’s actually pretty similar to React or any other component based framework. Flux-like architectures work with Polymer just like with React: whenever data changes it will update the attributes of a component which will propagate to the children. For Home Assistant we use <a href="https://optimizely.github.io/nuclear-js/">NuclearJS</a> with our <a href="http://paulusschoutsen.nl/blog/2015/07/using-polymer-with-flux-and-a-global-app-state/">own Polymer bindings</a>. For data moving from child to parent the Polymer pattern is using DOM events instead of callbacks but the end result is the same. It is so similar in fact, that it took me only two hours to make a <a href="https://github.com/balloob/home-assistant-react-native-ios">React Native frontend for on top of our core</a>.</p>
|
||
|
||
<p>So what about Babel and ES2015? Also this is covered. Each web component exists of a HTML template and a JavaScript class to back it. Think of the HTML template as the render method in React. In Home Assistant we have the HTML templates import one another and have a separate chain for the JavaScript classes backing each component. This allows us to use Babel and NPM modules for the JavaScript part (<a href="https://github.com/home-assistant/home-assistant-polymer#building-the-app">more info here</a>). This does however come with the downside of other JS based frameworks: the browser blocks any painting while the JavaScript is being parsed instead of upgrading the website incrementally. This, however, is something we take for granted right now and hope that module bundlers will be able to solve this for us eventually. Tree shaking is a very promising improvement in this space.</p>
|
||
|
||
<p>Most of this blog post has been comparing Polymer to React. In many ways Polymer is similar to React but it is not as far evolved yet. I like React but I do not see it as a technology that will be around forever. Given the trend of previous popular JS frameworks, React will probably get replaced by another framework that works even better. Web components however will be here forever as they are part of the HTML standard. And this gives us peace of mind at the virtual Home Assistant headquarters: we do not have to be afraid of having to rewrite our frontend just to stay relevant or because people don’t want to include another dependency just to run this legacy piece.</p>
|
||
|
||
<p>So there it is, the reason why we use Polymer.</p>
|
||
</article>
|
||
|
||
|
||
<section id="disqus">
|
||
<h3 class="indent title">Comments</h3>
|
||
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript></div>
|
||
</section>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
<aside id="sidebar" class="grid__item one-third lap-one-whole palm-one-whole">
|
||
<div class="grid">
|
||
|
||
|
||
<section class="aside-module grid__item one-whole lap-one-half">
|
||
<h1 class="title delta">About Home Assistant</h1>
|
||
<ul class="divided">
|
||
<li>
|
||
Home Assistant is an open-source home automation platform running on Python 3. Track and control all devices at home and automate control.
|
||
</li>
|
||
<li><a href='/getting-started/'>Get started with Home Assistant</a></li>
|
||
<li><a href='/demo/'>Try the online demo</a></li>
|
||
<li><a class="twitter-follow-button" href="https://twitter.com/Home_Assistant">Follow Home Assistant on Twitter</a></li>
|
||
<li><div class="fb-like" data-href="https://www.facebook.com/homeassistantio/" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="false"></div></li>
|
||
</ul>
|
||
</section>
|
||
<div id="fb-root"></div>
|
||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=true;js.src='//platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
|
||
<script>(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return;}js=d.createElement(s);js.id=id;js.async=true;js.src="//connect.facebook.net/en_US/all.js#appId=338291289691179&xfbml=1";fjs.parentNode.insertBefore(js,fjs);}(document,'script','facebook-jssdk'));</script>
|
||
|
||
|
||
<section class="sharing aside-module grid__item one-whole lap-one-half">
|
||
<h1 class="title delta">Share this post</h1>
|
||
|
||
<a href="//twitter.com/share"
|
||
class="twitter-share-button"
|
||
data-via="home_assistant"
|
||
data-related="home_assistant"
|
||
data-url="https://home-assistant.io/blog/2016/05/18/why-we-use-polymer/"
|
||
data-counturl="https://home-assistant.io/blog/2016/05/18/why-we-use-polymer/" >Tweet</a>
|
||
|
||
|
||
<div class="fb-share-button" style='top: -6px;'
|
||
data-href="https://home-assistant.io/blog/2016/05/18/why-we-use-polymer/"
|
||
data-layout="button_count">
|
||
</div>
|
||
|
||
|
||
<div class="g-plusone" data-size="standard"></div>
|
||
|
||
</section>
|
||
|
||
<script src="https://apis.google.com/js/platform.js" async defer></script>
|
||
<section id="recent-posts" class="aside-module grid__item one-whole lap-one-half">
|
||
<h1 class="title delta">Recent Posts</h1>
|
||
<ul class="divided">
|
||
|
||
|
||
<li class="post">
|
||
<a href="/blog/2016/12/03/remote-websockets-sonarr/">0.34: New Remote component, Websockets, Sonarr, GPSLogger</a>
|
||
</li>
|
||
|
||
|
||
|
||
<li class="post">
|
||
<a href="/blog/2016/11/20/calendar-wink-thermostats-cisco-ios/">0.33: New Calendar component, Wink thermostats and Cisco IOS</a>
|
||
</li>
|
||
|
||
|
||
|
||
<li class="post">
|
||
<a href="/blog/2016/11/05/hacktoberfest-influxdb-weather/">0.32: Hacktoberfest, InfluxDB sensor, Error reporting, and Weather</a>
|
||
</li>
|
||
|
||
|
||
|
||
<li class="post">
|
||
<a href="/blog/2016/10/25/explaining-the-updater/">Explaining the Updater</a>
|
||
</li>
|
||
|
||
|
||
|
||
<li class="post">
|
||
<a href="/blog/2016/10/22/flash-briefing-updater-hacktoberfest/">0.31: Reading you the news, some serious business, spooky hackery and a breaking Z-Wave change</a>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
</section>
|
||
|
||
|
||
</div>
|
||
</aside>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<footer>
|
||
<div class="grid-wrapper">
|
||
<div class="grid">
|
||
<div class="grid__item">
|
||
<div class="copyright">
|
||
<a rel="me" href='https://twitter.com/home_assistant'><i class="icon-twitter"></i></a>
|
||
<a rel="me" href='https://facebook.com/homeassistantio'><i class="icon-facebook"></i></a>
|
||
<a rel="me" href='https://plus.google.com/110560654828510104551'><i class="icon-google-plus"></i></a>
|
||
<a rel="me" href='https://github.com/home-assistant/home-assistant'><i class="icon-github"></i></a>
|
||
|
||
<div class="credit">
|
||
Contact us at <a href='mailto:hello@home-assistant.io'>hello@home-assistant.io</a>.<br>
|
||
Website powered by <a href='http://jekyllrb.com/'>Jekyll</a> and the <a href='https://github.com/coogie/oscailte'>Oscalite theme</a>.<br />
|
||
Hosted by <a href='https://pages.github.com/'>GitHub</a> and served by <a href='https://cloudflare.com'>CloudFlare</a>.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
var _gaq=[['_setAccount','UA-57927901-1'],['_trackPageview']];
|
||
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
|
||
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
|
||
s.parentNode.insertBefore(g,s)}(document,'script'));
|
||
</script>
|
||
<script>
|
||
var disqus_shortname = 'home-assistant';
|
||
|
||
|
||
// var disqus_developer = 1;
|
||
var disqus_identifier = 'https://home-assistant.io/blog/2016/05/18/why-we-use-polymer/';
|
||
var disqus_url = 'https://home-assistant.io/blog/2016/05/18/why-we-use-polymer/';
|
||
var disqus_script = 'embed.js';
|
||
|
||
(function () {
|
||
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
|
||
dsq.src = '//' + disqus_shortname + '.disqus.com/' + disqus_script;
|
||
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
|
||
}());
|
||
</script>
|
||
</body>
|
||
</html> |