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
consumer experience
• Rising demand due to device
adoption
into this space
channels
• Future Devices
(View Source)

Business Drivers
consumer experience
• Rising demand due to device adoption
into this space
channels
• Future Devices
(View Source)

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 APPWEB APP HYBRID APP NATIVE APP3 STRATEGIES

WEB APP HYBRID APP NATIVE APPWEB 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
1
Yes
Yes
Yes
Yes
No
Limited
Moderate
Moderate
Limited
Minimal
Fast
Easy
No
Multiple
No
Limited
No
Yes
Yes
Yes
Fast
Yes
Full
High
Slow
Very Difficult
Yes
1
Yes
Yes
Yes
Yes
Yes
Yes
Moderate
Yes
Moderate
Moderate
Moderate
Advanced
Yes

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 APPLICATIONHYBRID APPLICATIONHYBRID 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
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
COMPLETE
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
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
COMPLETE
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%

Overall Strategy
• Performance
• UI/UX
• Functionality
• Security
• Challenges
Maintain performance through good development practices and
continue to improve through development cycles.
TIMELINE
COMPLETE
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%

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
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
File
Geolocation
Globalization
Touch Gestures
Media
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
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
BUDGET
$

Overall Strategy
• Performance
• UI/UX
• Functionality
• Security
• Challenges
RESOURCES
BUDGET
$
(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 POWERMEDIUM POWERLOW 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 ApproachTraditional Approach

Next Steps
• Apply “Mobile First” techniques to achieve Maximum Performance
• Define more detailed business requirements
• Add/ Edit/ Critique this plan

Web App VS. Hybrid App VS. Native App?

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (19)

Similar to Web App VS. Hybrid App VS. Native App?

Similar to Web App VS. Hybrid App VS. Native App? (20)

Recently uploaded

Recently uploaded (20)

Web App VS. Hybrid App VS. Native App?