Sencha Touch

Last updated
Sencha Touch
Developer(s) Sencha
Final release
2.4.2 / June 15, 2015;9 years ago (2015-06-15)
Written in JavaScript
Operating system Android, iOS, BlackBerry, Kindle, Windows Phone, Tizen
Available inEnglish
Type JavaScript library
License GPLv3 or Commercial
Website www.sencha.com/products/touch

Sencha Touch is a user interface (UI) JavaScript library, or web framework, specifically built for the Mobile Web. It can be used by Web developers to develop user interfaces for mobile web applications that look and feel like native applications on supported mobile devices. It is based on web standards such as HTML5, CSS3 and JavaScript. The goal of Sencha Touch is to facilitate quick and easy development of HTML5 based mobile apps which run on Android, iOS, Windows, Tizen and BlackBerry devices, simultaneously allowing a native look and feel to the apps.

Contents

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).

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

The latest release, Sencha Touch 2.4.2, was released in June 2015 [1] and is designed to run on the following browsers and platforms:

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 GUI-based controls (or components) for use within mobile web applications. These components are optimized for touch input. The components are: [2]

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). [3]

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 but supported only by Android, iOS, 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. [4]

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. [5]

Basic application directory structure

Sencha Touch applications have a basic file and directory structure as follows: [2] [6]

Directory/FileDescription
appThe main directory that holds the app's models, views, controllers, stores and profiles
app.jsFile that holds the application's overall settings. References to all models, views, controllers, stores and profiles can be found here. Once these references are loaded, the main app launch function is called. This function loads the first view and hence can be considered as the first point of the application
index.htmlMain HTML file for the app. It may span many pages/screens for the mobile app
resourcesDirectory that holds all the images, CSS and any other external file that the app needs
app.jsonApp's configuration file
packager.jsonFile used to create native packages
ext-touch.jsThis is Sencha's JavaScript library (ext-touchdebug.js recommended during development phase)
ext-touch.cssThis is Sencha's CSS library

Developer tools and plugins

Sencha Touch provides IDE plugins for ease of development. Benefits of these plugins include code generation and auto-completion, code refactoring and ease of navigation to framework codebase and custom classes. Sencha Touch has plugins for popular IDEs like JetBrains, Visual Studio 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 integration. [7]

Sample usage

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

