Preface

Introduction

The most important current trend in the software development world is, without a hint of a doubt, the mobile frontier, and in particular, the rise of the smartphone and the touch tablet.

When I started my career as a developer, back in 1996, I was writing web applications running on Netscape Navigator 3 and Internet Explorer 3^[1]. The world was a very different place back then, particularly in this industry. I used HoTMetaL Pro and Notepad to code my pages, as well as the editor bundled with Netscape Navigator.

Since then I have written applications for both the web and the desktop, using technologies such as Classic ASP, VBScript, ASP.NET, PHP, C+\+, Ruby on Rails, Django, etc. For my editing needs, I have migrated to EditPlus, later TextMate, now Vim^[2].

But without any doubt, the most important moment in recent technological history was the introduction of the iPhone in January 2007. The impressive growths of iOS, Android, and other platforms has completely transformed the landscape of software engineering, while at the same time opening new possibilities for companies. The rise of the iPhone was followed by the explosion of the Android platform, and in all that turmoil, BlackBerry and Windows Mobile have lost their leadership, even if they still remain relevant in the current landscape.

This new panorama has a darker side, one already known in the desktop development world: platform fragmentation.

Fragmentation

The latest statistics at the time of this writing indicate that Android is leading the smartphone race with more than 51% of all sales in the last quarter of 2011, with iOS holding around 43% during the same period. BlackBerry, once the biggest name in the smartphone world, accounted for less than 6%, while Windows Phone, Bada, and Symbian, together with other more or less known platforms, shared the remaining percentage points^[3].

These numbers clearly show that the smartphone market is very different from the PC market; there is not really a winner (at least not at the time of this writing), and companies wanting to take advantage of this new communication channel have to make substantial investments in order to be present in as many pockets as possible. Many applications have to be written in at least two or three platforms (usually iOS, Android, and BlackBerry) to reach a sizeable chunk of the market.

In any case, the smartphone is poised to take over the cellphone market in years to come; at the end of 2010, 10% of the mobile phone market was dominated by smartphones, with a yearly growth of more than 100%. The most pessimistic statistics indicate that by 2013 more than 50% of the mobile phone market will be dominated by smartphones, most of them featuring a touchscreen. This figure has been reached in the USA, where more than 50% of all mobile phones can be considered “smartphones” since February 2012^[4].

A lot has changed since 2007, indeed. But, just like in the case of its desktop counterpart, the Web appears like the most important cross-platform solution available to software engineers today.

Growth of the Mobile Web

One of the breakthroughs of this new breed of mobile devices is the availability of fully fledged mobile web browsers , supporting most of the current standards like HTML5, CSS, JavaScript, and many other standard technologies. Many of us remember watching Steve Jobs demonstrating the capabilities of the Mobile Safari browser in the first iPhone, recognizing that a new era had started precisely that day. Mobile browsers should not only be as capable as their desktop counterparts, they had features beyond the imaginable, they were fast, and they were fully standards-compliant.

The growth in power of the mobile web has brought new possibilities; particularly in countries with low penetration of technology, like Latin America or Africa, smartphones appear like a cheaper way^[5] to access online information and services. For example, in 2010, more than 30% of all web access from Africa was made through a smartphone^[6]; in Latin America, this number fluctuates between 10% and 15%. All of these countries have seen a huge increase in the proportion of web content consumed through smartphones in the latest years, following the progression in power and capabilities of these new devices.

Worldwide, the average web usage proportion on mobile devices was around 8% at the time of this writing^[7], a huge increase from the 1.5% in 2009. It is estimated that, in 2015, more than 50% of all web requests will come from mobile devices!

New Paradigms

All of this represents a huge shift in our software development habits, a radical change from the usual wisdom that states that the mobile web is just an afterthought; today, we have to see the mobile site as the primary channel of our web presence, because the usage of the web from the desktop is going to be eventually lower than that of the mobile web.

But this new perspective raises a few questions, too:

How many platforms do I have to test my sites in?
Do I have to care about low-end mobile phones?
Which libraries can I use to speed up my developments?
What is the level of standard support in the major mobile browsers?

This book will provide some answers to these questions. In particular, it will take an opinionated, hands-on approach to help you quickly solve problems and find answers as fast as possible.

