This document discusses mobile app development using Sencha Touch. It begins with an introduction to the author and their experience. It then outlines different mobile app development modes including WAP, webview, hybrid, and native. Webview and hybrid approaches are noted to have disadvantages like increased memory usage and performance issues. The document proceeds to discuss Sencha Touch, highlighting its object-oriented architecture, class loading, widgets, and support for HTML5, CSS3, and MVC. It provides an example of an Android app called Poseidon developed with Sencha Touch and outlines its project organization and use of Sencha Touch libraries. It concludes with recommendations for organizing a cross-platform mobile development team using the webview approach.

1. Mobile App
With Sencha Touch
Feng Chun
2012-8

2. About me
 12 year+ JS and Java development experience
 J2ME, WinCE mobile platform development experience
 IBM Java Developer Conference(Shanghai) champion in
2005
 Created XUI/XFlow/Mobby frameworks for company
 The creator of the open-source projects: jsdk/jsdocx
JSDK: http://jsdk2.sourceforge.net/
My Blog: http://blog.sina.com.cn/haidao415
Page  2

3. Mobile App Mode
 WAP: JS + HTML + CSS
 WebView: Web + Native packaging
 Hybrid: NativeView + WebView
 Native: NativeView only
Page  3

4. WebView or Hybrid is monster
Nativer
Page  4

5. JS has poor performance
JS code looks like a bowl of
function noodles
Native UI is the best and coolest
Difficult pass by Apple’s audit
Page  5

6. WebView Mode
Advantages Disadvantages
Cross mobile platform More memory used
Easy to learn and cost Not suitable for high-
savings performance game
Rapid development and Maybe need to solve
browser debug cross-domain problem
Direct support for Ajax
and JSON
Powerful multi-device
style
Page  6

7. Sencha Touch
 Full OO architecture
 Dynamic class loading system
 Mobile widgets and Touch events
 Support HTML5 and CSS3
 Customizable UI and multi-platform skins
 Support webkit and not support windows ie
 Support MVC
In fact, HTML + CSS + JS is the best UI development language collections.
Page  7

8. Our Android App named: Poseidon
Page  8

9. Poseidon: project organization
Page  9

10. Poseidon: index.html
<title>Poseidon</title>
<link type="text/css" rel="stylesheet" href="touch/resources/css/android.css" />
<link type="text/css" rel="stylesheet" href="style/app.css" />
<link type="text/css" rel="stylesheet" href="style/app4android.css" />
<script type="text/javascript" src="touch/sencha-touch-all.js"></script>
<script type="text/javascript" src="app/core/….js"></script>
<script type="text/javascript" src="app/util/….js"></script>
<script type="text/javascript" src="app/service/….js"></script>
<script type="text/javascript" src="app/model/….js"></script>
<script type="text/javascript" src="app/view/…js"></script>
<script type="text/javascript" src="app/activity/XxxActivity.js"></script>
<script type="text/javascript" src="app/Main.js"></script>
Page  10

11. WebView Team Organization
 A farsighted leader
 A senior JS architect
 A widget development team with sencha-touch
 A packaging development team for multi-devices
 An application development team
Change we need!
Page  11