1. Hybrid Mobile Applications
Spencer Gray

2. 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

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

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

5. 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

6. 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

7. Getting Started Install Node JS
Download the ionic cordova packing using npm at the command line:
Initialize a project from a template:

8. 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

9. 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

10. 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:
Create a new project:
Select a new Xamarian.Forms project
Everything else will happen automatically

11. 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

12. 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

13. Getting Started Step 1: Install PhoneGap Desktop Client (recommended)-
Easy to follow instructions for both Mac and PC (both have installers)
Step 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

14. 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

15. 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

16. Getting Started Step 1: Install the 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!

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

18. 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)

19. 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:
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!

20. 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

21. 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)

22. 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:
For core, clone the Kendu UI Github repository: 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!

23. 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

24. 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

25. Getting Started
Step 1: Download the free trial
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

26. 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

27. 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)

28. 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)

29. 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

30. 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

31. 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

32. 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

33. 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

34. References
platform/getting_started/introduction_to_mobile_development/
.html