Single Page Apps – Single Page Forms Using the Sammy’s EventContext

image[4]Let’s expand on the previous post Single Page Apps – Getting Started with SammyJS – Routes and create a form using Sammy.js. Instead of adding HTML inline, we can use an external template. And because the data for the input form is contained on a single page, we can display the data on what appears to the user to be another page, after the user submits the form.

Sammy.js helps you create RESTful evented JavaScript single page applications. You can maintain the state of your app with the URL without having to refresh or change the page.

This topic introduces how you can use Sammy.EventContext object. The Sammy.EventContext is created every time a route is run or a bound event is triggered. The callbacks for these events are evaluated within a Sammy.EventContext.

Continue reading “Single Page Apps – Single Page Forms Using the Sammy’s EventContext”

Single Page Apps – Getting Started with SammyJS – Routes

image[4][3]Single Page Applications (SPA) are web sites/applications which are consists of single page and provide smooth user experience in contrast with traditional click and refresh web pages

Even in the world of high speed broadband internet connections, changing a web page when clicked on a link is not desirable and would certainly be appreciated if possible to avoid. SPA’s provide just that.

Sammy.js helps you create RESTful evented JavaScript single page applications. You can maintain the state of your app with the URL without having to refresh or change the page.

You use a route in your URLs that contains #/operation as part of path name. By changing URL to a hash based path #/pathName you avoid page refresh and your page responds to the new user request. It also makes it possible to use browser back/forward button.

Continue reading “Single Page Apps – Getting Started with SammyJS – Routes”

Single Page App – Loading, Caching LoDash or Underscore Templates Using RequireJS, AppCache

image613As you learned in the previous post, you learned how you can load templates inline in your app using RequireJS. The next step is to load and compile a template file. And for your offline app, learn how you can cache templates. Caching saves a round trip to the server, making your application incredibly responsive.

In this tutorial we will compile, load, and cache LoDash (or Underscore) templates and then use those templates to transform data in our single page app.

The technique uses RequireJS, so there is no more dynamic loading. Templates are bundled within your code which saves some HTTP requests.

Continue reading “Single Page App – Loading, Caching LoDash or Underscore Templates Using RequireJS, AppCache”

Single Page App – Using RequireJS Asynchronous Module Definition (AMD) Modules with jQuery, LoDash

image6[1]In the previous post, you learned how you can use RequireJS in projects to define your own loading order, and how to build your own modules.

This tutorial go into depth on how to use RequireJS for AMD (Asynchronous Module Definition) modules. You will write we can write our own modules and load them with RequireJS.

In this tutorial you will build a small app that uses LoDash and jQuery. If you want to use Underscore, just substitute Underscore for the LoDash references.

Although you can use a bunch of <script> tags to load the libraries, your page is blocked during the load. And you could minify them and maintain the order in your own code. But with RequireJS, you include the RequireJS source and let it load the files.

Continue reading “Single Page App – Using RequireJS Asynchronous Module Definition (AMD) Modules with jQuery, LoDash”

Single Page App – HTML Templates With Logic Using Underscore, LoDash

Underscore.jsUnderscore complement to JavaScript’s standard library. And it also gives you simple templating.

The Underscore template function compiles JavaScript templates into functions that can be evaluated for rendering. Template functions can both interpolate variables or execute arbitrary JavaScript code. That allows you to put more logic than you can with Mustache.

Comparison to Mustache, Handlebars

Mustache and Handlebars are what are known as “logic-less template engines.” With those libraries you cannot include any overly complex logic in the template. You get the most basic control structures needed to output data, keeping the HTML (or other content) clean.

Underscore is different. It’s a JavaScript library in itself, like Prototype or jQuery, and comes with it’s own templating engine. The templates have access to any method or helpers within the library, meaning the templates are strictly tied to JavaScript and house a lot more of the logic.

Continue reading “Single Page App – HTML Templates With Logic Using Underscore, LoDash”

Single Page App – Finding Items in JSON Using Underscore or LoDash

Underscore.jsUnderscore is a utility-belt library for JavaScript that provides a lot of the functions and programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects.

Underscore provides 80-odd functions that help you deal with collections, arrays, functions, objects, and more.

You will want Underscore for you non-DOM code or even complex front end code, such as MVC. You can use map, select, invoke or specialized helpers: function binding, JavaScript templating, deep equality testing. Underscore uses built-in functions in modern browsers when you want to use forEach, map, reduce, filter, every, some and indexOf.

Underscore gives you simple templating, too, similar to what you learned about in Object JavaScript – External Templates Using Mustache, jQuery.

You can use Underscore in your Web application or on Node.js.

When minified and GZipped it weighs in at less than 4Kb. Where possible it delegates functionality to native browser implementations for performance. It has no other dependencies and so adds very little overhead to your total script assets. It can be used on the client or server.

In this post, you’ll learn how to use Underscore for finding items in your single page app. You’ll learn how to:

  • Select a group of toys based on price cutoff.
  • Find a toy from its name.
  • Get a sorted list of unique categories.
  • Sort the list of product names.

In a later post, you’ll learn how to create a list of search terms and respond to a search request using JavaScript and Underscore.

Continue reading “Single Page App – Finding Items in JSON Using Underscore or LoDash”

Single Page App – Asynchronous Sample Using jQuery Promise to Render JSON Using Mustache

6327_image_58FAEDFAIn the previous posts on promises Promises for Asynchronous Operations Using jQuery, you learned how you can build promises using jQuery Deferreds and Promises. And in External Templates Using Mustache, jQuery, you learned how to bring in an external template.

It is time to show a real life example of how this code comes together. And in doing so, we have the beginning for a Single Page App.

In this code example, you will see how to use jQuery Promises to:

  • Load some JSON data
  • Load a Mustache template
  • Build your own deferred object for your own long-running function

Then when all three are accomplished, you’ll use the jQuery $.when() function to render the data.

For this example, you will need to have jQuery and Mustache loaded in your Scripts folder. Continue reading “Single Page App – Asynchronous Sample Using jQuery Promise to Render JSON Using Mustache”

Object JavaScript – External Templates Using Mustache, jQuery

mustachelogo4As you have seen in  Templates Rendering JSON Using Mustache, jQuery, you can put reusable HTML into a template and then have that template render your data. You are separating the data and providing one or more ways it can be displayed inside of a page.

This post extends what you have learned about Mustache and gives an example on how you can put your template into an external file. Once in an external file, you can use it across your site whenever you need data displayed in a particular way.

Continue reading “Object JavaScript – External Templates Using Mustache, jQuery”

Object JavaScript – Getting Started with Modules Using RequireJS

imageRequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and NodeJS. Using a modular script loader like RequireJS will improve the speed and quality of your code.

When a project reaches a certain size, managing the script modules for a project starts to get tricky. You need to be sure to sequence the scripts in the right order, and you need to start seriously thinking about combining scripts together into a bundle for deployment, so that only one or a very small number of requests are made to load the scripts.

You may also want to load code on the fly, after page load.

RequireJS can help you manage the script modules, load them in the right order, and make it easy to combine the scripts later via the RequireJS optimizer without needing to change your markup. It also gives you an easy way to load scripts after the page has loaded, allowing you to spread out the download size over time.

Continue reading “Object JavaScript – Getting Started with Modules Using RequireJS”