Hands-On Sencha Touch 2 (2014)

Preface

This book helps you gain hands-on experience with Sencha Touch 2.3. You can use the code techniques explored here as a starting point for your own projects.

Over the course of this book, you will build a single application: the FindACab app. With this mobile app, a user can search for and call nearby taxis. The book will cover all of the fundamentals of Sencha Touch, including:

§ Scaffolding a mobile app with Sencha Cmd

§ Learning the Sencha essentials, the class system, and events

§ Mastering the Sencha layout system

§ Working with the Sencha Model-View-Controller (MVC)

§ Sending/retrieving external content

§ Loading/saving data offline

§ Implementing Sencha view components

§ Using and handling forms

§ Styling a Sencha Touch application with Sass and Compass

§ Building a package for testing or production

§ Creating a native package with Sencha Cmd and PhoneGap

Why Sencha Touch?

Sencha Touch is based on Ext JS and has roots in JQTouch and Raphael (a JavaScript/SVG framework for cross-browser vector graphics on the Web). Unlike jQTouch or jQuery Mobile, however, it’s not dependent on jQuery. By abstracting the differences in underlying hardware and mobile operating systems, Sencha Touch can push apps from a single code base to different platforms such as iOS, Android, BlackBerry, Windows 8, and more.

Sencha Touch is serious app development, and is great for building large and complex (enterprise) apps that look and behave like native touch applications. I think Sencha Touch is the best mobile framework around. You might think that my opinion is somewhat biased because I work for Sencha, but that’s not the case and I don’t get paid to say this! Before I joined Sencha I worked with lots of other frameworks, and they all have their good and bad points. The Sencha frameworks, however, are just so complete: they include lots of widgets, animations, effects, and styles, as well as great documentation and online resources. The Sencha MVC approach makes it easier to extend and maintain apps (because multiple developers are working on the product). Sencha Touch ships as open source (totally free) or commercial, and is backed by a company with many years of experience. Now for the downloads: I have to admit, because Sencha Touch takes a fully JavaScript coding approach, the learning curve can be steep. But that’s why I wrote this book—to get you up to speed with developing real-world Sencha Touch applications.

Now, what about the other frameworks?

Sencha Touch Versus jQuery Mobile

jQuery Mobile is open source and runs on top of jQuery. It’s easy to learn, it uses DOM-based syntax, you write “tags” on multiple HTML pages, and everybody knows jQuery. jQuery Mobile works like the jQuery UI. It doesn’t ship with many mobile widgets, but because it’s open source there are lots of widgets to be found in the community. And that can be a good or a bad thing. It’s great for creating mobile sites. Personally, I would not recommend using it for serious app development for performance reasons, and you would need an additional framework to implement a design pattern. Without one, the app would be hard to maintain.

Sencha Touch Versus Appcelerator Titanium

Titanium is a mobile app development framework compiler that it compiles; XML and JavaScript into native iOS and Android code. It’s developed by Appcelerator. It’s open source and it’s great for building hybrid applications with the webview component. However, it can be hard to debug and the compilation times can add up.

Sencha Touch Versus Kendo UI Mobile

Kendo UI, developed by Telerik, is a relative newcomer in the app development world. Like Sencha Touch, the Kendo UI has a lot of view widgets, effects, and stylesheets. It is a mix of HTML syntax with JavaScript code on top of jQuery. It uses the Model-View-ViewModel (MVVM) design pattern, which helps developers separate the Model from the View. However, Kendo UI Mobile is not free (open source).

About Sencha Inc.

Most people know Sencha Inc. from its JavaScript framework, Ext JS, which was originally built as an add-on library extension of YUI (the Yahoo! Interface Library) more then five years ago. With Ext JS, you can build rich Internet applications (RIAs) for desktops. It’s primarily used for web and software development, and works with jQuery and Prototype. Since version 1.1, it has no dependencies on other external libraries or scripts, but you have the option of using them. Sencha Touch is Sencha’s mobile product; it is actually one of the first mobile HTML5 frameworks. Clients of Sencha Inc. include CNN, Cisco, Adobe, Samsung, and many more.

While Ext JS and Sencha Touch are Sencha Inc.’s main products, the company offers other products, tools, and services on its website. See Table 1 for an overview of all Sencha products.

Table 1. Sencha products

Figure 1. Sencha Space, a secure managed environment for deploying enterprise apps that run on multiple devices

This book will focus on Sencha Touch (the open source version including Touch Charts) with the use of the Sencha Cmd tool.

Audience and Approach

This book is written for developers who want to learn Sencha Touch 2.3, or try out new techniques that address common programming tasks for building mobile web apps with Sencha Touch.

You should have some programming experience and familiarity with the following technologies:

§ JavaScript

§ JSON

§ CSS3

§ HTML5

Some examples in this book require server-side scripting. Throughout this book, I will make use of PHP. However, you don’t need to be a server-side expert, and the use of any other server-side language would be fine too.

Before you start reading this book, understand that the learning curve for mastering Sencha technologies can be steep. I know that from experience; I have been there as well. My advice is to continue learning Sencha, read this book, and try to build a real-world MVC application. Once you understand the core Sencha concepts, your developer life will be so much easier. I can’t remember coding in JavaScript without any of the Sencha frameworks. No, I’m not saying this because I work for Sencha—I really believe the framework is powerful and complete. I guess that makes me a fangirl!

In the process of writing this book, I used the FindACab app as an example for building a real-world MVC Sencha Touch app. Every chapter in this book starts with a general introduction before I dive into specific techniques. Every technique includes a broad explanation and then a real-world example of how you can implement it in a real Sencha Touch MVC architecture app. All the code examples and the full code listings for the FindACab app can be found on my GitHub repository. A preview of the FindACab app is available on my website. Sencha has very powerful API documentation and guides, and I will show you the crème de la crème.

This is not a book with advanced, in-depth information about Sencha Touch or Sencha technologies. It’s a hands-on book for tips and tricks, and I try to focus on the beginner to intermediate Sencha Touch developer. However, every now and then I will share some more advanced techniques.

This book also won’t cover every Sencha Touch view component in high detail. Instead, this book will prepare you to start developing real-world MVC architecture applications. I will explain to you how the technology works; I will give you the tools, tips, and reference sources; and I will hold your hand while we build the FindACab app.

If this does not describe what you are looking for, there are some other great books that might be helpful to you:

§ Sencha Touch 2 Up and Running by Adrian Kosmaczewski (O’Reilly)

§ JavaScript Patterns by Stoyan Stefanov (O’Reilly)

§ Sencha Touch in Action by Jesus Garcia, Anthony De Moss, and Mitchell Simoens (Manning)

Sencha Touch Releases

The first release of Sencha Touch was version 0.90 beta on July 17, 2010 (this version supported only Android and iOS devices). The first stable 1.0 version was released in November 2010. At the time of writing, the latest stable version is 2.3. This version includes support for Android, iOS, BlackBerry 10, Kindle, Windows Phone, MS Surface Pro and RT, Chrome Pixel, and Tizen devices.

Between version 1.* and 2.*, lots of API changes were made; thus, parts of the code have been deprecated, which means that you cannot use it anymore because it is outdated. For this book, you will start using version 2.3.

If you have some experience with Sencha Touch version 1, my advice is to upgrade as soon as possible to the latest version. Version 2.x is much faster and is based on MVC patterns to create best practices for clean code creation. Always try to use the latest version for the best performance.