To do that, we are going to concentrate our efforts in the following technologies, which are currently the most promising and which show the most interesting roadmap:

PhoneGap
Sencha Touch
jQuery Mobile

Even if this book is centered around these technologies, this does not mean that there are not other, very promising and interesting technologies available for you to try; here are some names and links that might interest you: SproutCore, iWebKit, WebApp.net, jQTouch, Jo, iUI, and zepto.js. We are not, however, going to talk about them in this book.

Note

At the end of this book, Bibliography contains a long list of references, including books and websites, that you can use as reference for your future developments.

We are also going to pay attention to many other aspects of application development, including testing and debugging, providing a quick overview of the most relevant techniques and tools available for mobile web developers today.

Who Should Read This Book

This book is tailored for web developers familiar with the following technologies:

HTML
CSS
JavaScript

It does not matter if you have mobile software engineering experience, but of course if you do, well, it will be a huge help! Mobile applications are a world of their own, and they present challenges that common desktop applications don’t deal with, such as:

Small screen sizes
Reduced battery life
Little memory and disk specifications
Rapidly changing networking conditions

This book deals only with client-side considerations (apart from some exceptions regarding HTML5 application manifests) so developers should be able to apply the techniques and frameworks shown in this book with any server-side technology.

Book Structure

When going through the pages of this book, you are going to see that the core motivation behind these pages is to help you understand by doing. We are going to leave the theory to others, and we are going to concentrate our efforts into writing code and trying to become better at creating web applications.

This Book Is About “Web Apps”

Please pay attention to the fact that this book focuses on the creation of web applications for touch screen smartphones, not simple websites; although web applications use the same tools and languages as normal websites, there are important differences in terms of usability, monetization, marketing, and distribution that must be taken into account. Web applications also have important consequences in the enterprise world, which we are going to discuss as well in this book.

The first chapter, Chapter 1 begins by providing an introduction to HTML5 from the perspective of the mobile application developer. The chapter goes through the major features introduced by the latest version of the HTML standard, including the application cache, the new tags, and the new APIs exposed by modern mobile browsers.

Then, Chapter 2 provides an overview of advanced concepts such as object orientation, closures and the importance of coding conventions. The idea is to highlight common “gotchas” that dazzle developers coming from other languages such as Java or C#.

Then we are going to dive into the real subject, and we are going to use Sencha Touch and jQuery Mobile to write the same kind of application (namely, a “to do list” kind of app) using both. This will help you understand how different these two technologies are, and how you have to adapt your mindset to each in order to achieve your goals.

Chapter 3 will introduce you to one of the hottest mobile application frameworks of the moment; this chapter will provide an introduction to the core concepts, the available widgets, and will guide the reader in the development of a creation of a “to do list” kind of application.

Chapter 4 will take you to the core concepts behind one of the most powerful JavaScript frameworks available today. We are going to review the architecture, widgets and idioms required to build Sencha Touch applications.

Finally, we are going to wrap these applications in the Chapter 5 chapter, to be deployed as a native iOS, Android or Windows Phone application; we are going to learn how to do that, and which other capabilities PhoneGap brings to the table as well.

The book ends with a chapter called Chapter 6, providing tips and tricks to enable developers to increase the quality of their applications, using the latest and best tools available.

What You Need

The code samples in this book were created using OS X 10.7 “Lion”, and were tested on iOS and Android devices running the latest software versions available at the time of this writing (iOS 5, Android 4).

As for software, the sample applications were written on Mac OS X “Lion” using Vim, MacVim with the Janus extensions and some other modifications by the author of this book, and were then converted into native applications using PhoneGap. They were deployed using the following IDEs:

Xcode 4.3
IntelliJ IDEA Community Edition
Eclipse
Visual Studio Express for Windows Phone

We will be using both Eclipse and IDEA to show how to create native Android apps with web technologies, and Visual Studio Express will help us create them for Windows Phone 7.

It is also recommended to use a local development web server; for example the one bundled with your operating system, or for greater flexibility on OS X, we recommend using MAMP.

The usual web developer workflow consists of an endless series of edit-save-refresh sequences; to simplify our work, I recommend using a tool like LiveReload (available in the Mac App Store) which provides a simple mechanism, and reloads automatically any browser connected to a particular web app.

