mobile app development hybrid vs native

Hybrid vs. Native

Mobile App Development

Outline

Mobile development today Native and Hybrid app development overviews Intro to Cordova and Ionic Reasons for going Hybrid Reasons for going Native Real-world demo Conclusion and product information

Mobile Application Development

Mobile Web Sites• Web languages:

JavaScript, HTML5, CSS

Native Applications • iOS App: Objective C /

Swift • Android: Java• Windows Phone (UWP):

C#

Hybrid Apps • Mix of web and native

approach• Native app-like

experience: Ionic Cordova (Hybrid)

Web Application Development

Desktop Websites Looks nice on high res / dpi screens Highly feature-rich

Mobile Websites m.google.com / google.com Single domain have logic to control layout

Why aren’t web apps enough?

End users need to open up a web browser and navigate to your site Not available in any App Stores Bound to limitations of browser You’ll need to support every web browser for each OS Doesn’t feel like they are using an app

Two Philosophies of Mobile App Development

Hybrid Web Apps JavaScript/HTML5 web

apps with native wrapper Ionic Cordova

Native App Development Java, Objective C, C# iOS, Android

Hybrid App Development

Web apps execute within native wrapperso Wrappers provide device APIs

Cordova creates Hybrid Web Apps Hybrid Web Apps

o Blends mobile site with native app-like experience o Utilize existing responsive web frameworks o Same code base as desktop and mobile web apps

Native App Development

Apps that target iOS, Android, or Windows Phone Design single screens and navigation between them UI can be built in designer, expressed in markup language, or

generated in code behind Each platform has its own codebase Develop in different IDE’s for each platform

Hybrid App Development

What if we could develop one single code base for our website and still provide a mobile app to our end users… without having to duplicate business logic?

Best of Both Worlds

About Cordova

Free and open source by Apache Allows you to use JS, HTML5, CSS3 for cross-platform

development Avoids each mobile platform’s development language Cordova will create XCode and/or Android Studio

projects You can run the app via the Cordova CLI or launch the

IDE

Where does Cordova fall short?

Interactions, look, and feel are lacking Cordova is simply the engine; you still need to write

your custom UI css files to match platform’s specific look and feel

Basically strips the browser window and gives you a full screen browser view port

…And that’s where Ionic comes in.

About Ionic

Focuses on consistent look, feel, and UI interaction Loosely comparable to BootStrap Heavy on AngularJS actionSheet -> CSS

Advantages of Hybrid

Targets the largest amount of devices with the smallest code base

Creates an App that you can publish in the App Stores

Easier to maintaino Let Cordova, Ionic, and other JavaScript libraries handle

breaking changes

Advantages of Hybrid: Rapid Prototyping

Write one view Run it on all platforms

Chrome

iOS Android

Advantages of Hybrid: Utilize JavaScript Libraries

Shortfalls of Hybrid

Need to hire JS, HTML5, AngularJS developers Look and feel is static (Is it a shortfall?) Performance will never be as good as native Device-specific configurations

o Might require freelance or consulting work Documentation can be lacking

Native App Development

Advantages of Native iOS

Performanceo Highest ceiling for performanceo Natural look and feel

Device Featureso Directly access device features and

services via APIo Easily provide appropriate interfaces

depending on device

Advantages of Native iOS: Development & Debugging Utilize Native IDE and Development tools

o Built-in GIT support Documentation Easier to debug code

o Compiled versus interpreted code $99 a year for iOS Developer Account

Shortfalls of Native iOS

Specific developer skill set required Target only one market Competing languages

Highest development cost

Objective C Swift

Real World Sample

GrapeCity Controls Used in our Demo Apps

Wijmo (Web/Hybrid)

• JavaScript UI Controls • Zero dependencies• Focus on performance• Small core controls and extensible• Offer additional features as optional

extensions

(Native)

Native iOS and Android controls Uses the same API across all platforms Focus on touch first experience Provides expressive animations for loading,

updating, and selecting data

Conclusion: Which Solution is Best?

It depends on your needs.

Hybrid Low barrier to entry Least expensive to

develop Biggest target market

and audience

Native Best end user

experience Requires most specific

developer skills Most expensive to

develop and maintain Targets single market

Contact Information

Wijmo Forumswww.wijmo.com/forums/

Xuni Forumswww.goxuni.com/forums/

Ross DedererDeveloper Relationsross.dederer@grapecity.com

Kelley RickerDeveloper Relationskelley.ricker@grapecity.com