- Sencha Touch Tutorial
- Sencha Touch - Home
- Sencha Touch - Overview
- Sencha Touch - Environment
- Sencha Touch - Naming Convention
- Sencha Touch - Architecture
- Sencha Touch - MVC Explanation
- Sencha Touch - First App
- Sencha Touch - Build Application
- Sencha Touch - Migration Steps
- Sencha Touch - Core Concepts
- Sencha Touch - Data
- Sencha Touch - Theme
- Sencha Touch - Device Profile
- Sencha Touch - Dependencies
- Environment Detection
- Sencha Touch - Events
- Sencha Touch - Layout
- Sencha Touch - History & Support
- Sencha Touch - Upload & Download
- Sencha Touch - View Components
- Sencha Touch - Packaging
- Sencha Touch - Best Practice
- Sencha Touch Useful Resources
- Sencha Touch - Quick Guide
- Sencha Touch - Useful Resources
- Sencha Touch - Discussion
Sencha Touch - Overview
Sencha Touch is a popular framework of Sencha for creating a user interface for mobile applications. It helps the developer create a mobile app using simple HTML, CSS, JS which supports many mobile devices such as android, IOS, BlackBerry, and Windows. It is based on MVC architecture. The latest version of Sencha Touch is 2.4.
History of Sencha Touch
After releasing Sencha's other product, ExtJs, which was for web application, there was a need to develop a framework which works on mobile devices too.
The first version of Sencha Touch was 0.9 beta version, which supported Android and IOS devices. Later, the first main release of Sencha Touch version 1.0 was in November 2010, which was the first stable version and supported Blackberry devices too.
The latest release of Sencha Touch is version 2.4 released in June 2015, which supports many devices such as Windows, Tizen along with Android, IOS, BlackBerry OS 10, Google Chrome for Android and mobile Safari, etc.
Features of Sencha Touch
Following are the most prominent features of Sencha Touch −
Customizable and more than 50 build in UI widgets with a collection of rich UI such as lists, carousels, forms, menus, and toolbars, built specifically for mobile platforms.
Code compatibility of new versions with the older one.
A flexible layout manager that helps organize the display of data and content across multiple mobile devices with different OS.
The framework includes a robust data package that can consume data from any backend data source.
Adaptive layouts, animations, and smooth scrolling for a better mobile web application experience for the use.
Out-of-the-box, native-looking themes for every major platform enables to make web and hybrid applications match the look and feel of the target platforms.
Sencha Touch ─ Benefits
Sencha Touch is the leading standard for business-grade web application development. It offers the tools necessary to build robust applications for most of the mobile devices providing a single platform for developing applications. Following are some of the benefits −
Provides a responsive touch feature, hence the user can easily navigate while using the mobile app.
Provides compatibility with all the latest versions of IOS, Android and Blackberry, and Windows.
Provides fastest possible speed desirable for any mobile application.
Provides a cost-effective solution with its cross-platform compatibility.
Based on the native APIs and basic web development languages such as HTML, CSS, JS which makes it easier for a developer to understand Sencha Touch.
Sencha Touch ─ Limitations
Sencha Touch API doesn't have the following capability −
The app does not have access to the device’s camera, contacts, and accelerometer.
It does not provide the push notification facility. For this, we have to use websockets or long polling.
According to general public license policy, it is free for open source applications however paid for commercial applications.
It is not good for hardcore graphics and animation apps such as for gaming apps.
Sencha Touch ─ Tools
Sencha SDK
This is Sencha development kit used to create a skeleton of the project. We use the command "sencha -sdk path/to/touch generate app appName" to create an app with the name given in the command.
When the app is created, you can see the following files in the app −
app − This folder contains model, view, controller and store files for the app.
app.js − This is the main JS file for your application. From this file, the Sencha code flow starts.
app.json − This is the configuration file for the app, all the configuration details presents here.
index.html − This is the main html file where we include the app.js and other Sencha related files.
package.json − This file has all the dependency and other information related to the app.
resources − This folder includes all the CSS files and images required for the application.
Sencha CMD
Sencha CMD is a command line tool, which provides the features of Sencha Touch code minification, scaffolding, build generation, and other useful features for production purpose.
We use command "Sencha app build package" in the command prompt to build the application for this. Go to the app directory in the command prompt and type the above command. Once the build is successful, we will see the minified version of the application basically used for production purpose.
This can be downloaded from https://www.sencha.com/products/extjs/cmd-download/
Sencha Inspector
Sencha Inspector is a debugging tool to debug any issue in Sencha code during development.