BUILDING cross- platform native apps In javascript CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT @jasonkneen ‣ FREELANCE APP DEVELOPER ‣ www.bouncingfish.com ‣ twitter.com/jasonkneen CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT WHAT IS A native app? CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT WHAT IS A native app? "A NATIVE MOBILE APP IS A SMARTPHONE APPLICATION THAT IS CODED IN A SPECIFIC PROGRAMMING LANGUAGE SUCH AS OBJECTIVE-C, SWIFT OR JAVA" CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT WHAT IS A native app? "A NATIVE APPLICATION IS AN APPLICATION DEVELOPED FOR USE ON A PARTICULAR PLATFORM OR DEVICE" CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT WHAT IS A native app? "A NATIVE MOBILE APP IS ONE THAT USES a NATIVE USER INTERFACE" CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT BUILDING native appS ‣ iOS - Objective-C, Swift ‣ ANDROID - JAVA ‣ windows - C# ‣ OTHERS… CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT MULTI-PLATFORM NATIVE appS ‣ multiple developers / skillsets ‣ TAKES TIME ‣ Increased costs ‣ High Maintenance ‣ Drives a “platform first” attitude CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT CROSS-PLATFORM TO THE RESCUE!! CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT WHY CROSS-PLATFORM? ‣ CODE IN a common language ‣ SINGLE CODE-BASE* ‣ CROSS-PLATFORM UI ‣ FASTER > CHEAPER *IDEALLY CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT CROSS-PLATFORM SOLUTIONS ‣ MOBILE WEB ‣ HYBRID ‣ NATIVE UI IT’s HYBRID CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT NATIVE UI SOLUTIONS JAVASCRIPT ‣ NativeScRIPT ‣ REACT NATIVE “THE BRIDGE” ‣ TITANIUM Platform SDK CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT HOW TITANIUM WORKS CREATE BUTTON ‣ JAVAscript layer CROSS PLATFORM API ‣ TITANIUM API IOS SDK ANDROID SDK ‣ BRIDGE / SDK LAYER ‣ Native modules ‣ Hyperloop UIBUTTON BUTTON CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT CROSS-PLATFORM NATIVE ‣ CODE IN JAVASCRIPT ‣ NATIVE, CROSS-PLATFORM UI ‣ SHARE CODE / LIBRARIES ‣ NATIVE EXPERIENCE ‣ 90-95%+ CODE SHARE NBPA PLAYERS APP FOR IOS AND ANDROID CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT WHY TITANIUM? ‣ FREE, OPEN-SOURCE ‣ Appcelerator Platform ‣ iOS, Android, Windows ‣ hyperloop ‣ Alloy MVC CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT Hyperloop ‣ 100% pLATFORM SDK access ‣ No native modules ‣ MIX javascript, Obj-C, Swift ‣ works alongside titanium api ‣ target specific SDK features CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT ALLOY MVC ‣ models, collections ‣ XML-BASED View & TSS Styles ‣ JAVASCRIPT controllers ‣ Platform specific CODE / ASSETS ‣ WIDGETS / RE-usable modules CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT ALLOY MVC ‣ XML LAYOUT ‣ TSS STYLING ‣ COMMONJS ‣ WIDGETS CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT ALLOY MVC ‣ PLATFORM-SPECIFIC ‣ THEMES ‣ MULTI-APP CODEBASES CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT “when you strive for consistency, you achieve it through mediocrity” - Phil libin, CEO evernote CROSS PLATFORM challenges RIGHT, IF YOU IGNORE LEFT, RIGHT, TOP & BOTTOM CROSS PLATFORM challenges We’d like the iOS TabGroup on Android What size should the Ap Avatar be? Can you tel me al the image sizes you ned Can we have a buton to for Android? exit the ap in iOS? I’ve sent you a layered-PSD with the images I’ve put the images in “/retina” and “/ non-retina“ folders CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT CROSS PLATFORM challenges ‣ SINGLE code base ‣ PLATFORM ui / ux STANDARDS ‣ device behaviour & PLATFORM FEATURES ‣ ASSETS / DENSITIES ‣ TESTING ‣ performance CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT CROSS PLATFORM approach ‣ understand requirements ‣ design for the platform ‣ optimise performance ‣ target specific Device / OS versions He’s going to Live Code!! I’m Batman LETS LOOK AT SOME CODE THANK YOU ‣ www.bouncingfish.com ‣ @jasonkneen / @bouncingfish ‣ www.appcelerator.com OUT NOW.