Sencha Touch is a

user interface In the industrial design field of human–computer interaction, a user interface (UI) is the space where interactions between humans and machines occur. The goal of this interaction is to allow effective operation and control of the machine f ...

(UI)

JavaScript library A JavaScript library is a library of pre-written JavaScript code that allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies. Libraries With the expanded demands for JavaScript, an ea ...

, or

web framework A web framework (WF) or web application framework (WAF) is a software framework that is designed to support the development of web applications including web services, web resources, and web APIs. Web frameworks provide a standard way to build and ...

, specifically built for the

Mobile Web The mobile web refers to mobile browser-based World Wide Web services accessed from handheld mobile devices, such as smartphones or feature phones, through a mobile or other wireless network. History and development Traditionally, the World ...

. It can be used by

Web developers A web developer is a programmer who develops World Wide Web applications using a client–server model. The applications typically use HTML, CSS, and JavaScript in the client, and any general-purpose programming language in the server. is used f ...

to develop user interfaces for mobile

web application A web application (or web app) is application software that is accessed using a web browser. Web applications are delivered on the World Wide Web to users with an active network connection. History In earlier computing models like client-serv ...

s that look and feel like native applications on supported mobile devices. It is based on

web standard Web standards are the formal, non-proprietary standards and other technical specifications that define and describe aspects of the World Wide Web. In recent years, the term has been more frequently associated with the trend of endorsing a set of s ...

s such as

HTML5 HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and final major HTML version that is a World Wide Web Consortium (W3C) recommendation. The current specification is known as the HTML ...

CSS3 Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as Scalable Vector Graphics, SVG, MathML or XHTML). CS ...

and

JavaScript JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of websites use JavaScript on the client side for webpage behavior, of ...

. The goal of Sencha Touch is to facilitate quick and easy development of HTML5 based mobile apps which run on Android,

iOS iOS (formerly iPhone OS) is a mobile operating system created and developed by Apple Inc. exclusively for its hardware. It is the operating system that powers many of the company's mobile devices, including the iPhone; the term also include ...

Windows Windows is a group of several proprietary graphical operating system families developed and marketed by Microsoft. Each family caters to a certain sector of the computing industry. For example, Windows NT for consumers, Windows Server for ser ...

, Tizen and

BlackBerry The blackberry is an edible fruit produced by many species in the genus ''Rubus'' in the family Rosaceae, hybrids among these species within the subgenus ''Rubus'', and hybrids between the subgenera ''Rubus'' and ''Idaeobatus''. The taxonomy ...

devices, simultaneously allowing a native look and feel to the apps.

Version history and support

Sencha Touch is a product of Sencha, which was formed after popular JavaScript library projects Ext JS, jQTouch and Raphaël were combined. The first release of Sencha Touch, version 0.90 beta, was made available on July 17, 2010. This beta release supported devices running Android, and iOS (on iPhone, iPod Touch,

iPad The iPad is a brand of iOS and iPadOS-based tablet computers that are developed by Apple Inc. The iPad was conceived before the related iPhone but the iPhone was developed and released first. Speculation about the development, operating ...

). Subsequently, the first stable version, 1.0, was released in November 2010. Version 1.1.0 added support for devices running

BlackBerry OS BlackBerry OS is a discontinued proprietary mobile operating system developed by Canadian company BlackBerry Limited for its BlackBerry line of smartphone handheld devices. The operating system provides multitasking and supports specialized i ...

6.0. The latest release, Sencha Touch 2.4.2, was released in June 2015 and is designed to run on the following browsers and platforms: * Android browser,

Google Chrome for Android Google Chrome is a cross-platform web browser developed by Google. It was first released in 2008 for Microsoft Windows, built with free software components from Apple WebKit and Mozilla Firefox. Versions were later released for Linux, macOS, ...

* BlackBerry 10 *

Bada Bada (stylized as bada; Korean: ) is a discontinued mobile operating system developed by Samsung Electronics for devices such as mid- to high-end smartphones and tablet computers. The name is derived from " (bada)", meaning "ocean" or "sea" in ...

Mobile Browser *

Kindle Fire The Amazon Fire, formerly called the Kindle Fire, is a line of tablet computers developed by Amazon. Built with Quanta Computer, the Kindle Fire was first released in November 2011, featuring a color 7-inch multi-touch display with IPS tech ...

Browser * Tizen *

Windows Phone 8 Windows Phone 8 is the second generation of the Windows Phone mobile operating system from Microsoft. It was released on October 29, 2012, and, like its predecessor, it features a flat user interface based on the Metro design language. It was s ...

and Windows 8 IE10 *

Mobile Safari ''Mobile Safari'' is the third album by the Scottish band The Pastels, released in 1995. Production The album was recorded at Glasgow's Stuffhouse Studios and CAVA Sound Workshops. Dean Wareham contributed guitar to a few tracks. "Flightpaths ...

There are no announced plans to support Firefox Mobile.

Features

MVC Architecture

Sencha Touch follows the MVC pattern which separates the application data, the control code and view. This separation allows large scale applications to be flexible and easy to maintain.

Widget components and customisable themes

Sencha Touch has an inbuilt DOM manipulation interface which negates the dependency on other UI frameworks like jQuery. It includes a set of

graphical user interface The GUI ( "UI" by itself is still usually pronounced . or ), graphical user interface, is a form of user interface that allows users to interact with electronic devices through graphical icons and audio indicator such as primary notation, inst ...

