There's more than web
1 like481 views
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.
![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
}));
}
});](https://image.slidesharecdn.com/mobilismjscrossplatformheikobehrens-120606071412-phpapp02/85/There-s-more-than-web-23-320.jpg)
There's more than web
- 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
- 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
- 34. RNAO Nursing Best Practice Guidelines
- 35. demo + weinre
- 36. PhoneGap on Windows Phone demo
- 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
- 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
- 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
- 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