Sunday, November 10, 2013

5 Reasons Web Components Aren't Ready for Prime Time

Wow! Web Components are amazing! Honestly, despite the negative title of this post I'm absolutely floored with excitement for this new set of technologies.

This post is my exercise in grounding my excitement a bit with some reality discovered in actually using them in a serious project, and the issues we've run against and had to deal with.

Web Components are an important part of the future of web development, and libraries like Polymer and X-Tags mean we can use much of their power today, without waiting browser support (which is already under way!) Like so many new technologies, this is also incomplete.

It may be fair, it would be more accurate to say the ecosystem around Web Components is not mature, than to blame Web Components directly. Ecosystems are extremely important. Therefore, the items listed here are the parts of an ecosystem that I believe we need built around this new set of technologies.

Missing Item 1: Routing

Now this one took me by surprise because, at the surface, routing seems to have little to do with defining custom elements and behavior. So how does this work its way into missing bits of the Web Component ecosystem? The lack of routing crept into our project from two facets: the frameworks you might otherwise use happen to include routing and routes feel like they could naturally map into custom elements.

At first the lack of a routing tool seemed simply to be that I wasn't using a framework that already provided one, like AngularJS. That didn't seem like anything to do with the choice of Web Components, it was just an indirect effect of not having gone with a library that included one in its utility belt.

I brought in a library of my own making, which I've re-used in various projects for years, called Hashtrack.js and I'm pretty happy with it.

Pretty quickly it dawned on me that the natural thing for a route to map to? A custom element encapsulating a page within your app. Does that mean a collection of elements and displaying one mapped to by a route or instantiating a given element, perhaps from a template, in response to routing? We've taken the former option at the moment, but I'm thinking the later would be preferable. This makes me wonder if routing should be an intrinsic aspect of custom elements.

Missing Item 2: Outward Data Binding

What do I mean by Outward Data Binding?

The popular model emerging in the use of custom elements is to utilize attributes as the primary input, and this is great. Attributes already serve this purpose for existing elements, defining behavior characteristics and other factors in how a given element is to behave. It makes perfect sense to use attributes as the primary avenue getting data into our components.

But... how do we get changes to that data back out?

The canonical example is probably trying to reproduce the popular and most basic example from AngularJS: Given a text input and a span tag, how do we get changes in the input reflected in the span's text?

<message-form name="Frank">
    <label>Name: <input value="{{ name }}"></label>
      Hello, {{ name }}! It is nice to meet you.

This is something Polymer is already trying to solve, via their Template Binding facilities. These work great! I tend to think they're on to something good. Unfortunately, this is one part of Polymer that is not yet backed by any kind of standards negotiation, not even in an early draft. I don't have great hopes that something quite so opinionated will end up with W3C support, but maybe I'll be surprised.

Or, maybe template binding doesn't need to be standard to be valuable. Maybe this is a great example of the ecosystem to be built around Web Components. My final issue with Polymer template binding is I'm not sure how it, and the mutation observers it relies on, work on a wider set of browsers actually in use today.

Supporting older Android devices that Polymer ignores, we don't have template binding available (dang!) but I've replicated part of the spirit of it. Element templates are extracted and rendered into new instances, and re-rendered when any of the attributes found. This has proven (I think, admittedly with bias) to be a simple solution to getting data inward but has fallen utterly flat when trying to get it back out in as simple a way.

Maybe this is why the Template Binding library from Polymer project is so very not simple!

Missing Item 3: Templates are Complicated by Custom Elements

Speaking of templates... oh boy do Custom Elements confuse them!

The upgrade process involved in locating and initializing the elements you've registered can wreck havoc on our established template libraries. The problems are numerous.

Template rendering on input changes means re-drawing your elements into the DOM, and all of the other custom elements they might contain. Every time you do this, your elements are going to be re-initialized. Dealing with the complexities involved with all of this logic running repeatedly, without unwanted side effects being invoked more often than intended, is a huge hassle.

Our familiar model of rendering from a plain text template outputting DOM to insert into the page doesn't sit well with our lively new Web Components. This is why, if I understand correctly, the approach of Template Binding acting upon live DOM nodes, rather than textual templates, works better. We need to replace our rendering with binding.

For now, I'm using Mustache templates, but being careful to give my elements side-effect free initializes.

Missing Item 4: Decent Browser Support

The elephant in the room. Polymer explicitly decides to support only the most modern browsers, and while some of their polyfills do work on a wider range of clients, important bits like ShadowDOM absolutely do not. X-Tags provides a broader support of browsers, but covers a smaller set of features and provides us with a lot less suggested convention to jump start the architecture of a project using something so new.

Polymer is essentially assuming whatever the new hotness on the block is that week. IE 10/11 only, newest Firefox and Chrome and Opera. This is a part of the idea that Polymer is a plan for the future, even though so much of it is useful today.

X-Tags, on the other hand, claims to support a much better range.

  • Firefox 5+
  • Chrome 4+
  • Android 2.1+
  • Safari 4+
  • IE 9+
  • Opera 11+
This isn't actually completely accurate! It is pretty close, but I've found some issues where suggested features of x-tags don't work on many browsers. One example is the <template> tag shown in the documentation, but which many of these browsers don't support. Don't fear, it is easy to polyfill! Still, this is a bit disheartening.

(hint: x-tags should really include this polyfill)

Missing Item 5: A Community

And this, really, is the killer missing item.


