Altabel Group's Blog

Posts Tagged ‘Sencha Touch

Nowadays, more and more people use their mobile devices for the majority of their computer needs. That’s why mobile web application frameworks are in high demand for developers. There are several great mobile web frameworks that allow you to create an application with a native “look and feel” interface. Among them are jQuery Mobile, Sencha Touch, iWebKit, DHTMLX Touch, etc. If you have decided to develop a web application for mobile devices and you want to use a client-side framework to achieve this, Sencha Touch (ST) and JQueryMobile (JQM) seem to be the most serious options. What are their strong and weak points? Let’s see.

Sencha Touch

ST is a mobile web app development framework, which is compatible with HTML5, CSS3, and JavaScript. It is really a sensational framework widely used by mobile web developers. With it building web apps for mobile platforms which feel more like native apps is not a problem for a developer.

ST comes with a MVC framework which leads to a well structured code base. It is really a big plus, especially for large projects. Using ST you will likely not have to write a lot of HTML as the DOM (Document Object Model )is generated out of the objects models / widgets that you use. Besides, a wide range of UI widgets to choose from, as well as robust data, layout and component models are at your disposal.

Speaking of device support, ST website actually supports iPhone, Android and BlackBerry. It works really good on iOS. As for Android, it can be slow on large lists. Some problems may occur with Blackberry, so it may be better to choose another framework for this device.

ST also has enhanced support for touch events such as double tap, swipe, hold, pinch and rotate.

Developing on your desktop you should keep in mind that ST does not support all browser engines. You are required to use a browser based on Webkit (like Google Chrome or Safari). You are not able to view Sencha Touch apps in Firefox, Internet Explorer, or any other browser not using the Webkit engine.

ST provides great API documentation and sample demos. But the ST API uses a fairly large (120kb) JavaScript library that is much larger than the jQuery Mobile library.

ST is not easy to get running on the fly. It is almost a purely programmatic model, as you don’t design pages in HTML, but programmatically add elements to a page. So sometimes it’s difficult to make web design separately in HTML.

As for converting sites to work with the framework, it may involve a full front-end rewrite and it is very hard to debug and fix errors in ST.

Pros: MVC codebase; good support of iOS; enhanced support for touch events; great API documentation and sample demos

Cons: is not easy to get running on the fly; a large JavaScript library; problems with converting sites to work with the framework; very hard to debug and fix errors; may be slow on Android; not working properly on Blackberry

jQuery Mobile

JQM is Touch-Optimized Web Framework for Smartphones & Tablets. It is a unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation.

JQM is really quick to develop with. You can just start with clean HTML markup and then apply “progressive enhancement techniques” or extra HTML element attributes to integrate mobile features into an existing semantic structure.

As for MVC, JQM doesn’t have it. So lot of care has to be taken while organizing the code.

The framework claims to offer a broad level of support across a wide range of platforms, and progressive enhancement for older devices and operating systems. Instead of writing unique apps for each mobile device or OS, the jQuery mobile framework will allow you to design a single highly branded and customized web application that will work on all popular smartphone and tablet platforms.

JQM includes a great AJAX-powered navigation system which enables animated page transitions while maintaining back button, bookmarking and clean URLs.

The framework comes with a CSS theme styling system that enables a simple project to get off the ground very quickly. Then this can be easily extended with your own custom styles. But the CSS theme styling system has limited options so sites built can look similar.

The bad thing is that page transitions and animations don’t feel ‘native’ enough and can be sluggish sometimes.

Pros: JQM is quick to develop with; supports all major browsers and platforms; has a great AJAX-powered navigation system; CSS theme styling system enables a simple project start very quickly

Cons: no given code structure (MVC); CSS theme styling system has limited options (sites may look similar); page transitions and animations don’t feel ‘native’ enough

So after comparing these two frameworks on some points, we see that ST has a given code structure and feels more like coding in Java/C# while jQuery Mobile is more like web with the HTML you write. So it’s better to use ST if you are used to Java/C# and only want to support such devices as iPhone and Android. And if you are a webdeveloper, used to jQuery and HTML and want to support the majority of devices and browsers, using jQuery Mobile seems to be more sound.

