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
![Page 1: Introduction to Sencha touch - developing web applications for mobile devices](https://reader036.fdocuments.us/reader036/viewer/2022081514/554f90f1b4c905435d8b508c/html5/thumbnails/1.jpg)
Sencha TouchBuild Mobile Web apps for iPhone, Android and Blackberry
![Page 2: Introduction to Sencha touch - developing web applications for mobile devices](https://reader036.fdocuments.us/reader036/viewer/2022081514/554f90f1b4c905435d8b508c/html5/thumbnails/2.jpg)
Who am I ?
Joseph Khan•Senior Software Engineer.•Flex, HTML5, Sencha Touch, Mobile Web•4 yrs of experience.
![Page 3: Introduction to Sencha touch - developing web applications for mobile devices](https://reader036.fdocuments.us/reader036/viewer/2022081514/554f90f1b4c905435d8b508c/html5/thumbnails/3.jpg)
3
MOTIVATION
![Page 4: Introduction to Sencha touch - developing web applications for mobile devices](https://reader036.fdocuments.us/reader036/viewer/2022081514/554f90f1b4c905435d8b508c/html5/thumbnails/4.jpg)
Objectives
4
![Page 5: Introduction to Sencha touch - developing web applications for mobile devices](https://reader036.fdocuments.us/reader036/viewer/2022081514/554f90f1b4c905435d8b508c/html5/thumbnails/5.jpg)
Why mobile web apps?
5
![Page 6: Introduction to Sencha touch - developing web applications for mobile devices](https://reader036.fdocuments.us/reader036/viewer/2022081514/554f90f1b4c905435d8b508c/html5/thumbnails/6.jpg)
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
![Page 7: Introduction to Sencha touch - developing web applications for mobile devices](https://reader036.fdocuments.us/reader036/viewer/2022081514/554f90f1b4c905435d8b508c/html5/thumbnails/7.jpg)
What is Sencha Touch?
![Page 8: Introduction to Sencha touch - developing web applications for mobile devices](https://reader036.fdocuments.us/reader036/viewer/2022081514/554f90f1b4c905435d8b508c/html5/thumbnails/8.jpg)
Sencha Touch
![Page 9: Introduction to Sencha touch - developing web applications for mobile devices](https://reader036.fdocuments.us/reader036/viewer/2022081514/554f90f1b4c905435d8b508c/html5/thumbnails/9.jpg)
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
![Page 10: Introduction to Sencha touch - developing web applications for mobile devices](https://reader036.fdocuments.us/reader036/viewer/2022081514/554f90f1b4c905435d8b508c/html5/thumbnails/10.jpg)
How it looks ?
![Page 11: Introduction to Sencha touch - developing web applications for mobile devices](https://reader036.fdocuments.us/reader036/viewer/2022081514/554f90f1b4c905435d8b508c/html5/thumbnails/11.jpg)
Features
11
Charts
![Page 12: Introduction to Sencha touch - developing web applications for mobile devices](https://reader036.fdocuments.us/reader036/viewer/2022081514/554f90f1b4c905435d8b508c/html5/thumbnails/12.jpg)
User Interface – very rich
12
![Page 13: Introduction to Sencha touch - developing web applications for mobile devices](https://reader036.fdocuments.us/reader036/viewer/2022081514/554f90f1b4c905435d8b508c/html5/thumbnails/13.jpg)
Animations
13
![Page 14: Introduction to Sencha touch - developing web applications for mobile devices](https://reader036.fdocuments.us/reader036/viewer/2022081514/554f90f1b4c905435d8b508c/html5/thumbnails/14.jpg)
Data
14
![Page 15: Introduction to Sencha touch - developing web applications for mobile devices](https://reader036.fdocuments.us/reader036/viewer/2022081514/554f90f1b4c905435d8b508c/html5/thumbnails/15.jpg)
Media
15
![Page 16: Introduction to Sencha touch - developing web applications for mobile devices](https://reader036.fdocuments.us/reader036/viewer/2022081514/554f90f1b4c905435d8b508c/html5/thumbnails/16.jpg)
Events
16
![Page 17: Introduction to Sencha touch - developing web applications for mobile devices](https://reader036.fdocuments.us/reader036/viewer/2022081514/554f90f1b4c905435d8b508c/html5/thumbnails/17.jpg)
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
![Page 18: Introduction to Sencha touch - developing web applications for mobile devices](https://reader036.fdocuments.us/reader036/viewer/2022081514/554f90f1b4c905435d8b508c/html5/thumbnails/18.jpg)
Themes – Built in
18
Ability to create custom themeAbility to create custom theme
![Page 19: Introduction to Sencha touch - developing web applications for mobile devices](https://reader036.fdocuments.us/reader036/viewer/2022081514/554f90f1b4c905435d8b508c/html5/thumbnails/19.jpg)
How to get started ?
19
![Page 20: Introduction to Sencha touch - developing web applications for mobile devices](https://reader036.fdocuments.us/reader036/viewer/2022081514/554f90f1b4c905435d8b508c/html5/thumbnails/20.jpg)
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
![Page 21: Introduction to Sencha touch - developing web applications for mobile devices](https://reader036.fdocuments.us/reader036/viewer/2022081514/554f90f1b4c905435d8b508c/html5/thumbnails/21.jpg)
Getting started…
21
Integrated Development Environment (IDE) – Visual Web Developer 2008Integrated Development Environment (IDE) – Visual Web Developer 2008
Javascript filesJavascript files
CSS referenceCSS reference
![Page 22: Introduction to Sencha touch - developing web applications for mobile devices](https://reader036.fdocuments.us/reader036/viewer/2022081514/554f90f1b4c905435d8b508c/html5/thumbnails/22.jpg)
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
![Page 23: Introduction to Sencha touch - developing web applications for mobile devices](https://reader036.fdocuments.us/reader036/viewer/2022081514/554f90f1b4c905435d8b508c/html5/thumbnails/23.jpg)
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/
![Page 24: Introduction to Sencha touch - developing web applications for mobile devices](https://reader036.fdocuments.us/reader036/viewer/2022081514/554f90f1b4c905435d8b508c/html5/thumbnails/24.jpg)
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
![Page 25: Introduction to Sencha touch - developing web applications for mobile devices](https://reader036.fdocuments.us/reader036/viewer/2022081514/554f90f1b4c905435d8b508c/html5/thumbnails/25.jpg)
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/
![Page 26: Introduction to Sencha touch - developing web applications for mobile devices](https://reader036.fdocuments.us/reader036/viewer/2022081514/554f90f1b4c905435d8b508c/html5/thumbnails/26.jpg)
26
Getting started…
http://jbkflex.wordpress.com/http://jbkflex.wordpress.com/
Detailed tutorial series in my blog
![Page 27: Introduction to Sencha touch - developing web applications for mobile devices](https://reader036.fdocuments.us/reader036/viewer/2022081514/554f90f1b4c905435d8b508c/html5/thumbnails/27.jpg)
Live demo – USAID OTI Mobile site
27
![Page 28: Introduction to Sencha touch - developing web applications for mobile devices](https://reader036.fdocuments.us/reader036/viewer/2022081514/554f90f1b4c905435d8b508c/html5/thumbnails/28.jpg)
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/
![Page 29: Introduction to Sencha touch - developing web applications for mobile devices](https://reader036.fdocuments.us/reader036/viewer/2022081514/554f90f1b4c905435d8b508c/html5/thumbnails/29.jpg)
Thank you
29
I have shared the slides in my bloghttp://jbkflex.wordpress.com/