Client-side JavaScript library for an offline-capable single page application?

Question

I'm looking for a JavaScript or CoffeeScript library or framework that:

• Will generate the pages for a single-page application (SPA) - that is to say, it's not just a set of ornate markup for server-generated HTML.
• Will handle times when the application can't see the server, by holding modified data in local storage, caching the server requests and sending them when the server becomes available.
• Has a programming paradigm that is consistent with at least one of: jQuery, CoffeeScript, JavaScript (or even PHP, Ruby, Python, C#, but those are probably much less likely. I think Google Web Toolkit may do what I'm after, but I'm not a Java programmer and have no intention of becoming one).
• Works fine on Windows Phone 8 and current Firefox & Chrome browsers.

Note that this is only a question about the front end: the client side, on the browser. The backend, on the server, is out of scope.

Do you know how JavaScript can create a DOM object? And how a web page is just a bunch of DOM objects. And how on any given web page seen by the user, some of the DOM objects could be created by JavaScript on the client, and some created on the server and served to the client. A lot of SPAs have almost all DOM objects created in JavaScript on the client. That's what I'm after.

I could do it in vanilla JavaScript: but then, that's true by definition for anything a JavaScript framework or library does. I'm looking for a library that makes things easier.

---

Context

I used to be a developer on the free-of-charge, libre, open-source gtd-php application. It's now on GitHub, for now as abandonware. I still use the application day to day. The user experience isn't that comfortable, but the functionality is just what I need to manage my tasks in a "Getting Things Done" style. I had in mind that if I went back to developing something in it, the thing I'd really want to do is radically overhaul the front end, and generate it all in the client browser, exchanging data with the server via JSON. Hence this question.

Answer 1

AngularJS is a popular framework that has gained a lot of popularity lately. It is a MVC framework which can really help to organize a project. You can learn a lot about it using the videos at Egghead.io

Here's how it meets your requirements:

• Generate pages for a SPA

  • With the right markup it can generate a lot of content for you. For instance, if you wanted to create a list of items based on what is in a JavaScript object. You could use a <div ng-repeat="listItem in list"></div> and it would make an element for each item in your list. If the backing JavaScript object (the model) changes it will automatically update the DOM for you.

• Will handle times when the server won't be connected

  • There are many ways of doing this, but Angular provides a $http object which can be used to communicate with servers. The $http object has options for caching requests. The default is pretty robust, but if you don't find it meets your needs there is the $cacheFactory where you can customize your own. There are also other projects such as angular-data which handle a lot of things for you if customizing your own isn't what you want to do.

• Has a programming paradigm similar to jQuery, CoffeScript, JavaScript, etc.

  • Everything is written in JavaScript (with the exception of HTML templates) or if you prefer it can be written using CoffeeScript. A lightweight version of jQuery is included called jqLite which has the exact same programming syntax.

• Works fine on Windows Phone 8 and current Firefox & Chrome browsers.

  • Angular is built on the modern web. It is designed for current browsers with future browsers also in mind.

There are a few things that are important to know about Angular. Angular has a thriving community that is always willing to help, so make sure you ask questions. Sometimes the documentation can be a bit daunting; however, the team and community are working hard to improve it. The project is very active with new releases about every 1-2 weeks, so sometimes features may change, but my advice is pick a release and stick with it until you see value in switching.