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.

Wednesday, October 23, 2013

Thoughts: Flexbox is going to make rich editing of layout wonderful

I took a dive into Flexbox layouts recently, and I'm blown away by how powerful, understandable, and flexible they are. This new at off layout options is so fabulous to use, it feels like you aren't even writing CSS (which historically deals with layouts so terribly that I couldn't even conceive of it being pleasant).

In a minor tangent, I've got to wonder what affect this child have in our tooling. We don't have a great track record for CSS authoring tools, especially in terms of layout versus style. Could this change with the introduction of a clean, simple layout model our tools could actually present properly?

I can definitely imagine a rich content editor utilizing the kind of controls already common over table layouts being applied to the flexible axes of this new scheme.

We might, if we entertain the thought, finally be able to empower or non-condensing stingers to produce compliant CSS for the layouts they actually want in a system they can actually understand without loops, tricks, or pain!

Monday, October 21, 2013

My Newest Project: UNC, Duke Team up with Caktus Group on HIV Gaming App

The following is an excerpt from a press release between my employer and our partners at UNC and Duke on a new project:
The web application development company Caktus Group has teamed up with researchers at the UNC Institute for Global Health & Infectious Diseases and the Duke Global Health Institute to develop a mobile phone app that may help patients better adhere to their medication regimens.

This is my exciting new project and I'm hugely happy to be able to talk about it publicly! We've been hard at work in conjunction with our great partners at UNC and Duke, and its been a very rewarding project even so early in the lifecycle. I'm very confident about our success in really being able to help people, and really that is the whole reason I want to build software in the first place.

It has been a very rewarding project, and an amazing opportunity I've been given.

As it happens, this is also our first mobile app. I've been doing a lot of research and test projects leading up to the start of this to prepare and to guide our development strategy. Being able to dive head first into the mobile world is a breath of fresh air. I hope that a lot of future posts will come out of the new arena I'm exploring with the team.

Monday, October 14, 2013

Firefox vs Chrome App API’s How do the API’s compare?

When porting a chrome packaged app to a firefox packaged app you will need to do an inventory as to which chrome specific api’s you are using and create a level of abstraction around them, as the naming / capabilities of the api’s vary across the platforms.
David Clarke did the great leg work breaking down the current differences between the Chrome App and Firefox OS APIs. This is a great resource for anyone building web apps today!

Check it out today. I'd love to see this kept up to date somewhere.

Sunday, October 06, 2013

Skipping Test DB Creation in Django

One of my colleagues at Caktus Group, Mark, as written up one of the most useful tips for Django developers trying to make good test coverage easier to digest for you team. Test running time is often a barrier to getting teams to follow good testing practices.
Now what if you are running a set of tests which are only using SimpleTestCase or the base unittest.TestCase? Then you don't really need the test database creation at all. Depending on the backend you are using, the number of tables you have and the number of tests you are running the database creation can take many times longer than running the test themselves.
... we can skip the database creation/teardown.
I recommend any Django developers taking a look at the very simple solution he's come up with, which I'm planning to absorb into all of my projects quickly.

Wednesday, August 07, 2013

Plasmid 0.2.0 Released - API Stable And Tested

Plasmid is an in-browser database and I've been working on it for a few months, talked to many people about it, and finally reached a point where I can release an API stable version.

There are two main components to Plasmid, developed separately. PlasmidJS is the in-browser database, based on the IndexedDB specification and supports recent versions of Chrome, Firefox, and Internet Explorer. The second component is Plasmid Sync: a backend server that allows users to synchronize their in-browser databases between machines.

I'm really excited about this and I hope to see what people can do with it. There are other projects like this around, most notably the excellent PouchDB project, but I think Plasmid has properties that make it a better fit for many needs.


This release is PlasmidJS 0.2.0 and is available at Github and on the Plasmid GitHub page.

0.2.0 on Github

0.2.0 on the Website

Jump Right In

If you'd like to jump right in, check out the Getting Started Guide and then the full PlasmidJS API Documentation.

Tuesday, July 23, 2013

Attending Edge Conference In NYC

Pssst... You're reading this on my old blog. You should update your RSS reader for my new one!

I've been invited to attend what looks to be an amazing event, Edge Conference.
Edge looked to be a different sort of conference, and I'm excited to see how it works.
Edge is about everyone learning from everyone else, so you need to bring something to teach as well as a desire to learn. Every moment of the conference will be publicly available afterward.
I hope that I can bring something to the discussion, and I feel that if I don't try to do so, I'm not getting as much as I could out of this. The format of Edge encourages and depends on it, in fact.
We open each hour long session with a ten minute talk. After that, we’re into the discussion, and we keep it moving fast. We record everything, on video and in text. Everything is released for free to the world the moment the event ends.
While I hope I'll be able to get in my two cents to what is sure to be a great crowd of brilliant people, I'm really excited about what I can learn from all of them. There are some people involved that I've looked up to for a long time, most notably Rob Hawks, Kumar McMillan, and how could I not mention Paul Irish?

I'm going to be aborbing a lot, and I'm going to bring it all back here. I hope to have some thoughts before the conference on the two topics I'm most interested in discussing: Offline and Responsive Images, and I can't wait to see how my understanding and opinions on all of the topics change with the conference.

Monday, July 22, 2013

I'm Speaking At NCDevCon 2013: My First Speaking Engagement!

I'm actually incredibly nervous. My talk is "Offline-First: an Approach to Modern Web Apps", and in it I'll be talking about dealing with how the assumptions of the web are turned upside-down by the notion of offline web apps, but also how this can help us deal with a host of issues that have plagued us for some time.

Come see me speak in Raleigh, NC at the NC State Centennial Campus. The conference runs September 21-22, 2013. I've had a great time at the NCDevCon events the past two years, and I'm looking forward to contributing as a speaker this year!

Tuesday, April 23, 2013

Owning Your Cloud Data (Part II of Data Ownership on the Web)

This was originally posted on my new website, where you can read the full post. Please subscribe to the new feed there to follow new things I write.
The most well known, yet still problematic, area of data ownership in our web-based world is all the data we keep housed "in the cloud" in the machines of the services we use every day.
  • The contents of your blog at Tumblr
  • The documents your company shares on Google Drive
  • Your to-do list at Nozbe or Remember the Milk
  • The music you've bought and listen to at Amazon
  • All your family photos kept safely (you hope) on Flickr
All of these services hold the information that is important to you, that you depend on, in many cases defines a large part of who you are (your writings, your photos, your musical tastes). How often do you plan for these services having a major outage? Or vanishing entirely and forever? Or suffering some kind of terrible data loss?


Monday, April 22, 2013

I am burning out - My First Post at Medium

I haven’t burnt out, yet, but I can feel it coming. I’m not sure if this is something I can avoid, something inevitable, or maybe something I can soften the blow on and make a little less painful. I think there is a burn out on the way, and I’m going to at least be observant.

Read the rest of my post at Medium

Tuesday, April 16, 2013

The Problem With Web Data

This is a repost from my new website. Please follow my new blog for future updates.

What does it mean to "own" my data in a web-based world? I don't know what this means, but we should.

Before the growing responsibilities of "The Web" is for us, owning my data meant the files sat on my own machine. It meant the files were in a format that was either human readable, or documented well enough that alternative tools could read it or convert it. It meant no vendor could die, or change its mind, and make my data useless to me.

This isn't the case in the web today.

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