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.

Wednesday, April 18, 2012

Mobile apps and HTML5

Mobile apps are growing very very fast, since last year or so smartphones and tablets have been starting to have a significant share of the internet (more precisely websites) view devices.  And in opposition of many believes, also a big share of all the money spent in personal software! So, developers are trying to go with the trend and learn to code for this platforms but...One have to learn at least Java (witch is widely known, however most web-developers dont) and Objective-C. Lets say I own a very popular website: I want to make it mobile/tablet friendly, I'll need to re-write my website (or make it responsive to display sizes). A few months later I want to make my mobile app, a different way to view my website and to access my services, and again...another application has to written. Later I want my tablet app, witch its not much different from the mobile one but has a different display and performance...needs re-write. At the end of the year, I want this app in both Android and iOS (and here I'm excluding Symbian Blackberry and Windows Phone, or it would be impossible to a small company to write this app in all this platforms) so I'll need to re-write again these two applications...So it would be:

5 applications:

  1. Mobile version of my website
  2. Mobile app for accessing the website services and content
  3. Re-write to make it tablet friendly
  4. Re-write of (2)
  5. Re.write of (3)

And the bottom line is that when you want to update your application you'll need to do it five times! Here is where the HTML5 kicks in, you are able to write a JavaScript application witch will run as a website or wrapped in a iOS, Android, Windows Phone, Symbian and Blackberry application. So it means that the the first application (1) is ported to all other platforms and devices, with minimal code adjustments.

How can we achieve this? 
There are some projects (some more open-source than others) that wrap your HTML5/JavaScript/CSS3 application in a custom (usually webkit based) browser. Imho these are the two most important wrappers in the market:
PhoneGap is very good for mobile wrapping, gives you access to all hardware features and so far it went perfect for me.
Titanium Studio is another promising framework (and IDE, based on Eclipse). In this case it wraps for mobile and desktop. For mobile cases is not as good as PhoneGap however it gives up a multiplatform desktop wrapper witch means: Windows, Mac OSX and GNULinux, and so for works great.

If you have questions, opinions or rants just comment, I may not reply rapidly but I will reply :)

Tuesday, April 17, 2012

The intention

Hi my name is Ricardo and I'm a programmer, I've been feeling the need of creating a blog to share my opinion and ideas about technology, programming and internet.
I'm also creating this blog to make articles about information technology and programming, I may sometimes just make an article talking about something and/or make guides or lessons about it.

At the end of the next week or so I'm publishing two articles: the first about Mobile Apps and HTML5, and next I'll be explaining the differences between Sencha Touch 2 and JQueryMobile. Next I'll make some guides to Sencha Touch 2, and I'll explain why I choose ST2.

If someone reads this post before I make the guides (I doubt it tho), comment what you thing about HTML5 in mobile apps.

'Till then