abstract from http://2011.beyondtellerrand.com Modern web technologies and responsive design aim at a platform independent code base while promising first-class experience on any mobile device. Even though purely web-based approaches can achieve stunning results, they (still) cannot compete with their native counterpart regarding platform features and integration. In this talk, I will show you how we can use JavaScript to produce mobile apps that include features such as native UI, push notifications, sensors, and paid distribution. You can expect lots of live demos when I will compare the strengths and weaknesses of various frameworks.

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.”

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

8. !"##$%&'(()*+,(-%.,/0$*12-%/3
!"#$%&"'()*+
****)(-%.)/45#2,*-./0#$%0'123/-4
****6'0,*5637-1/"#$%&8)9"#$%:)#%;<2)"2=->*"#61'%7-)19)??)?&#@)$%/@)->A
*********5637-1/"#$%&8)9"#$%:8#""->*"#61'%7-8#""->A
*********5637-1/"#$%&8)9"#$%:%%"->**"#61'%7-%65)%/@)->A
*********5637-1/"#$%&8)9"#$%:BCD<BCD0#$%E'1)->*"#61'%7-BCD->4
F
7'(66.!'(86$'*95-*:$5;<%
<?2C*+
***45-.<$5;<%,*GHH@=4
***<$5;<%=/"%(*>54&('%/-%?
***<$5;<%,*GHH@=4
!(3*1</@(8 F
:BI'?#8*+
******&1#J&9#=&BI'?#8,*H*H*K@=*<HHH4
******&8)9L2%&9#=&BI'?#8,*H*H*K@=*<HHH4
******&1B&"23%)6,*M@6#D2?,NOP1'D)Q6'$B"#61:.2(6#B#"%:R3#87(#3#6S<TTTTTTAB%6)$D%ISU>M4
******"23%)6,
**************@6#D2?,NOP1'D)Q6'$B"#61:.2(6#B#"%:VI'?#87(#3#6S<TTTTTTA?26)(%2#$SHAB%6)$D%ISU>
**************@6#D2?,NOP1'D)Q6'$B"#61:.2(6#B#"%:VI'?#87(#3#6S<TTTTTTA?26)(%2#$SWHAB%6)$D%ISU>
**************@6#D2?,NOP1'D)Q6'$B"#61:.2(6#B#"%:VI'?#87(#3#6S<TTTTTTA?26)(%2#$SXYHAB%6)$D%ISU>
**************@6#D2?,NOP1'D)Q6'$B"#61:.2(6#B#"%:VI'?#87(#3#6S<TTTTTTA?26)(%2#$SZ[HAB%6)$D%ISU>4
******9#=&BI'?#8,*H*H*K@=*<HHH4
F

9. user’s
i ve
perspec t

10. experience

11. expectation

12. consumers think apps

13. developer’s
perspective

15. web apps

16. 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.

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

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

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

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

21. 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
}));
}
});

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

23. 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!

24. hybrid apps

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

26. request interception
demo

27. Dual License
MIT & BSD

28. Logitech Squeezebox Controller

29. RNAO Nursing Best Practice Guidelines

30. debugging

31. +
weinre

32. PhoneGap on Windows Phone

33. Plugin-Ins for PhoneGap

34. 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

35. interpreted apps

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

37. – (HTML & CSS) =

38. Apache 2 License
JavaScript
native controls
iPhone, iPad, Android
(BlackBerry, HTML5)

40. Plugin-Ins for Appcelerator

41. 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

42. generated apps

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

44. LGPL commercial EPL
(BETA)
Java, C# Java, AS DSL
iOS, Android, iOS, Android, iOS, Android,
(Windows Phone), Windows Phone, Windows Phone,
JavaScript HTML5, WebOS, Server-Side Web
BlackBerry, Flash

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

46. demo

48. 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

49. JavaScript for
mobile apps ?

50. Web PhoneGap Appcelerator Unity3D
production
learning
tools
monetization
scenarios
lists and data
rich media
games
experience
hardware
user interface
offline
platforms
iOS
Android
Windows Phone
others

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