Introduction to Sencha touch - developing web applications for mobile devices
-
Upload
joseph-khan -
Category
Technology
-
view
7.534 -
download
3
description
Transcript of 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 [email protected] facebook.com/jokhanjbkflex.wordpress.com/