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