Hybrid App Development Part 1

So, in the previous blog Introduction to hybrid app development we learn about what is hybrid app. Today, we will learn more about hybrid app.

1. Hybrid App Architecture : Hybrid App Development Part 1
2. Development tools           : Hybrid App Development Part 2
3. Debugging techniques      : Hybrid App Development Part 3
4. Building Hybrid App        : Hybrid App Development Part 4
1. UI Development     : Part 4.1
2. Fetching Data and Angular Caching : Part 4.2
5. Testing the App                : Hybrid App Development Part 5
6. Deployment of App          : Hybrid App Development Part 6

We will talk about Architecture of Hybrid Mobile Application. We will discuss each of the component in detail. 

So first question that came to my mind when I think of Hybrid App Development is that what is it that enables this?

Answer to this Question is 

WebView

WebView is special browser window which is bundled in the mobile application which can be used to view html pages in the mobile App. e.g. if you open a link from facebook it does not take you the mobile browser like Safari in case of iOS and Chrome in case of Android. However, it will open up the link in new window. Because it is using WebView to Open this link.

This WebView is what is used for Hybrid App Development and is what enables the development of HybridApp.

Class that is used for WebView in iOS is UIWebView. This is the class which can be used to view the web content in an app. for more details about UIWebView you can go to apple website UIWebView

Class for webview in Android is android.webkit.WebView. 

Class for webview in Windows is WebView.

Architecture of Hybrid App

Below image shows most of the hybrid apps components. I have not named any technology here as to achieve an implementation there are different technologies which are available. We will talk about the technologies in upcoming blogs for hybrid app development.

Hybrid apps works best for business and content application where UI is basic and application has more functional requirements. Of Course, if you are targeting multiple platforms. 

Single Page Application

If you see Core of the architecture is Single Page Application. Your application should be single page application where different components should be loosely coupled with each other. Single Page Application loads on the first request and than user is server with ondemand data.

So in Hybrid App all the HTML, CSS, Javascript is loaded initially and is hosted in the mobile storage. SPA also helps to use Cordova efficiently. 

We can say that we can put native application features in the existing single page web applications and put a native wrapper around them and use them as Hybrid Apps.

SPA Libraries which can be used for Single Page Applications

1. AngularJS
2. EmberJS
3. Backbone
4. Kendo UI
5. ReactJS
6. JQuery Mobile
7. Dojo
8. Sencha Touch

There are other frameworks which are build on top of these libraries which can be used for Hybrid App Development. 

Native API

Below are few frameworks which helps us to add native features to the hybrid apps.

1. Cordova
2. Appcelerator
3. Kirin

There may be other in the market which can be used for hybrid app development.

This was a very brief introduction to the Hybrid App Architecture. I will try to add more details to this as we continue our journey to Build a hybrid app in upcoming blogs.

Happy coding!!!