Architecture for iPhone Application
In this article, we will create a standard architecture for our iPhone application. We will base it on the HTML5 Mobile Boilerplate and customize. From marking up our content in HTML5 to creating a JavaScript framework, we'll create static pages that help us focus on the foundations of iPhone Web Application development.
Implementing the HTML5 Mobile Boilerplate
When you begin development, it is always critical to start with a basic framework that can be molded to the needs of your project. In many cases, we develop these frameworks in-house where we work, or perhaps for our own personal projects. However, the open source community has presented us with a great framework we can use in our projects-the HTML5 Mobile Boilerplate. This framework is based on the well-known HTML5 Boilerplate, and has been optimized for mobile including a lean HTML template; the utilization of Zepto, and use of tools and helpers optimized for mobile.
Downloading and installing the HTML5 Mobile Boilerplate
The first step we need to take is to download the HTML5 Mobile Boilerplate, which is located here:
http://html5boilerplate.com/mobile/
The next step is to take these files and place them in the directory of your choice. For example, I have placed my files in the following directory on my Mac:
/Users/alvincrespo/Sites/html5iphonewebapp
Next, we'll want to use a build system that helps us create multiple environments, ease the deployment process, and overall make things easier when we want to optimize our site for testing and/or production.
According to the documentation for the HTML5 Mobile Boilerplate, there are two different types of build system, such as the Node Build script and the Ant Build script. Using the Ant Build script since it has been around for a while and has the appropriate features, including CSS Split, which will help split up the main CSS file that comes with the boilerplate.
Integrating the build script
To download the Ant Build script, go to the following link:
https://github.com/h5bp/ant-build-script
Then, download the zip file by clicking on the Download as zip button. When you have downloaded the Ant Build script, copy the folder and its contents to your project.
Once your Ant Build script directory is fully transferred over to your project, rename the directory containing the build script to build. At this point, you should have your project completely set up for the rest of the applications. We will cover how to utilize the build script later on in this article.