And what are your thoughts? I’m eager to know which mobile web application framework will you define as the best solution for developing a web app for a mobile device? Will it be Sencha Touch or jQuery mobile or some other great framework? Thanks and looking forward to your comments!

Yuliya Tolkach

Yuliya Tolkach
Yulia.Tolkach@altabel.com
Skype ID: yuliya_tolkach
Business Development Manager (LI page)
Altabel Group – Professional Software Development

Is creating mobile apps a trend nowadays? We think: Definitely yes! In our article we’ve chosen 4 solutions for creating mobile apps to look at more closely. So, let’s start.

1. Phonegap is an open-source framework for building apps for mobile devices using HTML 5, CSS3, JavaScript produced by Nitobi, purchased by Adobe Systems. It allows you to launch the same application on different devices.
It is frequently mistaken that PhoneGap converts the code of HTML, CSS and Javascript page to native code of app for a particular platform (Android, iOS, Windows Mobile, etc). But the reality is that the reflection of HTML+CSS is made due to the page loading in special webView (which has advanced JavaScript engine , WebKit as a rule) which is no worse than a usual browser.

2. Apache Cordova. Very often the term Cordova is related to the term PhoneGap. So the question arises: What is Cordova, and how does it relate to PhoneGap? Let’s try to find it out. Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript. One opinion is that PhoneGap is one of the products on Apache Cordova platform. But Wikipedia gives it as two different names for one and the same product.
The fact is that previously PhoneGap was called Apache Callback, but now Apache Cordova. PhoneGap was an open source project started by a company called Nitobi. As part of Nitobi’s purchase by Adobe, because the PhoneGap project had many contributors from large companies like IBM etc, the project was contributed to the Apache Software Foundation.
At first the name was changed to “Callback”, but then was renamed to “Cordova” (after the street the Nitobi offices were on at some point). This is because unlike the project itself, the name PhoneGap is part of Adobe’s purchase of Nitobi. So the opinions differ.

3. Sencha Touch. Let’s proceed to one more term-Sencha Touch. Sencha Touch — is the first HTML 5 framework for building mobile apps, written on JavaScript which is supported by devices Android, BlackBerry and iOS. Sencha may not work on desktop browsers as it is developed for the Mobile Web. Sencha works on almost all webkit browsers including Chrome, Safari, Opera. So you may be sure that a user interface is displayed in the same way on mobile devices iPhone, Android, Blackberry, iPad.
With the help of Sencha Touch you can easily build mobile apps and you can easily host them on your web server so the access to it is available from the users’ browsers. Sencha Touch, being a JavaScript framework, consists of both UI and data libraries. Using the data libraries, web applications can retrieve data from remote servers. In case any other distribution needed e.g. via various app stores you can use the “magic” of the above-mentioned PhoneGap which allows you to package your Sencha Touch code and resources into a binary app – ready to distribute to Apple, Android, Palm, Symbian, and BlackBerry devices.

4. One more tool for building mobile apps is Appcelerator Titanium. It is an open-source and free of charge platform for building of apps which will allow you to create/develop native mobile and desktop programs using well-known web-technologies such as JavaScript, HTML, CSS, Python, Ruby and PHP. So Titanium allows you to create all-purpose, full-scale apps which will cater for the users’ needs despite the platform they are on.
Titanium is the first mobile platform that combines the flexibility of open source development technologies with the power of cloud services. It is one of several phone web based application framework solutions allowing web developers to apply existing skills to create native applications for iPhone and Android. Yet, while using the familiar JavaScript syntax, developers will also have to learn the Titanium API, which is quite different from familiar web frameworks such as jQuery.
Titanium Studio– is one more product of Appcelerator, Inc. Titanium Studio is an extensible, Eclipse-based IDE for building Titanium Mobile applications and web applications.
Appcelerator, Inc. also offers cloud-based services for packaging, testing and distributing software applications developed on the Titanium platform.

Hope it was useful to learn about these solutions. And do you use these tools for building apps? What would you think best? I’m eager to see your comments! 🙂

Kind regards,
Yuliya Tolkach – Business Development Manager (LI page)
Yulia.Tolkach@altabel.com
Altabel Group – Professional Software Development


%d bloggers like this: