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.

1. © 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
Best Practices: Hybrid App Implementation
@WinWire
Wired2Win Webinar Series

2. © 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,

3. © 2010 WinWire Technologies

4. © 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

5. © 2010 WinWire Technologies

6. © 2010 WinWire Technologies
Hybrid App: An Introduction
A mobile app that primarily relies on providing
functionality by running web app or displaying Web
content inside of a native app container or wrapper
Hybrid App

7. © 2010 WinWire Technologies
Hybrid App
Web
Content
HTML5 Web pages
just displaying
information
Interactive
HTML5/JavaScript
web pages that also
include app
functionality
Web
Application
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.
Optimal
Usage

8. © 2010 WinWire Technologies

9. © 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#

10. © 2010 WinWire Technologies

11. © 2010 WinWire Technologies
Web View
All Web
content/app runs
inside of Web
Views within a
Native
Wrapper/Container

12. © 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

13. © 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

14. © 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
Android
Phones
& Tablets
Responsive Web Design enables support across many form factors without a need to rewrite HTML5 code

15. © 2010 WinWire Technologies

16. © 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

17. © 2010 WinWire Technologies

18. © 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

19. © 2010 WinWire Technologies
Native to Web View
Direct Web View API Invocation

20. © 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

21. © 2010 WinWire Technologies
Web View to Native
Direct Web View API Invocation
Web View Event Captures

22. © 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

23. © 2010 WinWire Technologies
JavaScript Injections

24. © 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

25. © 2010 WinWire Technologies

26. © 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

27. © 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

28. © 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

29. © 2010 WinWire Technologies
Join us for our Next Webinar on Wired2Win Webinar Series!
Date: 15 May, 2014
Time: 9 am PT

30. © 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
WinWire Technologies, Inc. Confidential
Reach out to us at marketing@winwire.com
Visit us: www.winwire.com
http://www.winwire.com/winwire-blog/
www.twitter.com/winwire
Thank You