There's more than web


Published on

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

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
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*{*****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{! <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