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 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:

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.

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

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:

Kitchen Sink

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:

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.

Animations

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!