Web App VS. Hybrid App VS. Native App?

B2B Mobile/ Tablet Integration Prepared by Justin O’Neill, George Pinkosky, and Omar Soberanis

Objectives

1. Business Drivers 2. Development Options 3. Architecture Recommendations 4. Overall Strategy (Crawl, Walk, Run) 5. Best Practices 6. Next Steps 7. QA

Business Drivers

• Commerce From Anywhere

• Native Functionality

• Harness loyalty and increase purchases through an enhanced consumer experience

• Rising demand due to device adoption

• Competition is moving very quickly into this space

• Consistent experience across channels

• Future Devices

Business Drivers

• Future Devices

Business Drivers

• Future Devices

Business Drivers

• Future Devices

(View Source)

Business Drivers

• Future Devices

(View Source)

Business Drivers

• Future Devices

(View Source)

Business Drivers

• Future Devices

(View Source)

Business Drivers

• Future Devices

Business Drivers

• Future Devices

Development Options

BROWSER CONTROL

Traditional software application that runs inside a web browser that supports programming languages such as JavaScript, HTML 5, and CSS 3. Responsive Design can be applied with limited device functionality. • One Code Base

• Medium Performance

• Minimal Difficulty

• Minimal Costs

• Minimal Maintenance

NATIVE CONTROL

Written for a specific hardware platform and will always run faster than a Web app, because there is no translation processing taking place. However, you must use device specific programming languages. • Multiple Code Bases

• High Performance

• High Difficulty

• High Costs

• High Maintenance

BROWSER + NATIVE CONTROL

Provides everything that is capable with a Web-App and the taste of native application functionality. It wraps the Mobile Web Storefront with a native shell allowing you to deploy into the app stores. • One Code Base

• Medium Performance

• Medium Difficulty

• Medium Costs

• Medium Maintenance

WEB APP HYBRID APP NATIVE APP WEB APP HYBRID APP NATIVE APP 3 STRATEGIES

WEB APP HYBRID APP NATIVE APP WEB APP HYBRID APP NATIVE APP

Development Options

FEATURE

Code Bases

Server Side Updates

Web Technologies

Responsive Design

Touch Gestures

Feels Like App

Native Functionality

Performance

Offline Capability

User Experience

Development Cost

Development Process

Difficulty Level

App Store Deployment

Limited

Moderate

Limited

Minimal

Multiple

Limited

Very Difficult

Moderate

Advanced

Architecture Recommendation

Why? • Native applications are the most expensive and inflexible technologies.

• Hybrid Applications have the potential to work across multiple browsers and

platforms with 1 code base.

• Hybrid Applications combine the best features of the web w/ native ability,

and are common in many mobile applications today.

• Based on the industry trend and technological considerations our primary

recommendation is to start with a Responsive Design Web-App, Move

forward to Hybrid App via Phone Gap, then deploy to the different

marketplaces.

• The web is quickly moving forward in a universal direction- Compatibility,

Performance, UI/UX, and Functionality is advancing at a rapid pace.

HYBRID APPLICATION HYBRID APPLICATION HYBRID APPLICATION

Overall Strategy

OBJECTIVE Finish the responsive Web App version of the B2B system and introduce to a limited number of “mobile/ tablet” customers. Intent is to have system in place that can be used to test market users while team develops end to end mobile use cases.

Overall Strategy

OBJECTIVE: Further the current “mobile/ tablet” experience by adding device specific functionality while pushing for a more “app like” UI/UX experience. The objective is to create a rich hybrid application for the business to distribute to the major mobile and tablet players with access to mobile browsers.

Overall Strategy

OBJECTIVE: Deployment of rich hybrid application to multiple app marketplaces including iPhone, Android, Windows, and BlackBerry. Objective is to distribute this rich hybrid application through all major channels while continuing to add features and support.

Overall Strategy

• Current B2B Status

• Architecture Overview

• Performance

• UI/UX

• Functionality

• Security

• Resources/ Budget

• Challenges

Overall Strategy

• Performance

• UI/UX

• Functionality

• Security

• Challenges

Overall Strategy

• Performance

• UI/UX

• Functionality

• Security

• Challenges

Overall Strategy

• Performance

• UI/UX

• Functionality

• Security

• Challenges

Overall Strategy

• Performance

• UI/UX

• Functionality

• Security

• Challenges

Overall Strategy

• Performance

• UI/UX

• Functionality

• Security

• Challenges

Overall Strategy

• Performance

• UI/UX

• Functionality

• Security

• Challenges

