Integrating a custom module template

Now, to get the rest of our architecture together we need to open up every other App file in the JavaScript directory we are in (/js/App).

When we have these files open, we need to paste the following template, which is based on the script we've written for App.js:

var App = window.App || {};

App.Module = (function(window, document, $){
    'use strict';

    var _defaults = {
	'name': 'Module'
    };

    function Module(options) {
	this.options = $.extend({}, _defaults, options);
	
	this.$element = $(this.options.element);
    }

    Module.prototype.getDefaults = function() {
	return _defaults;
    };

    Module.prototype.toString = function() {
	return '[ ' + (this.options.name || 'Module') + ' ]';
    };

    Module.prototype.init = function() {
	return this;
    };

    return Module;

}(window, document, Zepto));

When we have each template in, we must then change Module to the appropriate type, that is Video, Audio, Location, and so on.

Once you are done with pasting in the section and changing the names, you should be all set with the basic JavaScript architecture.

Including our scripts

One of the last items you will need to take care of is including this basic architecture into each index.html file. In order to do this, you will need to paste the following code at the bottom of the page, right after the inclusion of helper.js:

<script src="js/App/App.js"></script>
<script src="js/App/App.Audio.js"></script>
<script src="js/App/App.Forms.js"></script>
<script src="js/App/App.Location.js"></script>
<script src="js/App/App.SinglePage.js"></script>
<script src="js/App/App.Touch.js"></script>
<script src="js/App/App.Video.js"></script>
<script src="js/main.js"></script>

We are basically including each script of the framework. What's important here is to always include App.js first. The reason for this is that App.js creates the App object and directly modifies it. If you include it after all the other scripts, then App.js will overwrite the other scripts because it's directly affecting the App object.

Initializing our framework

The last item we need to take care of is main.js, which includes the initialization of our application. We do this by wrapping our code in IIFE and then exposing the instance to the window object. We do this with the following code:

(function(window, document) {
    'use strict';

    var app = new App({
	'element': document.querySelector('.site-wrapper')
    });

    window.app = app;
}(window, document));

What we've seen earlier is an IIFE being assigned to an object. Here we don't see that because it's not necessary. We just want to make sure our code would not affect the rest of the code, which in most cases would not happen because of the simplicity of this project. However, as a best practice I try to self contain my code in most cases.

The difference in the previous code is that we see the initialization of our framework here:

var app = new App({
    'element': document.querySelector('.site-wrapper')
});

We do that by using the new keyword, creating a new instance of App, and then passing it an object, which will be merged into our default options we previously wrote.

Note:
querySelector is a JavaScript method that is attached to the document object. This method accepts a selector that we would normally use in CSS, parse DOM, and find the appropriate element. In this case, we are telling our application to self contain itself to the element with the site-wrapper class.

When we finally initialize our application, we then attach app to the window object:

window.app = app;

This basically makes it accessible anywhere in our application by attaching it to the window object.

We are now done with the framework for our application. Although we don't have anything being manipulated on the page, or have attached any events that correlate with a user's input, we now have a solid foundation for coding that follows best practices, is effective, efficient, and easily accessible.

Routing to a mobile site

Unless we are making a completely responsive site where the styles of the site shift based on the dimensions of the device, we most likely will need to do some sort of redirect to a mobile friendly version of our site.

Here are a few techniques that might help out when deciding how to move forward.

Redirecting via PHP

In PHP we could do the following type of redirect:

<?php
    $iphone = strpos($_SERVER['HTTP_USER_AGENT'], "iPhone");
    if ($iphone) {
	header('Location: http://mobile.site.com/');
    }
?>

In this example we are creating a variable, $iPhone, and giving it a Boolean value of true or false. If iPhone is found in the user agent, which may or may not be the best technique to use, then we tell the page to redirect using the header() method in PHP.

Again, there are other ways of achieving this, but this will get you off the ground and running.

Redirecting via htaccess

We can also detect the iPhone and redirect it by putting these instructions on the server using an htaccess file:

RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} iPhone
RewriteRule .* http://mobile.example.com/ [R]

In this example, we are turning on the rewrite engine, creating a rewrite condition that checks for the iPhone text in the user agent, and then creates a rewrite rule if the condition is met.

In essence, if we want to redirect to a mobile version of our site, we need to be able to detect the type of device, not its dimensions, and then redirect appropriately.

Home screen icons

If you're creating an application that should mimic the feeling of being a native application, or to simply increase the experience of a web app-it is a good idea to have bookmark icons that represent your application.

At the moment, we do support this feature with the following markup in our index.html files:

<link rel="apple-touch-icon-precomposed" sizes="144x144" 
href="img/touch/apple-touch-icon-144x144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114"
href="img/touch/apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72"
href="img/touch/apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="img/touch/appletouch-
icon-57x57-precomposed.png">
<link rel="shortcut icon" href="img/touch/apple-touch-icon.png">

These directives inform Safari that we have home screen icons for the appropriate devices. Starting from top to bottom we are supporting retina display, firstgeneration iPad and non-Retina iPhone, iPad Touch, and even Android 2.1+.

To put it simply, we have an application that users can bookmark to their home screen, allowing them to instantly access the web application from their home screen.

[Previous] [Contents] [Next]