The pros and cons of developing a complete Javascript UI

If you have been following our blog, it’s easy to tell that we have been developing a single page ticketing app for SupportBee. A lot of my developer friends and I often discuss the pros and cons of doing a complete JS UI. The JS UI ecosystem is still maturing and it’s certainly a lot of work to build one. Nevertheless, I believe that it’s a good idea to consider. In this article I am going to talk about some of the pros and cons of developing a complete JS UI . I will only be talking of things from a technical/development perspective and not from the usability point of view .

Cons

Before we talk about the pros, lets get the cons out of the way.

Javascript Frameworks are still evolving

The javascript and javascript framework ecosystems are still in their infancy. Apart from Gmail and a few other apps, only lately have we seen an explosion in the number of single page apps. Similarly, even though jQuery and jQuery UI have been around for a while, only lately we have seen frameworks like Backbone, Spine and knockout JS. Powerful frameworks like SproutCore that have existed for a while are only now focusing on developer friendliness. In some ways, Javascript ecosystem is where the Rails ecosystem was in pre Rails 1.2 days. While it’s exciting and shiny, it’s not for the weak hearted.

Developing two applications instead of one

Building a single page app is like developing two applications instead of one. It’s like building the Twitter backend (API) and a client app (like TweetDeck) at the same time. Unlike a conventional webapp, where some javascript is sprinkled on the UI, the javascript code in a single page app can get pretty complex and needs to be well tested. Pivotal Tracker’s architecture post talks about the challenges in building a single page client. Its not unfair to say that a single page app is almost always going to take significantly more effort than building a conventional webapp (with some AJAX thrown in).

Pros

Even though you can build a conventional webapp and throw in javascript to make it pretty snappy, I believe the single page app approach has some inherent benefits that are worth the extra work

Well thought out and tested API

Since your client code talks to the server using an API, you are forced to work on an API from day one. When you come out with the first version of your product, you will have a well tested and thought out API. In fact, you backend will be pretty much just an API. Also unlike APIs that are added to products much after they have been released, your API will have a 100% feature coverage since everything that’s being done using your UI is backed by an API.

Not only is an API great for getting third party developers to build stuff for you, it is also useful for bringing in new developers and interns and have them work on your mobile app etc without getting bogged down by the complexity of your existing code. A half assed API limits these use cases. Thinking about and using your API from day one helps you come up with a great API. Even though Twitter did not start out as a single page app, I believe a powerful API has been very critical in their adoption. It will be critical in your app’s adoption too.

Your JS UI code as API reference

In the last section I talked about how if you choose to go this way, you end up developing two applications instead of one. Turns out that it’s also an advantage. When you release your API, you can easily open source the javascript frontend as the de-facto reference for your API. Depending on the license, people can also use bits of the code to help you come up with mobile apps etc. No amount of API documentation can match a working application using the API (and being updated as the API changes).

In summary, I think JS UIs are extra work but there are tangible benefits in doing them (apart from the UX benefits if done right). The ecosystem is also evolving very fast and there are new tools available each day to make the job easier.

Update: Really good comments on HN on this article.

This entry was posted in Uncategorized. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.
  • http://www.jonlim.ca/ Jon Lim

    Great post, Prateek! I think the advantage of having a fully fleshed out API is worth quite a bit for almost any web app.

    However, I would like to say that the API should be very thought out and meticulous because it IS the public facing part of the web app, and an API that isn’t simple and clean will probably not be loved.

    Cheers!

  • http://profiles.google.com/tim.inman Tim Inman

    Initially I built http://kidbuilder.net as a single-page app, with the help of the Prototype library, but realised that single-page architecture is bad for usability (breaks the back button) and SEO.

    After changing it so that every resource had it’s own page, I’m getting significantly more visits from organic search.

  • Luca Degasperi

    It’s important to distinguish between websites and web apps. For webapps a JS UI is probably the way to go. For websites using a JS UI causes only pain because the informations needs to be organized in a different way and should be readable by crawlers.

  • http://twitter.com/stanosmith Stan Smith

    This kind of stuff reminds me of early Flash Dev.

  • http://twitter.com/MarkGHErnst Mark Ernst

    Good stuff, thanks. I’m missing the ExtJS (Sencha) library if I’m honest. We’re building some awesome applications with it and there is not much need for creating own components since much can be adapted to suit our needs. Nevertheless a good article.

  • http://twitter.com/prateekdayal Prateek Dayal

    Jon,

    Thanks for the comment. You are absolutely right. We are planning on getting some feedback from our early customers once the API is stable. Would you be interested in checking it out?

  • http://twitter.com/prateekdayal Prateek Dayal

    Yes. I should have mentioned that in the post. Good point

  • http://twitter.com/prateekdayal Prateek Dayal

    In a good or bad way? :)

  • http://www.jonlim.ca/ Jon Lim

    Prateek,

    Would definitely be interested in checking out Supportbee. Let me know the next steps!

  • http://twitter.com/prateekdayal Prateek Dayal

    Thanks Jon. Nithya (my co-founder) will get in touch with you soon. Once you have had a chance to try out the product, we can discuss the API

    Looking forward to your feedback.

  • http://www.jonlim.ca/ Jon Lim

    Sounds good!

  • http://www.facebook.com/kormos.bence Kormos Bence

    I like to handle front-end and back-end separately. Data-communication is JSON back and forth, simple as 2×2 and gives you scaleability also. This way it’s easier to manage and improve bth the front-end and the back-end.

  • http://twitter.com/Ocramius Ocramius

    GWT… I think it’s enought :)

  • http://twitter.com/tonyrq Tony R Quilkey

    There is such a thing as pushState (https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history) if your worried about urls.

  • Francois

    Thanks for this nice post prateek!

    Be aware that you may consider to do a mix between single-page app and classic webapp.

    We did this with our Kaiten: one JS page and the webapp sliced into panels loaded dynamically to form a continuous navigation.

    You can see a demo here http://kaitenbrowser.com/ and Kaiten is a jQuery plug-in http://www.officity.com/kaiten

  • http://profiles.google.com/uuf6429 Christian Sciberras

    Web Apps? According to Apple web apps are nothing more than websites inside iframes…

  • http://profiles.google.com/uuf6429 Christian Sciberras

    Web Apps? According to Apple web apps are nothing more than websites inside iframes…

  • http://xjia.heroku.com Xiao Jia

    How do you think about developing UI together with remote procedure calls based on JavaScript? I think such an application is just like one built using C/S architecture while takes advantage of B/S, and it is intuitive for developers. Will that be a possibility of the future?

  • David

    You didn’t even remotely mention GWT

  • Ben

    I think your pros and cons could apply to almost any application.

  • http://www.prateekdayal.net Prateek Dayal

    Not sure I understand that Ben. What do you mean?

  • http://www.prateekdayal.net Prateek Dayal

    I am not sure. I don’t have that much experience with RPC. However I do feel REST is what everyone seems to be doing (as its simple to understand when done right)

  • http://xjia.heroku.com Xiao Jia

    Yeah.. That’s right. I forgot it. REST is enough. Thanks :-)

  • http://twitter.com/adrianpomilio Adrian Pomilio

    Thank you so much for your post. I have been championing the development of APIs vs the standard MVC framework. You had some very good points.

    Free your code, write APIs!

  • Comment

    ExtJS. EOF.

  • http://huyz.us/ huyz

    Great article Prateek

blog comments powered by Disqus