The Web is a great, big, polished turd

Web development isn’t fun anymore. It used to be that you picked a server-side language, typed up some human-readable HTML, sprinkled it with a little bit of JavaScript to improve the user experience, and your job was done. These days it has become an all-you-can-eat buffet of overlapping frameworks, many of which don’t play nicely together, which you are almost blackmailed into using in order to fix problems or deal with a particular web browser, that is, if you’re not lucky enough to use something like Ext JS which takes care of all these hassles.

This past couple of weeks I’ve had to research using web components for a new project. “Keep calm and #UseThePlatform” it says on their web site. So what are they?

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.

Sounds promising. Web components are not like your dime-a-dozen widget library and are supposed to be the future of user interfaces on the web. So I read some more and pretty soon it becomes clear that Polymer is probably the right way to go. Somewhere along the way I came across somebody who said that Polymer is to Web Components what jQuery is to JavaScript. It basically makes it easier to write Web Components and cuts down on all of the boilerplate code you have to write; that’s all I need to know.

The use case that I was given involves a simple web service call to search for records and display them in a grid. Easy. I’ve been doing that kind of stuff for almost two decades now, so this shouldn’t be much trouble at all. By a country mile, the only grid worth using if you want to create a custom element (another term for these things which means that I’m creating my own, reusable HTML tag, such as <my-awesome-tag>) is the one from Vaadin. This blog post is already becoming a rambling mess, so I’ll cut to the chase here and say that I couldn’t get version 2 of their grid to work with my Polymer 2 custom element, so I had to install version 3.0.0-beta1 (which works perfectly fine except that it hangs Internet Explorer 11 if you tab into the grid; I can see that beta1 has been pulled and only the 3.0.0-alpha2 version is available again, maybe because of this bug?). No biggie, they’re bound to fix it eventually which shouldn’t stop me from continuing my research.

Within a few days I created a magical web component which fired a custom event when the user selects a row (so that anybody who uses <my-awesome-tag> can add an event listener to handle it). I also set up data binding between my element and an input box which automatically sends requests to my web service whenever the query parameter changes, thereby updating the grid with new records seamlessly. Wonderful! Web Components really are the future of the web. There’s only one problem – I use Chrome as my web browser because it’s the fastest (especially when it comes to testing apps heavily dependant on JavaScript, such as Ext JS). Does it work in Internet Explorer 11?

No. All this time I had been coding away happily in a version of JavaScript that this nearly four-year-old browser does not understand. Just great! Polymer 2 uses the sixth edition of JavaScript, variously known as ECMAScript 2015 or ES6 [read this if you’re really bored]. If you want to use Polymer 2 components in IE 11 you have to transpile ES6 down to ES5 and serve up the former only to newer browsers (Firefox, Chrome, and Edge 14+) and the latter to all versions of IE and earlier versions of Edge. Yay! I get to experience the delights of browser sniffing (you could just serve the ES5 transpiled bundle to all browsers, including Chrome which supports Web Components natively, but you would need to include the custom-elements-es5-adapter.js shim, which just seems nasty; I’d rather do browser sniffing so that Chrome can fly and only IE suffers).

After getting that sorted, I turn my attention to getting this custom element to work from within an Angular app. You could do entire apps in Polymer but that would require a bit more work and Angular had already been chosen as the other framework for this new project anyway (not by me). So I start learning and find that Angular and Polymer both are projects by developers at Google with a lot of similarity, but one is playing the short game and the other a long game. Angular does its own thing whereas Polymer tries to adhere to standards (or specifications which eventually will become standards and supported by all browsers one day).

As I type this rant at home on a Friday night I’m trying to recall the arduous journey I’ve taken this week so that I can fully document the experience for everyone’s amusement. I can’t recall the finer details of the problems I had trying to get my Polymer 2 component to work with Angular 2, but my console was full of indecipherable errors and I soon realised that the two don’t play nicely together; I would need some assistance from @codebakery/origami and would have to upgrade to Angular 4. I suppose I should have started taking notes by this time because the journey was truly becoming tragic, but I couldn’t get Origami to work either, and my search for some other options came up empty handed. I decided to admit defeat and declare that I could not get Web Components to work with Angular.

