Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Best Practices - Hybrid App Implementation


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
  • My brother found Custom Writing Service ⇒ ⇐ and ordered a couple of works. Their customer service is outstanding, never left a query unanswered.
    Are you sure you want to  Yes  No
    Your message goes here
  • Unlock Her Legs(Official) $69 | Get 90% Off + 8 Special Bonus? ➤➤
    Are you sure you want to  Yes  No
    Your message goes here
  • ★★ How Long Does She Want You to Last? ★★ A recent study proved that the average man lasts just 2-5 minutes in bed (during intercourse). The study also showed that many women need at least 7-10 minutes of intercourse to reach "The Big O" - and, worse still... 30% of women never get there during intercourse. Clearly, most men are NOT fulfilling there women's needs in bed. Now, as I've said many times - how long you can last is no guarantee of being a GREAT LOVER. But, not being able to last 20, 30 minutes or more, is definitely a sign that you're not going to "set your woman's world on fire" between the sheets. Question is: "What can you do to last longer?" Well, one of the best recommendations I can give you today is to read THIS report. In it, you'll discover a detailed guide to an Ancient Taoist Thrusting Technique that can help any man to last much longer in bed. I can vouch 100% for the technique because my husband has been using it for years :) Here's the link to the report ➤➤
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

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 Visit us: Thank You