Sencha Touch

Sencha Touch is an MVC-based JavaScript framework that allows you to create native looking, cross platform HTML5 apps. It comes with a robust data package, over 50 built-in UI components, and native looking themes that work on iOS, Android, Windows, BlackBerry and more.

This framework is free to use both for open source and proprietary products as long as your code won't run as part of an embedded system in a product that ships more than 5,000 units. If you need more, you’ll have to purchase their Bundles which comes with extras like Architect and Charts.  

Sencha Touch also features an adaptive layouts engine that allows developers to build apps that respond to scrolling, play animations, load and respond to a variety of mobile devices. All these features and tools come together to create apps that have that native look and feel without having to do all that code work.

How does Sencha Touch work?

Using Sencha Touch, you’ll see that it’s basically a big JavaScript data structure that you can customize. You don’t really need to code as much as you configure the framework and create a tree structure out of JSON filled with snippets of HTML stored as strings to build the application you want. When you pass this structure to a Sencha Touch routine, Touch will then swap these structures in and out of view and handle all the buttons to get them where they need to go.

One way to better understand how to use Secha Touch as a framework is to think about Ext JS. It has the same versatility as Ext JS but upgraded to utilize the best practices of HTML5, CSS3 and ECMAScript5.

To get started, all you need to do is download and install. Once you have Sencha installed, you can start setting up your directories and coding within the Sencha Touch Editor. Below is a simple “Hello World” app which you can use to get your feet wet. The Sencha Touch website also comes with a bunch of tutorials that allow you to test out their features before you start integrating them into your own app.

What are the advantages of using Sencha Touch?

One of the biggest selling point for using Sencha Touch is the fact that you can use it with Apache Cordova. This allows you to package your app in a native container and gives you access to APIs available within PhoneGap like Camera or Accelerometer. Touch and PhoneGap’s integration is so seamless, you can start your build within the Sencha CMD and package your tool within PhoneGap using a single command.

Another advantage Sencha Touch has over other frameworks for cross platform development is their documentation. It’s very extensive and caters to every skill level. Because admittedly, Sencha Touch isn’t for beginners. The framework is extensive and well organized, which allows it to do most of the heavy lifting. The command line tools are easy to use but you’ll still need real JavaScript skills in order to properly run your API or UI. The framework encourages good coding habits (OOP, MVC/MVVM) and forces us into the habit of documentation, which is a good thing for the entire Sencha community.

And once you get past the learning curve, coding will be a breeze because Touch probably has the most advanced Class system of all JavaScript frameworks. Its functionality is based on abstraction, which allows developers who aren’t well versed in JavaScript to build faster and learn faster by giving them free rein to create custom components or extended features.

And speaking of design, responsive web design using Touch is limited. But the pre-defined layouts of Touch does help position the layouts on the screen and you can easily build and use your own layout if none of the pre-defined layouts suit your needs. You can also use CSS3 for flexibility and positioning to update UI quickly.

Another advantage to the Touch is that it now comes with tools that help make it even easier to build within the framework. Sencha CMD allows you to package applications to various app stores in addition to PhoneGap. Sencha Architect is a visual HTML5 builder that allows you to drag and drop elements of your user interface, which helps make styling and CSS modification painless. You can use the Sencha Eclipse plugin for IDE integration. There’s also Sencha Touch Charts for data visualization and Sencha Space that provides secure Enterprise app deployment.

What are the disadvantages of using Sencha Touch?

Touch doesn’t support older browsers, which can be counted as a disadvantage depending on who you talk to (older, more experienced developers vs younger developers). The software also doesn’t allows you to modify the source code that much, and the limited selection of availability can be frustrating if you want to do more.

As I mentioned above, Touch basically forces you to practice good coding habits. But if you’re an inexperienced developer and you don’t have the discipline to write efficient JavaScript and DOM structures, you apps would have the same performance issues as that of a PhoneGap app. Another disadvantage to using Touch for beginners is that you’ll likely need specialized platform skills and to write your own custom Cordova plugins if you want access to additional native APIs. And while there is enough documentation within the stack to help you navigate these issues, it isn’t that well organized and would require a lot of time to study.

And if you’re heavily dependent on Architect for creating your UI, its performance is known to be inconsistent. It’s also difficult to run a debug while Architect is executing.

Another issue has to do with Sencha’s emphasis on its own stack which can be perceived as vendor lock-in, going against its (mostly) open source nature. It doesn’t help things that the commercial licensing is poorly handled, making it a major hindrance for some companies and start-ups to adopting the framework.

Conclusion

The pace that Sencha Touch has grown and how responsive it has been to user feedback makes it a very promising tool. Although it doesn’t necessarily make app development easier for all it does make it easier for developers to build powerful custom apps with a native look and feel faster and more efficiently. There’s a marked improvement with each version released and the introduction of tools like Architect and Charts has made the process more intuitive.

Does this spell the end for native app development?

Not really or at least, not yet. As powerful as Sencha Touch is as a framework, it still has its limitations in terms of flexibility and availability of themes and APIs. It is a mature framework but it still has some growing up to do in terms of providing the features and support that developers need.