If I was asked to evaluate Web Components specifically instead of any other widget library then there must have been a good reason, and my research lead me to the view that they might just be the holy grail of user interfaces on the web, so maybe Angular was the problem? I soon found this excellent summary of a talk by Rob Eisenberg comparing AngularJS, Angular 2, Aurelia, Ember, Polymer and React. Rob once worked at Google on Angular but eventually left over disagreements about the direction it was taking (and after my brief exposure, I began to see why: it’s over-engineered and would lock you in to using Angular for everything). The recommendation at the end piqued my interest in Aurelia: it doesn’t get in your way, supports web components, high performance, clean syntax (Angular 2 is just ridiculous!), standards compliant, and great if you’re a good developer.

I saw mention of Aurelia in some tech news article once but dismissed it out of hand, thinking to myself “yeah, yeah, another framework… yawn”. The Quick Start guide is probably one of the best such articles I’ve ever seen and the more detailed tutorial did not disappoint. The page describing its Technical Benefits seemed to tick all the boxes, too. I proposed to my colleagues that we should abandon Angular and use Aurelia instead, and after a little hesitation, they went along with it.

Another day, another framework to learn. Never mind, this one finally does seem like it’s worth my time, so I got stuck in and had a good time learning it. I then try to integrate my Polymer component with it and after a few issues (mainly surrounding me learning a new framework; nothing is ever easy!) it seems to play nicely enough. I was surprised that it seemed to “just work”. Great. Time to test it in Internet Explorer 11. Computer says no and I even served up the ES5 version just to keep it happy. I didn’t realise straight away that Aurelia even had a seemingly well documented article on Integrating Polymer components which I didn’t notice originally (there was a lot of stuff on the Internet, albeit slightly out of date, asking about Aurelia/Polymer integration which suggested it wasn’t officially supported yet, so that was my bad for not thoroughly browsing the docs).

My project directory already had about 120MB in my node_modules and bower_components directories from using npm and bower, but in order to get Polymer to work with Aurelia I had to also start using JSPM. This added another 50MB to my project, thank you very much! I have to call System.import(‘aurelia-bootstrapper’) after the WebComponentsReady event, but my project was created using the Aurelia CLI meaning that my app is started with a simple script tag pointing to scripts/vendor-bundle.js and wasn’t using the System.import method. My attempts to load the vendor-bundle that way didn’t work and when I tried to create a link element in vanilla JavaScript and append it to the DOM myself after the WebComponentsReady event had fired, I got a blank page in my browser and no errors at all. Well, that’s just great. Aurelia should update that Polymer integration document to explain how to kick-start your app if you’re using a production build and not the System.import quick start method.

By this stage the day was getting on and it being Friday, I thought, “enough is enough”. I don’t need this shit. Aurelia is nice and all, but I shouldn’t have to subject myself to this much torture just because Internet Explorer 11 has to be the default browser because of some shitty, over-priced, corporate application which only works if IE is set as the default browser, and of course, asking people to go into IE only for that shitty app and to use Chrome or Firefox for everything else just won’t do, now, will it?!

Sadly, this is what web development has become today:

Peter Griffin fighting with the venetian blinds

Being a web developer in 2017 and having to support Internet Explorer 11 is like a chef having to go dumpster diving for food to cook and being forced to serve it in a dog bowl.

I really don’t care any more. Let’s just use Angular for everything and be done with it. We can’t have nice things if people insist on using a web browser that’s almost four years old.

I’ve had the kind of week that only chocolate and ice cream can fix, and maybe binge watching a new TV series, too; I still haven’t watched the latest seasons of Fargo or Better Call Saul. That sounds like a plan to make everything better :-)