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!
Sencha Touch
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.
Backstage, Touch operates like a full-fledged philharmonic orchestra powered by probably the most advanced Class system of all JavaScript frameworks. Much of the functionality is based on Abstraction, allowing developers to create custom components, plugins, or extended features using these powerful design patterns. While Abstraction will help non-experienced JavaScript developers create world-class apps in no time, it will invite the curious to peek in under the hood, potentially offering a wonderful opportunity to learn how to leverage the framework in ways beyond its design.
That said, developing in Sencha Touch is sometimes more of configuring with a light touch of real JavaScript development. While that can help the learning curve, it makes their API documentation essential even to the seasoned Touch programmers. Fortunately, its documentation is also amongst the best out there.
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.
MV* Pattern
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.
Class System
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
DOM control
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.
Widgets
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)
Ext JS came to existence long before RWD was a term, when it fought similar challenges with a unique feature called Layout. Sencha Touch revamped the concept to use CSS3 and hardware acceleration where possible to deliver a dozen of modes for dynamic user interfaces. Nonetheless, Layouts cannot be considered as a full RWD substitute, rather an abstraction of commonly used CSS patters with welcome fixes for various platforms. A complete re-layout (e.g. on orientation change) may require an intervention from the JavaScript side.
The difference between using RWD and Touch Layouts is that RWD uses raw CSS3 to organize and size items based on rules defined in CSS (Media Queries) whereas Touch Layouts leverage the power of JavaScript to programmatically place and size items based on rules defined in JavaScript. This JavaScript influences the browser by injecting CSS3 attributes making the placing and sizing of the items in the browser. This practice is arguably more powerful, but much more expensive in terms of computation.
Desktop support
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.
Extensibility
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.
Building tools
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.
Packaging (native)
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.
Device API
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.
Documentation
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.
License
Sencha Touch is licensed under free commercial and open source licenses for application development, and a paid commercial license for OEM uses.
Community
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?
JavaScript developer:
A serious framework with “mature” written all over it. Given its size and complexity, takes some time to learn, but docs are the best friend, even to the most seasoned developers. Direct HTML access is rarely ever needed and core JavaScript mastery is less than a must-have with Sencha Touch projects. However, a JavaScript primer is a strong prerequisite.
With complementary apps such as Cmd and Architect, Sencha Touch is a one stop shop for all mobile web needs.
Designer:
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.
Product manager:
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.
Five Best Mobile Web App Frameworks
- Sencha Touch review
- jQuery Mobile + Backbone review
- Kendo UI review
- Angular JS + Ionic review
- React review
