Hybrid Mobile Applications Spencer Gray

Motivation-Why Use Them? Save money Most hybrid mobile applications use web based languages/markup Web based developers cost less to employ than native developers Save time Write one app and build it for each platform (IOS, Android, Windows, etc) No need to retrain developers who already know web based languages

Overview I will cover the following frameworks: Ionic Xamarin Phonegap Intel XDK Framework7 KendoUI Sencha Touch Onsen UI

Overview For each framework, I will describe: Brief background Strengths Weaknesses How to get started My own conclusions about when to use each framework

Angular2 Apache Cordova HTML5 Sass Open Sourced, licensed under MIT Ability to interface with 120 native device features (camera, Bluetooth, etc) Command Line Interface to build, test, and deploy Testing can be done in a web browser, virtual device, or real device

Strengths: Weaknesses Free to use Easy to learn Live Reload (saving in your text editor will propagate changes immediately) Good community and documentation Weaknesses Still a few bugs without work arounds Allows you to test in a web browser-renders very differently than virtual devices People are too tempted to use this option Huge difference in styling Performance

Getting Started Install Node JS https://nodejs.org/en/download/ Download the ionic cordova packing using npm at the command line: Initialize a project from a template:

Open Sourced licensed under MIT Develop using C# Open Sourced licensed under MIT Only became open source in 2016 when purchased by Microsoft Ability to use Objective-C, Java, C, and C++ 3rd party libraries

Strengths Weaknesses Open sourced and free to use Available for free in Visual Studios Higher performance than other hybrid frameworks Weaknesses Developers must learn C# Xamarin apps take up more memory on devices

Getting Started Go to the Xamarin website and download Xamarin with Visual Studios If you already have Visual Studios, it will simply add it to your installation Visual Studios Community is free Link: https://www.xamarin.com/download Create a new project: Select a new Xamarian.Forms project Everything else will happen automatically

Most popular cross-platform framework for mobile hybrid app development Created and maintained by Adobe Open source CSS3 + HTML5 + JavaScript Works by embedding the HTML5 code inside a native WebView on the device

Strengths Weaknesses Open sourced and free to use Uses web languages (easy for web devs to learn) PhoneGap will compile and build your apps on their cloud Large, helpful community Weaknesses Performance Even though it is open sourced, it is difficult to add new functionality

Getting Started Step 1: Install PhoneGap Desktop Client (recommended)- http://docs.phonegap.com/getting-started/1-install-phonegap/desktop/ Easy to follow instructions for both Mac and PC (both have installers) Step 2: Install Mobile App http://docs.phonegap.com/getting-started/2-install-mobile-app/ Install an app on your phone that allows you to preview and test your apps as you develop them Step 3: Create a new project and start to code! Either drag and drop existing folders or start from a template

Originally built for hybrid mobile apps Launched by Intel in 2013 Originally built for hybrid mobile apps Focus has been shifted to IoT development Coding takes place in an Intel IDE Shipped to PhoneGap or Cordova for building Would not recommend starting a hybrid app with this framework Useful to learn because of legacy applications Not open sourced

Strengths Weaknesses Free to use Easy to integrate IoT devices with apps Easy to interface with various sensors to create quick prototypes Can run XDK code on real device without a full build Weaknesses New development with XDK focuses only on IoT Servers dedicated for building the apps has been deprecated Not open sourced

Getting Started Step 1: Install the XDK https://software.intel.com/en-us/intel-xdk Step 2: Install App Preview on your test device Download from your phones native app store Step 3: Open a sample app or a template and begin to code!

Free and open sourced licensed by MIT Comes with many prebuilt “widgets” Focuses on quick prototyping development Very small learning curve

Strengths Weaknesses Free to use Useful for rapid prototyping development Easy to learn Provides support for caching, browser history, hardware accelerated animations Weaknesses Only builds for Android and IOS (no Windows phones) Not widely used(hard to find answers to your questions when you get stuck)

Getting Started Step 1: Download and Install Framework7 On a Mac type at the command line: bower install framework7 On a PC clone/download the Github repository at: https://github.com/framework7io/Framework7 Step 2: Download and Install NodeJS This has been described earlier in the presentation Needed to install the npm package gulp for building your project Step 3: Start coding! Framework7 has a sample “Hello World” app on their website No template builder – you will have to copy and paste the code yourself!

HTML 5 framework relying heavily on jQuery Integrates with Angular, React, and Bootstrap frameworks Free and open sourced Some widgets and technical support features are only available for a paid account Built and maintained by the company Terlerik

