Mobile Apps with JavaScript - there’s more than web!                                         Heiko Behrens                ...
@moskovich: “Your mobile phone has morecomputing power than all of NASA in 1969.    NASA put a man on the moon...
...we put a bird into pigs.”
what’s so greatabout the web   anyway ?
Bulletproof*@Font.Face*Syntax@font&face*{****font.family:*MyFontFamily;****src:*url(myfont&webfont.eot?#iefix)*format(embe...
user’s         i veperspec t
experience
consumers think apps
developer’sperspective
web apps
HTML5cache manifest, local storage, forms, geo locationCSS3animation, transitions, 3D transformationResolutioncss media qu...
server-side web                           Web Server                        executes application                          ...
client-side web     Web Browser      JavaScriptexecutes application logic  Files         Database          Device         ...
web frameworksiWebKit, iUI, jQTouch, JQuery mobile, Jo, ZeptoSencha Touch, SproutCoreSee also any mew library that spawns ...
Sencha TouchGPL+MIT License        GPL + Free Licensedeclarative + JQuery   programmaticallysimple                 complex
Sencha Touch                                              Ext.setup({                                                  tab...
demo
Cocos2D JavaScript        Impact JS   MIT License           MIT LicenseSimple 2D + Physics   2D, Physics, Sound           ...
demo
production learning         easy and countless tutorials+libraries tools            can mostly be developed on desktop mon...
hybrid apps
hybrid appNative App         Interpreter    Request   Interceptor         JavaScript Bridge          Browser     executes ...
request interception    demo
Dual LicenseMIT & BSD
Logitech Squeezebox Controller
RNAO Nursing Best Practice Guidelines
demo   + weinre
PhoneGap on Windows Phone       demo
Plugin-Ins for PhoneGap
production learning         as with web tools            cloud build, yes but barely no debugging monetizationscenarios li...
interpreted apps
interpreted appNative App         interpreter                  Database  Application    Script                       Files...
– (HTML & CSS) =
Apache 2 License       JavaScript     native controls   iPhone, iPad, Android(BlackBerry, Mobile Web)
demo
Plugin-Ins for Appcelerator
production learning         specific API, similar to Sencha & Co. tools            own IDE, including debugger monetization...
Corona         Impact349 USD / year    99 USD Lua Runtime                  JavaScriptcomprehensive      simple  2D games  ...
generated apps
generated app    Generator Generator Input       Native App                               Logic     Logic      Modeldescri...
commercial        commercial    (BETA)    Java, AS           Ruby iOS, Android,         iOSWindows Phone,HTML5, WebOS,Blac...
commercial800-4500 USDJavaScript / C#  full 2D/3Dgames tool chain iOS, Android
demo + impact
production learning         completely new tool chain tools            scene editors, debuggers, asset manager, team versi...
cross-platform development ?
Web   Hybrid   Interpreted Game Engineproduction learning tools monetizationscenarios lists and data rich media gamesexper...
anotherperspective
native own language  own cultureown ecosystem  field skills                promotion: watch avatar - the movie 
not-so-native                                      economic objectives                                      establishment ...
best of bothpromotion: watch avatar - the movie                                      “I see you”
twitter         @HBehrensblog            http://HeikoBehrens.netCEO & Founder   getBeamApp.com
There's more than web
There's more than web
There's more than web
There's more than web
There's more than web
There's more than web
There's more than web
There's more than web
There's more than web
Upcoming SlideShare
Loading in …5
×

There's more than web

353
-1

Published on

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
353
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

There's more than web

  1. 1. Mobile Apps with JavaScript - there’s more than web! Heiko Behrens @HBehrens
  2. 2. @moskovich: “Your mobile phone has morecomputing power than all of NASA in 1969. NASA put a man on the moon...
  3. 3. ...we put a bird into pigs.”
  4. 4. what’s so greatabout the web anyway ?
  5. 5. 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; }
  6. 6. user’s i veperspec t
  7. 7. experience
  8. 8. consumers think apps
  9. 9. developer’sperspective
  10. 10. web apps
  11. 11. HTML5cache manifest, local storage, forms, geo locationCSS3animation, transitions, 3D transformationResolutioncss media queries, reference, categories, float layoutURLsmails, telephone, sms, maps, youtube, etc.
  12. 12. server-side web Web Server executes application logicWeb Browser Files Database Device Backend
  13. 13. client-side web Web Browser JavaScriptexecutes application logic Files Database Device Backend
  14. 14. web frameworksiWebKit, iUI, jQTouch, JQuery mobile, Jo, ZeptoSencha Touch, SproutCoreSee also any mew library that spawns each new week
  15. 15. Sencha TouchGPL+MIT License GPL + Free Licensedeclarative + JQuery programmaticallysimple complex
  16. 16. 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 })); } });
  17. 17. demo
  18. 18. Cocos2D JavaScript Impact JS MIT License MIT LicenseSimple 2D + Physics 2D, Physics, Sound Emphasizes Mobile
  19. 19. demo
  20. 20. production learning easy and countless tutorials+libraries tools can mostly be developed on desktop monetization no app store distributionscenarios lists and data rich media inferior performance games poor performance, only limited 3Dexperience hardware no camera, partly accelerometer, no fancy stuff user interface fancy UI possible, but platform specific offline HTML5platforms iOS Android Windows Phone since 7.5 aka Mango others great movement in responsive design!
  21. 21. hybrid apps
  22. 22. hybrid appNative App Interpreter Request Interceptor JavaScript Bridge Browser executes JavaScript Device Backend
  23. 23. request interception demo
  24. 24. Dual LicenseMIT & BSD
  25. 25. Logitech Squeezebox Controller
  26. 26. RNAO Nursing Best Practice Guidelines
  27. 27. demo + weinre
  28. 28. PhoneGap on Windows Phone demo
  29. 29. Plugin-Ins for PhoneGap
  30. 30. production learning as with web tools cloud build, yes but barely no debugging monetizationscenarios lists and data rich media same as with web games same as with webexperience hardware mostly accessible user interface high effort to match platform’s UI offlineplatforms iOS Android Windows Phone others best coverage of cross-platform frameworks
  31. 31. interpreted apps
  32. 32. interpreted appNative App interpreter Database Application Script Files Device Backend
  33. 33. – (HTML & CSS) =
  34. 34. Apache 2 License JavaScript native controls iPhone, iPad, Android(BlackBerry, Mobile Web)
  35. 35. demo
  36. 36. Plugin-Ins for Appcelerator
  37. 37. production learning specific API, similar to Sencha & Co. tools own IDE, including debugger monetization marketplace for apps and componentsscenarios lists and data perfect match rich media hard to work with movies/images and animations games some modules for rendering and physicsexperience hardware complete support user interface truly native widgets offlineplatforms iOS Android Windows Phone no plans on roadmap others plans for BlackBerry and HTML5
  38. 38. Corona Impact349 USD / year 99 USD Lua Runtime JavaScriptcomprehensive simple 2D games 2D Games iOS, Android iOS, HTML5
  39. 39. generated apps
  40. 40. generated app Generator Generator Input Native App Logic Logic Modeldescribes logic and Database Database complete system Files FilesFiles Database Device Backend
  41. 41. commercial commercial (BETA) Java, AS Ruby iOS, Android, iOSWindows Phone,HTML5, WebOS,BlackBerry, Flash
  42. 42. commercial800-4500 USDJavaScript / C# full 2D/3Dgames tool chain iOS, Android
  43. 43. demo + impact
  44. 44. production learning completely new tool chain tools scene editors, debuggers, asset manager, team versioning monetizationscenarios lists and data no native UI rich media not optimized for movies gamesexperience hardware OpenGL and sensors user interface best for games offlineplatforms iOS Android Windows Phone no plans on agenda others desktop and web
  45. 45. cross-platform development ?
  46. 46. Web Hybrid Interpreted Game Engineproduction learning tools monetizationscenarios lists and data rich media gamesexperience hardware user interface offlineplatforms iOS Android Windows Phone others
  47. 47. anotherperspective
  48. 48. native own language own cultureown ecosystem field skills promotion: watch avatar - the movie 
  49. 49. not-so-native economic objectives establishment “natives are endangered”promotion: watch avatar - the movie
  50. 50. best of bothpromotion: watch avatar - the movie “I see you”
  51. 51. twitter @HBehrensblog http://HeikoBehrens.netCEO & Founder getBeamApp.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×