Web Components are a powerful idea, an inevitable advancement of our browsers, and on the way today. They have their flaws, and there is a lot of work to be done, but for the right projects in the right scope with the right developer mindset, you can dip your toes in the warm water.

Start building things. Blog about your successes. Blog about the failures. Share the solutions and the things you find to fill the gaps. Complain on the mailing lists when something is broken, but complain with an idea how it could be fixed. Be a part of what is soon to be a part of all our web development.

You can help fix this last missing item, and from this all the rest will fall into place.

Sunday, November 03, 2013

The essence of minimal product design

Google Search is a prime example of a product that conquerors complexity and enables users to search through 25 billion pages in a fraction of a second.
via the ever brilliant Amir Salihefendic

Learning to combine AngularJS and PouchDB

Are you trying to understand AngularJS? I have been, and a few use cases have eluded me. Most importantly has been the intersection between AngularJS apps and services exposing browser storage to your app. What are the best practices?

This example found on GitHub by Tom Wilson is an excellent example todo app built with AngularJS and PouchDB. The README explains the entire setup in an excellent tutorial!
An AngularJS Tutorial that will walk you through creating a ToDo Application using a local PouchDb. This tutorial should introduce you to some of the AngularJS concepts like directives and data-binding. It will also show you how to build offline applications using PouchDb.

If you're interested in this combination you should check out ngTodoPouch immediately!

Saturday, November 02, 2013

Devil’s Dictionary of Programming

 another great post from Devil’s Dictionary of Programming at Programming is Terrible
simple — It solves my use case.opinionated — I don’t believe that your use case exists.elegant — The only use case is making me feel smart.lightweight — I don’t understand the use-cases the alternatives solve.configurable — It’s your job to make it usable.minimal — You’re going to have to write more code than I did to make it useful.util — A collection of wrappers around the standard library, battle worn, and copy-pasted from last weeks project into next weeks.dsl — A domain specific language, where code is written in one language and errors are given in another.framework — A product with the business logic removed, but all of the assumptions left in.documented —There are podcasts, screencasts and answers on stack overflow.startup — A business without a business plan.hackday — A competition where the entry fee is sleep deprivation and the prize is vendor lock in.entrepreneur — One who sets out to provide a return on investment.serial entrepreneur — One who has yet to provide a return on investment.disrupt — To overcome any legal, social, or moral barrier to profit.

We Who Value Simplicity Have Built Incomprehensible Machines

 James Hague wrote a great post about the emergent nature of complexity in computers. (emphasis added by me)
The 8086 “AAA” instruction seemed like a good idea at the time. In the 1970s there was still a case to be made for operating on binary-coded decimal values, with two digits per byte. What’s the advantage of BCD? Large values can be easily displayed without multi-byte division or multiplication. “ASCII Adjust After Addition,” or AAA, was committed to the x86 hardware and 30+ years later it’s still there, emulated in microcode, in every i7 processor.  
The UNIX ls utility seemed like a good idea at the time. It’s the poster child for the UNIX way: a small tool that does exactly one thing well. Here that thing is to display a list of filenames. But deciding exactly what filenames to display and in what format led to the addition of over 35 command-line switches. Now the man page for the BSD version of ls bears the shame of this footnote: “To maintain backward compatibility, the relationships between the many options are quite complex.” 
None of these examples are what caused modern computers to be incomprehensible. None of them are what caused SDKs to ship with 200 page overview documents to give some clue where to start with the other thousands of pages of API description.  
But all the little bits of complexity, all those cases where indecision caused one option that probably wasn’t even needed in the first place to be replaced by two options, all those bad choices that were never remedied for fear of someone somewhere having to change a line of code…they slowly accreted until it all got out of control, and we got comfortable with systems that were impossible to understand.  
We did this. We who claim to value simplicity are the guilty party. See, all those little design decisions actually matter, and there were places where we could have stopped and said “no, don’t do this.” And even if we were lazy and didn’t do the right thing when changes were easy, before there were thousands of users, we still could have gone back and fixed things later. But we didn’t. 
The example of ls is my favorite, but it is the starkest difference between the intended simplicity and the complex nightmare that emerged. We see this pattern over and over again, and at times I'm beginning to think the "UNIX Philosophy" itself is to blame. Our focus on small parts is causing us to miss the forest for the trees. 


Natural Born Programmers

A post Natural Born Programmers caught my eye the other day. An exerpt is below, but I recommend everyone go read the whole post. The idea of the natural born programmer really is a tremendously damaging and dangerous idea we need to fight against.
The idea of hereditary legislators is as inconsistent as that of hereditary judges, or hereditary juries; and as absurd as an hereditary mathematician, or an hereditary wise man; and as ridiculous as an hereditary poet laureate. 
Thomas Paine, The Rights of Man
There is nothing quite so destructive as the myth of the natural born programmer, the assumption that some magic genetic variation lets you write the most elegant web shops in lisp. In Is Math a Gift? , Dweck researches how this assumption undermines learning:
We had found in our past research that viewing intellectual ability as a gift led students to question that ability and lose motivation when they encountered setbacks. In contrast, viewing intellectual ability as a quality that could be developed led them to seek active and effective remedies in the face of difficulties
This petulant belief that programming ability is a gift, rather than a skill, often surfaces as a flimsy rationale for the gender imbalance in technology, but actually serves to reinforce the problem.

I write here about programming, how to program better, things I think are neat and are related to programming. I might write other things at my personal website.

I am happily employed by the excellent Caktus Group, located in beautiful and friendly Carrboro, NC, where I work with Python, Django, and Javascript.

Blog Archive