Your SlideShare is downloading. ×
0
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
Best Practices: Hybrid App Implementation
@WinWire
Wire...
© 2010 WinWire Technologies
Who We Are
IT solutions company
making information
actionable for the
enterprises in the
mobil...
© 2010 WinWire Technologies
© 2010 WinWire Technologies
Agenda
• Hybrid App: An Introduction
• Comparing Web, Native and Hybrid Development Approach
•...
© 2010 WinWire Technologies
© 2010 WinWire Technologies
Hybrid App: An Introduction
A mobile app that primarily relies on providing
functionality by r...
© 2010 WinWire Technologies
Hybrid App
Web
Content
HTML5 Web pages
just displaying
information
Interactive
HTML5/JavaScrip...
© 2010 WinWire Technologies
© 2010 WinWire Technologies
Comparison
Native
App functionality is built around native
device mobile programming languages...
© 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 acr...
© 2010 WinWire Technologies
Web View
Multi Platform Support
Leveraging
Hybrid App for
Multi-platform
Support
Container is ...
© 2010 WinWire Technologies
Web View
Multi Form Factor Support
iPhone
5: 1136×640
4S: 640×960
1st & 2nd generations:
1024×...
© 2010 WinWire Technologies
© 2010 WinWire Technologies
Performance Optimization
Responsive Web Design
Functionality
Graphics
Data Access
Faster perfo...
© 2010 WinWire Technologies
© 2010 WinWire Technologies
Native/Web View Communication
Web view component is weaved
along with native components
for se...
© 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
Implemen...
© 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
Implem...
© 2010 WinWire Technologies
JavaScript Injections
© 2010 WinWire Technologies
JavaScript Injections: Dos & Don’ts
Dos
Use ‘evalJS’ carefully to extract content out of the l...
© 2010 WinWire Technologies
© 2010 WinWire Technologies
App Store
Discoverability
Single Codebase
Development Cost
Optimization
HTML5 Developer
Ubiqui...
© 2010 WinWire Technologies
Non-Native UI Interface:
Not as Attractive
Native UI Performance
Superior
Platform Variations ...
© 2010 WinWire Technologies
Best Practices
Color Scheme consistency with Web Content
Avoids a Patchwork on the Presentatio...
© 2010 WinWire Technologies
Join us for our Next Webinar on Wired2Win Webinar Series!
Date: 15 May, 2014
Time: 9 am PT
© 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential
WinWire Technologies, Inc. Confidential
Reach out to us...
Upcoming SlideShare
Loading in...5
×

Best Practices - Hybrid App Implementation

598

Published on

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.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
598
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Best Practices - Hybrid App Implementation"

  1. 1. © 2010 WinWire TechnologiesWinWire Technologies, Inc. Confidential Best Practices: Hybrid App Implementation @WinWire Wired2Win Webinar Series
  2. 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. 3. © 2010 WinWire Technologies
  4. 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. 5. © 2010 WinWire Technologies
  6. 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. 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. 8. © 2010 WinWire Technologies
  9. 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. 10. © 2010 WinWire Technologies
  11. 11. © 2010 WinWire Technologies Web View All Web content/app runs inside of Web Views within a Native Wrapper/Container
  12. 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. 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. 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. 15. © 2010 WinWire Technologies
  16. 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. 17. © 2010 WinWire Technologies
  18. 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. 19. © 2010 WinWire Technologies Native to Web View Direct Web View API Invocation
  20. 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. 21. © 2010 WinWire Technologies Web View to Native Direct Web View API Invocation Web View Event Captures
  22. 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. 23. © 2010 WinWire Technologies JavaScript Injections
  24. 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. 25. © 2010 WinWire Technologies
  26. 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. 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. 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. 29. © 2010 WinWire Technologies Join us for our Next Webinar on Wired2Win Webinar Series! Date: 15 May, 2014 Time: 9 am PT
  30. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×