Upload
jason-kneen
View
880
Download
0
Embed Size (px)
Citation preview
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