Sencha Touch 2 tutorial

Introduction

Sencha 2 is a mobile framework. It is a big leap from version 1. It includes a nifty code- generation tool, a handy build tool, which minifies JavaScript, CSS and even generates native iOS and Android applications.

Live demo

Creates a basic folder structure of a Sencha mobile app. For detailed command overview, read the documentation.

$sencha create

Since a mobile app does’t have a domain, under whose context it runs, cross-domain security restrictions (aka same origin policy) don’t apply. For testing purposes in a desktop browser, you need to open browser with security disabled. For Chrome,

$open Chrome -args disable security

Code browsing

IDE: Webstorm -paid tool, but a good one for JavaScript and HTML5  development. Now, let’s go through the generated code. Aptana is a good free alternative, which is Eclipse based.

Microloader

App.js – launch

Main.js

Home.js – 40 icons built-in Ext.panel

HTML

Stylehtmlcls

Use config, less property, more method n events

Places.

Model in storage should be full class hierarchy – learnt it the hard way.

The company behind this framework is 12 years old doing JavaScript. So that shows in their advanced usage. It also gives confidence in the framework being a delight for advanced JavaScript developers. Let’s proceed with our Places demo app.

Details view

PlacesContainer

Newbie tip: Refresh and test in js coding. That way you can view impact of code changes immediately. If you make too many changes and something screws up, it is hard to get back to correct state without losing substantial work.

Advanced features

Theme is supported in sass file.

Dragging support is available in the framework itself. For charting, Sencha provides a mobile-friendly framework.

Some gotchas

Sencha does not work with ICS because of webkit bug. Hopefully, it should be fixed in Android 4.1. It works ok, but sub-par in 2.2 and 2.3. On iOS platform, it is having some issues with certificate-signing, which should be fixed in next release coming out next quarter. Till then, Phonegap is the goto method for compiling into native IPA and APK files for submission into Apple AppStore and Android Play.

Digressions

We talked about the latest app acquisition, instagram at an astronomical valuation by Facebook. As a hobby project, if one wants to build an MVP (Minimum Viable Product), Amazon EC2 will cost Rs 4,000 per month, which is costly. So there is a need of product, which provide service at usage, like  the following:

  1. Kinvey
  2. Parse
  3. Stackmob
  4. Onelineserver – Can somebody point out correct name?
  5. Limning – Can somebody point out correct name?

Talking of GoMo (Go Mobile) products , there is a service mooveup (Can somebody point out correct name?), which can crawl an old desktop site and produce a mobile- friendly site on the go.  time to start building decent mobile apps in the hottest area, LBS.

Links

About these ads

About Prasoon Kumar

Prasoon Kumargrew up in the Bokaro Steel City of south Bihar, now Jharkhand. He studied Computer Science and Engineering in IIT Kanpur. For job he moved to the land of opportunity United States. He was there in the bay area through the internet revolution of mid to late nineties. He spent time admiring the beautiful coastline of California among other things. He moved east coast to the New York after the turn of the millennium working in a brokerage startup. He went through a lot of cultural awakening spending hours at museums, diagramming on the shores of Hudson. Afterwards, he is back to India for the past few years. He has been working in the internet startup, enjoying the city life, internet surfing are his past times.

Posted on April 17, 2012, in CSS3, HTML5, JavaScript, mobile, Technology, web 2.0 and tagged , , , , , , , , , . Bookmark the permalink. 2 Comments.

Comments - bouquets, brickbats?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 1,534 other followers