Friday, April 20, 2012

Sencha Touch 2 VS jQuery Mobile

When we have in mind a native mobile-tablet app, we want the look and feel of a such app. Though we are coding in web technologies we're not making a website but rather an application, that should be highly interactive, have a decent performance and native-like visual transitions and animations. Sencha Touch 2 and jQuery Mobile intend to give you all these features though either can fully achieve the performance milestone, they perform very well. The main difference between these two frameworks is that Sencha Touch 2 was made mainly for native wrapping and jQuery Mobile for web, because of browser compatibility. Using jQuery Mobile you have almost no worries with cross-browsing, its core takes care of everything, but Sencha Touch (either 1 or 2) was built to work only with Webkit: this means only Chrome and Safari. So in my opinion these are two distinct frameworks for different proposes, if your goal is an native app you should choose Sencha Touch 2 wrapped either in PhoneGap or in your own hardcoded Webkit wrapper. For most developers PhoneGap has everything that matters: hardware features, and HTML5/CSS3 support.

As seen in the Sencha HTML5 scoreboard the framework does very well, but in Android systems its not the ideal: CSS3 transitions work somewhat slower than in iOS due to lack of visual pre-processing. You can avoid CSS3 though its the core all shiny features that ST2 has. Eventually, when the application is really big you'll need performance optimization no matter what is your target platform, and there is when you take advantage of Sencha Touch 2 most top level features: Sencha's "Class System" and MVC architecture. I write class system in quotes because in JavaScript there is no such things as Classes, here we simulate them, using ExtJS namespace. This framework comes with SDK Tools (witch include terminal commands for project generation and deployment), Native Packaging Guides and very extensive and comprehensive API Documentation: witch includes GuidesVideos and Examples.

Here are some examples of ExtJS class system:

Here I instantiate a simple button, using the existing class name Button, I parse it its text propriety.

var button = Ext.create('Ext.Button', {
  text: 'Button'
});
I can also extend any of ST2 classes's:

Ext.define('MyApp.MyButton', { 
 extend: 'Ext.Button'
 xtype: 'mybutton'
 text: 'Button'
});


Note that here I parse it two more proprieties: extend and xtype. The first its obvious, defines what class you are extending so that ExtJS takes care of all inheritance for you. The second one defines an alias for this class extension, allowing you to call 'mybutton' any time you want a button to apear with exactly the configuration you have in your Ext.define. If you want to debug this code I suggest you go the API docs, there are sencha emulator.


The next two post will be about how to build your first application from the ground up, feel free to comment or ask questions. Stay tuned.

No comments:

Post a Comment