Progressive Enhancement Makes Me Sad
heydonworks.com
heydonworks.com
1. "But who’s to say there’s going to be any users?" -> Which is true. If you're just starting a project out, you have to decided whether it's worth an extra X hours/days/weeks for any given bit of technical improvement, whether it's progressive enhancement or something else. If it expands my potential user base by 10%, but doubles my time to market, it may not be worth it.
2. "The less time I spend on creating a robust architecture (boring) the more time I have for creating features." -> Ignoring the "boring" remark, this is true. I could spend a near infinite amount of time improving my architecture, but at a certain point I reach diminishing returns. Where I cut off my robustness work depends on the nature of the project, but every project has some point at which you'd improve user experience more by adding a feature than improving performance. For an early prototype, that point may be quite soon.
3. "It’s all web apps now" -> I think the author is aware of this, but there are many apps which just don't fit particularly well into a document. It's not clear whether the author really thinks all such apps are trivial (eg detecting your dog's age), but I'd argue there are plenty of substantial apps that don't fit that model well, and benefit substantially from being a full-on js-heavy web app.
My last gig totally fell victim to this. Every time we'd add a new feature, some other group of features would suddenly become "critical to launch" and by the time we did actually launch, there was no more runway. :(
If you hadn't written this, I would have dismissed this article after reading the first two paragraphs. Thank you.
> but there are many apps which just don't fit particularly well into a document
I think hard but maybe because I've been working on a CRUD web-app for so long, I can't come up with any examples other than demos/games and then, I doubt any reasonable person would expect them to run without running any code client-side. I even went through some random selection on my bookmarks and 99% of them were documents with some interactivity. Most of the exceptions were document editors, and I think even they could, if the developer felt masochistic, fall back to text boxes and buttons.
I sincerely hope that's not my lack of imagination.
If I were creating a new startup to build google maps, I'd have to consider: the best version of my product is the one with lots of heavyweight JS. 99.9% of my users will be able to use it. 80% will get a decent experience. It'd take me 60% longer to build a version that degrades gracefully. My competitors are breathing down my neck- is it worth spending that time?
Most apps aren't as clear-cut as a video game or a blog.
One company I worked at was a 2-sided e-commerce site (think "Craigslist for X"). It started server-side. We started adding more and more functionality to the main view, a grid of items. Quick-look popups and complex interdependent filters, and as-you-type search are what stick out in my mind, although there were others. We ended up rebuilding that page, and the decision was made to skip progressive enhancement so we could focus our limited resource on improving the javascript-heavy experience. We already had a mobile app and a mobile-specific site, so the only people that would be bothered by this would be the people with JS disabled on their desktops (a vanishingly small minority) or those with slow desktop connections (we only supported US sellers/buyers at the time, so that skewed us more towards fast internet).
Another company was building an online version of a well-studied mental health technique (cognitive behavioral therapy). You can get this from a therapist, and it works quite well (measurably so), but it's quite expensive. You can get it from a $20 book, and it works well (measurably so), but completion rates are like 20% of when you do it with a therapist. Turns out that self-improvement is hard and people don't like doing hard things. So this company was building an online program that measurably worked. However, one of the key value propositions is that people should complete it at a higher rate than a book. Ideally at the same rate as a therapist (but cheaper and more convenient). To do that, the company needed every possible UX technique they could get their hands on. They needed every bit of interactivity at their disposal. In that case, it seems like a pretty good argument for focusing effort on a js-only app, even though the underlying content is largely a text-book.
I mean, I totally understand what you are saying. However, not having enough resources for implementing progressive enhancement to make ninety something percent have the best experience for eighty something percent of the time and not having something suitable for progressive enhancement are different things.
Progressive enhancement leads to less initial effort. Single page and script heavy applications are more complex and take more time to develop and debug than server side rendered applications. They often duplicate logic between the client and the server. Alternatively, throw together some database queries and hook them up to html templates, and you have the foundation for a progressively enhancing site. You can then expend the extra effort to ENHANCE your site by sprinkling in client side code and cutting edge css features.
This is definitely not true across the board. I created a video player for reddit (http://dailyblocks.com) a while back which is completely client side rendered. Having done it this way I didn't need to setup or look for any server side technology. Simply put it up on any host that can serve up an HTML and JS file and be done with it.
> Single page and script heavy applications are more complex and take more time to develop and debug than server side rendered applications.
This also wildly varies depending on skill set and circumstances. Being a completely client side app all of the debugging tools come for free in my browser. If you happen to be more familiar with a different set of debugging tools then it's possible client side code takes more time for you to debug, but that's hardly a universal statement.
> They often duplicate logic between the client and the server.
Not true for isomorphic web apps. But again, depending on skill set this may or may not be more time consuming for you personally.
Unless you are entirely using third party services, your single page application is probably contacting at least one service you also have to write. Now you have 2 applications to worry about, not just one. It adds complexity to your development, build, and release process. That complexity might be worth it.
Now, there are cases for each. Building a simple blog, you'd be right: a server-rendered app with a sprinkling of JS for flavor would probably be a lot easier. On the other hand, a site that behaves more like an app might be quicker to build as an SPA. For example, an e-commerce site with complex filtering (you can filter by size, but it goes 0-20 for shoes, sm-xl for t-shirts, 10-70 for jeans, etc) and complex UI interactions available in-page on each item such as one-click buying, searching for similar items, setting up a price-alert, etc). You could do that mostly server-side, but I'd argue your frontend (at least on the item-browsing page) is heavier enough that it may be easier to just build a js-first site to start with.
This may all be wrong at each step, but hopefully it illuminates a bit how a lot of us (otherwise sensible developers) ended up thinking it makes more sense to start most things as rich-front-end+API apps.
The thing is, PE is all about creating a workable, universal baseline that can be enhanced. It is a Minimum Viable Product. If you don't know if your product is, at its core, fulfilling a need, why spend the extra time making it fancy?
> Where I cut off my robustness work depends on the nature of the project, but every project has some point at which you'd improve user experience more by adding a feature than improving performance. For an early prototype, that point may be quite soon.
A prototype is naturally a quickly assembled thing (often held together by chicken wire and duct tape) that you use to test the viability of an idea. Build prototypes however you want. Of course I'd argue that a bare-bones MVP would be the cheapest way to test an idea, but it doesn't really matter. A prototype should never be your production product unless you know it to be robust though. You should expect to rewrite most of your prototype in order to make it production ready. Unless you follow PE, of course, in which case you should have a solid, usable baseline that you can enhance into your amazing final product.
> I think the author is aware of this, but there are many apps which just don't fit particularly well into a document. It's not clear whether the author really thinks all such apps are trivial (eg detecting your dog's age), but I'd argue there are plenty of substantial apps that don't fit that model well, and benefit substantially from being a full-on js-heavy web app.
I would counter-argue that we naturally gravitate toward doing stuff that's fun for us or gives us the opportunity to show off our skills. We over complicate things because we like challenges. Take the "dog age" example. An MVP would be uploading a photo and having the age guessing take place on the server side. One enhancement would do that via Ajax, another would add tap getUserMedia if it's available. In the end, the product works no matter what. There are very few "apps" that would not work in a PE scenario; it's all in how you look at them. The problems we are solving today on the Web are not new problems.
For a great, brief talk on these topics, watch Adam Silver discuss at EnhanceConf: http://m.youtube.com/watch?v=UlzG6-fI00g
In my 18 years as a web dev I've tumbled down every rabbit hole and been caught by every trap ever.
We wanted animation? Great, learn some ActionScript. Now you want databases? Add some MySQL and PHP. But then those weren't cool anymore and everything had to be RoR and jQuery. Then we ended up writing monsters of jQuery code trying to make sites feature packed and along came Backbone. After that there was Angular, but then people realized SEO and accessibility still need to be considered so now I spend my days writing what should have been as simple as:
<h1>Hello World</h1>
Like this:
React.createElement(
'h1',
{},
'Hello World'
So the solution to HTML is now to simply give up on HTML and write everything in JavaScript…
I like React, Redux, Node, etc a lot. The fact we can have Universal and Native React and that there finally is a robust solution to most ( all? ) web dev problems is fantastic. But the overhead in development time is significant. When possible I use these tools, but in a lot of cases, I just give up on it all and end up writing straight up HTML divs without any flexboxes or animations or shivs or shims or 5's or 3's. Just the good old stuff I was writing back in 1998.
When comparing web development to something like developing for iOS, this full circle we've made does feel painful ironic. So much so it's hard to tell if it's funny or not.
Small note to the author : love the beautiful big font on your site but you have some colliding elements on iPad portrait.
It's almost as if your use case should determine your strategy.
enter office politics
If you have control over the end-user's environment, by all means do whatever you want. But when you don't (let's say your building an online banking site), you should ensure your real users can access it (and their money) no matter what.
Of course locking into specific technologies is why IE6 continues to persist (Intranets, South Korean banks), so that's some additional food for thought. It may not be a concern in your specific instance but it's a risk if you don't use web standards.
> It's almost as if your use case should determine your strategy.
:-) I wish more folks thought that way. When all you have is a hammer…
[1] I am aware that Google now can run JavaScript, but I've found it to be rather bad and to mangle my pages in quite horrible ways.
With progressive enhancement, you have to have one form submission that doesn't use AJAX, which means it POSTs to the server and the server accepts the POST and replies with a fully-formed HTML document. Then, because you want to delight your users with animations and a responsive low-latency feel, you have an AJAX version of the form, which posts to the server and receives a JSON response for client-side template rendering. You can share some code between these two, but because rendering the whole page requires completely different data from rendering just the component you are updating, there is a bunch of conditional code.
You essentially have to build two models of your application, one on the server side which knows the state of your application (is this modal open, is this widget showing, have they collapsed this widget) and one on the client side that separately maintains all the same state and has transitions between them that will result in identical html. It has to be this way, otherwise your UI is not going to be responsive, animated and delightful for users, and you're going to lose in the marketplace. Since you have two models of the state of your app, now you have to make sure they are always in sync. All the testing and bugs and complexity maintaining that dual state could instead be spent on building the next great feature for your users.
Now obviously, this is sensitive to context. If you work for a giant enterprise and have more programmers than you know what to do with and clear product requirements set by the market, you can spend the time to build a product that addresses 99% of the users, even if going from 80% to 99% takes 80% more work. But if you are a startup, and you are either racing with competitors to build out the functionality demanded by users, or still exploring the functionality that will see successful adoption of your product, you'd be crazy to slow yourself down to get every user running NoScript, IE10, or whatever other old browsers. You just need to get your product working for some subset of passionate users, then you can spend more engineering resources on supporting users with older devices once you've proven out the market. Otherwise you may not be around to do so.
A lot of web frameworks do all those tasks for you.
In Grails, I can just specify a single piece of backend code, and it’ll work as REST API with data in JSON or XML, it will work in webbrowsers, and I can usually easily integrate it into mobile applications, too.
"Then there’s trains. Urgh. So you’re having trouble downloading a client-rendered, blocking-javascript-dependent web page over 2G because you’re on a train? The solution’s staring you in the face: Stop travelling by train. Either get a pad in the city center near your place of work or sleep under your desk. That’s what I did, why can’t you?
Honestly, take some responsibility."
I love Poe's law, but this is not an instance.
It's not really that funny either, but it's obvious parody.
I guess the author doesn't realize that code can live on a server. And the answer to his query can simply be a "document".
Edit: I did not catch that the article is supposed to be a joke. If that's true... I suppose it's not very funny.
Now it's apparently easier to build a fanciful doodad than it is to write a string of text.
Why would offloading computation to a heavily-taxed central server speed anything up? It doesn't make much sense. Nor is HTML generation a bottleneck in most realistic applications.
> Well, I’ve got a pretty good setup for starters: Fibre, 16GB RAM.
You're using a fairly decent desktop setup, and a top-of-the-line mobile setup, and there's no talk about server-side specs. So yes, it's true that "The premise that server-side HTML generation is faster than client-side HTML generation is simply false." -- in your one particular, very specific use case.
Consider, there is no way for a single users machine to do a Google search in any reasonable time frame. Google search works because they can scale out to enough machines to keep everything important in RAM which drastically reduces the workload per request. They can also cache results.
What realistic, year 2016 HTML client is so slow that it can't run 100K or so of string interpolation in a millisecond or two? Quite aside from the supposed benefits of performing computation on a server, the idea that web applications are bottlenecked by HTML generation is already absurd.
http://jsperf.com/dom-vs-innerhtml-based-templating/1079
It looks like mobile chrome can perform 500k string interpolations in a second, each one being about 500 bytes. So the time for 100 kilobytes would be approximately half a millisecond.
Server side generation helps when there is a large amount of application javascript that needs to be downloaded before rendering can begin on the client. Having some html bootstrapped from the server means that the user gets a faster first paint time (though the page is admittedly non-interactive) which gives the impression of a faster page load.