cross-platform-javascript - jazoon · ‣ appcelerator platform ‣ ios, android, windows ‣...
TRANSCRIPT
BUILDING 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
"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?
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
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
‣ iOS - Objective-C, Swift ‣ANDROID - JAVA ‣windows - C# ‣OTHERS…
MULTI-PLATFORM NATIVE appS
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
‣ multiple developers / skillsets ‣ TAKES TIME ‣ Increased costs ‣ High Maintenance ‣ Drives a “platform first” attitude
CROSS-PLATFORM TO THE RESCUE!!
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
‣ CODE IN a common language ‣ SINGLE CODE-BASE* ‣ CROSS-PLATFORM UI ‣ FASTER > CHEAPER
WHY CROSS-PLATFORM?
*IDEALLY
CROSS-PLATFORM SOLUTIONS
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
‣ MOBILE WEB ‣ HYBRID ‣ NATIVE UI
IT’s HYBRID
NATIVE UI SOLUTIONS
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
‣ NativeScRIPT ‣ REACT NATIVE ‣ TITANIUM
Platform SDK
“THE BRIDGE”
JAVASCRIPT
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
‣ JAVAscript layer ‣ TITANIUM API ‣ BRIDGE / SDK LAYER ‣ Native modules ‣ Hyperloop
HOW TITANIUM WORKS
IOS SDK
CROSS PLATFORM API
CREATE BUTTON
ANDROID SDK
UIBUTTON BUTTON
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
‣ CODE IN JAVASCRIPT ‣ NATIVE, CROSS-PLATFORM UI ‣ SHARE CODE / LIBRARIES ‣ NATIVE EXPERIENCE ‣ 90-95%+ CODE SHARE
CROSS-PLATFORM NATIVE
NBPA PLAYERS APP FOR IOS AND ANDROID
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
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
‣ XML LAYOUT ‣ TSS STYLING ‣ COMMONJS ‣ WIDGETS
ALLOY MVC
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
‣ PLATFORM-SPECIFIC ‣ THEMES ‣ MULTI-APP CODEBASES
“when you strive for consistency, you achieve it through mediocrity” - Phil libin, CEO evernote
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
RIGHT, IF YOU IGNORE LEFT, RIGHT, TOP & BOTTOM
CROSS PLATFORM challenges
CROSS PLATFORM challengesWhat size should
the App Avatar be?
Can we have a button to exit the app in iOS?
We’d like the iOS TabGroup on Android
Can you tell me all the image sizes you need
for Android?
I’ve put the images in “/retina” and “/
non-retina“ folders
I’ve sent you a layered-PSD with
the images
CROSS PLATFORM challenges
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
‣ SINGLE code base ‣ PLATFORM ui / ux STANDARDS ‣ device behaviour & PLATFORM FEATURES ‣ ASSETS / DENSITIES ‣ TESTING ‣ performance
CROSS PLATFORM approach
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
‣ understand requirements ‣ design for the platform ‣ optimise performance ‣ target specific Device / OS versions
LETS LOOK AT SOME CODE
He’s going to Live Code!!
I’m Batman
THANK YOU
‣ www.bouncingfish.com ‣ @jasonkneen / @bouncingfish ‣ www.appcelerator.com
OUT NOW