Back to Blog

Sencha Touch 2 From a UI Perspective

Author

Sencha Touch

If you’ve ever developed a web application for a mobile device, you’ll know how challenging it can be to emulate a native app-like experience on the mobile browser. Simple features like scrolling, fixed headers or footers, and fitting a proper layout across multiple viewports can be difficult to implement across a variety of browsers. And for an enterprise-sized app, the headaches can be endless.

That’s where Sencha Touch 2 comes in. Sencha Touch 2 is a powerful Javascript-based framework that utilizes all HTML5 and CSS3 features (or at least all the ones that webkit supports) such as local storage and transitions.

In this article, we’ll focus on the UI capabilities of Sencha Touch 2 for web applications.

Fast Prototyping

Instead of building from the ground up, you can utilize Sencha’s built-in components to create the application’s structure. By built-in, I mean the HTML, CSS, and Javascript is already there. It’s almost a bootstrap of sorts but so much more powerful. For instance, creating a datepicker is as easy as instantiating the datepicker class by adding a simple:

xtype: 'datepickerfield'

and adding its respective config options. There’s no need to add any external plugins and external CSS. It’s all built-in and guaranteed to work with the other components of your project.

With minimal code, you can build a quick prototype of your app in no time.

Scalable Layout

I love Sencha’s layout system. It rids you of the need for floats and defining widths altogether. Instead, Sencha uses the layout and flex properties to structure the design.

There are many different kinds of layouts:

  • hbox: aligns your items horizontally.
  • vbox: aligns your items vertically.
  • card: stacks your items on top of each other. (used in TabPanels and Carousel layouts)
  • fit: forces the item take up the full width and height of the parent container.

Within each layout, Sencha lets you position the items by setting the dock and/or flex properties. dock positions your item to the top, left, right or bottom of its container. flex, on the other hand, automatically sets the width and position of each item by using a grid system. Take a look at the following code found in Sencha’s documentation:

Ext.create('Ext.Container', {
    layout: 'vbox',
    items: [
        {
            docked: 'left',
            xtype: 'panel',
            width: 100
        },
        {
            xtype: 'panel',
            flex: 1
        },
        {
            xtype: 'panel',
            flex: 2
        }
    ]
});

This container takes the vbox layout, meaning all the items will be vertically stacked on top of each other.

The second item with the flex: 1 property will take up a third of the container’s height while the next item will take up two-thirds of the container’s height because it has the flex property of 2.

And finally, the item docked to the left will float to the left of its sibling components, taking up the full height of the parent container.

The layout and flex attributes rid you of any need of floats and clearfix tricks, which would be a blessing for any front-end developer. Luckily, the W3C is working out a spec for CSS3 flex box layouts.

Customizable

When it comes to building components and styling using the Sencha Touch 2 framework, the possibilities are endless. For instance, Sencha uses SASS and Compass to style their templates. It has a rich set of variables and custom mixins to quickly change and build upon the existing styles.

If you want to see the kind of components you can build with Sencha Touch, take a look at the Sencha Market. You’ll find an impressive list of components, including the Animated CSS3 button menu, which was inspired by the Path menu.

Limitations & Learning Curve

Unfortunately, Sencha Touch only supports webkit browsers, limiting its market to mostly iOS and Android devices. And for those unfamiliar with Javascript and MVC, the learning curve can be pretty steep.

Nonetheless, Sencha provides excellent documentation on their site and has an extremely large and active community. They have their own Vimeo channel with hundreds on Sencha tutorials. Once you get your hands on the code and see it come to life, it’ll be hard to go back to basic markup coding when developing for web applications on mobile and tablet devices.

When to Use

If you’re only building a small marketing site, it might make more sense to use other Javascript mobile libraries such as jQuery Mobile or jQTouch for maximum browser support. However, if you are planning to build a large enterprise sized app, Sencha Touch would make an excellent candidate. Its MVC framework allows you to keep your code DRY and easy to debug.

Next Steps

I covered only a small portion of Sencha Touch 2’s capabilities, with special regard for web applications and UI development. If you want to understand the full breadth of Sencha Touch, check out the Sencha Touch site. There you will find excellent documentation, a community forum and a wealth of video tutorials.

Resources

Author Jinyoung Chang

More posts from this author

How we work Process

Product Hero Talin Wadsworth