Mobile Web App Development
-
Upload
brian-leroux -
Category
Technology
-
view
112 -
download
3
description
Transcript of Mobile Web App Development
![Page 1: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/1.jpg)
PhoneGap
Easy Mobile Apps with JavaScript
Monday, December 7, 2009
![Page 2: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/2.jpg)
THANK YOU!
> var web = {};undefined> web.next();[”javascript”,”mobile”]
Monday, December 7, 2009
![Page 3: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/3.jpg)
me.
• github.com/brianleroux• twitter.com/brianleroux
3
Monday, December 7, 2009
![Page 4: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/4.jpg)
http://www.gartner.com/it/page.jsp?id=1126812
Monday, December 7, 2009
![Page 5: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/5.jpg)
Mobile app dev is hard.
Monday, December 7, 2009
![Page 6: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/6.jpg)
Device Platform FragmentationPlatform Language Notes
Apple iPhone Objective C Requires an Apple machine. Left arm.
RIM Blackberry OS Java Requires a Windows based machine. WTF.
Google Android Java (Dalvik VM) Runs mostly anywhere.
Windows Mobile .NET or unmanaged C++ Requires a Windows based machine.
Nokia Symbian C++, Java, Python, Flash, WRT
Runs mostly anywhere.
Palm WebOS HTML, CSS and JavaScript Runs mostly anywhere.
Monday, December 7, 2009
![Page 7: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/7.jpg)
App Distribution FragmentationApple App Store Android Market Blackberry App World Nokia Ovi Store GetJar Palm App Catalog Samsung App Store LG Application Store Mobango Sony Ericsson PlayNow Windows Marketplace Vodafone App Store Java App Store Verizon VCast
Monday, December 7, 2009
![Page 8: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/8.jpg)
Dev and distribution nightmare.
Monday, December 7, 2009
![Page 9: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/9.jpg)
This is why the internet works.
cross platformopen standardsopen source
Monday, December 7, 2009
![Page 10: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/10.jpg)
Cross Platform iPhoneAndroidBlackberryWindows MobileNokia Palm *Maemo*
* releasing VERY soon
Monday, December 7, 2009
![Page 11: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/11.jpg)
HTML5
sorta
Monday, December 7, 2009
![Page 12: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/12.jpg)
Webkit APIs
SQLiteCache ManifestCSS Transitions / Transforms / AnimationsCustom fonts
Monday, December 7, 2009
![Page 13: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/13.jpg)
PhoneGap APIGeolocationAccelerometerNotificationsMedia playbackCameraDevice infoContactsOnline/OfflineSMS / TelephoneMagnetometer
Monday, December 7, 2009
![Page 14: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/14.jpg)
Future APIs
File IOWebSocket
SQLite Wrapper
Monday, December 7, 2009
![Page 15: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/15.jpg)
Free: as in freedom.
MIT Licensed
Monday, December 7, 2009
![Page 16: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/16.jpg)
PhoneGap Philosophy
The purpose is to cease to exist.Make the web a first class dev tool.Be open, transparent and free.Adhere to standards when possible.
Monday, December 7, 2009
![Page 17: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/17.jpg)
Sony Ericsson WebSDK
http://developer.sonyericsson.com/websdk
17
Monday, December 7, 2009
![Page 18: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/18.jpg)
Yeah way.
GeolocationAccelerometerNotificationsMedia playbackCameraDevice infoContactsOnline/OfflineSMS / TelephoneMagnetometer
On these devices:
iPhone / iPod TouchAndroidBlackberryNokiaWindows MobilePalm webOS
Monday, December 7, 2009
![Page 19: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/19.jpg)
Problems with the PhoneGap project
documentationapp store FUDno fucking testsmany webkit variantsperceived competitiontooling is not consolidatedsource is a bit of a gong showno standard technique for extending the project
Monday, December 7, 2009
![Page 20: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/20.jpg)
docs.phonegap.com http://github.com/phonegap/phonegap-docs
Monday, December 7, 2009
![Page 21: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/21.jpg)
App Store Rejections?
Rename your project.
Monday, December 7, 2009
![Page 22: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/22.jpg)
No fucking tests?!
Monday, December 7, 2009
![Page 23: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/23.jpg)
mobile-spec
Monday, December 7, 2009
![Page 24: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/24.jpg)
Webkit
24
Monday, December 7, 2009
![Page 25: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/25.jpg)
Good!sqlitecache manifestcss awesomecustom fontage
Yay Webkit!
Monday, December 7, 2009
![Page 26: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/26.jpg)
Bad *
* many variants** not mozilla
Monday, December 7, 2009
![Page 27: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/27.jpg)
• Blackberry less than 4.6 have no XHR
• Windows Mobile runs IE 4
• Or worse: IE 6 + 7
Ugly
Monday, December 7, 2009
![Page 28: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/28.jpg)
The many flavours of WebkitiPhone OS 3.0 Webkit 528.16 BuildiPhone OS 2.2 Webkit 525.20 BuildiPhone OS 2.02 Webkit 525.20 BuildiPhone OS 1.5 Webkit 419.3 BuildAndroid 1.5 Webkit Nov 2008 ForkAndroid 1.1 Webkit Rev r30692Android 1.0 WebkitPalmPre OS WebkitNokia S60 Webkit ForkNokia WRT Webkit Fork
Monday, December 7, 2009
![Page 29: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/29.jpg)
Not to mention what isn't Webkit
Blackberry Windows Mobile..........yet.
Monday, December 7, 2009
![Page 30: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/30.jpg)
The web still rocks.
(even if the browsers do not)
Monday, December 7, 2009
![Page 31: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/31.jpg)
Other options?Option Supported Platforms Language License
BigFive iPhone HTML, CSS and JS GPL2
LiquidGear iPhone HTML, CSS and JS* MIT
Corona iPhone Lua Proprietary
Appcelerator iPhoneAndroid
HTML, CSS and JS* Apache
Rhodes iPhoneSymbianAndroidBlackBerryWindows Mobile
HTML, CSS and JS. Ruby for native code. Accessed client/server style.
GPL3
NimbleKit iPhone HTML, CSS and JS* Proprietary
* Renders native controls via JavaScript.
Monday, December 7, 2009
![Page 32: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/32.jpg)
PhoneGap supported devices
http://rubyurl.com/jtNs
32
Monday, December 7, 2009
![Page 33: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/33.jpg)
Wash, Rinse, Repeat...FAIL
1. First, install all these:o iPhone SDKo Android SDKo Blackberry SDKo Windows Mobile SDKo Nokia WRT SDK
2. Download the PhoneGap source. 3. Map to each SDK.4. Copy your app into each.5. Build for each.6. Fix a bug. 7. GOTO 3.
Automation FAIL.
Monday, December 7, 2009
![Page 34: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/34.jpg)
phonegap-dev
coming soon...
Monday, December 7, 2009
![Page 35: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/35.jpg)
is demo time nao
Monday, December 7, 2009
![Page 36: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/36.jpg)
Extending PhoneGap
Plugins
Monday, December 7, 2009
![Page 37: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/37.jpg)
Many codebases.Monday, December 7, 2009
![Page 38: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/38.jpg)
Great but how to get started?
Small screens.Less memory.Less CPU.Less hard drive space if any.Sketchy connectivity.
Monday, December 7, 2009
![Page 39: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/39.jpg)
Constraints == Focus
Monday, December 7, 2009
![Page 40: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/40.jpg)
JavaScript Sucks
(But it is ubiquitous.)
Monday, December 7, 2009
![Page 41: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/41.jpg)
jQuery / Dojo / YUI / MooTools
Monday, December 7, 2009
![Page 42: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/42.jpg)
XUI
2.2 kb
Monday, December 7, 2009
![Page 43: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/43.jpg)
XUI + Emile
Monday, December 7, 2009
![Page 44: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/44.jpg)
Good enough.
DOM / Event / Style / XHR / FX
Monday, December 7, 2009
![Page 45: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/45.jpg)
What about UI components?
Monday, December 7, 2009
![Page 46: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/46.jpg)
FUCK UI components.
Monday, December 7, 2009
![Page 47: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/47.jpg)
Apps built w/ components look like it.
Monday, December 7, 2009
![Page 48: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/48.jpg)
Solve your unique problem.
goals > features
Monday, December 7, 2009
![Page 49: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/49.jpg)
Tapbots, for example.
Monday, December 7, 2009
![Page 50: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/50.jpg)
Fuck components. Especially native components.
This is the modern equivalent of Outlook Express.
Monday, December 7, 2009
![Page 51: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/51.jpg)
Solve your unique problem.
And you will do it better than a generic solution.
Monday, December 7, 2009
![Page 52: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/52.jpg)
Maybe you don't even need native features?
Use a mobile specific stylesheet.Progressive enhancement of functionality w/ js.
Monday, December 7, 2009
![Page 53: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/53.jpg)
The Future
Monday, December 7, 2009
![Page 54: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/54.jpg)
More devices.Monday, December 7, 2009
![Page 55: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/55.jpg)
OMTP BONDI
Spec.
Monday, December 7, 2009
![Page 56: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/56.jpg)
W3C Device API Group
Monday, December 7, 2009
![Page 57: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/57.jpg)
Get involved.
• code: github.com• docs: docs.phonegap.com / wiki.phonegap.com• test: mobile-spec
• blog about it• tweet about it!• tell your mom about it (I already did)• help on mailing list
57
Monday, December 7, 2009
![Page 58: Mobile Web App Development](https://reader031.fdocuments.in/reader031/viewer/2022020115/54c896134a7959c6408b45c6/html5/thumbnails/58.jpg)
Now... go write some apps!*http://phonegap.comhttp://groups.google.com/group/phonegap
Brian [email protected]://twitter.com/brianleroux
* After beers. Ideally at least 12 hours after beers.
Monday, December 7, 2009