Embed Size (px)
DESCRIPTION
Mobile adoption is growing at an exponential rate and organizations are rushing to create apps for customers and for use within the business. Many companies have an oversight to recognize mobile platforms as a new business model, and are trying to replicate their online presence on mobile applications. On the other hand, to improve upon the mobile app experience, some businesses are building native apps that are specific to a variety of different operating systems and devices. However, coming years belong to hybrid apps that combine the use of native programming with HTML, JavaScript, and CSS, which are delivered in a native shell to specific types of devices. Despite the fact that it's hard to weave the interface between native and HTML together in a seamless way, popularity of hybrid applications that blend native and web coding is increasing. Session slides from our informative webinar that provides insights into choosing the best approach from native, web or hybrid methodologies, and also shares best practices for developing hybrid mobile applications.
Citation preview
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
Best Practices: Hybrid App Implementation
@WinWire
Wired2Win Webinar Series
© 2010 WinWire Technologies
Who We Are
IT solutions company making information actionable for the enterprises in the
mobile-cloud world
Collaborative and Analytics solutions leveraging pre-built
solution accelerators
Cloud,
Collaboration & Analytics Technologies
Mobility,
© 2010 WinWire Technologies
© 2010 WinWire Technologies
Agenda
• Hybrid App: An Introduction
• Comparing Web, Native and Hybrid Development Approach
• Hybrid App Architecture: Web View & Native Wrapper Integration
• Performance Optimization
• Native/Web View Communication
• Benefits and Best Practices of Hybrid Application Development
© 2010 WinWire Technologies
© 2010 WinWire Technologies
Hybrid App: An Introduction
A mobile app that primarily relies on providing functionality by running web app or displaying Webcontent inside of a native app container or wrapper
Hybrid App
© 2010 WinWire Technologies
Hybrid App
WebContent
HTML5 Web pages just displaying
information
Interactive HTML5/JavaScript
web pages that also include app functionality
WebApplication
Content & App functionality can
reside on the local mobile device or fetched from a
remote server on an as-needed basis
Remote& Local
Content-intensive apps such as newspapers,
magazines, support forums, etc.
OptimalUsage
© 2010 WinWire Technologies
© 2010 WinWire Technologies
Comparison
Native
App functionality is built around native device mobile programming languages
100% HTML5 mobile app without any native components
Mobile Web
Contains no native components and embeds web & own web extensions (HTML5/CSS/JavaScript) into a native
shell
Hybrid Framework
(Phone Gap, Sencha Mobile)
Extended Native App to contain Web or Hybrid Framework components
100% Native?
Objective C Java C#
© 2010 WinWire Technologies
© 2010 WinWire Technologies
Web View
All Web content/app runs
inside of Web Views within a
Native Wrapper/Container
© 2010 WinWire Technologies
Web View
Uniform Web content display within each defined Web View
Uniform Web page display across devices and browsers with no change to the code base
Responsive Web Design
Optimal viewing experience
Easy reading & navigation
Minimum resizing, panning & scrolling
© 2010 WinWire Technologies
Web View
Multi Platform Support
Leveraging Hybrid App for Multi-platform
Support
Container is written in Native mobile language
HTML5 Web components can be reused across platforms without customization
Objective C Container + HTML5 Java Container + HTML5 C# Container + HTML5
Leveraging Hybrid App for Cross-platform
Support
Container is written in Cross-platform tool, only ONCE
HTML5 Web components can be reused across platforms without customization
+ +OR
© 2010 WinWire Technologies
Web View
Multi Form Factor Support
iPhone
5: 1136×640
4S: 640×960
1st & 2nd generations: 1024×768
3rd generation: 2048×1536
iPad
1024×768
iPad Mini
For various Screen Sizes:
Small: 426dp x 320dp
Normal: 470dp x 320dp
Large: 640dp x 480dp
Extra-large: 960dp x 720dp
AndroidPhones
& Tablets
Responsive Web Design enables support across many form factors without a need to rewrite HTML5 code
© 2010 WinWire Technologies
© 2010 WinWire Technologies
Performance Optimization
Responsive Web Design
Functionality
Graphics
Data Access
Faster performance
Tighter feature integration with the device
Implementation & access to complete set of device-specific functionality
Graphic-intensive pages tend to render slowly in HTML
Require bandwidth to be accessed from remote server
Animation is optimized within native view
Remote content access for dynamically generated HTML pages
Use Local HTML access for static content
Optimize Data Access
© 2010 WinWire Technologies
© 2010 WinWire Technologies
Native/Web View Communication
Web view component is weaved along with native components
for seamless functioning
Separate functional entity consisting of HTML, JavaScript
and CSS to send requests, fetch, and display the response
To-and-fro communication with native app to allow users to
control the web view from the native and vice versa.
Native/Web View Communication
Cross platform Web View Functionality
© 2010 WinWire Technologies
Native to Web View
Direct Web View API Invocation
© 2010 WinWire Technologies
Native to Web View: Dos & Don’ts
Dos
Facilitate direct communication for opening URLs
Implement navigation methods using native UI components
Native aspects to be at the top and bottom and the web view to be in between these
Don’ts
Creating a web view subclass to add an address bar and navigation controls
Placing native controls on top of the web view to perform actions
Using mobile devices for controlling the web view
© 2010 WinWire Technologies
Web View to Native
Direct Web View API Invocation
Web View Event Captures
© 2010 WinWire Technologies
Web View to Native: Dos & Don’ts
Dos
Implement event listeners for commonly used events
Implement events like swipe event, if user is notified of registration of swipe event
Don’ts
Implementing all event listeners without looking into the effects
Implementing events counter-intuitively
© 2010 WinWire Technologies
JavaScript Injections
© 2010 WinWire Technologies
JavaScript Injections: Dos & Don’ts
Dos
Use ‘evalJS’ carefully to extract content out of the loaded web page in the web view
Think of using ‘evalJS’ only as a last resort
Don’ts
Injecting JavaScript event listeners for events like scrolling, single tap
Using ‘evalJS’ as the only means to develop the app that requires web view and native communication
Injecting very long JavaScript; injecting JavaScript into the web view wherever possible
Exercise caution when trying to inject JavaScript into the web view on different platforms
© 2010 WinWire Technologies
© 2010 WinWire Technologies
App Store Discoverability
Single Codebase Development Cost
Optimization
HTML5 Developer Ubiquity
Native Mobile Device-Specific Functionality
Rapid Development Cycle
Maintenance Cost Optimization
Benefits
© 2010 WinWire Technologies
Non-Native UI Interface: Not as Attractive
Native UI Performance Superior
Platform Variations for Web View
Implementation
Latency in Fetching Remote HTML Content
Extensive Native/Web Data Integration
Non-Streamlined Coding – Patchwork Under the
Hood
Challenges
© 2010 WinWire Technologies
Best Practices
Color Scheme consistency with Web Content
Avoids a Patchwork on the Presentation Layer
‘Illusion’ of Single App; not an App within App
Color Scheme
Cache Web Content
Minimizes Latency on Server Content
Allows for Offline Content Viewing
Content Search Functionality in Native View
Improves Search Return Performance
Device-specific function integration into Search
Mobile-Specific Features within Native App
Push Notification Settings
Calendar Synchronization Switch
Content
Search Mobility
© 2010 WinWire Technologies
Join us for our Next Webinar on Wired2Win Webinar Series!
Date: 15 May, 2014Time: 9 am PT
© 2010 WinWire TechnologiesWinWire Technologies, Inc. ConfidentialWinWire Technologies, Inc. Confidential
Reach out to us at [email protected]
Visit us: www.winwire.com
http://www.winwire.com/winwire-blog/
www.twitter.com/winwire
Thank You
