beyond tellerrand: Mobile Apps with JavaScript – There's More Than Web

Mobile Apps with JavaScript - there’s more than web! Heiko Behrens @HBehrens

@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 ?

!"##$%&(()*+,(-%.,/0$*12-%/3!"#$%&"()*+****)(-%.)/45#2,*-./0#$%0123/-4****60,*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#$%E1)->*"#61%7-BCD->4F 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?,NOP1D)Q6$B"#61:.2(6#B#"%:R3#87(#3#6S<TTTTTTAB%6)$D%ISU>M4 ******"23%)6, **************@6#D2?,NOP1D)Q6$B"#61:.2(6#B#"%:VI?#87(#3#6S<TTTTTTA?26)(%2#$SHAB%6)$D%ISU> **************@6#D2?,NOP1D)Q6$B"#61:.2(6#B#"%:VI?#87(#3#6S<TTTTTTA?26)(%2#$SWHAB%6)$D%ISU> **************@6#D2?,NOP1D)Q6$B"#61:.2(6#B#"%:VI?#87(#3#6S<TTTTTTA?26)(%2#$SXYHAB%6)$D%ISU> **************@6#D2?,NOP1D)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

user’s i veperspec t

experience

expectation

consumers think apps

developer’sperspective

web apps

HTML5cache manifest, local storage, forms, geo locationCSS3animation, transitions, 3D transformationResolutioncss media queries, reference, categories, ﬂoat layoutURLsmails, telephone, sms, maps, youtube, etc.

server-side web Web Server executes application logicWeb Browser Files Database Device Backend

client-side web Web Browser JavaScriptexecutes application logic Files Database Device Backend

web frameworksiWebKit, iUI, jQTouch, JQuery mobile, Jo, ZeptoSencha Touch, SproutCoreSee also any mew library that spawns each new week

Sencha TouchGPL+MIT License GPL + Free Licensedeclarative + JQuery programmaticallysimple complex

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

Cocos2D JavaScript Impact JS MIT License MIT LicenseSimple 2D + Physics 2D, Physics, Sound Emphasizes Mobile

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 speciﬁc ofﬂine HTML5platforms iOS Android Windows Phone since 7.5 aka Mango others great movement in responsive design!

hybrid apps

hybrid appNative App Interpreter Request Interceptor JavaScript Bridge Browser executes JavaScript Device Backend

request interception demo

Dual LicenseMIT & BSD

Logitech Squeezebox Controller

RNAO Nursing Best Practice Guidelines

debugging

+weinre

PhoneGap on Windows Phone

Plugin-Ins for PhoneGap

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 ofﬂineplatforms iOS Android Windows Phone others best coverage of cross-platform frameworks

interpreted apps

interpreted appNative App interpreter Database Application Script Files Device Backend

– (HTML & CSS) =

Apache 2 License JavaScript native controlsiPhone, iPad, Android(BlackBerry, HTML5)

Plugin-Ins for Appcelerator

production learning speciﬁc 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 ofﬂineplatforms iOS Android Windows Phone no plans on roadmap others plans for BlackBerry and HTML5

generated apps

generated app Generator Generator Input Native App Logic Logic Modeldescribes logic and Database Database complete system Files FilesFiles Database Device Backend

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

commercial800-4500 USDJavaScript / C# full 2D/3Dgames tool chain iOS, Android

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 ofﬂineplatforms iOS Android Windows Phone no plans on agenda others desktop and web

JavaScript formobile apps ?

Web PhoneGap Appcelerator Unity3Dproduction learning tools monetizationscenarios lists and data rich media gamesexperience hardware user interface ofﬂineplatforms iOS Android Windows Phone others

twitter @HBehrensblog http://HeikoBehrens.netCEO & Founder getBeamApp.com

http://www.freshheads.com	1895
http://lanyrd.com	121
http://paper.li	18
http://jeroen.dev.freshheads.local	7
http://beta.freshheads.com	6
http://a0.twimg.com	5
http://www.twylah.com	2
http://freshheads.nl	2
http://translate.googleusercontent.com	1

beyond tellerrand: Mobile Apps with JavaScript – There's More Than Web

by Heiko Behrens

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 2,057

Statistics

beyond tellerrand: Mobile Apps with JavaScript – There’s More Than Web Presentation Transcript