GUI-based controls (or components) for use within mobile web applications. These components are optimized for touch input. The components are: * Buttons with device specific themes and effects * Form elements such as text fields for email * Date picker and address * Sliders, selectors, and combo-boxes * A list component with momentum-scrolling and an index bar * A minimal icon set * Toolbars and menus * Movable tabs, bottom toolbars * A map component with support for multi-touch gestures such as pinch and zoom * Carousels All the components can be themed according to the target device. This is done using Sass, a stylesheet language built over CSS. Some of the native-lookalike themes are Cupertino Classic (for iOS6.x and below), Cupertino (for iOS 7) and Mountain View (for Android).

Transitions, animations and adaptive UI

Sencha Touch has eight in-built transition effects including slide over or under the current element, pop, flip, and cube. It supports common touch gestures built from touch events, which are

Web standards Web standards are the formal, non-proprietary standards and other technical specifications that define and describe aspects of the World Wide Web. In recent years, the term has been more frequently associated with the trend of endorsing a set of s ...

but supported only by Android,

, and some touch enabled devices. These are tap, double tap, swipe, scroll, and pinch. Since Sencha touch is HTML5 based, the layouts it offers are extremely adaptive in nature.

Charting

Sencha Touch also supports charting components including pie charts, bar graphs, line series, etc. with explanatory legends. These components support interactivity like pinch and zoom. Just like the Grid components in ExtJS, Sencha Touch offers TouchGrid functionality.

Profiles

Profiling in Sencha Touch allows you to create different profiles catering to different screen sizes. When the application is loaded, the framework determines the type of device, and its corresponding profile determines which components and functionality need to be swapped out, and the specific views and controllers that need to be invoked, saving the developer the task of creating a different application for each type of device.

Basic application directory structure

Sencha Touch applications have a basic file and directory structure as follows:

Developer tools and plugins

Sencha Touch provides IDE plugins for ease of development. Benefits of these plugins include code generation and

auto-completion Autocomplete, or word completion, is a feature in which an application predicts the rest of a word a user is typing. In Android and iOS smartphones, this is called predictive text. In graphical user interfaces, users can typically press the tab ...

code refactoring In computer programming and software design, code refactoring is the process of restructuring existing computer code—changing the '' factoring''—without changing its external behavior. Refactoring is intended to improve the design, structur ...

and ease of navigation to framework codebase and custom classes. Sencha Touch has plugins for popular IDEs like

JetBrains JetBrains s.r.o. (formerly IntelliJ Software s.r.o.) is a Czech software development company which makes tools for software developers and project managers. , the company has offices in Prague; Munich; Berlin; Boston, Massachusetts; Ams ...

Visual Studio Visual Studio is an integrated development environment (IDE) from Microsoft. It is used to develop computer programs including websites, web apps, web services and mobile apps. Visual Studio uses Microsoft software development platforms such ...

and Eclipse. There is a visual app builder, Sencha Architect, for building cross platform HTML5 apps. It provides addiction features like theming and

command line A command-line interpreter or command-line processor uses a command-line interface (CLI) to receive commands from a user in the form of lines of text. This provides a means of setting parameters for the environment, invoking executables and pro ...

integration.

Sample usage

Sencha Touch makes it convenient to use a map in your application using the Ext.Map component. The inclusion of "Google Maps API" JavaScript file is essential for the GoogleMaps

API An application programming interface (API) is a way for two or more computer programs to communicate with each other. It is a type of software interface, offering a service to other pieces of software. A document or standard that describes how ...

to work. Touch Test Ext.setup() is the starting point to initialise the application, setting up the viewport and the event system.

Comparison to native applications

Sencha Touch supports PhoneGap and

Apache Cordova Apache Cordova (formerly PhoneGap) is a mobile application development framework created by Nitobi. Adobe Systems purchased Nitobi in 2011, rebranded it as PhoneGap, and later released an open-source version of the software called Apache Cordov ...

APIs for

Accelerometer An accelerometer is a tool that measures proper acceleration. Proper acceleration is the acceleration (the rate of change of velocity) of a body in its own instantaneous rest frame; this is different from coordinate acceleration, which is acc ...

, Camera, Compass,

Geolocation Geopositioning, also known as geotracking, geolocalization, geolocating, geolocation, or geoposition fixing, is the process of determining or estimating the geographic position of an object. Geopositioning yields a set of geographic coordinates ...

, Capture, InAppBrowser, Media, Notification,

Splash Screen A splash screen is a graphical control element consisting of a window containing an image, a logo, and the current version of the software. A splash screen can appear while a game or program is launching. A splash page is an introduction page on a ...

, Storage (SQLite), etc. which were previously accessible only to native applications. Sencha Touch leverages JavaScript to create most of the UI components and change CSS of DOM elements on the fly. With JavaScript Engines being more efficient and faster than before, web apps run almost as smooth as native apps.

References

Bibliography

* Jesus Garcia and Anthony De Moss, Mitchell Simoens, ''Sencha Touch in Action'', * Ajit Kumar, ''Sencha Touch Cookbook'', . * Hiren J. Dave, Instant Sencha Touch, . * Ajit Kumar, ''Sencha Touch Cookbook - Second Edition'', . * Lee Boonstra, Hands-On Sencha Touch 2: A Real-World App Approach 1st Edition, . * Ajit Kumar, ''Sencha MVC Architecture'', . * Matthew David, HTML5 Mobile Websites, Turbocharging HTML5 with jQuery, Sencha Touch, and Other Frameworks, . * https://developer.salesforce.com/page/Developing_Mobile_Applications_With_Force.com_And_Sencha_Touch

External links

* {{DEFAULTSORT:Sencha Touch (mobile app framework) Ajax (programming) JavaScript libraries HTML5 JavaScript web frameworks