Sencha Touch: The HTML5 Mobile App Framework


Developing a mobile application requires many decisions to be made before the first line of code is even written. For instance, should you go with a web app or a native app? If so, should you use a framework? There is no incorrect answer to either of these questions-it depends on the situation. Today we are going to talk about a specific solution to these questions: Sencha Touch.

What is Sencha Touch?

From their website:

Sencha Touch

Sencha Touch allows your web apps to look and feel like native apps. Beautiful user interface components and rich data management, all powered by the latest HTML5 and CSS3 web standards and ready for Android and Apple iOS devices. Keep them web-based or wrap them for distribution on mobile app stores.

From the makers of ExtJS, the newly named Sencha folks have yet again created a truly powerful javascript framework. You can check out more about the framework here. Sencha touch can replicate almost all native UI features perfectly. At the moment, Sencha Touch 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.

That being said, there still are some drawbacks to it just like anything. For starters, while this is being written, it still is in BETA. From personal testing, I haven't encountered any bugs yet. It also means that they are still packing on many features to the framework. Which is actually good news because this framework is already incredibly jam-packed with features, but you can still look forward to things like camera support in the future. But access to device functions like this are only possible if you wrap it in PhoneGap, another framework that allows mobile applications to be native applications.

This brings up another major point. Is a mobile application framework like Sencha Touch even appropriate for my project? The answer to that question is tough. There are pros and cons to both solutions and we are assuming that we are using Sencha Touch as strictly a web app:

sencha touch

Now you need to decide if Sencha Touch is the right web app framework for your project:

Sencha Touch at a Glance

  • Higher learning curve than most other web frameworks
  • Best web app framework for true high level web applications
  • Easily scales to different resolutions for maximum compatibility with different iPhones, iPad, and the various Android phones.
  • Two themes for iOS and Android
  • HTML5 and CSS3 allows higher flexibility
  • Great support for animations and enhanced touch events

If this all sounds great for your project, then go ahead and download it. If it seems a bit overkill, you might want to look at something like jQTouch (look for a tutorial on this soon).

Downloading Sencha Touch

To download a copy of Sencha Touch, just go to their website, and click Download Now.

sencha touch

Open up the sencha touch folder and click on examples. Then click on index.html (inside the examples folder)

sencha touch

Browse around the examples and explore the different functionality of the different apps. The most valuable app for learning the true abilities of this framework is the Kitchen Sink app. That is what we will be looking at:

sencha touch

Kitchen Sink

sencha touch

Explore the application and view the source of some of the things to get a grasp on the Sencha Touch concept.

User Interface

If you click on User Interface on the left, you are presented with a new, nicely animated menu with specific UI elements. Although it doesn't look like they have a coverflow interface yet, I'm sure that it is something we will eventually see. As you can see, they have every essential element taken care of. Let's view the source code of tabs to get a feel for the level of complexity of creating a basic UI element:

sencha touch
demos.Tabs = new Ext.TabPanel({
    sortable: true, // Tap and hold to sort
    items: [{
        title: 'Tab 1',
        html: 'The tabs above are also sortable.
(tap and hold)', cls: 'card card5' }, { title: 'Tab 2', html: 'Tab 2', cls: 'card card4' }, { title: 'Tab 3', html: 'Tab 3', cls: 'card card3' }] });

As you can see, it is the familiar ExtJS way of doing things. You create a new component, set the value of sortable, then input the necessary information. In this case, the tab title, tab content, and an identifiable class. This powerful simplicity is a testament to the power of this framework.


sencha touch

These are even easier. To animate a new panel into the project, this is all you really need:

demos.Animations.slide = new Ext.Panel({
	html: 'Slides can be used in tandem with direction: "up/down/left/right".',
	cls: 'card card2'

The slide part is what determines the transition you use. You can view the Kitchen Sink for more examples like pop, flip, cube, and fade.

I encourage you to play around with the Kitchen Sink some more and be sure to analyze the source code for anything that interests you. As this is still in BETA, there is barely any documentation on it, something ExtJS (now Sencha) is a bit notorious for.

Wrap Up

Now that you have a little bit more knowledge on Sencha Touch, I hope that you can add it to your arsenal of mobile application tools. As with any other development industry, you need to pick the right tools for the job. Sencha Touch can be that right tool if you are building a high level mobile application through the web. Just make sure it is the right fit for your project before going any further. That's all for now, let me know what you think about Sencha Touch and other frameworks in the comments!

Related Posts
  • Code
    Mobile Operating Systems in 2014Dj45i preview image@2x
    As a mobile developer, it's good to be familiar with the most important platforms in the mobile space. In this article, we'll take a look at the most important mobile operating systems, their current state, and how they're performing in the current mobile landscape.Read More…
  • Code
    Mobile Development The Need for Speed7d4d1 preview image@2x
    As mobile developers, we need to make sure that our apps are fast and performant. In this post, we take a look at, a service that monitor your app's performance and tells you exactly how you can improve it.Read More…
  • Code
    Mobile Development
    In the Spotlight: Brian LeRouxPreview image@2x
    The explosive growth of the mobile space has accelerated the search for a robust and viable cross-platform solution. In 2008, shortly after the introduction of the iPhone SDK and after fiddling with Cocoa and Objective-C, Brian LeRoux and his colleagues at Nitobi decided that their time was better spent building a cross-platform solution than building native mobile applications.Read More…
  • Code
    Web Development
    Using Polymer to Create Web ComponentsPolymer wide retina preview
    Polymer will help you to easily create Web Components for your web apps, using a similar syntax to HTML.Read More…
  • Code
    Android SDK
    Using New Relic to Monitor Your Android AppGetting started new relic retina preview2
    In the last two years, New Relic has focused hard on building out a solution for monitoring the performance of mobile apps. In this tutorial, we will look at how you can start using New Relic to monitor the performance of an Android application.Read More…
  • Code
    Android 4.4 KitKat: What's NewAe2b1 preview image@2x
    Google released its latest version of Android on October 31, 2013. The new release, version 4.4, is nicknamed KitKat. The release came as a surprise to many as Key Lime Pie and 5.0 had been linked to this update for quite some time. KitKat, however, doesn't disappoint as it's packed with features and updates. In this article, I'll give you an overview overview of what's new in KitKat.Read More…