Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

NCDevCon 2017 - Cross Platform Mobile Apps

207 views

Published on

Building cross-platform mobile apps using open source tools. A manic paced session where I build the same app across 4 different open source mobile development frameworks.

Published in: Mobile
  • Be the first to comment

  • Be the first to like this

NCDevCon 2017 - Cross Platform Mobile Apps

  1. 1. Cross-platform Mobile Development With Open Source Frameworks John M. Wargo Microsoft
  2. 2. Agenda • Introduction • Native mobile development is hard • Introducing cross-platform open source mobile development frameworks • A bunch of demos and code • Wrap-Up
  3. 3. Me: Software Developer, Writer, Presenter, Husband, Father, Geek • Principal Program Manager @ Microsoft • Part of the Azure team working on Visual Studio Mobile Center MBaaS capabilities • Responsible for Microsoft’s JavaScript Mobile tooling: Visual Studio Code Extensions for Cordova and React Native • Contributor to the Apache Cordova Project • Author of a few books
  4. 4. Publications
  5. 5. Native Mobile Development Is Hard • No common language across popular platforms • No single IDE that can be used for all popular platforms • Requires different skills for each target platform • Hard to be an expert on more than one platform • Requires a Macintosh computer, which, surprisingly, most enterprises don’t have or support
  6. 6. Mobile Development Is Expensive • Fickle and finicky users drive dev organizations to deliver frequent updates which forces a furious pace of development leading to the requirements for: • Continuous Integration • Automated testing (manual testing can no longer keep up) • Testing that never ends • More to test than just whether the code ‘works’ • Device farms
  7. 7. • Web • Native • Hybrid • JavaScript-driven native • Adjacent native • Mobile application development platforms Available Approaches
  8. 8. Cross-Platform, Open Source Mobile Frameworks • Hybrid Apps • Apache Cordova* • Ionic* • JavaScript-driven Native Apps • NativeScript* • React Native* • Tabris.js • Titanium • Adjacent Native Apps • Microsoft Xamarin
  9. 9. Hybrid Frameworks
  10. 10. Apache Cordova An open source framework for building cross-platform mobile applications using
  11. 11. History • Started at the 2008 iPhoneDevCamp by Nitobi • Started with iOS, quickly added Android and BlackBerry support later • In 2011, project was donated to Apache Software Foundation • First as Apache Callback • Then as Apache DeviceReady • Finally as Apache Cordova • Very quickly thereafter (the next day), Nitobi acquired by Adobe • Expectation that Cordova will become obsolete over time as mobile browsers become more capable
  12. 12. You May Have Heard of Adobe PhoneGap? • PhoneGap is merely a distribution of Apache Cordova with some extra stuff bolted on • Think Ubuntu vs. Linux – one is simply a distribution of the other • More: http://www.informit.com/articles/article.aspx?p=2478076
  13. 13. Consumers & Supporters • IBM MobileFirst Platform • SAP HANA Cloud Platform mobile services • Oracle Mobile Platform • Salesforce App Cloud • Alpha Software Alpha Anywhere • and many, many, many more!
  14. 14. Apache Cordova An open source framework for building cross-platform mobile applications using HTML5
  15. 15. WebView • Web application content is rendered within the native application window using a native WebView component • The content is NOT converted in any way • Pretty much allows ANY web content to run (just like a browser) • On older devices, the WebView is not always exactly the same as the browser (for older Android devices, look at the Intel Crosswalk project)
  16. 16. Supported HTML & JavaScript Frameworks • All of them (pretty much) • There are even Hybrid-specific frameworks: • Ionic • Onsen UI • Framework7
  17. 17. Application Architecture
  18. 18. Cordova Tooling • Cordova Command Line Interface (CLI) • Use whatever tools you want to design & code your applications • Use the native SDKs or the PhoneGap Build service to ‘build’ your applications • Can use the CLI with either • Microsoft Tools: • Visual Studio Tools for Apache Cordova (TACO) • Visual Studio Code with Cordova Extension
  19. 19. Installing Apache Cordova • Install NodeJS (https://nodejs.org) • Install one or more target SDK’s (Android, iOS, etc.) • Open a command prompt or terminal window, and type the following command: • npm install –g cordova
  20. 20. Creating a Cordova Project Open a command prompt or terminal window, and type a bunch of commands: cordova create HelloWorld com.johnwargo.helloworld “Hello World” cd HelloWorld cordova platform add android ios cordova plugin add cordova-plugin-device cordova plugin add cordova-plugin-device-orientation cordova plugin add cordova-plugin-file
  21. 21. Creating a Cordova Project (simplified) To simplify this process, I published a Node module called cdva-create (https://www.npmjs.com/package/cdva-create) To install, open a command prompt or terminal window, and type the following command: npm install –g cdva-create With that in place, create a complete Cordova application project using the following command: cdva-create HelloWorld com.johnwargo.helloworld “Hello World”
  22. 22. Configuring cdva-create { "platformList":[ "android", "ios" ], "pluginList":[ "cordova-plugin-console", "cordova-plugin-dialogs", "cordova-plugin-device" ], "enableDebug":false, "copyFrom":"", "linkTo":"", "createParms":"" }
  23. 23. Ionic Framework • Originally a UI framework on top of Apache Cordova • TypeScript, relies heavily on Angular • Adds Angular components that give a web/Cordova app a native look/feel • Provides wrapper around common Cordova plugins • Started with SPA (single page app), expanding into PWA (progressive web apps) • Migrating to Web Component standard (http://blog.ionic.io/the-end-of-framework-churn/) • Channeling React Native (JSX) in their component compiler StencilJS (stenciljs.com)
  24. 24. Installing Ionic • Install NodeJS (https://nodejs.org) • Install one or more target SDK’s (Android, iOS, etc.) • Open a command prompt or terminal window, and type the following command: • npm install –g cordova ionic
  25. 25. Creating an Ionic Project Open a command prompt or terminal window, and type the following command: ionic start myApp blank Start live browser preview with: cd myApp ionic serve
  26. 26. Easiest Way to Learn? Josh Morony: https://www.joshmorony.com/category/ionic-tutorials/
  27. 27. JavaScript-driven Native Frameworks
  28. 28. NativeScript • Open source project started by Telerik (now Progress Software) • Create native mobile applications from a JavaScript codebase • Supports JavaScript and TypeScript (TypeScript with or without Angular) • Consider themselves “React Native for the Enterprise” • Cross-platform UI abstracted through UI definition in an xml file, can also be built using code
  29. 29. Installing NativeScript • Install NodeJS (https://nodejs.org) • Install one or more target SDK’s (Android, iOS, etc.) • Open a command prompt or terminal window, and type the following command: • npm install –g nativescript
  30. 30. Creating a NativeScript Project Open a command prompt or terminal window, and type the following commands: nativescript create HelloWorld --tsc cd HelloWorld nativescript platform add android nativescript platform add ios * Can also use the tns command instead of nativescript
  31. 31. Easiest Way to Learn? • Free NativeScript book @ https://www.nativescript.org/get-the-nativescript-book
  32. 32. React Native • JavaScript-driven Native implementation of Facebook’s React framework (https://reactjs.org/) • Supports Android and iOS • JavaScript code ‘renders’ native UI components • Separate APIs for Android vs. iOS platforms • License/Patent concerns
  33. 33. Installing React Native (#1) • Open a command prompt or terminal window, and type the following command: • npm install -g create-react-native-app
  34. 34. Creating a React Native Project (#1) Open a command prompt or terminal window, and type the following commands: create-react-native-app myApp cd myApp npm start Limited approach; uses the Expo app to deliver the Reactive Native native runtime
  35. 35. Installing React Native (#2) • Install NodeJS (https://nodejs.org) • Install one or more target SDK’s (Android, iOS, etc.) • Open a command prompt or terminal window, and type the following command: • npm install -g react-native-cli
  36. 36. Creating a React Native Project (#2) Open a command prompt or terminal window, and type the following commands: react-native init myApp cd myApp
  37. 37. Device Information & React Native • Access to device information is not built-in to React Native. • Sample application uses react-native-device-info (https://github.com/rebeccahughes/react-native-device-info) • Need to execute some additional commands: • npm install --save react-native-device-info • react-native link react-native-device-info
  38. 38. What Does All This Mean? • Arguments against using Hybrid apps due to performance issues (for most apps) are moot, those issues were mitigated years ago • The web is still not native, from a performance standpoint, but its usable for most enterprise and many consumer use cases • Expect enterprises to continue to use hybrid approaches for their internal apps • As there are more web developers than native mobile developers in the world, JavaScript-driven Native, especially due to Facebook’s involvement, will become the de facto approach for cross-platform mobile development • Enterprises will want licensing changes before you’ll see widespread adoption of React and React Native there
  39. 39. Resources • This presentation: http://bit.ly/ncdevcon17-preso • Project source code: http://bit.ly/ncdevcon17-source Source CodePresentation
  40. 40. John M. Wargo • Twitter: @johnwargo • Blog: johnwargo.com • Github: johnwargo.github.io Download Visual Studio Code https://code.visualstudio.com/ Cordova Extension: https://marketplace.visualstudio.com/item s?itemName=vsmobile.cordova-tools React Native Extension: https://marketplace.visualstudio.com/item s?itemName=vsmobile.vscode-react-native

×