cross-platform-javascript - jazoon · ‣ appcelerator platform ‣ ios, android, windows ‣...

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