introduction to sencha touch - developing web applications for mobile devices

Sencha TouchBuild Mobile Web apps for iPhone, Android and Blackberry

Who am I ?

Joseph Khan•Senior Software Engineer.•Flex, HTML5, Sencha Touch, Mobile Web•4 yrs of experience.

3

MOTIVATION

Objectives

4

Why mobile web apps?

5

native apps v/s mobile web

6

Mobile Web appsNative apps

1. Native apps can do more, access the hardware

2. Native apps run faster

3. Native is easier to develop

4. Native fits platform look and feel

5. Native can be monetized

1. Web is catching up fast

2. Web runtimes are much faster today and most apps do not need the speed anyway

3. Web is often easier to develop when targeting multiple platforms

4. Web can also give the same platform look and feel

5. Well, even web can be monetized

What is Sencha Touch?

Sencha Touch

How it works ?

A normal HTTP client – server interaction

Request sent from mobile browserRequest sent from mobile browser

Response arrives – html/css/jsResponse arrives – html/css/js

www.zaloni.com/mobilewww.zaloni.com/mobile

Mobile device with webkit browserMobile device with webkit browser

HTTP Web ServerHTTP Web Server

www.zaloni.com domainwww.zaloni.com domain

public-htmlpublic-html

mobilemobile

index.htmlindex.html

How it looks ?

Features

11

Charts

User Interface – very rich

12

Animations

13

Data

14

Media

15

Events

16

Touch Charts

17

new charting librarynew charting library

create beautiful dashboard applicationscreate beautiful dashboard applications

rich and interactiverich and interactive

all possible chart visualizationsall possible chart visualizations

visualize complex data setvisualize complex data set

data drill down with built in events and animations like pinch-to-zoom, swipe-to-pan, tap

data drill down with built in events and animations like pinch-to-zoom, swipe-to-pan, tap

Themes – Built in

18

Ability to create custom themeAbility to create custom theme

How to get started ?

19

Getting started…

20

Sencha Touch is a JavaScript librarySencha Touch is a JavaScript library DownloadDownload

Sencha Touch home pageSencha Touch home page

SDKSDK

www.sencha.com/products/touchwww.sencha.com/products/touch

Getting started…

21

Integrated Development Environment (IDE) – Visual Web Developer 2008Integrated Development Environment (IDE) – Visual Web Developer 2008

Javascript filesJavascript files

CSS referenceCSS reference

Getting started…

22

Integrated Development Environment (IDE) – Visual Web Developer 2008Integrated Development Environment (IDE) – Visual Web Developer 2008

Start writing your code in a new script block

Start writing your code in a new script block

Getting started… kitchen sink

23

Showcase of all the featuresShowcase of all the features

Examples of all featuresExamples of all features

Source codeSource code

dev.sencha.com/deploy/touch/examples/kitchensink/dev.sencha.com/deploy/touch/examples/kitchensink/

Getting started… API docs

24

Very good API documentationVery good API documentation

search for a classsearch for a class

dev.sencha.com/deploy/touch/docsdev.sencha.com/deploy/touch/docs

Getting started… other sources

25

Hello world exampleHello world example

Sencha Touch forumSencha Touch forum

Articles and tutorialsArticles and tutorials

Of course …… Google itOf course …… Google it

http://www.sencha.com/learn/touch/http://www.sencha.com/learn/touch/

http://www.sencha.com/learn/hello-worldhttp://www.sencha.com/learn/hello-world

http://www.sencha.com/forum/http://www.sencha.com/forum/

26

Getting started…

http://jbkflex.wordpress.com/http://jbkflex.wordpress.com/

Detailed tutorial series in my blog

Live demo – USAID OTI Mobile site

27

Other libraries….

28

jQuery Mobile jQTouch WebApp.net

10 best mobile web frameworks to kick start your mobile web careerhttp://superdit.com/2010/12/20/10-framework-to-help-build-mobile-web-application/

Thank you

29

I have shared the slides in my bloghttp://jbkflex.wordpress.com/

30

Reach me atjsphkhan@gmail.com facebook.com/jokhanjbkflex.wordpress.com/