background preloader

Building Single Page Applications With jQuery’s Best Friends

Building Single Page Applications With jQuery’s Best Friends
Hey guys. Today we’re going to take a look at how you can build a single-page application (SPA) supporting graceful degradation using some of jQuery’s Best friends; DocumentCloud’s Backbone.js, Underscore.js, LAB.js and jQuery templating to name but a few. Alex Sexton has been giving a great presentation highlighting these tools in few recent conferences and I thought it would be useful to write up a tutorial to compliment their use. The SPA application we’ll be building today is a three-level bookmarkable image gallery. Before we get started, please feel free to check out the demo below or download the sources for the tutorial. Tools Used For Today’s Tutorial What’s A Single-Page Application (SPA)? SPAs are web applications or websites which persistently run in the same page without requiring a reload for further navigation. Why Might SPAs Can Be Better Than Multi-Page Applications? The problem with the classical approach is that it has a way of disrupting the user experience quite badly.

Understanding JQuery.Deferred and Promise Please read my new and more accurate blog post about promises first: here Notice this blog post has lot of runnable examples in Javascript, but it might not work on a rss reader. JQuery 1.5 introduced the concept of “Deferred”, you can read more about it here. I find this concept very powerful when working with Javascript and ajax, and I think is a game changer to the way we are used to write asynchronous code in js. Usually, the way we are used to deal with asynchronous code in Javascript is passing callbacks as an argument to the function: As you can see here we are passing two callbacks (success and error) to the $.ajax method using the object-literal syntax that the method support. This work but it is not an standard interface, it requires some work inside the post method and we can't register multiple callbacks. The deferred object is pretty easy to understand yet powerful. resolve reject And it has three important “events” or ways to attach a callback: done fail always

jQuery Deferreds and the jQuery Promise Method « lithostech.com April 27th, 2011 • 09:04 jqXHR and the Promise Interface jQuery 1.5 features a brand new mechanism for dealing with asynchronous event-driven processing. This system, called deferreds, was first implemented for jQuery's $.ajax method and so we'll be looking closely at that method. Most jQuery users will recognize this code as a typical jQuery ajax request. But as of jQuery 1.5, calls to $.ajax return a thing called a promise which in this case is a jqXHR object. So far we've seen that the familiar interface of providing callbacks as part of an argument to $.ajax continues to work. The fact that $.ajax returns a promise means its now possible to interface with it from anywhere you have access to it. Generic Deferreds The jQuery team was kind enough to factor this whole subsystem out into a reusable component and so far both $.ajax and $.animate have been rewritten to make use of them. Making Promises from Other Promises Example Scenario This is easy enough.

Script Junkie | Creating Responsive Applications Using jQuery Deferred and Promises Today we’re going to explore the concept of deferreds - an important feature found in JavaScript toolkits such as dojo and MochiKit, which recently also made its debut to popular JavaScript library jQuery. Deferreds offer a solution for abstracting non-blocking elements (such as the response to ajax requests) and achieve this by creating a ‘promise’ which aims to return a response at some point in the future. If you haven’t come across the concept of ‘promises’ before, we'll be covering them in some detail shortly. At a high-level, deferreds can be thought of as a way to represent costly operations which can take a long time to complete. Promises Some of the material you may read on promises and deferreds may focus on quite implementation-specific applications of it. In its most basic form, a ‘promise’ is a model that provides a solution for the concept of deferred (or future) results in software engineering. promise = callToAPI( arg1, arg2, ...) jQuery Deferreds Further Deferreds examples

Documentation » json_data Populating the tree using JSON The format jsTree needs a specific format to work with JSON. In the standard syntax no fields are required - pass only what you need. Keep in mind you will be able to access any additional properties you specify - jsTree won't touch them and you will be able to use them later on. To change the icon of the node use the icon property. You can set the state on a node using the state property. Both li_attr and a_attr are passed directly to jQuery's attr function. When using AJAX set children to boolean true and jsTree will render the node as closed and make an additional request for that node when the user opens it. Any nested children should either be objects following the same format, or plain strings (in which case the string is used for the node's text and everything else is autogenerated). Alternative JSON format jsTree will automatically build the hierarchy. Using JSON Using the alternative JSON format Using AJAX Using a function You can supply a function too.

Related: