![Page 1: AppsWorld 2015 - Cross Platform Native Applications in JavaScript](https://reader031.vdocuments.net/reader031/viewer/2022030202/58a7fc9e1a28abfa488b6139/html5/thumbnails/1.jpg)
cross-platform native apps
In javascript
1
![Page 2: AppsWorld 2015 - Cross Platform Native Applications in JavaScript](https://reader031.vdocuments.net/reader031/viewer/2022030202/58a7fc9e1a28abfa488b6139/html5/thumbnails/2.jpg)
@jasonkneen‣ FREELANCE APP DEVELOPER ‣ www.bouncingfish.com ‣ twitter.com/jasonkneen
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
![Page 3: AppsWorld 2015 - Cross Platform Native Applications in JavaScript](https://reader031.vdocuments.net/reader031/viewer/2022030202/58a7fc9e1a28abfa488b6139/html5/thumbnails/3.jpg)
WHAT LIVE CODING FEELS LIKE
![Page 4: AppsWorld 2015 - Cross Platform Native Applications in JavaScript](https://reader031.vdocuments.net/reader031/viewer/2022030202/58a7fc9e1a28abfa488b6139/html5/thumbnails/4.jpg)
WHAT IS A native app?
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
![Page 5: AppsWorld 2015 - Cross Platform Native Applications in JavaScript](https://reader031.vdocuments.net/reader031/viewer/2022030202/58a7fc9e1a28abfa488b6139/html5/thumbnails/5.jpg)
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
![Page 6: AppsWorld 2015 - Cross Platform Native Applications in JavaScript](https://reader031.vdocuments.net/reader031/viewer/2022030202/58a7fc9e1a28abfa488b6139/html5/thumbnails/6.jpg)
"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?
![Page 7: AppsWorld 2015 - Cross Platform Native Applications in JavaScript](https://reader031.vdocuments.net/reader031/viewer/2022030202/58a7fc9e1a28abfa488b6139/html5/thumbnails/7.jpg)
WHAT IS A native app?
"A NATIVE MOBILE APP IS ONE THAT USES a NATIVE USER INTERFACE"
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
![Page 8: AppsWorld 2015 - Cross Platform Native Applications in JavaScript](https://reader031.vdocuments.net/reader031/viewer/2022030202/58a7fc9e1a28abfa488b6139/html5/thumbnails/8.jpg)
BUILDING native appS
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
‣ iOS - Objective-C, Swift ‣ANDROID - JAVA ‣windows - C#
![Page 9: AppsWorld 2015 - Cross Platform Native Applications in JavaScript](https://reader031.vdocuments.net/reader031/viewer/2022030202/58a7fc9e1a28abfa488b6139/html5/thumbnails/9.jpg)
MULTI-PLATFORM NATIVE appS
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
‣ TAKES LONGER ‣ COSTS MORE ‣ Maintenance can be costly ‣ Drives a “platform first” attitude
![Page 10: AppsWorld 2015 - Cross Platform Native Applications in JavaScript](https://reader031.vdocuments.net/reader031/viewer/2022030202/58a7fc9e1a28abfa488b6139/html5/thumbnails/10.jpg)
CROSS-PLATFORM TO THE RESCUE!
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
![Page 11: AppsWorld 2015 - Cross Platform Native Applications in JavaScript](https://reader031.vdocuments.net/reader031/viewer/2022030202/58a7fc9e1a28abfa488b6139/html5/thumbnails/11.jpg)
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
‣ CODE IN one language ‣ SINGLE CODE BASE ‣ CROSS-PLATFORM UI ‣ FASTER, CHEAPER
WHY CROSS-PLATFORM?
![Page 12: AppsWorld 2015 - Cross Platform Native Applications in JavaScript](https://reader031.vdocuments.net/reader031/viewer/2022030202/58a7fc9e1a28abfa488b6139/html5/thumbnails/12.jpg)
CROSS-PLATFORM SOLUTIONS
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
‣ MOBILE WEB ‣ HYBRID ‣ NATIVE UI
A HYBRID APP
![Page 13: AppsWorld 2015 - Cross Platform Native Applications in JavaScript](https://reader031.vdocuments.net/reader031/viewer/2022030202/58a7fc9e1a28abfa488b6139/html5/thumbnails/13.jpg)
NATIVE UI SOLUTIONS
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
‣ TITANIUM ‣ NativeScRIPT ‣ REACT NATIVE
Platform SDK
THE BRIDGE
JAVASCRIPT
![Page 14: AppsWorld 2015 - Cross Platform Native Applications in JavaScript](https://reader031.vdocuments.net/reader031/viewer/2022030202/58a7fc9e1a28abfa488b6139/html5/thumbnails/14.jpg)
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
![Page 15: AppsWorld 2015 - Cross Platform Native Applications in JavaScript](https://reader031.vdocuments.net/reader031/viewer/2022030202/58a7fc9e1a28abfa488b6139/html5/thumbnails/15.jpg)
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
![Page 16: AppsWorld 2015 - Cross Platform Native Applications in JavaScript](https://reader031.vdocuments.net/reader031/viewer/2022030202/58a7fc9e1a28abfa488b6139/html5/thumbnails/16.jpg)
ALLOY MVC
‣ XML-BASED VIews ‣ TSS Styles ‣ JAVASCRIPT controllers ‣ backbone models, collections ‣ Platform specific CODE / ASSETS
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
![Page 17: AppsWorld 2015 - Cross Platform Native Applications in JavaScript](https://reader031.vdocuments.net/reader031/viewer/2022030202/58a7fc9e1a28abfa488b6139/html5/thumbnails/17.jpg)
ALLOY MVC
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
‣ XML LAYOUT ‣ TSS STYLING ‣ COMMONJS ‣ WIDGETS
![Page 18: AppsWorld 2015 - Cross Platform Native Applications in JavaScript](https://reader031.vdocuments.net/reader031/viewer/2022030202/58a7fc9e1a28abfa488b6139/html5/thumbnails/18.jpg)
ALLOY MVC
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
‣ PLATFORM-SPECIFIC ‣ THEMES ‣ MULTI-APP CODEBASES
![Page 19: AppsWorld 2015 - Cross Platform Native Applications in JavaScript](https://reader031.vdocuments.net/reader031/viewer/2022030202/58a7fc9e1a28abfa488b6139/html5/thumbnails/19.jpg)
“when you strive for consistency, you achieve it through mediocrity” - Phil libin, CEO evernote
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
![Page 20: AppsWorld 2015 - Cross Platform Native Applications in JavaScript](https://reader031.vdocuments.net/reader031/viewer/2022030202/58a7fc9e1a28abfa488b6139/html5/thumbnails/20.jpg)
along with LEFT, RIGHT, TOP & BOTTOM
CROSS PLATFORM challenges
![Page 21: AppsWorld 2015 - Cross Platform Native Applications in JavaScript](https://reader031.vdocuments.net/reader031/viewer/2022030202/58a7fc9e1a28abfa488b6139/html5/thumbnails/21.jpg)
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”
![Page 22: AppsWorld 2015 - Cross Platform Native Applications in JavaScript](https://reader031.vdocuments.net/reader031/viewer/2022030202/58a7fc9e1a28abfa488b6139/html5/thumbnails/22.jpg)
CROSS PLATFORM challenges
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
‣ SINGLE code base ‣ PLATFORM ui / ux STANDARDS ‣ device behaviour ‣ ASSETS / DENSITIES ‣ TESTING
![Page 23: AppsWorld 2015 - Cross Platform Native Applications in JavaScript](https://reader031.vdocuments.net/reader031/viewer/2022030202/58a7fc9e1a28abfa488b6139/html5/thumbnails/23.jpg)
WHAT’S NEXT?
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
![Page 24: AppsWorld 2015 - Cross Platform Native Applications in JavaScript](https://reader031.vdocuments.net/reader031/viewer/2022030202/58a7fc9e1a28abfa488b6139/html5/thumbnails/24.jpg)
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
![Page 25: AppsWorld 2015 - Cross Platform Native Applications in JavaScript](https://reader031.vdocuments.net/reader031/viewer/2022030202/58a7fc9e1a28abfa488b6139/html5/thumbnails/25.jpg)
THANK YOU
‣ www.bouncingfish.com ‣ @jasonkneen / @bouncingfish ‣ www.appcelerator.com ‣ www.tidev.io