Pragmatic approach to building native apps hybrid way
Download as PPTX, PDF2 likes2,567 views
This document discusses a hybrid approach to building native mobile apps using a common code base of HTML, CSS, and JavaScript with platforms like Android and iOS. It presents a typical hybrid architecture that uses a native bridge to expose platform APIs to the webview. It then provides an example of how this approach could be used to build a mobile ordering app. Finally, it discusses patterns like MVVM and page objects that can be used with this hybrid approach to improve code reuse.
Ad
More Related Content
What's hot (20)
Viewers also liked (18)
Ad
Similar to Pragmatic approach to building native apps hybrid way (20)
Ad
More from Thoughtworks (20)
Recently uploaded (20)
Pragmatic approach to building native apps hybrid way
- 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
- 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
- 31. 31 Channel Relevance Native App Mobile Web Social features User engagement Tactical queries COR E
- 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