A talk on building cross-platform native apps, focused on Titanium

1. cross-platform
native apps
In javascript
1

2. @jasonkneen
‣ FREELANCE APP DEVELOPER
‣ www.bouncingfish.com
‣ twitter.com/jasonkneen
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT

3. WHAT LIVE CODING FEELS LIKE

4. WHAT IS A native app?
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT

5. 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

6. "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?

7. WHAT IS A native app?
"A NATIVE MOBILE APP IS ONE THAT USES a NATIVE
USER INTERFACE"
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT

8. BUILDING native appS
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
‣ iOS - Objective-C, Swift
‣ ANDROID - JAVA
‣ windows - C#

9. MULTI-PLATFORM NATIVE appS
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
‣ TAKES LONGER
‣ COSTS MORE
‣ Maintenance can be costly
‣ Drives a “platform first” attitude

10. CROSS-PLATFORM TO THE RESCUE!
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT

11. CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
‣ CODE IN one language
‣ SINGLE CODE BASE
‣ CROSS-PLATFORM UI
‣ FASTER, CHEAPER
WHY CROSS-PLATFORM?

12. CROSS-PLATFORM SOLUTIONS
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
‣ MOBILE WEB
‣ HYBRID
‣ NATIVE UI
A HYBRID APP

13. NATIVE UI SOLUTIONS
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
‣ TITANIUM
‣ NativeScRIPT
‣ REACT NATIVE
Platform SDK
THE BRIDGE
JAVASCRIPT

14. 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

15. 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

16. ALLOY MVC
‣ XML-BASED VIews
‣ TSS Styles
‣ JAVASCRIPT controllers
‣ backbone models, collections
‣ Platform specific CODE / ASSETS
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT

17. ALLOY MVC
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
‣ XML LAYOUT
‣ TSS STYLING
‣ COMMONJS
‣ WIDGETS

18. ALLOY MVC
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
‣ PLATFORM-SPECIFIC
‣ THEMES
‣ MULTI-APP CODEBASES

19. “when you strive for consistency, you achieve it
through mediocrity” - Phil libin, CEO evernote
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT

20. along with LEFT, RIGHT, TOP & BOTTOM
CROSS PLATFORM challenges

21. 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”

22. CROSS PLATFORM challenges
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT
‣ SINGLE code base
‣ PLATFORM ui / ux STANDARDS
‣ device behaviour
‣ ASSETS / DENSITIES
‣ TESTING

23. WHAT’S NEXT?
CROSS-PLATFORM NATIVE APPS IN JAVASCRIPT

24. 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

25. THANK YOU
‣ www.bouncingfish.com
‣ @jasonkneen / @bouncingfish
‣ www.appcelerator.com
‣ www.tidev.io