Finally, a fundamental element are simulators and emulators. The Android emulator (shown in Figure 2) is bundled with the standard Android SDK, available from Google. As for the iOS Simulator (shown in Figure 1), it is available with the free iOS SDK and the developer tools available from Apple (which are also available when downloading Xcode for free from the Mac App Store).

To access the local web server from these emulators and simulators, use the following URLs:

From the iOS Simulator (shown in Figure 1), you can use “http://localhost” (and the corresponding port, for example “8888” for MAMP)
From the Android Emulator (shown in Figure 2), use the IP “10.0.2.2”

Figure 1. iOS Simulator

Figure 2. Android Emulator

Code of the Book

You can download all the code samples of this book from Github. The project contains an installation script named install.sh that will download all the required libraries for the samples to run; it will also get a copy of the PhoneGap Kitchen Sink Project by Jens-Christian Fischer, which is described in detail in Chapter 5.

The code of the book is distributed using a liberal BSD license, and will be updated in the future to reflect the changes and updates to the libraries used.

Acknowledgements

This book would not have been possible without the help of countless software developers, who spend days and nights in front of their computers to create the amazing pieces of software that make up our world. In particular, Github and Stack Overflow are probably the most important sources of information for software developers ever created. My thanks to the amazing teams behind those systems. You rock.

Thanks to Mats Bryntse from bryntum.com, who provided a pre-release copy of his Siesta testing framework, including Sencha Touch 2 support.

I am also in debt to the many people who have read and commented on the early drafts of this book: first to my editor, Simon St. Laurent, who has provided guidance and feedback during the whole process. To Maximiliano Firtman, who has been instrumental in providing me with the contact with O’Reilly, and who has clearly brought order to the world of the mobile web. To Jens-Christian Fischer, with whom I have had the tremendous privilege of setting up an unprecedented series of successful mobile web trainings in Zürich. To Bertrand Dufresne, organizer of the JavaScript Genève developer group, and whose @jsgeneve Twitter account has been an endless stream of inspiration. To Anice Hassim and Kishyr Ramdial from immedia, South Africa, met a cold morning of April 2010 while waiting to buy our first iPads in NYC, and with whom we have organized countless training sessions around the mobile web in South Africa. And finally to Gabriel Garcia Marengo, who has read the manuscript and provided great feedback.

But most important, I want to thank my wife, Claudia, for without her there is no possible happiness.

Conventions Used in This Book

The following typographical conventions are used in this book:

Italic: Indicates new terms, URLs, email addresses, filenames, and file extensions.
Constant width: Used for program listings, as well as within paragraphs to refer to program elements such as variable or function names, databases, data types, environment variables, statements, and keywords.
Constant width bold: Shows commands or other text that should be typed literally by the user.
Constant width italic: Shows text that should be replaced with user-supplied values or by values determined by context.

Tip

This icon signifies a tip, suggestion, or general note.

Caution

This icon indicates a warning or caution.

Using Code Examples

This book is here to help you get your job done. In general, you may use the code in this book in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of example code from this book into your product’s documentation does require permission.

We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: “Mobile JavaScript Application Development by Adrian Kosmaczewski (O’Reilly). Copyright 2012 Adrian Kosmaczewski, 978-1-449-32785-9.”

If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at permissions@oreilly.com.

Safari® Books Online

Note

Safari Books Online (www.safaribooksonline.com) is an on-demand digital library that delivers expert content in both book and video form from the world’s leading authors in technology and business.

Technology professionals, software developers, web designers, and business and creative professionals use Safari Books Online as their primary resource for research, problem solving, learning, and certification training.

Safari Books Online offers a range of product mixes and pricing programs for organizations, government agencies, and individuals. Subscribers have access to thousands of books, training videos, and prepublication manuscripts in one fully searchable database from publishers like O’Reilly Media, Prentice Hall Professional, Addison-Wesley Professional, Microsoft Press, Sams, Que, Peachpit Press, Focal Press, Cisco Press, John Wiley & Sons, Syngress, Morgan Kaufmann, IBM Redbooks, Packt, Adobe Press, FT Press, Apress, Manning, New Riders, McGraw-Hill, Jones & Bartlett, Course Technology, and dozens more. For more information about Safari Books Online, please visit us online.