Overall Strategy

ENTERPRISE

SERVICE LAYER

RESPONSIVE DESIGN

Desktop UI Tablet UI Mobile UI

ENTERPRISE

SERVICE LAYER

RESPONSIVE DESIGN

• Performance

• UI/UX

• Functionality

• Security

• Challenges

Overall Strategy

ENTERPRISE

SERVICE LAYER

RESPONSIVE DESIGN

HYBRID APP

App UI Touch Gestures Native Functionality

ENTERPRISE

SERVICE LAYER

RESPONSIVE DESIGN

HYBRID APP

• Performance

• UI/UX

• Functionality

• Security

• Challenges

Overall Strategy

ENTERPRISE

SERVICE LAYER

RESPONSIVE DESIGN

HYBRID APP

App UI Touch Gestures Native Functionality

MARKETPLACE DEPLOYMENT

Apple Android Windows BlackBerry

ENTERPRISE

SERVICE LAYER

RESPONSIVE DESIGN

HYBRID APP

MARKETPLACE DEPLOYMENT

• Performance

• UI/UX

• Functionality

• Security

• Challenges

Overall Strategy

• Performance

• UI/UX

• Functionality

• Security

• Challenges

TIMELINE

The current status of the B2B system is at a critical point.

Performance must be brought up to a higher level before we

can move forward to smaller devices.

Overall Strategy

• Performance

• UI/UX

• Functionality

• Security

• Challenges

The goal is to get Elite performance up to the highest level possible

before we begin Hybrid development. This is the MOST IMPORTANT

task to accomplish not only for mobile/tablet integration, but for

Elite as a whole.

TIMELINE

Overall Strategy

• Performance

• UI/UX

• Functionality

• Security

• Challenges

Maintain performance through good development practices and

continue to improve through development cycles.

TIMELINE

Overall Strategy

• Performance

• UI/UX

• Functionality

• Security

• Challenges

Maintain performance through good development practices and

continue to improve through development cycles.

TIMELINE

Overall Strategy

• Performance

• UI/UX

• Functionality

• Security

• Challenges

Responsive design has been applied from the beginning of Elite and has been maintained throughout the development cycle. Through market research, the B2B team has chosen 3 specific resolutions to target.

Overall Strategy

• Performance

• UI/UX

• Functionality

• Security

• Challenges

Overall Strategy

•••

• Performance

• UI/UX

• Functionality

• Security

• Challenges

Overall Strategy

••

• Performance

• UI/UX

• Functionality

• Security

• Challenges

Overall Strategy

• Performance

• UI/UX

• Functionality

• Security

• Challenges

Traditional web applications use HTML, CSS, and JavaScript to create dynamic content for all current web browsers and devices that have access to the internet. Although these technologies work completely fine (in most cases) for Mobile Phones and Tablets, they are limited to reaching the devices full native functionality.

Overall Strategy

• Performance

• UI/UX

• Functionality

• Security

• Challenges

By adding PhoneGap to our web application we are able to use JavaScript to access native functionality and cater to Mobile and Tablet user needs.

Accelerometer

Camera

Capture

Compass

Connection

Contacts

Device

Events

Geolocation

Globalization

Touch Gestures

Notification

Splashscreen

Storage

Overall Strategy

• Performance

• UI/UX

• Functionality

• Security

• Challenges

Deploying to the different App Marketplace's gives our Hybrid App even more advantages:

Easy Install Home Screen Icon Full Screen App

Overall Strategy

• Performance

• UI/UX

• Functionality

• Security

• Challenges

Overall Strategy

• Performance

• UI/UX

• Functionality

• Security

• Challenges

Overall Strategy

• Performance

• UI/UX

• Functionality

• Security

• Challenges

Security needs to have an in depth look for the web app, hybrid app, and when deploying to the different app Marketplace’s.

Overall Strategy

• Performance

• UI/UX

• Functionality

• Security

• Challenges RESOURCES

Overall Strategy

• Performance

• UI/UX

• Functionality

• Security

(Unknown)

Overall Strategy

• Performance

• UI/UX

• Functionality

• Security

(Unknown)

Overall Strategy

• Performance

• UI/UX

• Functionality

• Security

• Challenges

Finish responsive Web App version of the B2B system and introduce “mobile/tablet” to

limited customers. Intent is to have system in place that can be used to test market users

while team develops end to end “mobile/tablet” use cases.

• Performance is by far our highest priority- not only for moving forward to Mobile/Tablet integration, but for Elite as a whole

