![]() A Sencha Touch app with an iOS6 theme | |
Developer(s) | Sencha |
---|---|
Final release | 2.4.2 / June 15, 2015 |
Written in | JavaScript |
Operating system | Android, iOS, BlackBerry, Kindle, Windows Phone, Tizen |
Available in | English |
Type | JavaScript library |
License | GPLv3 or Commercial |
Website | www |
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.
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.
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.
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]
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.
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]
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]
Sencha Touch applications have a basic file and directory structure as follows: [2] [6]
Directory/File | Description |
---|---|
app | The main directory that holds the app's models, views, controllers, stores and profiles |
app.js | File 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.html | Main HTML file for the app. It may span many pages/screens for the mobile app |
resources | Directory that holds all the images, CSS and any other external file that the app needs |
app.json | App's configuration file |
packager.json | File used to create native packages |
ext-touch.js | This is Sencha's JavaScript library (ext-touchdebug.js recommended during development phase) |
ext-touch.css | This is Sencha's CSS library |
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]
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]
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.