Pragmatic approach to building native apps hybrid way

965
-1

Published on

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

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

No notes for slide

Pragmatic approach to building native apps hybrid way

  1. 1. Pragmatic approach to building native apps – Hybrid Way Priyank Gupta Mar 2014
  2. 2. 2 Devices move with YOU Definition of mobile is rapidly evolving
  3. 3. 3 Challenges for New Platform Apps and Developer Community Patent Wars Ripe Competition OS Fragmentation
  4. 4. 4 Web support In platforms
  5. 5. 5 Technical Challenges Business
  6. 6. 6 Lets bridge the gap
  7. 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. 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. 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. 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. 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. 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. 13 Show me how!?
  14. 14. 14 Experience Native App in Play store Mobile web app http://tinyurl.com/btplay http://tinyurl.com/bloodtorrent
  15. 15. 15 Quick demo
  16. 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. 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. 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. 19 App is open source Links to https://github.com/priya aank/bloodtorrent
  20. 20. 20 Patterns for reuse with bridge
  21. 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. 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. 23 MVVM based hybrid apps Logic UI NativeHTML Logic UI Feature in an app
  24. 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. 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. 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. 27 Page Object pattern based hybrid apps Logic UI Platform SpecificReusabl e 90% Reusable
  28. 28. 28 Page Object pattern based hybrid apps Logic UI NativeWeb Logic UI
  29. 29. 29 Benefits
  30. 30. 30 Experience + Reusability
  31. 31. 31 Channel Relevance Native App Mobile Web Social features User engagement Tactical queries COR E
  32. 32. 32 Presence vs Engagement Native Native Native Web Web Web
  33. 33. 33 Mature tools & practices Android development studio Chrome Developer Tools Selenium web driver Tool s Xcode Calabash Cucumber JasmineHAML, SASS, Coffeescript
  34. 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. 35 Thank you & Feed-me-back priyaaank @ twitter github gmail tumblr
  1. A particular slide catching your eye?

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

×