{"id":2106,"date":"2017-09-11T22:37:12","date_gmt":"2017-09-11T22:37:12","guid":{"rendered":"https:\/\/testgrid.io\/blog\/?p=2106"},"modified":"2024-10-17T11:10:41","modified_gmt":"2024-10-17T11:10:41","slug":"how-to-create-a-strong-mobile-app-hybrid-architecture","status":"publish","type":"post","link":"https:\/\/testgrid.io\/blog\/how-to-create-a-strong-mobile-app-hybrid-architecture\/","title":{"rendered":"Everything About Creating a Strong Mobile App Hybrid Architecture"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"What_is_a_hybrid_app\" class=\"ez-toc-section\"><\/span>What is a hybrid app?<\/h2>\n\n\n\n<p>Hybrid can mean multiple things to many people in the mobile development community. Typically a hybrid app means it\u2019s using Xcode + Swift, and conforming to all the platforms conventions regarding navigation\/presentation. The building blocks of the app are composed of UINavigationController, UITabViewController, UISplitViewController, UIViewController, etc. Within those containers, we can have many screens where the content is built using UITableView or UICollectionView, we can have even more where that role is filled by a WKWebView.<\/p>\n\n\n\n<p><strong>BENEFITS OF A HYBRID ARCHITECTURE<\/strong><\/p>\n\n\n\n<p>Hybrid architecture offers some key benefits compared to pure native or web-based apps:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Faster, cheaper development by reusing web code<\/li>\n\n\n\n<li>Easier cross-platform development and maintenance<\/li>\n\n\n\n<li>Ability to leverage web technologies like CSS, JavaScript, etc.<\/li>\n\n\n\n<li>Access to native device capabilities not available to web apps<\/li>\n\n\n\n<li>Distribution through app stores alongside native apps<\/li>\n<\/ul>\n\n\n\n<!--more-->\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1400\" height=\"980\" src=\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2017\/09\/Mobile-App-Hybrid.jpg\" alt=\"\" class=\"wp-image-3551\" title=\"\" loading=\"lazy\"><\/figure>\n<\/div>\n\n\n<h4 class=\"wp-block-heading\"><span id=\"Libraries\" class=\"ez-toc-section\"><\/span>Libraries<\/h4>\n\n\n\n<p><a href=\"https:\/\/github.com\/turbolinks\/turbolinks-ios\" target=\"_blank\" rel=\"noopener\">Turbolinks<\/a>&nbsp;is the one core library to use for managing hybrid architecture. The framework handles communicating with Turbolinks.js and allows the use of a single WKWebView, shared across multiple different screens.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"RouterNavigator\" class=\"ez-toc-section\"><\/span>Router\/Navigator<\/h4>\n\n\n\n<p>Typically most of the navigation inside a hybrid app is url based. A url can come from a number of sources (web link, push notification, universal link from another app, native action, etc), and they all go through the Router. This router is responsible for figuring out exactly what action to take for a given url. The router may open the url in Safari if it\u2019s for another domain, display a media viewer if it\u2019s an image\/video, or in the common case, create a new view controller to display. The router hands off a view controller to the Navigator which handles the presentation. Most view controllers are pushed on the current navigation stack, but you can also support presenting certain screens (like new\/edit views) modally, or replacing the current screen when appropriate.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"Bridge\" class=\"ez-toc-section\"><\/span>Bridge<\/h4>\n\n\n\n<p>The last component that makes up the hybrid architecture is what can be called the \u201cBridge\u201d. This is an umbrella term for all the various parts of the app involved in native\u2192web (or web\u2192native) communication. The primary code here is a local JavaScript file (written in TypeScript) embedded in the app and injected into the webview using WKUserScript. This provides native code an API for communicating with the webview without needing to directly query the DOM or do complex JS. Using a WKScriptMessageHandler, the developer can respond to messages sent from the web view through the bridge.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"Getting_the_best_out_of_Hybrid_architecture\" class=\"ez-toc-section\"><\/span>Getting the best out of Hybrid architecture<\/h4>\n\n\n\n<p>Mobile apps should all be about user experience. If the user experience is bad, users don\u2019t hesitate to uninstall the app instantaneously. To avoid this unfortunate experience most developers choose native development. With hardware getting stronger and web technology becoming more responsive, we don\u2019t have to entirely rely on native development. We just have to be smarter about our hybrid architecture.<\/p>\n\n\n\n<p>Here\u2019s a great example of a good hybrid architecture.<\/p>\n\n\n\n<p>App requirements:<br>3 Tabs \u2013 Home Tab, Messages Tab, and Gallery Tab<br>We can create a tab view controller in iOS with 3 tabs<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Home Tab \u2013 Create a router and it will navigate us to Home Tab URL which is an RSS reader<\/li>\n\n\n\n<li>Message Tab \u2013 Tap on the Messages Tab, to take you to Messages HTML page. (But here is the beauty of a great hybrid architecture, when we enter a message we can switch a web text entry to native text entry to take all the advantages of smooth animations and dictionary.)<\/li>\n\n\n\n<li>Gallery Tab \u2013 Tapping on the Gallery Tab can be a photo picker and we can route to choose the photos from the native app.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"Conclusion\" class=\"ez-toc-section\"><\/span>Conclusion<\/h4>\n\n\n\n<p>Most developers learn a great hybrid architecture through trial, error and past experience. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is a hybrid app? Hybrid can mean multiple things to many people in the mobile development community. Typically a hybrid app means it\u2019s using Xcode + Swift, and conforming to all the platforms conventions regarding navigation\/presentation. The building blocks of the app are composed of UINavigationController, UITabViewController, UISplitViewController, UIViewController, etc. Within those containers, we [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":2107,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[85,86,88],"tags":[],"class_list":["post-2106","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-agile-software-development","category-mobile-development","category-programming"],"acf":[],"images":{"medium":"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2017\/09\/HybridAp-300x199.png","large":"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2017\/09\/HybridAp.png"},"_links":{"self":[{"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/posts\/2106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/comments?post=2106"}],"version-history":[{"count":5,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/posts\/2106\/revisions"}],"predecessor-version":[{"id":12856,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/posts\/2106\/revisions\/12856"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/media\/2107"}],"wp:attachment":[{"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/media?parent=2106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/categories?post=2106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/tags?post=2106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}