Home / iPhone Tips and Tutorials

---

JavaScript architecture

When establishing a JavaScript architecture for your application, there's a lot to think about, including possible changes in the near or short term, security, ease of use and implementation, documentation, and more. Once we can answer the various questions we have, we can then decide on the pattern (module, facade and/or mediator, and so on). We also need to know what library or framework would be best suited for us.

We will be keeping it plain and simple in order to deliver an effective application on an iPhone. We'll be utilizing Zepto.js as our supported library to keep it light. We'll then build upon Zepto by creating a custom JavaScript framework that follows a modular pattern.

Structuring our app functionality

First, let's open up our application directory in our preferred text editor.

Next, open the App.js file we created earlier within our JavaScript directory. The App.js file should be completely empty, and it shouldn't be included anywhere. This is where we will begin writing our framework.

Namespacing our application

If you're new to JavaScript, you have most likely created most of your code in the global scope-perhaps laying out most of your JavaScript inside of script tags. Although this may achieve some of your goals, when working on large scale applications we want to avoid such practices. Some of the reasons we want to namespace our applications is for maintainability, efficiency, and portability.

Let's start out by checking for the App namespace; if it exists we'll use what's there, if it does not exist, then we'll make an empty object. The following code shows how we can achieve this:

var App = window.App || {};

Immediately Invoked Function Expressions

We are checking for the App namespace, now let's define it. Let's include the following code after the check:

App = (function(){}());

The previous code is doing several things, let's take it one step at a time. First, we're setting the App namespace to what is known as an Immediately Invoked Function Expression (IIFE). We are essentially creating a function that is wrapped by parentheses and immediately invoking it after the closing brace.

When we use the previous technique, or IIFE, we create a new execution context or scope. This helps in creating self-containing code that will hopefully, not impact other code on the site. It protects us and helps us follow the modular pattern efficiently.

Let's extend the previous functionality by passing in the window, document, and Zepto objects, as follows:

App = (function(window, document, $){
}(window, document, Zepto));

This may be a bit confusing, but let's take a second to think through what we're doing here. First, we are setting some parameters in the function named window, document, and $. Then, we are passing in window, document, and Zepto when we invoke this method. Remember, we discussed previously that this creates a new scope or execution context? Well, this becomes useful to us because we can now pass in references to any object that might be global.

How is this useful to us? Well, imagine if you wanted to use the actual Zepto object over and over again it would be kind of tiring. It's not that difficult to type Zepto, but you can just namespace it to the dollar sign and keep it simple.

Use strict

Now let's continue to extend it by including the use strict directives:

App = (function(window, document, $){
    'use strict';
}(window, document, Zepto));

This directive helps us debug our applications by making changes to how JavaScript runs, allowing certain errors to be thrown instead of failing silently.

Default options

Default options are a great way of giving your codebase some extensibility. If, for example, we want to customize or cache an element related to the application itself then following are the defaults we will use:

var _defaults = {
'element': document.body,
    'name': 'App',
    'videoOptions': {},
    'audioOptions': {},
    'touchOptions': {},
    'formOptions': {},
    'locationOptions': {},
    'singlePageOptions': {}
};

Let's look at these defaults briefly. First we will create a defaults variable, which will contain all the defaults for our application(s). Inside it, we have defined a default location to be referenced for our application with the 'element' default set to document.body-which gets our body element in DOM (Document Object Model). We then create a custom name for our application called 'App'. After this, we create empty objects for our video, audio, touch, form, location, and single page applications-to be built later.