Tutorials Sencha Touch Getting Started with Sencha Touch

Getting Started with Sencha Touch

This section of the tutorial will help you Getting Started with Sencha Touch features.  It will help you get an understanding on props and cons of sencha touch framework for cross platform application development.

1. Introduction

Sencha Touch is a cross-platform framework aimed at next generation, touch enabled devices. It is probably one of the most powerful mobile web app frameworks out there and the best suited to handle complex web applications that need to replicate a native app. It’s currently compatible with Apple iOS 3+, Android 2.1+, and BlackBerry 6+ devices.

Language Used: HTML5, CSS3, and JavaScript

2. Built with Web Standards

  • Sencha Touch is the world’s first app framework built specifically to leverage HTML5, CSS3, and Javascript for the highest level of power, flexibility, and optimization.
  • Using the HTML5 to deliver components like audio and video, as well as a local Storage proxy for saving data offline.
  • We have made extensive use of CSS3 in our stylesheets to provide the most robust styling layer possible.
  • The entire library is under 120kb (gzipped and minified), and it’s trivial to make that number even smaller by disabling unused components or styles.

3. Sencha Touch features

Sencha touch is built specifically to leverage HTML5, CSS3, and JavaScript for the highest level of power, flexibility, and optimization. It Provides HTML5 to deliver components like audio and video, as well as a local Storage proxy for saving data offline. It provides CSS3 style sheets for robust styling layer possible. Here are the detailed features listed below.

3.1. GUI Support:

  • Easily scales to different resolutions for maximum compatibility with different iPhone, iPad, and the various Android phones.
  • HTML5 and CSS3 allow higher flexibility.
  • Great support for animations and enhanced touch events

3.2. Audio Video Support

  • Provides HTML5 to deliver components like audio and video, as well as a local Storage proxy for saving data offline. Provides CSS3 style sheets for robust styling layer possible.
  • Provides a simple Container for HTML5 Video

3.3. Networking Support:

  • HTTP
  • GPS (location-based web services and accelerometer input)

3.4. Data Integration

  • AJAX
  • YQL
  • Saving data offline with local Storage writers

4. Sencha Touch Licence

Sencha Touch is licensed under free commercial and open source licenses for application development, and a paid commercial license for OEM uses.

Commercial Software License:

This is the appropriate option if you are creating proprietary applications and you are not prepared to distribute and share the source code of your application under the GPL. This is now available at no charge to developers.

Open Source License:

Sencha is an avid supporter of open source software. This is the appropriate option if you are creating an open source application with a license compatible with the GNU GPL license v3. Although the GPLv3 has many terms, the most important is that you must provide the source code of your application to your users so they can be free to modify your application for their own needs. Visit below link to get more information on Sencha Touch Software License.


5. Download & Installation

  • Download the Sencha Touch Libraries
  • Make sure your development environment is set up
  • Make sure your development and production Web servers are properly installed and configured
  • Know the name of the CSS file you want your application to use. You will need this file name when you create the application HTML file in the next step

6. Sencha Touch Software Development IDE

Software developers spend their workday in an integrated development environment. An IDE is a set of tools that aids easy application development, by allowing developers do the following things

  • Write and edit source code
  • Refactoring code
  • Find and fix errors quickly
  • Code syntax intelligence/auto complete
  • Navigate code with ease
  • Compile and execute code
  • Browse class and subroutines
  • Integrated API documentations

It’s no wonder developers moved towards an IDE for their day to day development, but which IDE is right for you? What features you want? Here are the below Integrated Development Environments (IDE) Sencha touch supports

  • Eclipse Based IDEs
  • Aptana IDE
  • Spket  IDE

7. My Review on Sencha Touch

Here above I have articulated all of the framework features. I have been working in Sencha touch since its birth. Sencha is enhanced lot more features like performance improvement, additional API for data management, wider platform support, etc. It is claimed to be the best cross platform solution.   I agree with this point when I compare to the novice platforms like JQueery, iUI, etc. However, I couldn’t applaud the way it is aimed to achieve it. There are major roadblock that prompts me again and again while choosing Sencha as the platform for cross platform support with robust and acceptable performance. It failed to achieve the below things

  1. Performance in blackberry is remarkably bad
  2. No support for blackberry non touch devices
  3. Bad performance in android Low end devices. However, It works great in my HTC OneX, a high end device.
  4. UI is unacceptably bad in android low end devices
  5. Scrolling is very laggy, once the data set in a list reaches more then 200+ records
  6. SASS- Sencha claims SASS theming support is the backbone and added advantage compared to other platforms.  But, it is damn difficult and take couple of steps to compile and use in comparison with CSS3

Above all, I still say Sencha is the best platform in compared to all other mobile web frameworks.  It’s Just a thought in addition to your post.

Newest Most Voted
Inline Feedbacks
View all comments
9 years ago

I’ve just started learning sencha development. Could you please suggest me which platform you recommend for hybrid app development. I shall go for sencha touch or other frameworks like jqueery mobile ? thank you in advance.

9 years ago
Reply to  Premal

It is purely depends on your project need. However I will share some points which will help you to take a decisions.

  1. Sencha touch is highly mature over Jqueery
  2. UI Features/Capabilities: Sencha makes all(most) of the UI components looks as native. You hardly need to use css for getting native look. It also supports awesome graphics library
  3. Sencha touch documentation is much more organized than jQuery with tons of videos and examples. Active forums, but a lot more questions than answers
  4. Performance: In sencha touch app loading is bit slow, but after loading it is faster
  5. Device Support: Sencha works only with web-kit browser supported devices. Jqueery has wider support for devices like bada platform (but bada we hardly care about)
  6. Architecture: Sencha is strongly adhered to MVC pattern. But jqueery doesn’t have any strict followed architecture
9 years ago

Well I really liked studying it. This subject procured by you is very constructive for good planning.

Previous Post
Android Tutorials Javatechig

Android Interview Questions And Answers

Next Post
Sencha Touch Tutorials

Sencha Touch Button Example

Related Posts
By clicking “Allow All”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. Cookie Notice
Allow All