ncdevcon 2017 - cross platform mobile apps
TRANSCRIPT
Cross-platform Mobile Development With Open Source
FrameworksJohn 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 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
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
• Web
• Native
• Hybrid
• JavaScript-driven native
• Adjacent native
• Mobile application development platforms
Available Approaches
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
Hybrid Frameworks
Apache Cordova
An open source framework for building cross-platform mobile applications using
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
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
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!
Apache Cordova
An open source framework for building cross-platform mobile applications using HTML5
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)
Supported HTML & JavaScript Frameworks
• All of them (pretty much)
• There are even Hybrid-specific frameworks:• Ionic
• Onsen UI
• Framework7
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 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
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
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
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”
Configuring cdva-create
{"platformList":[
"android","ios"
],"pluginList":[
"cordova-plugin-console","cordova-plugin-dialogs","cordova-plugin-device"
],"enableDebug":false,"copyFrom":"","linkTo":"","createParms":""
}
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)
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
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
Easiest Way to Learn?
Josh Morony: https://www.joshmorony.com/category/ionic-tutorials/
JavaScript-driven Native Frameworks
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
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
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
Easiest Way to Learn?
• Free NativeScript book @ https://www.nativescript.org/get-the-nativescript-book
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
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 myApp
cd myApp
npm start
Limited approach; uses the Expo app to deliver the Reactive Native native runtime
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
Creating a React Native Project (#2)
Open a command prompt or terminal window, and type the following commands:
react-native init myApp
cd myApp
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, 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
Resources
• This presentation: http://bit.ly/ncdevcon17-preso
• Project source code: http://bit.ly/ncdevcon17-source
Source CodePresentation
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/items?itemName=vsmobile.cordova-toolsReact Native Extension:https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native