• Save
Best Practices - Hybrid App Implementation
Upcoming SlideShare
Loading in...5
×
 

Best Practices - Hybrid App Implementation

on

  • 425 views

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

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.

Statistics

Views

Total Views
425
Views on SlideShare
286
Embed Views
139

Actions

Likes
0
Downloads
0
Comments
0

4 Embeds 139

http://www.winwire.com 128
http://www.slideee.com 9
http://www.linkedin.com 1
http://mobilityevolution.blogspot.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Best Practices - Hybrid App Implementation Best Practices - Hybrid App Implementation Presentation Transcript

  • © 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 View slide
  • © 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 View slide
  • © 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 Web content inside of a native app container or wrapper Hybrid App
  • © 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
  • © 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 Android Phones & 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, 2014 Time: 9 am PT
  • © 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