Single Page Web Application – part one

In the past year I have done a lot of JavaScript development.  My assignment was to create an application with a rich user interface that had the interactivity of a desktop application.  

I had been part of the development of a single page web application once before about 3 years ago.  That application utilized Dojo which is a very powerful front end JavaScript framework and toolkit.  Dojo comes with many prebuilt widgets and has a powerful mechanism to extend existing widgets and create new ones.  On that application I mainly wrote the services that the browser app required.

Most of the development I had done prior to that had been traditional web applications.  I have a Java background so that meant I used Struts 2 and Spring MVC.  This architecture relies on the user submitting a request to the server.  The server then processes the request and generates the html to display back to the user.  Many times with this type of architecture, much of the page does not change, but you force a complete re-rendering of the entire page.  It is rather wasteful.

Single page web applications on the other hand only refresh a part of the page.  In the example I mentioned above for the first single page app I wrote, we would make an AJAX request to a Struts 2 web application.  It would call whatever necessary back end services we required,  However instead of generating HTML, we would populate a view model and then Struts 2 would automatically serialize it to JSON.  Thus the only thing going back and forth between the browser and the server was JSON.  All rendering was done client side.  You can also have the server render a snippet of HTML to update part of the page.

The benefit of this model of development is the page is much more responsive.  The amount of information going across the wire is generally smaller.

Since the development of that app, there has been a lot going on with client side web development.  Google has been a big leader demonstrating what you can do with JavaScript.  Google Maps, Gmail and Google Docs are all awesome examples of what can be done with JavaScript.

The first thing that I did was do a lot of reading about some of the various frameworks and libraries that were out there.  I was probably reading about 2-4 hours per day.  I also dove back into JavaScript because it had been a while.  You are not going to be able to create a large Single Page Application without a strong foundation in JavaScript.  (I love learning computer languages.  I had spent the last year playing around with Erlang).

Some resources I’ve used to learn.

  • Javascript: The Definitive Guide - This would be the first JavaScript book I’d read.  It is a large book, but you don’t need to read the whole thing.  I’d focus on the core JavaScript part of the book.  The back of the book is mainly an appendix.  I’ve owned two editions of this book.
  • Secrets of the Javascript Ninja - This book was written by John Resig, the creator of jQuery.  He stresses the importance of the functional nature of JavaScript.  People coming from languages like Java and C# really need to understand the importance of functions.
  • Mozilla Developer Network - Great JavaScript resource.
  • DailyJS - Really good JavaScript blog.  Tells you what’s going on with new/existing libraries.  I read this every day.

The main library I ultimately decided to use for my app is called Knockout.  It is a data binding framework that allows two way binding between your JavaScript object model and your page.  Their website has excellent tutorials on the basics of the framework and the various bindings that are available.  If you click on the Tutorials link they have a few different lessons you can take.

My next post is here and talks about how to structure your code.

7 thoughts on “Single Page Web Application – part one

  1. Aymeric (weekplan)

    Looking forward to this series. I am using Knockout.js myself to write http://weekplan.net and I went through the following challenges:

    - Who can contact the server? The model, the view model, a data source class?
    - How to manage pages? history?
    - How to keep my code modularized? (Require.js? Custom made dependency injector?)
    - How do I share data across all my view models? (example: current user data. At the moment All my view models have a direct reference to my AppViewModel)
    - When do I use custom events to call other modules and when do I use direct reference to the objects?

    Not knockout.js specific:
    - How do I manage cross domain requests (I use the same code in the Android native app that runs from the filesystem)?
    - How do I handle server and client side errors

    Looking forward reading how you solve some of these challenges.

    Reply
  2. Chris Buckett

    “You are not going to be able to create a single page application without a strong foundation in JavaScript”

    What about GWT? And also, Dart.. Single page application development (especially in a team envt) is the problem these two products address.

    Well done for helping to get the message about single page apps out to the world, though :)

    Reply
    1. admin Post author

      I always thought GWT looked interesting but it seems strange to create an application in Java that is then compiled to JavaScript. Dart is rather new. Large companies tend to be conservative and don’t always want to try something so new. I’d always start with a strong foundation in JavaScript.

      Reply
  3. Rocky

    How is knockoutjs different from dojox/mvc and dojox/form/manager, which were likely used by your front-end team three years ago.

    Reply
    1. admin Post author

      Knockout as a library is purely about 2-way binding between your view and JavaScript. It is not a full fledged framework the way some of the newer frameworks out today like Angular and Ember. Dojo came packaged with a lot of interesting things. They have a module system and a huge library of reusable widgets. None of that is in Knockout

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current day month ye@r *