Downloaded 12 times
Uploaded byAll Things Open
Cross-platform Mobile Development on Open Source
This document provides an overview of cross-platform mobile development using open source tools. It discusses hybrid mobile frameworks like Apache Cordova that allow building mobile apps with web technologies that are deployed to native app stores. While early hybrid apps had performance issues, newer frameworks discussed like React Native and NativeScript claim to generate truly native apps with high code reuse across platforms using JavaScript. The document also covers adjacent native frameworks like Xamarin that compile to native apps from C# instead of web technologies. Overall it introduces a variety of open source options for cross-platform mobile development.
More Related Content
Similar to Cross-platform Mobile Development on Open Source
![[JMaghreb 2014] Developing JavaScript Mobile Apps Using Apache Cordova](https://cdn.slidesharecdn.com/ss_thumbnails/javascriptmoibleappsdevelopment-141106091920-conversion-gate02-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![[2015/2016] Apache Cordova](https://cdn.slidesharecdn.com/ss_thumbnails/05cordova-160401161537-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Cross-platform Mobile Development on Open Source
- 1. CROSS-PLATFORM MOBILE DEVELOPMENT ONOPEN SOURCE John M. Wargo @johnwargo www.johnwargo.com Slides: http://johnwargo.com/files/jmw-ato2016-cross-platform-mobile.pptx
- 2. ABSTRACT There’s a lotof ways to deliver mobile apps: native, web, commercial mobile app development platforms, and more. In between those options are popular open source projects that provide robust, alternative approaches. In this session, you’ll learn about the venerable Apache Cordova project, the project that defined the hybrid mobile development approach, plus new upstarts like Telerik’s NativeScript, Facebook’s React Native and Microsoft’s Xamarin that take hybrid to the next level, giving developers the ability to create compelling, performant native apps using JavaScript or other languages. Expect a fast-paced, high-energy session with lots of content as John Wargo introduces you to a different way to do mobile using open source tools.
- 3. SOFTWARE DEVELOPER, WRITER, PRESENTER,HUSBAND, FATHER, GEEK • Software developer • Former Forrester analyst • Actively seeking full-time employment • Author of 6+1 books • Contributor to the Apache Cordova Project • Doing mostly IoT things lately • Worked at AT&T, BlackBerry, BoxTone, Forrester, SAP
- 4.
- 5. AGENDA • A quickchat about mobile development and mobile development approaches • Defining mobile hybrid development (an introduction to Apache Cordova and perhaps Adobe PhoneGap too) • The problem(s) with hybrid development • The evolution of hybrid development • Open source, cross-platform development (a look at NativeScript, ReactNative, Tabris.js, Titanium, Xamarin)
- 6.
- 7. NATIVE MOBILE DEVELOPMENT ISHARD • No common language across popular platforms • No single IDE that can be used for all popular platforms • Hard to be an expert on more than one platform • Requires a Macintosh computer
- 8. MOBILE DEVELOPMENT IS EXPENSIVE Fickleand 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
- 9. AVAILABLE APPROACHES • Web •Native • Hybrid • JavaScript-driven native* • Adjacent native* • Mobile application development platforms * Terms I coined as an Analyst at Forrester Research
- 10.
- 11. APACHE CORDOVA An opensource framework for building cross-platform mobile applications using
- 12. HISTORY • Started atthe 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*
- 13. CONTRIBUTORS • The smartphoneindustry is heavily involved in the Cordova project • Adobe • Amazon • Google • IBM • Microsoft • Mozilla • Samsung • Ubuntu
- 14. CONSUMERS & SUPPORTERS •IBM MobileFirst Platform (Formerly IBM WorkLight) • SAP HANA Cloud Platform mobile services (Formerly SAP Mobile Platform) • Oracle Mobile Platform • Salesforce App Cloud • Alpha Software Alpha Anywhere • and many, many, many more!
- 15. APACHE CORDOVA An opensource framework for building cross- platform mobile applications using HTML5
- 16. WEBVIEW • Web applicationcontent 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) • Pluggable WebViews enable you to use whatever one you want
- 17. SUPPORTED HTML & JAVASCRIPTFRAMEWORKS • All of them (pretty much) • There are even Hybrid-specific frameworks: • Ionic • Onsen UI • Framework7
- 18.
- 19. TOOLS? • Cordova CommandLine 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
- 20. THIRD-PARTY TOOLS? • MicrosoftVisual Studio Tools for Apache COrdova (TACO) • Intel XDK • Eclipse THyM • AppGyver, GapDebug, many more • Cordova-aware IDEs: Brackets, Dreamweaver, WebStorm & many more
- 21. APP STORES • ACordova application is a Native Mobile application • So, Yes Virginia, Cordova apps can be published in App Stores (even Apple’s)
- 22. ADOBE PHONEGAP • PhoneGapis just a distribution of Cordova, but they are not synonyms • Adobe added on some additional features on top: • PhoneGap Build Service • Hydration • PhoneGap Developer App • PhoneGap Enterprise • Integration with Dreamweaver & other Adobe tools • Commercial Product Support Which to use: Cordova or PhoneGap (http://www.informit.com/articles/article.aspx?p=2478076)
- 23. ANATOMY OF ACORDOVA APPLICATION
- 24. HELLO WORLD (SIMPLE) <!DOCTYPEHTML> <html> <head> <title>Hello World</title> </head> <body> <h1>Hello World</h1> <p>This is a simple web application</p> </body> </html>
- 25. HELLO WORLD (INTERESTING) <!DOCTYPEhtml> <html> <head> <script type="text/javascript" charset="utf-8“ src="cordova.js"></script> <script type="text/javascript" charset="utf-8"> function onBodyLoad() { document.addEventListener("deviceready", onDeviceReady, false); } function onDeviceReady() { navigator.notification.alert("Cordova is ready!"); } </script> </head> <body onload="onBodyLoad()"> <h1>Hello World</h1> <p>This is a sample Cordova application.</p> </body> </html>
- 26. THE CORDOVA APIS •Originally custom APIs created by the dev team • Inconsistently implemented across mobile platforms • Migrated (where possible) to implementations of device-specific APIs based on formal standards (WWWC, Device APIs Working Group and so on) • APIs not implemented on platforms where the capability already exists in the browser • APIs removed from a platform when the platform adds the API to the browser • APIs could be maintained after formal standard is abandoned (File API) • Most of the APIs are implemented as plugins (some exist in the core)
- 28. HELLO WORLD (DOESSOMETHING) (PART 1) <body onload="onBodyLoad()"> <h1>Hello World</h1> <p>This is a Cordova application that makes calls to the Cordova Device API.</p> <p id="appInfo">Waiting for Cordova Initialization to complete</p> </body>
- 29. HELLO WORLD (DOESSOMETHING) (PART 2) function onDeviceReady() { //HTML break tag br = "<br />"; //Get the appInfo DOM element var element = document.getElementById('appInfo'); //replace it with specific information about the device //running the application element.innerHTML = 'Cordova Version: ' + device.cordova + br + 'Platform: ' + device.platform + br + 'Model: ' + device.model + br + 'OS Version: ' + device.version; }
- 30. HELLO WORLD (DOES SOMETHING)EXAMPLE
- 31. USING THE CAMERAAPI • First open a terminal window and add the camera plugin to your Cordova application: cordova plugin add cordova-plugin-camera • Next add the following line to your web application’s JavaScript code: navigator.camera.getPicture( successCallback, errorCallback, cameraOptions); • Success and error callback functions deal with results • Camera Options object controls what happens when the picture is taken
- 32. CAMERA OPTIONS Optional parametersto customize the camera settings. var cameraOptions = { quality : 75, destinationType : Camera.DestinationType.DATA_URL, sourceType : Camera.PictureSourceType.CAMERA, allowEdit : true, encodingType: Camera.EncodingType.JPEG, targetWidth: 100, targetHeight: 100, popoverOptions: CameraPopoverOptions, saveToPhotoAlbum: false };
- 33.
- 34. INSTALLATION • Configure oneor more native development environments • Install NodeJS (http://nodejs.org/) • Open a terminal window and type: • npm install –g cordova
- 35.
- 36.
- 37. THE PERCEIVED PROBLEMS WITHHYBRID DEVELOPMENT
- 38. HYBRID PROBLEMS • TheWebView is too slow (it was) • You can’t have a native looking UI in a hybrid app (not true) • You can’t have native controls in a hybrid app (not true, stay tuned)
- 39.
- 40. THE EVOLUTION OFHYBRID
- 41. HYBRID EVOLVES • Foryears, developers have wanted something better than Cordova • Cross-platform development framework that enables them to craft an app for multiple platforms using a single code base • Something that enables them to use their web development skills to build native mobile apps • Something that enables them to have access to native mobile APIs • Something that enables them to build native UIs using web technologies
- 42. OPEN SOURCE, CROSS- PLATFORMMOBILE DEVELOPMENT
- 43. JAVASCRIPT-DRIVEN NATIVE APPS • Nativemobile apps • Native app UI • Coded entirely, or almost entirely, in JavaScript • Don’t rely upon WebViews to display content • Reasonable % of code reusable across platforms (well, sort-of) • Multiple options available to developers • Released under open source license; most are ‘free, but’ frameworks
- 44. APPCELERATOR TITANIUM • Oldesttool in the JavaScript-driven native toolbox • Has wallowed under a multitude of ‘free’ options since 2009 • Commercial product, community edition available at www.appcelerator.org • Code business logic and UI in JavaScript • Abstract away UI code through Alloy MVC framework • Can display content in a WebView if you want • Delivers native apps with native UI performance • Offers their own IDE through Eclipse fork Aptana • Appcelerator really just wants to sell you their mobile development platform
- 45. REACT NATIVE • Facebook’splan to deliver a more consistent interface for, well, Facebook • Open source project led by Facebook, supported by the community • https://facebook.github.io/react-native/ • Limited code re-use • Separate UI APIs for Android vs. iOS • No strings attached, Facebook isn’t trying to sell you anything
- 46.
- 47.
- 48. REACT NATIVE EXAMPLE •Lets look at some code
- 49. NATIVESCRIPT • Open sourceframework from Telerik, available from www.nativescript.org • Code in pure JavaScript or use TypeScript with Angular • JavaScript interface to native APIs (UI and other functionality) • Claims a high % of code reuse • Free, free, totally free! • But, Telerik really just wants to sell you their mobile development platform
- 50.
- 51.
- 52. NATIVESCRIPT EXAMPLE • Letslook at some code
- 53. TABRIS.JS • Native UIextension for Apache Cordova • Implemented as Cordova plugins you add to your project to expose the native UI (similar to Cordova ACE) • Available at https://tabrisjs.com • Basically exposes a set of native UI components through a JavaScript bridge • No tooling (CLI or IDE for example) but there is a cloud build service • Free, free, totally free!
- 54. SUMMARY • Lots ofoptions available to leverage your existing web development skills (well, OK, JavaScript and CSS skills) to build native mobile applications.
- 55. ADJACENT NATIVE APPS •Native mobile applications, but not written in the native tongue • There used to be two options: • Xamarin • RoboVM
- 56. XAMARIN • Ever heardof Mono?
- 57. ADJACENT NATIVE HISTORY •Founders of Mono split from Novell, create Xamarin • Xamarin creates commercial offering designed to simplify mobile development • Customers reluctant to buy because of newness of concept (and company) • Xamarin buys RoboVM • Microsoft buys Xamarin • Xamarin kills RoboVM • Xamarin converts RoboVM development team to Xamarin development • Microsoft open sources everything • Free, free, totally free • Microsoft even bundles Xamarin to Visual Studio Community Edition
- 58. ADJACENT NATIVE • Codeyour app in C# • During compilation, magic happens and out spits a native mobile application • Native app, native performance, native UI • Claims 75% code reuse, independent testing says much, much less • Can abstract cross-platform UI away using Xamarin Forms • Supports • Android • iOS • Windows
- 59.