September 13, 2016
From nczonline.net, with love.

Web Components

Hi everyone,

If you haven't heard of web components yet, it's likely you will start to hear about them soon. The goal of web components is to allow developers to define fully-encapsulated, reusable components for web applications. Web components have been in development for a few years and are just finally making it into browsers in a usable form.

The first thing to understand about web components is that it's not a single specification. In fact, there are four different specifications that make up web components: HTML imports, shadow DOM, custom elements, and HTML templates. These pieces, when used separately or together, allow you even more fine-grained control over how the browser interprets your markup.

While some are quick to compare web components to React, there are only some similarities and many more differences. The primary similarity is that both want to encourage reusable components (at some level). After that, the two approaches diverge quickly. React is highly optimized for re-rendering based on data changes whereas web components have no built-in concept of such a thing (though you could use HTML templates to do something similar).

The real promise of web components is finally having a portable, browser-agnostic way of creating reusable UI components. If you've been a web developer for a while, you may have went through the exercise of converting a YUI menu widget into a jQuery menu widget and then into a React menu widget. As Dion Almaer pointed out, with web components, you can create a menu widget that works in all browsers and can be used with any library or framework. You'll never need to rewrite a widget again.

Whether or not web components are on your roadmap, it's a set of technologies that is worth looking into. The possibilities for improving code reuse are there, and as more browsers are implementing these technologies (currently available in Firefox, Chrome, and Safari), I believe web components will become an ever-increasingly important tool in the front-end toolbox. 

Be well.


-N

P.S. If you live in the United States, the print version of Understanding ECMAScript 6 is now shipping. It should be available in other countries soon, too.
This newsletter is subscriber supported!
There are many ways to support it: Leave a tipbecome a patron, or buy a book.

Recommended Links

Recent "ES6 modules in Node" Discussions (link collection)
Adding ECMAScript 6 module support into Node.js has turned into one of the most heated and controversial tasks in the Node.js engine. While the current proposal is to use a .mjs extension for ES6 modules, there are many who don't like this approach. The discussion has been ongoing for months and this gist contains links to different points of view in the debate. At some point, ES6 modules will make it to Node.js, it's just a matter of determining the form that implementation will take.

Housing Go - Behind the Scenes (article)
As progressive web applications (PWAs) become more common, we're starting to see more writeups about how various PWAs came into being. This article is a quick read and covers housing.com's creation of a PWA as their primary mobile experience. The team took into account a lot of different use cases and, using common frameworks, created a fast, responsive mobile experience that they're proud of.

Complexities of an Infinite Scroller (article)
Infinite scrollers are one of the most complex UI elements in web applications today. It's a problem far more involved than simple loading new items once you've scrolled to the end of a list. The real trick is making the list continue to scroll, uninterrupted, without any lags. This article digs into the details of creating a performant infinite scroller, taking into account memory utilization and user interaction. 

Moment of Zen

"Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away."
- Antoine de Saint-Exupery

Recommended Book

If you've ever stopped to wonder how you can seemingly just "know" some things while other things require you to stop and really think hard about them, then Thinking Fast and Slow is for you. In this book, the author shares his research on the two different ways that our brain functions: fast (instinctive) and slow (logical). It turns out that familiarity switches us into fast mode, the mode we prefer, which is why things like unfamiliar code conventions can create a seemingly outsized amount of stress. Understanding when you use each system gives you a better understanding of not just yourself, but other people as well. I find myself referencing this book frequently when talking about why people behave in certain ways and found each page to be filled with useful information.  

Recently on NCZOnline

ES6 module loading: More complicated than you think
One of the most long-awaited features of ECMAScript 6 is the formal definition of modules as part of the language. For years, JavaScript developers have struggled with organizing their code and needing to decide between alternate ad-hoc module formats like RequireJS, AMD, and CommonJS. Formally defining modules as part of JavaScript will eliminate a lot...

Mimicking npm script in Node.js
I'm a big fan of npm scripts[1] and have been using them in all of my projects instead of a standalone build system. The feature I like the most from npm scripts is the ability to run command line executables that are installed in your project's node_modules/.bin directory. That allows you to, for example, install...

Reflections on ESLint's success
It's hard for me to believe, but I first conceived and created ESLint[1] in June 2013 and first announced it's availability in July 2013[2]. As frequent readers might recall, the primary goal of ESLint was to create a linter with rules that could be loaded at runtime. I had seen some problems in our JavaScript...

Books I've Written

Feedback

Love this newsletter? Hate it? Have suggestions for how to make it better? When you subscribe to the newsletter, you can just reply to send in feedback.

Ready to subscribe?

Join over 2,000 others and subscribe to get the newsletter delivered to your inbox every other Tuesday. 
If you enjoy this newsletter and would like to support my work (including the newsletter, my blog, my books, and ESLint), please consider becoming a patron. I provide a lot of free content and your support allows me to spend more time doing so, and there are great rewards for patrons.
Copyright © 2016 Nicholas C. Zakas, All rights reserved.


unsubscribe from this list    update subscription preferences