• Clean up the UI/UX and finish the Responsive Layout for Desktop/Tablet/Mobile

• Finish functionality and close user stories

• Fix bugs and close defects

• Security Considerations

Overall Strategy

• Performance

• UI/UX

• Functionality

• Security

• Challenges

Further the current “mobile/tablet” experience by adding device specific functionality while

pushing for a more “app like” UI/UX experience. The objective is to create a rich hybrid

application for the business to distribute to the major mobile and tablet players with

access to mobile browsers.

• Maintain performance through good development practices while continuously looking for ways to improve

• Expand UI by creating VD’s based from “app like” trends, Touch Gestures, and Responsive Design

• Expand User Experience by adding device specific “Native” Functionality

• Business Involvement, Resources/ Expertise, Budget

Overall Strategy

• Performance

• UI/UX

• Functionality

• Security

• Challenges

Deployment of rich hybrid application to multiple app marketplaces including iPhone,

Android, Windows, and BlackBerry. Objective is to distribute this rich hybrid application

through all major channels while continuing to add features and support.

• Maintain performance through good development practices while continuously looking for ways to improve

• Develop a new release management program to manage multiple environments and multiple versions

• Add features/ Bug fixes

• Business Involvement, Resources/ Expertise, Budget

Best Practices

HIGH POWER MEDIUM POWER LOW POWER HIGH POWER MEDIUM POWER LOW POWER

VS In traditional web development (before smart phones and tablets existed), we’ve always developed for 1 platform, the desktop computer. Because of this we have naturally just built for the desktop version of websites. We’ve never had to worry about smaller devices with less performance power. Scaling downward from Desktop to Mobile can sometimes result in bulky apps and can weigh heavily on smaller devices. Performance measures must be taken.

The best way to handle performance is the “Mobile First” approach. This approach is excellent as it forces

developers to write very smart code from the start. “If it doesn’t perform well on

mobile, it won’t perform well on desktop”. When following this method

you force yourself to think about things like Performance, Most Important

Content First, and Scaling Upwards with Progressive Performance enhancements.

Traditional Approach Mobile First Approach

Best Practices

VS • Rapid development to

meet business needs

• “Desktop” Web-App in customers hands quicker

• Amazing performance- “If it doesn’t perform well on mobile, then it won’t on desktop”

• High Focus on Most Important Content First

• Load least important content in background

• Smart Modular Code

• Scaling up is easy

• Less costly

Mobile First Approach

PROS PROS

Traditional Approach

Best Practices

VS • Weaker focus on Most

Important Content

• Weaker focus on performance and smart loading content

• Scaling down is hard and Leads to re-work

• More costly

• Slower “Desktop” web-app development

• Fully functional “Mobile” web-app before “Desktop” web-app

CONS CONS

Mobile First Approach Traditional Approach

Next Steps

• Apply “Mobile First” techniques to achieve Maximum Performance

• Define more detailed business requirements

• Add/ Edit/ Critique this plan

Q&A and Notes

Web App VS. Hybrid App VS. Native App?

Design

How to choose between Hybrid vs. Native Apps - Snappii · Hybrid App development Pros Cons Native App Development Pros Cons Modern MEAP: best of both approaches Mobile Application

Native Apps and Web Apps - JBoss...Native Apps and Web Apps iOS Native App Native App Native App Native App Web App Web App Desktop OSs Desktop Browsers Mobile Browsers Android Blackberry

React Native Vs Ionic - Which One Is a Better Mobile App Development Framework

So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Experience Optimization Meetup

Cloud native app

Native vs Hybrid App Development

Design and Testing of a Mobile Cardiovascular Risk Service ......4.8 vs. 3.1 (p=0.06) days of messaging pharmacists (median 3.5 vs. 3.0, p=0.11) for the native+web app vs web app group

Native vs cross platform vs html5

Native vs Hybrid vs Mobile Web

Native vs hybrid approach Mobile App Development

Native App Vs Hybrid App Development: What To Pick-

Mobile Web vs. Native App

HTML5 Vs Native App Battle [Infographics]

Mobile Web vs Native App

PWA e Hybrid App VS Native

Hybrid vs. Native app - Ionic Framework with AngularJS

Native vs web

Native App + Wep App = ? (Hybrid Applications)

Crossmos Hybrid Mobile Web-apps & Sencha Platform meeting...Hybrid vs Native vs Web Native apps Hybrid apps Web apps Ease of discovery Through native app stores Search on referrals

Hybrid vs Native Mobile App. Decide in 5 minutes!