Stop Breaking the Web

added by JavaScript Kicks
11/3/2014 3:31:54 PM


The year is 2014, a ninja rockstar band goes up against the now long-forgotten progressive enhancement technique, forsaking the origins of the web and everything they once stood for. This article is where I rant about how we are breaking the web, the not-immediately-obvious reasons why we should stop doing this, and how not breaking the web would be a great thing.


Drew Peterson
11/3/2014 6:51:34 PM
I think the big takeaway here is that progressive enhancement was a thing, and then it wasn't. What happened? To me, frameworks didn't come with a solution out-of-the-box, so people eschewed it in favor of quick results. It was fairly easy to do progressive enhancement when your html was generated server-side, and you let jQuery do the rest once the page downloaded. Your first page loaded very fast, and you didn't need to load another page after that (if you didn't want to). How do we fix this with a modern framework? The author mentions shared rendering libraries, React being one. But why do we need to share our rendering? Couldn't we just render the basic first-page content in whatever rendering engine we prefer on the server-side? After all, all we're rendering is markup. Our styling is all handled by our CSS. I'm not saying you can't use shared rendering, but there are lots of ways to render html and a using javascript library is just one of them. Is anyone here doing progressive enhancement on their sites?

Dom Barker
11/4/2014 11:10:02 AM
Yarp! We render a site on the server that will work with nothing else. For example links are real links which point to places that can render real pages. For fully enabled browsers, the JS will then preventDefault on them and do something fancy in the browser with HTML5 History if its there, but it's all optional

JavaScript Kicks
11/4/2014 12:29:10 PM
What are you using for the server side rendering and are you using a framework client side as well? Also - how are you preventing the inevitable double-up of code for the view logic that you might need client and server side?

Dom Barker
11/4/2014 12:35:02 PM
we are using react + node. see this example app: (although that one isn't progressively enhanced)

Dom Barker
11/4/2014 11:14:28 AM
ie no href='#' business!