Crossplatform Mobile Development With Open Source Frameworks John

Cross-platform Mobile Development With Open Source Frameworks John M. Wargo Microsoft

Agenda • Introduction • Native mobile development is hard • Introducing cross-platform open source mobile development frameworks • A bunch of demos and code • Wrap-Up

Me: Software Developer, Writer, Presenter, Husband, Father, Geek • Principal Program Manager @ Microsoft • Part of the Azure team working on Visual Studio Mobile Center MBaa. S capabilities • Responsible for Microsoft’s Java. Script Mobile tooling: Visual Studio Code Extensions for Cordova and React Native • Contributor to the Apache Cordova Project • Author of a few books

Publications

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

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

Available Approaches • Web • Native • Hybrid • Java. Script-driven native • Adjacent native • Mobile application development platforms

Cross-Platform, Open Source Mobile Frameworks • Hybrid Apps • Apache Cordova* • Ionic* • Java. Script-driven Native Apps • • Native. Script* React Native* Tabris. js Titanium • Adjacent Native Apps • Microsoft Xamarin

Hybrid Frameworks

Apache Cordova An open source framework for building cross-platform mobile applications using

History • Started at the 2008 i. Phone. Dev. Camp by Nitobi • Started with i. OS, quickly added Android and Black. Berry support later • In 2011, project was donated to Apache Software Foundation • First as Apache Callback • Then as Apache Device. Ready • 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

You May Have Heard of Adobe Phone. Gap? • Phone. Gap 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

Consumers & Supporters • IBM Mobile. First Platform • SAP HANA Cloud Platform mobile services • Oracle Mobile Platform • Salesforce App Cloud • Alpha Software Alpha Anywhere • and many, many more!

Apache Cordova An open source framework for building cross-platform mobile applications using HTML 5

Web. View • Web application content is rendered within the native application window using a native Web. View 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 Web. View is not always exactly the same as the browser (for older Android devices, look at the Intel Crosswalk project)

Supported HTML & Java. Script Frameworks • All of them (pretty much) • There are even Hybrid-specific frameworks: • Ionic • Onsen UI • Framework 7

Application Architecture

Cordova Tooling • Cordova Command Line Interface (CLI) • Use whatever tools you want to design & code your applications • Use the native SDKs or the Phone. Gap 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

Installing Apache Cordova • Install Node. JS (https: //nodejs. org) • Install one or more target SDK’s (Android, i. OS, etc. ) • Open a command prompt or terminal window, and type the following command: • npm install –g cordova

Creating a Cordova Project Open a command prompt or terminal window, and type a bunch of commands: cordova create Hello. World com. johnwargo. helloworld “Hello World” cd Hello. World cordova platform add android ios cordova plugin add cordova-plugin-device-orientation cordova plugin add cordova-plugin-file

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 Hello. World com. johnwargo. helloworld “Hello World”

Configuring cdva-create { "platform. List": [ "android", "ios" ], "plugin. List": [ "cordova-plugin-console", "cordova-plugin-dialogs", "cordova-plugin-device" ], "enable. Debug": false, "copy. From": "", "link. To": "", "create. Parms": "" }

Ionic Framework Originally a UI framework on top of Apache Cordova Type. Script, 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 Stencil. JS (stenciljs. com) • • •

Installing Ionic • Install Node. JS (https: //nodejs. org) • Install one or more target SDK’s (Android, i. OS, etc. ) • Open a command prompt or terminal window, and type the following command: • npm install –g cordova ionic

Creating an Ionic Project Open a command prompt or terminal window, and type the following command: ionic start my. App blank Start live browser preview with: cd my. App ionic serve

Easiest Way to Learn? Josh Morony: https: //www. joshmorony. com/category/ionic-tutorials/

Java. Script-driven Native Frameworks

Native. Script • Open source project started by Telerik (now Progress Software) • Create native mobile applications from a Java. Script codebase • Supports Java. Script and Type. Script (Type. Script 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

Installing Native. Script • Install Node. JS (https: //nodejs. org) • Install one or more target SDK’s (Android, i. OS, etc. ) • Open a command prompt or terminal window, and type the following command: • npm install –g nativescript

Creating a Native. Script Project Open a command prompt or terminal window, and type the following commands: nativescript create Hello. World --tsc cd Hello. World nativescript platform add android nativescript platform add ios * Can also use the tns command instead of nativescript

Easiest Way to Learn? • Free Native. Script book @ https: //www. nativescript. org/get-the-nativescript-book

React Native • Java. Script-driven Native implementation of Facebook’s React framework (https: //reactjs. org/) • Supports Android and i. OS • Java. Script code ‘renders’ native UI components • Separate APIs for Android vs. i. OS platforms • License/Patent concerns

Installing React Native (#1) • Open a command prompt or terminal window, and type the following command: • npm install -g create-react-native-app

Creating a React Native Project (#1) Open a command prompt or terminal window, and type the following commands: create-react-native-app my. App cd my. App npm start Limited approach; uses the Expo app to deliver the Reactive Native native runtime

Installing React Native (#2) • Install Node. JS (https: //nodejs. org) • Install one or more target SDK’s (Android, i. OS, etc. ) • Open a command prompt or terminal window, and type the following command: • npm install -g react-native-cli

Creating a React Native Project (#2) Open a command prompt or terminal window, and type the following commands: react-native init my. App cd my. App

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

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, Java. Script-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

Resources • This presentation: http: //bit. ly/ncdevcon 17 -preso • Project source code: http: //bit. ly/ncdevcon 17 -source Presentation Source Code

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/ite ms? item. Name=vsmobile. cordova-tools React Native Extension: https: //marketplace. visualstudio. com/ite ms? item. Name=vsmobile. vscode-reactnative