AppsWorld 2015 - Cross Platform Native Applications in JavaScript
3 likes1,116 views
This document discusses building cross-platform native mobile apps using JavaScript. It defines what a native mobile app is and outlines challenges with building apps for multiple platforms, such as iOS and Android. It then introduces approaches for building cross-platform apps using JavaScript, including frameworks like Titanium, React Native, and NativeScript that allow coding apps in JS while maintaining native UIs. Benefits include writing code once that runs on different platforms, along with faster development times and lower costs compared to building platform-specific apps.
AppsWorld 2015 - Cross Platform Native Applications in JavaScript
- 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