Home > Programming > JavaScript and the end of progressive enhancement

JavaScript and the end of progressive enhancement

Progressive enhancement is the Right WayTM to do things in web development. It works like this:

  1. Write the HTML for your content, 100% semantically (i.e. only the necessary tags to explain the meaning of the content).

  2. Style the HTML using CSS. You may need to add hooks to your HTML in the form of classes and ids for the CSS to target.

  3. Add JavaScript enhancements to the interface, but only enhancements.

Parallel to this, the functionality of the site/app is progressively enhanced:

  1. All navigation must happen via links and form submissions – don’t use JavaScript for navigation.

  2. Add JavaScript enhancements to navigation, overriding the links and form submissions, for example to avoid page reloads. Every single link and form element should still work when JavaScript is disabled.

But of course you knew that, because that’s how you roll. I’m not sure this is the way forward though. To explain why I’ll need to start with a bit of (over-simplified) history.

A history lesson

Static pages

Originally, most sites on the web were a collection of static HTML pages saved on a server. The bit of the URL after the domain gave the location of the file on the server. This works fine as long as you’re working with static information, and don’t mind each file having to repeat the header, footer, and any other shared HTML.

Server-side dynamism

In order to make the web more useful, techniques were developed to enable the HTML to be generated on the fly, when a request was received. For a long time, this was how the web worked, and a lot of it still does.

Client-side dynamism

As JavaScript has become more prevalent on the client, developers have started using Ajax to streamline interfaces, replacing page loads with partial reloads. This either works by sending HTML snippets to replace a section of page (thus putting the burden of HTML generation on the server) or by sending raw data in XML or JSON and letting the browser construct the HTML or DOM structure.

Shifting to the client

As JavaScript engines increase in speed, the Ajax bottleneck comes in the transfer time. With a fast JavaScript engine it’s quicker to send the data to the client in the lightest way possible and let the client construct the HTML, rather than constructing the HTML on the server and saving the browser some work.

This raises an issue – we now need rendering code on the client and the server, doing the same thing. This breaks the DRY principle and leads to a maintenance nightmare. Remember, all of the functionality needs to work without JavaScript first, and only be enhanced by JavaScript.

No page reloads

If we’re trying to avoid page reloads, why not take that to its logical conclusion? All the server needs to do is spit out JSON – the client handles all of the rendering. Even if the entire page needs to change, it might be faster to load the new data asynchronously, then render a new template using this new data.

Working this way, a huge amount of functionality would need to be written twice; once on the server and once on the client. This isn’t going work for most people, so we’re left with two options – either abandon the “no reload” approach or abandon progressive enhancement.

The end of progressive enhancement

So, where does this leave things? It depends on how strongly you’re tied to progressive enhancement. Up until now, progressive enhancement was a good way to build websites and web apps – it enforced a clean separation between content, layout, behaviour and navigation. But it could be holding us back now, stopping the web moving forward towards more natural interfaces that aren’t over-burdened by its history as something very different to what it is today.

There are still good reasons to keep using progressive enhancement, but it may be time to accept that JavaScript is an essential technology on today’s web, and stop trying to make everything work in its absence.

Or maybe not

I’m completely torn on this issue. I wrote this post as a way of putting one side of the argument across in the hope of generating some kind of discussion. I don’t know what the solution is right now, but I know it’s worth talking about. So let me know what you think!

Appendix: Tools for this brave new world

Backbone.js is a JavaScript MVC framework, perfectly suited for developing applications that live on the client. You’ll want to use some kind of templating solution as well – I use jQuery.tmpl (I’ve written a presentation on the topic if you’re interested in learning more) but there are lots of others as well.

Sammy.js (suggested by justin TNT) looks like another good client-side framework, definitely influenced by Sinatra.

If anybody has any suggestions for other suitable libraries/frameworks I’ll gladly add them in here.


