Web App VS. Hybrid App VS. Native App?
-
Upload
justin-oneill -
Category
Design
-
view
392 -
download
2
Transcript of 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
• 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
• 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
• 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
(View Source)
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
(View Source)
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
(View Source)
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
(View Source)
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
• 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
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
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 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
• Current B2B Status
• Architecture Overview
• Performance
• UI/UX
• Functionality
• Security
• Resources/ Budget
• Challenges
Overall Strategy
• Current B2B Status
• Architecture Overview
• Performance
• UI/UX
• Functionality
• Security
• Resources/ Budget
• Challenges
Overall Strategy
• Current B2B Status
• Architecture Overview
• Performance
• UI/UX
• Functionality
• Security
• Resources/ Budget
• Challenges
Overall Strategy
• Current B2B Status
• Architecture Overview
• Performance
• UI/UX
• Functionality
• Security
• Resources/ Budget
• Challenges
Overall Strategy
• Current B2B Status
• Architecture Overview
• Performance
• UI/UX
• Functionality
• Security
• Resources/ Budget
• Challenges
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
• 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
HYBRID APP
App UI Touch Gestures Native Functionality
ENTERPRISE
SERVICE LAYER
RESPONSIVE DESIGN
HYBRID APP
• 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
HYBRID APP
App UI Touch Gestures Native Functionality
MARKETPLACE DEPLOYMENT
Apple Android Windows BlackBerry
ENTERPRISE
SERVICE LAYER
RESPONSIVE DESIGN
HYBRID APP
MARKETPLACE DEPLOYMENT
• Current B2B Status
• Architecture Overview
• Performance
• UI/UX
• Functionality
• Security
• Resources/ Budget
• Challenges
Overall Strategy
• Current B2B Status
• Architecture Overview
• Performance
• UI/UX
• Functionality
• Security
• Resources/ Budget
• Challenges
!
TIMELINE
CO
MP
LETE
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
• Current B2B Status
• Architecture Overview
• Performance
• UI/UX
• Functionality
• Security
• Resources/ Budget
• 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
CO
MP
LETE
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
Overall Strategy
• Current B2B Status
• Architecture Overview
• Performance
• UI/UX
• Functionality
• Security
• Resources/ Budget
• Challenges
Maintain performance through good development practices and
continue to improve through development cycles.
TIMELINE
CO
MP
LETE
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
Overall Strategy
• Current B2B Status
• Architecture Overview
• Performance
• UI/UX
• Functionality
• Security
• Resources/ Budget
• Challenges
Maintain performance through good development practices and
continue to improve through development cycles.
TIMELINE
CO
MP
LETE
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
Overall Strategy
• Current B2B Status
• Architecture Overview
• Performance
• UI/UX
• Functionality
• Security
• Resources/ Budget
• 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
• Current B2B Status
• Architecture Overview
• Performance
• UI/UX
• Functionality
• Security
• Resources/ Budget
• Challenges
Overall Strategy
•••
• Current B2B Status
• Architecture Overview
• Performance
• UI/UX
• Functionality
• Security
• Resources/ Budget
• Challenges
Overall Strategy
•
•
••
•
•
•
• Current B2B Status
• Architecture Overview
• Performance
• UI/UX
• Functionality
• Security
• Resources/ Budget
• Challenges
Overall Strategy
• Current B2B Status
• Architecture Overview
• Performance
• UI/UX
• Functionality
• Security
• Resources/ Budget
• 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
• Current B2B Status
• Architecture Overview
• Performance
• UI/UX
• Functionality
• Security
• Resources/ Budget
• 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
• Current B2B Status
• Architecture Overview
• Performance
• UI/UX
• Functionality
• Security
• Resources/ Budget
• 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
• Current B2B Status
• Architecture Overview
• Performance
• UI/UX
• Functionality
• Security
• Resources/ Budget
• Challenges
Overall Strategy
• Current B2B Status
• Architecture Overview
• Performance
• UI/UX
• Functionality
• Security
• Resources/ Budget
• Challenges
Overall Strategy
• Current B2B Status
• Architecture Overview
• Performance
• UI/UX
• Functionality
• Security
• Resources/ Budget
• 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
• Current B2B Status
• Architecture Overview
• Performance
• UI/UX
• Functionality
• Security
• Resources/ Budget
• Challenges RESOURCES
BU
DG
ET
$
Overall Strategy
• Current B2B Status
• Architecture Overview
• Performance
• UI/UX
• Functionality
• Security
• Resources/ Budget
• Challenges RESOURCES
BU
DG
ET
$
(Unknown)
Overall Strategy
• Current B2B Status
• Architecture Overview
• Performance
• UI/UX
• Functionality
• Security
• Resources/ Budget
• Challenges RESOURCES
BU
DG
ET
$
(Unknown)
Overall Strategy
• Current B2B Status
• Architecture Overview
• Performance
• UI/UX
• Functionality
• Security
• Resources/ Budget
• 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
• Current B2B Status
• Architecture Overview
• Performance
• UI/UX
• Functionality
• Security
• Resources/ Budget
• 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
• Security Considerations
• Business Involvement, Resources/ Expertise, Budget
Overall Strategy
• Current B2B Status
• Architecture Overview
• Performance
• UI/UX
• Functionality
• Security
• Resources/ Budget
• 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
• Security Considerations
• 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
HIGH POWER MEDIUM POWER LOW POWER HIGH POWER MEDIUM POWER LOW POWER
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
HIGH POWER MEDIUM POWER LOW POWER HIGH POWER MEDIUM POWER LOW POWER
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