Book Image

Instant Sencha Touch

By : Hiren Dave
Book Image

Instant Sencha Touch

By: Hiren Dave

Overview of this book

Sencha Touch, a high-performance HTML5 mobile application framework, is the cornerstone of the Sencha HTML5 platform. Built for enabling world-class user experiences, Sencha Touch is the only framework that enables developers to build fast and impressive apps that work on iOS, Android, BlackBerry, Kindle Fire, and more. Instant Sencha Touch is a practical hands on guide that provides you with all you need to explore the Sencha Touch framework and start building high performance, cross platform mobile applications with rich user interfaces. It also covers native deployment of Sencha Touch applications on various platforms. Instant Sencha Touch is a step-by-step guide that will explain you everything from downloading Sencha Touch SDK to setting up the development environment, and building applications. You will start with a quick overview of the Sencha Touch and work your way through understanding the class structure, and basic components and layouts of the Sencha Touch. You will also cover interesting features like animations, adaptive layout, data packages, local storage support, and so on. You will also see how to build your own theme and styles and deploy Sencha Touch app as native apps. You will also learn about MVC architecture for building Sencha Touch applications. Finally you will take a look at the Phonegap (Cordova) build and Cordova SDK to deploy Sencha Touch application as native application.
Table of Contents (6 chapters)

So, what is Sencha Touch?


Sencha Touch is a powerful JavaScript framework powered by HTML5 and CSS 3 web standards built for mobile web. Sencha Touch enables your web applications to replicate almost all native UI features. Nowadays, most of the mobile devices support HTML5 and CSS 3 web standards; that's why Sencha Touch is widely recognized as a cross-platform development framework. It's packed with features such as smoother scrolling, animation, adaptive layouts, native packaging, and offline support. It has a rich set of controls such as carousels, lists, forms, and tabs to replicate native UI features of most of the mobile devices available in the market. All the components are touch-optimized and support adaptive layout. Sencha Touch uses vector graphics, so it supports almost all the resolutions of various mobile devices without much tweaking, and with adaptive layout, it supports orientations such as landscape and portrait. Also, it can quickly respond to switching requests from landscape to portrait and vice versa. Sencha Touch also supports data storage. Sencha Touch applications work on almost all the mobile platforms such as Apple, Android, BlackBerry, and Windows.

It's not just a framework for developing web applications. With the support of native packaging, Sencha Touch can be used to develop native applications. There are a number of options for native packaging, such as Cordova (earlier PhoneGap) and Sencha Touch native wrapper. This means that one single Sencha Touch application can be deployed to more than one mobile platform. It drastically saves time and the efforts of any developer.

A Sencha Touch application as a web application

With the growing use of mobile devices, it's important that your web application supports mobile devices. As we mentioned earlier that most of the mobile browsers support HTML5 and CSS 3 standards, Sencha Touch is widely used as a framework for mobile web application development. Most mobile applications don't need much hardware support; that's the reason why Sencha Touch can be used as a cross-development platform. The Sencha Touch web application works just like any other web application. It can be hosted on some server and with the domain name it can be accessed in any mobile browser. There is no special requirement for the server when we use Sencha Touch, since it uses JavaScript, HTML5, and CSS 3. All the processing happens on the client side in the browser, and that's the reason why the Sencha Touch app can be used offline as well. With the support for HTML5 local storage, it can store and access local data in the browser as well. Sencha Touch supports all kinds of events and gestures such as touch start, touch end, tap, double-tap, swipe, and pinch. It can also respond to keyboard events of mobile devices. Sencha Touch also supports JSON, JSONP, XML, and Ajax requests with data packages. This enables a developer to bind data to the UI to make data-driven web applications. In short, Sencha Touch is a complete package for developing mobile web applications.

A Sencha Touch application as a native application

There are some drawbacks of web applications. It does not have much access to hardware. It cannot respond to some hardware events such as when a camera is started. Also, to view web applications you need to have an Internet connection on mobile devices, which sometimes may not be available. Web applications do not support features such as APN (Apple Push Notifications). Sometimes, consumers also prefer native applications instead of web applications. Native applications are much more stable than web applications, since they are directly running on top of device hardware. But that does not restrict Sencha Touch from being a development platform. With the support of some native wrappers, Sencha Touch apps can be deployed as native applications. One of the major native wrappers used is Cordova (earlier known as PhoneGap). It supports all the mobile platforms such as iOS, Android, Windows, BlackBerry, and Symbian. A major advantage of developing native applications using Sencha Touch is that a developer does not have to build separate applications for each platform. One single Sencha Touch application, once developed, can be deployed to various app stores such as Google Play Store and Apple App Store after converting it to a native application. A Sencha Touch application, once converted to a native application, can communicate with hardware and use its features. Another reason to go for a native application is that it's more secure than web applications.

PhoneGap build is one of the nice tools used to convert Sencha Touch apps to native apps. It is accessible from http://build.phonegap.com. Here, we can upload our Sencha Touch applications and trigger the build for various platforms. Within few minutes, you will have deployable native applications for selected platforms.

Sencha Touch 2 has its own native wrapper, which can be used to package applications for iOS and Android. It also has HTML5 device APIs to communicate with hardware. It has improved performance in terms of loading and layouts.

When we consider native iOS app development, there is one more reason to go for Sencha Touch. It's the speed of execution in iOS. Sencha Touch is blazing fast on iOS. One can build an app as fast as a native iOS application with Sencha Touch. The Sencha Touch MVC framework is a perfect framework to build and maintain your application. It has a very standard and easy-to-understand flow of development. User interface, business logic, and data access are separate from each other in this architecture, allowing the developer to focus on a particular part without affecting the other part.

So no matter what your preference is, Sencha Touch is an ideal framework to develop mobile applications.