Edit: I’ve now written a follow-up to this post: The end of progressive enhancement revisited.

  1. January 8th, 2014 at 01:54 | #1

    For a brilliant retro style MMORPG, check out Shin ME! Aside ranging from that, this apple iphone app enable your entire family to play on 10,000 unique grids, with 5 defined difficulty levels in match your Sudoku mastery.

  2. February 24th, 2014 at 08:25 | #2

    Asking questions are in fact pleasant thing if you are not understanding anything entirely, however this piece of writing presents pleasant understanding yet.

  3. April 16th, 2014 at 20:08 | #3

    The treatment is relatively painless and gives very good results for those that are good candidates. If you want to eliminate hair for good, get laser hair removal in Sydney. Following the treatment, be prepared to sense a couple of common discomforts like redness, swelling, and itching. Laser hair removal works by applying a laser beam that produces energy that is absorbed by the dark pigments within the hair follicle. Clark places a focus on prevention of disease and aging, providing an array of treatments, including Upper East Side New York laser hair removal, Botox and dermal fillers, among other treatments.

    My webpage … [Maryland DUI Attorney](https://www.youtube.com/watch?v=VJJynKMuV4I “Maryland DUI Attorney”)

  4. April 29th, 2014 at 01:50 | #4

    I’m not sure where you are getting your info, but great topic. I needs to spend some time learning much more or understanding more. Thanks for great info I was looking for this info for my mission.

  5. April 30th, 2014 at 04:54 | #5

    なまこんはさっさと記者辞めて 電車乗っても高校生全然してないだろ なんか魚の餌になりそうな虫っぽいのが入ってるね 接客業なら、一定の基準、必要だろ。メーカーでも営業なら基準ある 工藤もああいうショートならいいのに何でバレー部みたいにしか切らないの?亀井や安倍のときみたいに可愛さがないショートって損しかないと思うんだけど サイズがあってない奴大杉ww

    05/20 [雑誌] non-no7月号 ▽薔薇色のブー子取材 ドンキホーテ通販 自転車 [16 カラコン](http://is.gd/4GJjV3 “16 カラコン”) ずなさんの方が意味がわからないですよw

  6. May 5th, 2014 at 17:45 | #6

    For hottest news you have to pay a visit the web and on world-wide-web I found this website as a best site for most up-to-date updates.

  7. June 11th, 2014 at 05:01 | #7

    My brother recommended I might like this web site. He was entirely right. This post actually made my day. You can not imagine just how much time I had spent for this information! Thanks!

  8. June 21st, 2014 at 05:47 | #8

    Most certainly you can’t afford to spend ridiculous amounts on carpet cleaning each year.

    Once you are able to make your customers believe in your ability to make their clothing look great, you will never be lack your own fair measure of attention and popularity. I bet you need to keep the much-loved dress looking amazing after a period.

  9. July 23rd, 2014 at 22:06 | #9

    I love what you guys are up too. This kind of clever work and reporting!

    Keep up the amazing works guys I’ve added you guys to blogroll.

  10. July 28th, 2014 at 06:09 | #10

    The cost of Remortgage Rates rise by 25% to bring them into line with men. I was told it was not. Having to worry about, you may want to also consider the type of job a policyholder has done and whether he or she suffers certain medical conditions.

  11. September 20th, 2014 at 23:18 | #11

    Awesome post.

  12. September 23rd, 2014 at 20:14 | #12

    This iis my first time visit aat ɦere аnd i аm actuɑlly pleassant tо read аll аt alone place.

    Feel free tto surf to my blog [Andorid Iphone Crack Hack Cheats Download](http://coderzcheat.com/ “Andorid Iphone Crack Hack Cheats Download”)

  13. October 9th, 2014 at 03:26 | #13

    Hello my friend! I wish to say that this post is awesome, nice written and include almost all important infos. I would like to look more posts like this .

  14. October 10th, 2014 at 06:14 | #14

    Having read this I thought it was very informative. I appreciate you taking the time and energy to put this information together. I once again find myself personally spending a lot of time both reading and leaving comments. But so what, it was still worthwhile!

  15. October 10th, 2014 at 08:02 | #15

    I really like it whenever people get together and share ideas. Great site, stck with it!

  16. October 11th, 2014 at 02:03 | #16

    Future advancements in the markets because they make moves to protect information that the system. Like for example, could keep one” off site. Thus if you delete hard disk a file from your hard drive failure is irrevocable. Chances are you do not yet fixed the price for this option is generally frowned upon, since it is hard disk. 0 connector The benefit of magnetic storage and backup services today.

  17. October 11th, 2014 at 10:15 | #17

    You can subscribe to group coupon sites or groupons.

    Most churches need to obtain Bibles in big numbers, so they are always looking for good quality discount bibles. There are a number of people who are looking for discounts on the cabinets.

  18. October 11th, 2014 at 13:54 | #18

    If some one desires expert view on the topic of running a blog afterward i recommend him/her to pay a visit this webpage, Keep up the nice job.

  19. October 11th, 2014 at 17:40 | #19

    It’s a pity you don’t have a donate button! I’d without a doubt donate to this excellent blog!

    I suppose for now i’ll settle for book-marking and adding your RSS feed to my Google account. I look forward to brand new updates and will talk about this site with my Facebook group. Chat soon!

  20. October 12th, 2014 at 00:56 | #20

    There is certainly a lot to learn about this issue.

    I love all of the points you have made.

  21. October 12th, 2014 at 03:03 | #21

    Hello to every , since I am really keen oof readig this weblog’s poat to be updaed on a regular basis. It consists of nice stuff.

  22. October 12th, 2014 at 04:38 | #22

    This website certainly has all the information and facts I wanted about this subject and didn’t know who to ask.

  23. October 12th, 2014 at 07:03 | #23

    I do believe alll the concepts you’ve introduced in your post. They’re really convincing and can definitely work. Nonetheless, the posts are too short for beginners. May you please prolong them a little from ext time? Thanks for the post.

  24. October 12th, 2014 at 13:51 | #24

    Hi, all iis going nicely here and fcourse every one is sharimg information, that’s actually excellent, keep up writing.

  25. October 13th, 2014 at 21:27 | #25

    If you intend to play soccer regularly, you must get your body into good if not excellent physical condition to play well and to prevent injury.

    The fundamental mistake that players make during dribbling of a soccer ball is that they forget the environment and solely focus on the ball. What if I ask you how to coach soccer, or for that matter youth soccer.

  26. October 14th, 2014 at 10:04 | #26

    This site was… hoow do I say it? Relevant!! Finally I’ve fohnd something which helped me. Thanks a lot!

  27. October 14th, 2014 at 22:39 | #27

    Professional and singer Patrick Bruel had been one of France’s biggest stars through the ’90s, first making his name as a teen idol and leading a positive return to traditional French chanson within the new millennium. Bruel was born Patrick Benguigui throughout Tlemcen, Algeria, on, may 14, 1959. The father abandoned the family when Patrick was just a year old, and 1962, after Algeria earned its independence, his mummy moved to France, residing in the Paris suburb connected with Argenteuil. A good soccer player in the youth, Patrick first decided upon the idea of being singer having seen Michel Sardou perform in 75.

    As luck would have it, acting would deliver him his first success; first-time movie director Alexandre Arcady ran an ad seeking a young man along with a French-Algerian (or “pied-noir” in This particular language slang) accent for his video Le Coup een Sirocco. Benguigui (as having been still called) responded and earned the part. These year, he spent a in Ny city, where he attained Gérard Presgurvic, later being his primary composer.

    Source: [http://freeminecraftonlinegames.net/profile/59837/semesa](http://freeminecraftonlinegames.net/profile/59837/semesa “http://freeminecraftonlinegames.net/profile/59837/semesa”)

  28. October 18th, 2014 at 06:11 | #28

    When someone writes an article he/she maintains the idea of a user in his/her brain that how a user can know it. So that’s why this paragraph is perfect. Thanks!

  29. October 18th, 2014 at 11:16 | #29

    Attractive section of content. I just stumbled upon your blog and in accession capital to assert that I acquire in fact enjoyed account your blog posts. Any way I will be subscribing to your feeds and even I achievement you access consistently rapidly.

  30. October 18th, 2014 at 13:54 | #30

    It’s actually a cool and helpful piece of info. I’m satisfied that you shared this helpful info with us. Please keep us up to date like this. Thank you for sharing.

  31. October 18th, 2014 at 15:56 | #31

    If you believe this is the case, contact Microsoft and have them verify your Windows 7 key. In addition, engine code for vehicles, which are commonly available on the markets, is also selected automatically. So be sure to check your website functionality, like plugins, rotating banners, comments, and your Admin login each time you make a change with.

  32. October 18th, 2014 at 21:27 | #32

    Thankfulness to my father who shared with me regarding this blog, this web site is actually awesome.

Comment pages
1 2 1071
  1. May 9th, 2011 at 18:31 | #1
  2. May 29th, 2011 at 23:18 | #2
  3. July 9th, 2013 at 21:58 | #3
  4. October 9th, 2014 at 05:36 | #4
  5. October 15th, 2014 at 03:29 | #5

Comments parsed as Markdown.