<!DOCTYPE HTML><html><head><title>Touch Test</title><!-- Sencha Touch CSS --><linkrel="stylesheet"type="text/css"href="sencha-touch/resources/css/sencha-touch-debug.css"/><!-- Google Maps API --><scripttype="text/javascript"src="//maps.google.com/maps/api/js?sensor=true"></script><!-- Sencha Touch JavaScript code --><scripttype="text/javascript"src="sencha-touch/sencha-touch-debug.js"></script><!-- Application script --><scripttype="text/javascript">Ext.setup({onReady:function(){// create the root panelnewExt.Panel({fullscreen:true,items:[{xtype:"map"}]});}});</script></head><body></body></html>

Ext.setup() is the starting point to initialise the application, setting up the viewport and the event system. [10]

Comparison to native applications

Sencha Touch supports PhoneGap [11] and Apache Cordova APIs for Accelerometer, Camera, Compass, Geolocation, Capture, [12] InAppBrowser, Media, Notification, Splash Screen, 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.

See also

Related Research Articles

In computing, cross-platform software is computer software that is designed to work in several computing platforms. Some cross-platform software requires a separate build for each platform, but some can be directly run on any platform without special preparation, being written in an interpreted language or compiled to portable bytecode for which the interpreters or run-time packages are common or standard components of all supported platforms.

WebKit is a browser engine primarily used in Apple's Safari web browser, as well as all web browsers on iOS and iPadOS. WebKit is also used by the PlayStation consoles starting with the PS3, the Tizen mobile operating systems, the Amazon Kindle e-book reader, Nintendo consoles starting with the 3DS Internet Browser, GNOME Web, and the discontinued BlackBerry Browser.

<span class="mw-page-title-main">Adobe AIR</span> Cross-platform runtime system for building rich web applications

Adobe AIR is a cross-platform runtime system currently developed by Harman International, in collaboration with Adobe Inc., for building desktop applications and mobile applications, programmed using Adobe Animate, ActionScript, and optionally Apache Flex. It was originally released in 2008. The runtime supports installable applications on Windows, macOS, and mobile operating systems, including Android, iOS, and BlackBerry Tablet OS.

<span class="mw-page-title-main">Ext JS</span> JavaScript application framework

Ext JS is a JavaScript application framework for building interactive cross-platform web applications using techniques such as Ajax, DHTML and DOM scripting. It can be used as a simple component framework but also as a full framework for building single-page applications (SPAs).

This is a comparison of web frameworks for front-end web development that are heavily reliant on JavaScript code for their behavior.

Apache Cordova 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 Cordova. Apache Cordova enables software programmers to build hybrid web applications for mobile devices using CSS3, HTML5, and JavaScript, instead of relying on platform-specific APIs like those in Android, iOS, or Windows Phone. It enables the wrapping up of CSS, HTML, and JavaScript code depending on the platform of the device. It extends the features of HTML and JavaScript to work with the device. The resulting applications are hybrid, meaning that they are neither truly native mobile application nor purely Web-based. They are not native because all layout rendering is done via Web views instead of the platform's native UI framework. They are not Web apps because they are packaged as apps for distribution and have access to native device APIs. Mixing native and hybrid code snippets has been possible since version 1.9.

<span class="mw-page-title-main">MoSync</span>

MoSync is a discontinued free and open-source software development kit (SDK) for mobile applications. It is integrated with the Eclipse development environment. The framework produces native mobile applications for multiple platforms using C/C++, HTML5 scripting and any combination thereof. The target group for MoSync are both web developers looking to enter the mobile space, as well as the ordinary PC/Mac desktop developer with knowledge in C/C++ development.

Titanium SDK is an open-source framework that allows the creation of native mobile applications on platforms iOS and Android from a single JavaScript codebase. It is presently developed by non-profit software foundation TiDev, Inc.

<span class="mw-page-title-main">Bada (operating system)</span> Discontinued mobile operating system

Bada was a 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 Korean. All phones running Bada were branded with the name Wave, unlike Samsung's Android devices which are branded as Galaxy.

Wink, which stands for "Webapp Innovation Kit", is an open-source framework for building mobile web applications on devices such as the IPhone or Android. It is based on web technologies such as HTML, CSS, and JavaScript.

jQuery Mobile is a touch-optimized web framework, specifically a JavaScript library, developed by the jQuery project team. The development focuses on creating a framework compatible with many smartphones and tablet computers, made necessary by the growing but heterogeneous tablet and smartphone market. The jQuery Mobile framework is consistent with other mobile app frameworks and platforms such as PhoneGap, Worklight, etc.

<span class="mw-page-title-main">Firefox OS</span> Mobile operating system by Mozilla (2014–2017)

Firefox OS is a discontinued open-source operating system made for smartphones, tablet computers, smart TVs, and dongles designed by Mozilla and external contributors. It is based on the rendering engine of the Firefox web browser, Gecko, and on the Linux kernel. It was first commercially released in 2014.

WebSharper is an open-source and commercial web-programming framework that allows web developers to create and maintain complex JavaScript and HTML5 front-end applications in the F# programming language. Other than a few native libraries, everything is F# source.

<span class="mw-page-title-main">Ionic (mobile app framework)</span> Open-source framework to develop hybrid mobile apps

Ionic is an open-source UI toolkit for building cross-platform mobile, web, and desktop applications using web technologies such as HTML, CSS, and JavaScript/TypeScript. It provides a set of pre-designed UI components and tools for building high-quality, interactive applications. Ionic was originally built as a complete open-source SDK for hybrid mobile app development created by Max Lynch, Ben Sperry, and Adam Bradley of Drifty Co. in 2013. The original version was released in 2013 and built on top of AngularJS and Apache Cordova. However, the latest release was re-built as a set of Web Components using StencilJS, allowing the user to choose any user interface framework, such as Angular, React or Vue.js. It also allows the use of Ionic components with no user interface framework at all. Ionic provides tools and services for developing hybrid mobile, desktop, and progressive web apps based on modern web development technologies and practices, using Web technologies like CSS, HTML5, and Sass. In particular, mobile apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by utilizing Cordova or Capacitor.

Crosswalk Project was an open-source web app runtime built with the latest releases of Chromium and Blink from Google. The project was founded by Intel's Open Source Technology Center in September 2013.

<span class="mw-page-title-main">React Native</span> Open-source mobile application framework

React Native is an open-source UI software framework developed by Meta Platforms. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use the React framework along with native platform capabilities. It is used to develop Android and iOS applications at Facebook, Microsoft, and Shopify. It is also being used to develop virtual reality applications at Oculus.

jQWidgets Software framework

jQWidgets is a software framework with widgets, themes, input validation, drag & drop plug-in, data adapters, built-in WAI-ARIA accessibility, internationalization and MVVM support. It is built on the open standards and technologies HTML5, CSS, JavaScript and jQuery. This library is used for developing responsive web and mobile applications. Some developers consider jQWidgets one of the top alternatives to the open-source jQuery UI.

<span class="mw-page-title-main">Progressive web app</span> Specific form of single page web application

A progressive web application (PWA), or progressive web app, is a type of web app that can be installed on a device as a standalone application. PWAs are installed using the offline cache of the device's web browser.

NativeScript provides platform APIs directly to the JavaScript runtime for a rich TypeScript development experience. As an open-source framework to develop apps for iOS, visionOS and Android platforms combining a best of all worlds approach marrying familiar Web approaches like CSS and view templating with common platform languages it delivers a liberating toolset for developers. It was originally conceived and developed by Bulgarian company Telerik, later acquired by Progress Software. At the end of 2019 responsibility for the NativeScript project was taken over by long-time Progress partner, nStudio. In December 2020, nStudio also oversaw the induction of NativeScript into OpenJS Foundation as an Incubating Project. NativeScript apps are built using JavaScript, or by using any programming language that transpiles to JavaScript, such as TypeScript. NativeScript supports the Angular and Vue JavaScript frameworks. Mobile applications built with NativeScript result in fully native apps, which use the same APIs as if they were developed in Xcode or Android Studio. Additionally, software developers can re-purpose third-party libraries from CocoaPods, Maven, and npm.js in their mobile applications without the need for wrappers.

This is a list of articles related to the JavaScript programming language.

References

  1. "Announcing Sencha Touch 2.4.2 with Improved BlackBerry 10.3 Experience". sencha.com. 15 June 2015.
  2. 1 2 Allen, Sarah; Graupera, Vidal; Lundrigan, Lee (2010). Pro Smartphone Cross-Platform Development. United States of America: APress. p. 226. ISBN   978-1-4302-2869-1.
  3. "Sencha Touch 2 Release Notes". cdn.sencha.com.
  4. "Announcing Sencha Touch 2.3 – Touch Grid, Cordova Support, and New Themes". sencha.com. 1 October 2013.
  5. Clark, John Earl; Johnson, Bryan P. (April 2013). Creating Mobile Apps with Sencha Touch 2. Birmingham UK: Packt Publishing. pp. 233, 234. ISBN   978-1-84951-890-1.
  6. "Touch Guides - Getting Started with Sencha Touch". docs.sencha.com.
  7. "Sencha Architect". sencha.com. 25 March 2015.
  8. "Touch - Sencha Docs". docs.sencha.com.
  9. "IBM Developer Works- Build mobile web applications with Sencha Touch". IBM .
  10. "Touch Guides - Events". docs.sencha.com.
  11. "Leveraging PhoneGap within Sencha Touch". phonegap.com.
  12. "Touch Guides - Using Native APIs". docs.sencha.com.

Bibliography