This document discusses mobile app development using JavaScript and compares different approaches such as web apps, hybrid apps, interpreted apps, and cross-platform game engines. It provides examples of frameworks like PhoneGap, Titanium, and ImpactJS and compares them in terms of learning curve, tools, monetization options, supported platforms and scenarios.

1. Mobile Apps with JavaScript - there’s more than web!
Heiko Behrens
@HBehrens

2. @moskovich: “Your mobile phone has more
computing power than all of NASA in 1969.
NASA put a man on the moon...

3. ...we put a bird into pigs.”

8. what’s so great
about the web
anyway ?

9. Bulletproof*@Font.Face*Syntax
@font&face*{
****font.family:*'MyFontFamily';
****src:*url('myfont&webfont.eot?#iefix')*format('embedded&opentype'),
*********url('myfont&webfont.woff')*format('woff'),
*********url('myfont&webfont.ttf')**format('truetype'),
*********url('myfont&webfont.svg#svgFontName')*format('svg');
}
Cross.Browser*Min*Height
#div*{
***min.height:*500px;
***height:auto*!important;
***height:*500px;
Box*Shadow }
.shadow*{
******&moz&box&shadow:*0*0*4px*#000;
******&webkit&box&shadow:*0*0*4px*#000;
******&ms&filter:*"progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3)";
******filter:
**************progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=0,strength=3)
**************progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=90,strength=3)
**************progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=180,strength=3)
**************progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=270,strength=3);
******box&shadow:*0*0*4px*#000;
}

11. user’s
i ve
perspec t

12. experience

13. consumers think apps

14. developer’s
perspective

17. web apps

18. HTML5
cache manifest, local storage, forms, geo location
CSS3
animation, transitions, 3D transformation
Resolution
css media queries, reference, categories, float layout
URLs
mails, telephone, sms, maps, youtube, etc.

19. server-side web
Web Server
executes application
logic
Web Browser
Files Database
Device Backend

20. client-side web
Web Browser
JavaScript
executes application logic
Files Database
Device Backend

21. web frameworks
iWebKit, iUI, jQTouch, JQuery mobile, Jo, Zepto
Sencha Touch, SproutCore
See also any mew library that spawns each new week

22. Sencha Touch
GPL+MIT License GPL + Free License
declarative + JQuery programmatically
simple complex

23. Sencha Touch
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady : function() {
Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});
var groupingBase = {
! ! ! // snip
},
<ul data-role="listview" data-theme="g">
store: new Ext.data.Store({
! <li><a href="acura.html">Acura</a></li>
model: 'Contact',
! <li><a href="audi.html">Audi</a></li>
sorters: 'firstName',
! <li><a href="bmw.html">BMW</a></li>
</ul> getGroupString : function(record) {
return record.get(
'firstName')[0];
},
data: [
{firstName: 'Tommy',
lastName: 'Maintz'},
! ! ! ! ! // snip
{firstName: 'Zed',
lastName: 'Zacharias'}
]
})
};
new Ext.List(Ext.apply(groupingBase, {
fullscreen: true
}));
}
});

24. demo

25. Cocos2D JavaScript Impact JS
MIT License MIT License
Simple 2D + Physics 2D, Physics, Sound
Emphasizes Mobile

26. demo

27. production
learning easy and countless tutorials+libraries
tools can mostly be developed on desktop
monetization no app store distribution
scenarios
lists and data
rich media inferior performance
games poor performance, only limited 3D
experience
hardware no camera, partly accelerometer, no fancy stuff
user interface fancy UI possible, but platform specific
offline HTML5
platforms
iOS
Android
Windows Phone since 7.5 aka Mango
others great movement in responsive design!

28. hybrid apps

29. hybrid app
Native App
Interpreter
Request
Interceptor
JavaScript Bridge
Browser
executes JavaScript
Device Backend

30. request interception
demo

32. Dual License
MIT & BSD

33. Logitech Squeezebox Controller

34. RNAO Nursing Best Practice Guidelines

35. demo
+
weinre

36. PhoneGap on Windows Phone
demo

37. Plugin-Ins for PhoneGap

38. production
learning as with web
tools cloud build, yes but barely no debugging
monetization
scenarios
lists and data
rich media same as with web
games same as with web
experience
hardware mostly accessible
user interface high effort to match platform’s UI
offline
platforms
iOS
Android
Windows Phone
others best coverage of cross-platform frameworks

39. interpreted apps

40. interpreted app
Native App
interpreter
Database
Application
Script
Files
Device Backend

41. – (HTML & CSS) =

42. Apache 2 License
JavaScript
native controls
iPhone, iPad, Android
(BlackBerry, Mobile Web)

43. demo

44. Plugin-Ins for Appcelerator

45. production
learning specific API, similar to Sencha & Co.
tools own IDE, including debugger
monetization marketplace for apps and components
scenarios
lists and data perfect match
rich media hard to work with movies/images and animations
games some modules for rendering and physics
experience
hardware complete support
user interface truly native widgets
offline
platforms
iOS
Android
Windows Phone no plans on roadmap
others plans for BlackBerry and HTML5

46. Corona Impact
349 USD / year 99 USD
Lua Runtime
JavaScript
comprehensive simple
2D games 2D Games
iOS, Android iOS, HTML5

47. generated apps

48. generated app
Generator
Generator Input Native App
Logic Logic
Model
describes logic and
Database Database
complete system
Files Files
Files Database
Device Backend

49. commercial commercial
(BETA)
Java, AS Ruby
iOS, Android, iOS
Windows Phone,
HTML5, WebOS,
BlackBerry, Flash

50. commercial
800-4500 USD
JavaScript / C#
full 2D/3D
games tool chain
iOS, Android

51. demo + impact

53. production
learning completely new tool chain
tools scene editors, debuggers, asset manager, team versioning
monetization
scenarios
lists and data no native UI
rich media not optimized for movies
games
experience
hardware OpenGL and sensors
user interface best for games
offline
platforms
iOS
Android
Windows Phone no plans on agenda
others desktop and web

54. cross-platform
development ?

55. Web Hybrid Interpreted Game Engine
production
learning
tools
monetization
scenarios
lists and data
rich media
games
experience
hardware
user interface
offline
platforms
iOS
Android
Windows Phone
others

56. another
perspective

57. native
own language
own culture
own ecosystem
field skills
promotion: watch avatar - the movie

58. not-so-native
economic objectives
establishment
“natives are endangered”
promotion: watch avatar - the movie

59. best of both
promotion: watch avatar - the movie
“I see you”

60. twitter @HBehrens
blog http://HeikoBehrens.net
CEO & Founder getBeamApp.com