cross-platform native apps

In javascript

1

@jasonkneen‣ FREELANCE APP DEVELOPER ‣ www.bouncingfish.com ‣ twitter.com/jasonkneen

CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT

WHAT LIVE CODING FEELS LIKE

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 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#

MULTI-PLATFORM NATIVE appS

CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT

‣ TAKES LONGER ‣ COSTS MORE ‣ Maintenance can be costly ‣ Drives a “platform first” attitude

CROSS-PLATFORM TO THE RESCUE!

CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT

CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT

‣ CODE IN one language ‣ SINGLE CODE BASE ‣ CROSS-PLATFORM UI ‣ FASTER, CHEAPER

WHY CROSS-PLATFORM?

CROSS-PLATFORM SOLUTIONS

CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT

‣ MOBILE WEB ‣ HYBRID ‣ NATIVE UI

A HYBRID APP

NATIVE UI SOLUTIONS

CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT

‣ TITANIUM ‣ NativeScRIPT ‣ REACT NATIVE

Platform SDK

THE BRIDGE

JAVASCRIPT

CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT

‣ CODE IN JAVASCRIPT ‣ NATIVE, CROSS-PLATFORM UI ‣ SHARE CODE / LIBRARIES ‣ NATIVE EXPERIENCE ‣ 90%+ CODE SHARE

CROSS-PLATFORM NATIVE UI

NBPA PLAYERS APP FOR IOS AND ANDROID

WHY TITANIUM?

‣ FREE, OPEN-SOURCE ‣ ESTABLISHED, SECURE ‣ iOS, Android, Windows Phone ‣ Alloy MVC ‣ EASY TRANSITION FROM WEB ‣ Appcelerator Platform

CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT

ALLOY MVC

‣ XML-BASED VIews ‣ TSS Styles ‣ JAVASCRIPT controllers ‣ backbone models, collections ‣ Platform specific CODE / ASSETS

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

along with LEFT, RIGHT, TOP & BOTTOM

CROSS PLATFORM challenges

CROSS PLATFORM challenges

“What size should the App Avatar be?”

“Can we have a Quit button to exit the app in

iOS?”

“That’s just a 5 minute job right?”

“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 ‣ ASSETS / DENSITIES ‣ TESTING

WHAT’S NEXT?

CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT

Hyperloop

‣ Javascript runs natively ‣ backward compatible ‣ 100% pLATFORM SDK access ‣ No native modules! ‣ MIX javascript, Obj-C, Swift ‣ TRY IT NOW

CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT

THANK YOU

‣ www.bouncingfish.com ‣ @jasonkneen / @bouncingfish ‣ www.appcelerator.com ‣ www.tidev.io