Very few technologies have made such a breakthrough to bring mutually incompatible platforms together as HTML5 has. HTML5 is the most popular choice for enterprise mobile developers (Forrsights 2013) with the capacity to grow even stronger.
If you are in the market for a good mobile web UI framework, you are probably overwhelmed with the vast number of possibilities and combinations. And for good reason – the frameworks differ by browser compatibility, workflow logic, dependencies, licenses, performance, UI widgets availability, and so on. Things are further complicated when you must combine frameworks to meet your needs.
We will break down what we think are top 5 stacks for developing world-class HTML5 mobile experiences. So, read on!
Built using lessons learned from Ext JS (an enterprise class desktop web framework), Sencha Touch (simply known as “Touch” in some circles) is a mature framework built to fit the most demanding app needs. Touch inherited the best of Ext JS, a versatile enterprise-level workhorse, and took it to the next level by upgrading to utilize ECMAScript5, CSS3 and HTML5 best practices. That makes Touch different from Ext JS in the way that it no longer supports older browsers, but the functionality it offers is as good as it gets.
Following the footsteps of its big brother, Sencha Touch will win your heart with plethora of widgets readily available out of the box.
Responsive Web Design (RWD), while possible to some degree, is not advisable. However, Touch comes with pre-defined Layouts that help position the widgets on screen and use CSS3 for flexibility and positioning to update UI quickly. This is in particularly useful on orientation change event. Rarely will you find a layout that can’t be done with any of the predefined models, but you can also easily build your own. Coupled with Profiles that help with dynamic adaptation based on specific rules such as Tablet vs Phone, RWD is not a necessity with Sencha Touch.
New developers will probably appreciate the availability of Sencha Architect, a GUI tool that helps create interfaces as easy as drag and drop. Another useful tool is Sencha Cmd, a command line interface (CLI) that aims to provide support in scaffolding the app, theming, and perhaps most importantly, building and packaging. Using Cmd in build process won’t just concatenate and minify your code, but will optimize the entire app to work faster. If you want to use Cordova or PhoneGap, Cmd can talk to respective CLIs to package the app for you. With just one command and a few seconds of patience, you can get your .ipa and/or .apk files ready for publishing. Additionally, the API sports numerous handy features, such as device abstraction layer for direct communication through PhoneGap/Cordova, Sencha Packager or simulator.
The proven Model – Store – View – Controller is very powerful, meant for serious business. There is a performance penalty however to leveraging this pattern in the browser and is generally not advised for simple applications as there is a lot of behind-the-scenes code that makes this pattern possible. Models and Stores go hand in hand where Models define data, and Stores keep collections of data. CRUD with external sources, whether remote or local, is very nicely implemented through abstracted interfaces. Controllers use the built in event mechanism to connect Model, Stores and Views to business logic.
Sencha’s Class System is of the strongest features for developers. One can plainly see the influence of other languages in Sencha Touch’s Class System, which powers this heavily object-oriented framework. The internal, as well as the front facing, parts are well abstracted and defined to make it easy to extend and build on top of any component of an inheritance chain. The class system also takes care of dependencies, instructing Ext.Loader (in development) or Sencha Cmd builder (for production builds) where and how to find them. Other than a tool, Touch’s Class System enforces nicely structured application development
There is no need for additional libraries (such as jQuery), as complete DOM manipulation interface is already bundled in Sencha Touch. Touch event recognizers work very well with all supported mobile devices. The built-in templating engine is amongst the fastest in the industry, which significantly benefits the speed of the entire framework.
UI and Theming
While Touch initially favored iOS styled interface, it’s main theme is vendor agnostic. Nonetheless, iOS, Android, and Windows lookalike themes are shipped with the entire package. SASS drives the theming, with plethora of variables and mixins supplied to make quick restyling a breeze. Since the framework is UI-centric, developers usually wind up modifying the default theme instead of writing the whole UI from scratch, which in turn requires some familiarity with the theming system.
With well over 50 widgets, Sencha Touch gives a solid boost right out of the box. From the basic ones such as Component, Container, Form, various Fields to more complex Carousel, Lists, Pickers, Charts, Grid, and much more. The latter two, Touch Charts and Touch Grid are part of a separate Sencha Touch Bundle, offered commercially. No other mobile web framework offers such an extensive set of built in widgets.
Responsive Design (RWD)
If you want to reuse most of the code for your mobile and desktop application, Sencha Touch is probably not a good option. While the internals work on all modern browsers (those supporting ECMAScript5 and CSS3), UI components will require additional effort to adapt to desktop environments. Even though Ext JS and Sencha Touch follow the same concepts, it is still virtually impossible to reuse code between the two. Touch is specialized for touchscreen mobile devices whereas Ext JS is meant to deliver apps to desktops. As a side note, Ext JS will technically work on tablets to some degree, although the performance will be heavily penalized due to the heavy nature of the framework. Sencha Touch and Ext JS are best suited when desktop and mobile offerings will differ substantially.
Third party plugins
The official set of extensions is offered through Sencha Touch Bundle. A decent number of community-managed plugins and extensions can be found on the Sencha Market. External companies offer premium extensions in forms of specialized widgets through their own distribution channels.
The framework’s namespace is Ext for Extensibility. Classes, methods, widgets, and all other components are made to be extended. The source code is so tidy that it actually makes a great resource to learn how huge apps can be nicely organized.
Sencha Cmd, a separate proprietary (but free) utility from Sencha will scan the code, learn the dependencies, remove the unused code, concatenate, minify, and package the app for delivery. It’s as simple as a single command, but can also go much further than that. The instructions come from a web of commands issued in the app source code, comments, command line parameters, JSON, XML, and CFG files, which can be difficult to master, and impossible to keep in just one place. External grunt-style plugins for Cmd do not exist.
Through Sencha Cmd, Touch comes with their own native packager, but also supports Cordova and PhoneGap. Although it pushes the mobile app look and feel, Sencha Touch is an excellent choice for mobile sites. Through the production build, Cmd will optimize your app for web delivery, using various caching technologies to improve the loading time on subsequent visits.
If you are keen on using just one framework, Touch abstracts device APIs for their native packager and Cordova/PhoneGap. Of course, this applies only to the most commonly used plugins.
Powered by Sencha’s very own JSDuck, Touch’s documentation is easily amongst the very best we’ve seen. It is very easy to navigate and even read the property-level comments coming from the developers and the community members. In a tabbed interface, the docs also come with written and video guides and examples. Even though there are several guides on how to write full apps, most examples are hello world simple. We strongly recommend Sencha Touch in Action to complement your learning experience.
Sencha Touch is licensed under free commercial and open source licenses for application development, and a paid commercial license for OEM uses.
The community gathers at the official forums, which are very well managed. Most reasonable questions will be answered within a day. Stack Overflow is another popular resource, counting about 7000 questions to date. As a down side, many members are confused whether to call the framework Sencha Touch, Sencha, Touch, or Sencha Touch 2, making searches messy. SenchaCon is the official developer conference in the US, with ModUX and SourceDevCon being the community managed counterparts in Europe in the previous years. Additionally, many meetups are active, especially in the US and western Europe.
What would they say?
With complementary apps such as Cmd and Architect, Sencha Touch is a one stop shop for all mobile web needs.
Much of the framework is in the very CSS, meaning theming could impact the overall performance and stability. Designers should think like developers more than with any other framework. It will take beginners some time to get used to the theming system. The experienced will style apps very quickly. SASS and modern CSS3 approaches are required skills to have.
This is a robust and mature framework that also utilizes modern technologies available in the latest browsers. It can deliver close to native performance on mobile devices. Being shipped with so many widgets, tools, and themes, Touch can certainly cut development time significantly.