mobile app with sencha touch

11
Mobile App With Sencha Touch Feng Chun 2012-8

Upload: fch415

Post on 28-Nov-2014

3.404 views

Category:

Technology


0 download

DESCRIPTION

I wrote a ppt named "Mobile app with sencha-touch" for my colleagues in other sub-companies.I propose a new word "WebView" to instead one of the "Hybrid" mode.I have also attached the the sencha practice of an android project. I hope you give me some feedback.

TRANSCRIPT

Page 1: Mobile app with sencha touch

Mobile App With Sencha Touch Feng Chun

2012-8

Page 2: Mobile app with sencha touch

Page 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 3: Mobile app with sencha touch

Page 3

Mobile App Mode

WAP: JS + HTML + CSS

WebView: Web + Native packaging

Hybrid: NativeView + WebView

Native: NativeView only

Page 4: Mobile app with sencha touch

Page 4

Nativer

WebView or Hybrid is monster

Page 5: Mobile app with sencha touch

Page 5

JS has poor performance

Difficult pass by Apple’s audit

Native UI is the best and coolest

JS code looks like a bowl of function noodles

Page 6: Mobile app with sencha touch

Page 6

WebView Mode

Advantages Disadvantages

Cross mobile platform More memory used

Easy to learn and cost savings

Not suitable for high-performance game

Rapid development and browser debug

Maybe need to solve cross-domain problem

Direct support for Ajax and JSON

Powerful multi-device style

Page 7: Mobile app with sencha touch

Page 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 8: Mobile app with sencha touch

Page 8

Our Android App named: Poseidon

Page 9: Mobile app with sencha touch

Page 9

Poseidon: project organization

Page 10: Mobile app with sencha touch

Page 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 11: Mobile app with sencha touch

Page 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!