Pragmatic approach to building native apps hybrid way
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Pragmatic approach to building native apps hybrid way

on

  • 486 views

 

Statistics

Views

Total Views
486
Views on SlideShare
476
Embed Views
10

Actions

Likes
2
Downloads
3
Comments
0

1 Embed 10

http://www.slideee.com 10

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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

Pragmatic approach to building native apps hybrid way Presentation Transcript

  • 1. Pragmatic approach to building native apps – Hybrid Way Priyank Gupta Mar 2014
  • 2. 2 Devices move with YOU Definition of mobile is rapidly evolving
  • 3. 3 Challenges for New Platform Apps and Developer Community Patent Wars Ripe Competition OS Fragmentation
  • 4. 4 Web support In platforms
  • 5. 5 Technical Challenges Business
  • 6. 6 Lets bridge the gap
  • 7. 7 A typical hybrid architecture JavaScript objects in WebView Fragment with Webview WebView in activity Reusable HTML and JS inside WebViews Native Web Fat logic Platform APIs exposed via Native interface Native Platform APIs
  • 8. 8 A curious case of Minty’s café Gather ingredients 1 Take orderLookup recipe Cook Taste Pass the dish Plate the dish 2 3 4 5 6 6 Serve 7 请问王 André Minty the Chef
  • 9. 9 Minty’s café to hybrid apps Fetch data by http 1 User requestBusiness logic Processing Validations Call with data to render Build native UI 2 3 4 5 6 6 Show on screen 7 IOS Android JSON HTML and Native Bridge
  • 10. 10 A bridge implementation Android bridge between JavaScript engine and native views method 1 method 1 method 2 method 2 Java Activity Fat logic Thin native views Bridge JavaScript Hidden Fragment with Webview Hidden WebView in activity JS engine like Mozilla Rhino Native Web
  • 11. 11 A bridge implementation method 1 method 1 method 2 method 2 Page Object Fat logic Bridge JavaScript Hidden Fragment with Webview Hidden WebView in activity JS engine like Mozilla Rhino Reusable HTML and JS inside WebViews Android bridge between JavaScript engine and reusable web views Native Web
  • 12. 12 A bridge implementation method 1 method 1 method 2 method 2 Java WebView Activity Fat logic Bridge JavaScript Hidden Fragment with Webview Hidden WebView in activity JS engine like Mozilla Rhino Reusable HTML and JS inside WebViews Reusing HTML & JS for mobile web app Native Web
  • 13. 13 Show me how!?
  • 14. 14 Experience Native App in Play store Mobile web app http://tinyurl.com/btplay http://tinyurl.com/bloodtorrent
  • 15. 15 Quick demo
  • 16. 16 Menu Page Button click in either triggers a changePage event via bridge Does native image manipulation for circular image with boundary. Organizes pages with single page architecture to stay responsive
  • 17. 17 Donation listing page Both uses bridge and controller to make http call with location to fetch donation list Uses two different fragments to show map and page slider at bottom Uses web browser api to request user location in javascript code
  • 18. 18 New donation request page Validations, persistence and business logic is applied by common controller and bridge Uses native components to capture different input values HAML views are reused across most pages via layouts and templates
  • 19. 19 App is open source Links to https://github.com/priya aank/bloodtorrent
  • 20. 20 Patterns for reuse with bridge
  • 21. 21 Model View View Model “Model View ViewModel is a specialized case of Presentation Model Pattern. Presentation Model is defined as the state and behavior of the presentation independent of the GUI controls used in the interface” • Pulls view behavior in a model class that is part of presentation • Presentation Model may interact with several domain objects, but Presentation Model is not a GUI friendly facade to a specific domain object. Courtesy: Presentation Model bliki by Martin Fowler
  • 22. 22 A bridge implementation Android bridge between JavaScript engine and native views method 1 method 1 method 2 method 2 Java Activity Fat logic Thin native views Bridge JavaScript Hidden Fragment with Webview Hidden WebView in activity JS engine like Mozilla Rhino Native Web
  • 23. 23 MVVM based hybrid apps Logic UI NativeHTML Logic UI Feature in an app
  • 24. 24 Page Object • Object encapsulates the internals of a view from external consumers • Provides API for external world to interact with page in a consistent way “The Page Object pattern represents the screens of your web app as a series of objects” ~ Selenium Wiki
  • 25. 25 Coming back to bridge in Android method 1 method 1 method 2 method 2 Page Object Fat logic Bridge JavaScript Hidden Fragment with Webview Hidden WebView in activity JS engine like Mozilla Rhino Reusable HTML and JS inside WebViews Android bridge between JavaScript engine and reusable web views Native Web
  • 26. 26 And bridge in web app method 1 method 1 method 2 method 2 Java WebView Activity Fat logic Bridge JavaScript Hidden Fragment with Webview Hidden WebView in activity JS engine like Mozilla Rhino Reusable HTML and JS inside WebViews Reusing HTML & JS for mobile web app Native Web
  • 27. 27 Page Object pattern based hybrid apps Logic UI Platform SpecificReusabl e 90% Reusable
  • 28. 28 Page Object pattern based hybrid apps Logic UI NativeWeb Logic UI
  • 29. 29 Benefits
  • 30. 30 Experience + Reusability
  • 31. 31 Channel Relevance Native App Mobile Web Social features User engagement Tactical queries COR E
  • 32. 32 Presence vs Engagement Native Native Native Web Web Web
  • 33. 33 Mature tools & practices Android development studio Chrome Developer Tools Selenium web driver Tool s Xcode Calabash Cucumber JasmineHAML, SASS, Coffeescript
  • 34. 34 Calatrava • Completely open source • Has been used to build apps with 1 million to 5 million downloads in Android app store. (For iOS, Android and mobile web) • Beta stage • Can leverage existing mature bridge from external platforms
  • 35. 35 Thank you & Feed-me-back priyaaank @ twitter github gmail tumblr