Your SlideShare is downloading. ×
There's more than web
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Mobile Apps with JavaScript - there’s more than web! Heiko Behrens @HBehrens
  • 2. @moskovich: “Your mobile phone has morecomputing power than all of NASA in 1969. NASA put a man on the moon...
  • 3. ...we put a bird into pigs.”
  • 4. what’s so greatabout the web anyway ?
  • 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. user’s i veperspec t
  • 7. experience
  • 8. consumers think apps
  • 9. developer’sperspective
  • 10. web apps
  • 11. HTML5cache manifest, local storage, forms, geo locationCSS3animation, transitions, 3D transformationResolutioncss media queries, reference, categories, float layoutURLsmails, telephone, sms, maps, youtube, etc.
  • 12. server-side web Web Server executes application logicWeb Browser Files Database Device Backend
  • 13. client-side web Web Browser JavaScriptexecutes application logic Files Database Device Backend
  • 14. web frameworksiWebKit, iUI, jQTouch, JQuery mobile, Jo, ZeptoSencha Touch, SproutCoreSee also any mew library that spawns each new week
  • 15. Sencha TouchGPL+MIT License GPL + Free Licensedeclarative + JQuery programmaticallysimple complex
  • 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. demo
  • 18. Cocos2D JavaScript Impact JS MIT License MIT LicenseSimple 2D + Physics 2D, Physics, Sound Emphasizes Mobile
  • 19. demo
  • 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. hybrid apps
  • 22. hybrid appNative App Interpreter Request Interceptor JavaScript Bridge Browser executes JavaScript Device Backend
  • 23. request interception demo
  • 24. Dual LicenseMIT & BSD
  • 25. Logitech Squeezebox Controller
  • 26. RNAO Nursing Best Practice Guidelines
  • 27. demo + weinre
  • 28. PhoneGap on Windows Phone demo
  • 29. Plugin-Ins for PhoneGap
  • 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. interpreted apps
  • 32. interpreted appNative App interpreter Database Application Script Files Device Backend
  • 33. – (HTML & CSS) =
  • 34. Apache 2 License JavaScript native controls iPhone, iPad, Android(BlackBerry, Mobile Web)
  • 35. demo
  • 36. Plugin-Ins for Appcelerator
  • 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. Corona Impact349 USD / year 99 USD Lua Runtime JavaScriptcomprehensive simple 2D games 2D Games iOS, Android iOS, HTML5
  • 39. generated apps
  • 40. generated app Generator Generator Input Native App Logic Logic Modeldescribes logic and Database Database complete system Files FilesFiles Database Device Backend
  • 41. commercial commercial (BETA) Java, AS Ruby iOS, Android, iOSWindows Phone,HTML5, WebOS,BlackBerry, Flash
  • 42. commercial800-4500 USDJavaScript / C# full 2D/3Dgames tool chain iOS, Android
  • 43. demo + impact
  • 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. cross-platform development ?
  • 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. anotherperspective
  • 48. native own language own cultureown ecosystem field skills promotion: watch avatar - the movie 
  • 49. not-so-native economic objectives establishment “natives are endangered”promotion: watch avatar - the movie
  • 50. best of bothpromotion: watch avatar - the movie “I see you”
  • 51. twitter @HBehrensblog http://HeikoBehrens.netCEO & Founder