Single Page Apps – Retrieving, Caching Server Requests Using AmplifyJS

image8You may want to use storage to store data. You can save the data your user has entered in a wizard. Or you might want to save data so you can provide an offline experience. Or you may want to store user preferences. Local storage is a good idea anytime you do not want, or need your user or your application to start all over.

AmplifyJS is a very neat library that provides a consistent API to handle client storage that works in most browsers.

In this post, you will learn to retrieve the data through amplify.request without concern for data caching, server interface, resource location, data types, wrappers, and all the other specificities of the client/server interaction.

Requests made through amplify.request will always be resolved asynchronously, even if the resource invokes the callbacks immediately.

You will probably need jQuery for Amplify Request. The default request type shipped with AmplifyJS does utilize jQuery AJAX, but you can just as easily create a new request type that uses Dojo, MooTools, etc.

However the publish/subscribe and store components do not use jQuery at all.

Continue reading “Single Page Apps – Retrieving, Caching Server Requests Using AmplifyJS”

Object JavaScript – Using Infuser to Asynchronously Load Your Templates

imageIn Introduction to Templates in MVVM Using Knockout.js, Mustache, you learned how you can use templates to a display and interact with Knockoutjs. But what if you would like to reuse those templates? Would you like to be able to load the templates asynchronously? And would you like to use the same techniques to load templates that could be using in Knockout, underscore and jquery-tmpl?

Jim Cowart wrote infuser to provide a “generic-ized” utility that could interface with a given template engine and handle the fetching of templates from a remote resource.

This means you can put your template content in a folder so you can reuse it in multiple places. If your template engine expects your templates to be in SCRIPT tags, you don’t have to lose syntax highlighting, etc. in your IDE – you can still place them in their own files with a valid markup extension .

Continue reading “Object JavaScript – Using Infuser to Asynchronously Load Your Templates”

Object JavaScript – Using Q Promises Inside a RequireJS AMD Module

image613As you are thinking more about your Web page being an app, you look for ways to reduce the complexity by using modules. In earlier post Getting Started with Modules Using RequireJS , you learned how RequireJS provides a great way to think of your app in modules and to asynchronously load and run your app.

RequireJS helps your describe the dependencies of a module and make sure you load them before executing your script.

But what happens when your module is long running? You can certainly turn that portion into a module and the require the completion before continuing. But in my case, I want think about my AMD module as an object and then call long-running methods on that module after it has been loaded.

This snippet expands on Asynchronous JavaScript Promises Using Q  and shows how you can use a promise inside your module that will have some long running asynchronous method.

687474703a2f2f6b7269736b6f77616c2e6769746875622e696f2f712f712e706e67When you make an asynchronous call, you can use a promise to handle both successful completion of the work and potential errors that may arise during execution. Upon the successful completion of one asynchronous call, you may want to pass the result to make another request.

The solution combines the promises of Q.js with the Asynchronous Module Definition (AMD) of Require.JS.

Continue reading “Object JavaScript – Using Q Promises Inside a RequireJS AMD Module”

Object JavaScript – Asynchronous JavaScript Promises Using Q

687474703a2f2f6b7269736b6f77616c2e6769746875622e696f2f712f712e706e67Q is a library that implements the standard and has some extra helpers. Q works in the browser and in node.js.

Q was designed to provide a robust way to provide you ways to write asynchronous code cleanly.

If a function cannot return a value or throw an exception without blocking, it can return a promise instead. A promise is an object that represents the return value or the thrown exception that the function may eventually provide. A promise can also be used as a proxy for a remote object to overcome latency.

You can read the specifications for Q at Promises A+, which aims to clarify “the behavioral clauses of the Promises/A proposal, extending it to cover de facto behaviors and omitting parts that are underspecified or problematic.”

You use deferreds and promises in ways similar to the ways you would use them in jQuery. However, Q has some important features.

Continue reading “Object JavaScript – Asynchronous JavaScript Promises Using Q”

Object JavaScript – Promises for Asynchronous Operations Using jQuery

imageYou need promises as soon as you do anything that involves an asynchronous API. In Object JavaScript – Asynchronous Programming Using Promises, you learned the basics about promises.

jQuery’s implementation of promises is based around the jQuery.Deferred object. This is a chainable constructor where you can check for the existence of a promise. The jQuery Deferred object can also invoke callback queues and pass on the success of synchronous and asynchronous functions.

Continue reading “Object JavaScript – Promises for Asynchronous Operations Using jQuery”

Object JavaScript – Asynchronous Programming Using Promises

10063_580983808600819_401360548_nPromises are a way that lets us write asynchronous code that is almost as easy to write as if it was synchronous.

You need promises as soon as you do anything that involves an asynchronous API. It also does not take very long before writing promise chains for sequential asynchronous operations becomes second nature.

A Promise is an object that basically represents a process that is or will take place at some point in time, but allows you to register callbacks to it for when the process gets terminated or completed.

Instead of blocking and waiting for the long-running computation to complete, a promise returns an object which represents the promised result.

In this post, you will get an introduction into JavaScript promises.

Continue reading “Object JavaScript – Asynchronous Programming Using Promises”

HTML5 Tutorial – Asynchronous Script Execution

10063_580983808600819_401360548_nFor pages using process-intensive scripts, you can get quicker page loading with the async attribute for the script element.

This enables the associated script to load and execute asynchronously with respect to the rest of the page. That is, the script loads and executes in the background while the page continues to be parsed.

Without the async (or defer) attribute, a script can block other page content from loading.

Continue reading “HTML5 Tutorial – Asynchronous Script Execution”