Strengths Weaknesses Offers professional support Mostly based on jQuery – easy and cheap to learn ~60% of websites use jQuery Most existing jQuery plugins will work with KendoUI Weaknesses Not all features are free to use Documentation is difficult to understand (they want you to pay for tech support)

Getting Started Step 1: Download and Intall Kendo UI Two options: Kendo UI Core or Kendo UI Professional Professional costs money (30 day free trial, though) Core is free For professional, create an account: https://www.telerik.com/login/v2/telerik For core, clone the Kendu UI Github repository: https://github.com/telerik/kendo-ui- core Step 2: Start Coding! The Kendo UI code you just downloaded just needs to be included in your project’s source code You just need a few include statements in your source code for the CSS and JavaScript Kendo UI files KendoUI takes care of the rest!

Top professional (paid) hybrid development framework No free version Enterprise-grade product HTML 5 and JavaScript Top professional (paid) hybrid development framework Packs ready to use widgets for Android, IOS, Windows, and Blackberry “Drag and Drop” User Interface builder Easy to create and integrate custom components across all of a companies apps Three tiers of pricing: Standard, Pro, Premium for up to 5 developers Standard-$4,340 per year Pro-$6,280 per year Premium-$9,190 per year

Strengths Weaknesses Rapid development Built in styling, debugging, and data analytics tools Weaknesses Expensive to purchase software Not open sourced Integrates with other expensive Sencha products

Getting Started Step 1: Download the free trial https://www.sencha.com/products/evaluate/ Sencha Touch is bundled with Sencha’s main project Ext JS Can be downloaded and run for 30 days for free Step 2: Create a new project Create a new directory for your project Enter at the command line: sencha -sdk /path/to/touch generate app MyApp . “/path/to/touch” needs to be the path to where you downloaded the trial This will generate a new app in your directory called MyApp Step 3: Decide if Sencha Touch is worth buying

Open source under Apache license Provides framework agnostic UI components Doesn’t matter if you are using Angular, Angular2, React, etc Very similar to Ionic Write apps with HTML5 and JavaScript, build with Cordova

Strengths Weaknesses Neutral Free and open sourced Very flexible with the JS front end framework you want to use Weaknesses Still very new, so there is not much community support Neutral Performance - cited to be better than Ionic, but worse than Xamarin (speed wise, not looking at memory usage)

Getting Started Step 1: Install and create a new project with your choice of front end framework Angular, Angular2, React, etc. Step 2: In your project, include the web hosted versions of OnsenUI Step 3: Build using Cordova or Monaca (recommend, built by Onsen UI) https://monaca.io/register/start.html

Conclusions-Which framework is best? It depends! Type of project? School project Prototype Main product Type of developer? Languages known Team vs individual Timeframe? Quick and easy vs slow and performance driven Company type? Large corporation vs small startup

Conclusions-Which framework is best? Type of project? School project-OnsenUI Free to use quick to implement use what frontend framework you are most comfortable with Prototype-Ionic Strong community presence Main product Native Application Sencha Touch Affordable for large company Provides metrics that other frameworks do not

Conclusions-Which framework is best? Type of developer? Familiar with C#? Xamarin Familiar with web based languages? Ionic, Phonegap, Intel XDK, Framework7, KendoUI, Sencha Touch, Onsen UI Individual Ionic Huge community to help you when you get stuck Team Sencha Touch Tons of team based features for easy code sharing

Conclusions-Which framework is best? Timeframe? Very small- Framework7 Designed for lightning quick development A few months- Any of the web based frameworks Long term project Sencha Touch Expensive to use, so use it for projects that make the investment worth the price Xamarin Learning C# could take a while

Conclusions-Which framework is best? Company Type? Small, startup Any of the open sourced frameworks Ionic, Xamarin, Phonegap, Intel XDK, Framework7, KendoUI, Onsen UI Large corporation Sencha Touch Expensive, but worth it for the extra features it provides Native application Chances are you have developers with native application experience You have the time to create different apps for IOS, Android, and Windows phones

References https://blog.jscrambler.com/10-frameworks-for-mobile-hybrid-apps/ https://ionicframework.com/getting-started https://developer.xamarin.com/guides/cross- platform/getting_started/introduction_to_mobile_development/ https://phonegap.com/getstarted/ https://software.intel.com/en-us/xdk/docs/intel-xdk-introduction https://framework7.io/get-started/ https://www.telerik.com/kendo-ui/getting-started https://docs.sencha.com/touch/2.4/getting_started/building_your_first_app .html https://onsen.io/v2/guide/#getting-started