Quick options to create an app if you have a web application

Tags: javascript, webtoapp, ionic, architecture
Published: 2021-12-07 10:31:08


I was working on a crucial project which required frequent updates and since we were just starting with the project with limited bandwidth we were out of option to go for native development.
The option we were evaluating are
- Creation of Trusted Web application
- Using wrapper framework like ionic/Cordova/Capacitor
- Start treating the web application as web views for an app.

Now all the above option have pros and cons and serves the different use cases. With this story I am trying to create a big picture for everyone, so just touching the topics with bird-eye view, I have a series coming which will focus on the in-depth implementation of the options.

---

## Trusted web application

The trusted web application is a simple progressive web application only but wrapped in custom chrome tab, since it is wrapped in custom chrome tab it comes with huge benefits of page speed, the custom tab is considerably faster than web views and normal web browser so the application will be more performant in comparison chrome browser that is normal web pages and the web view based application.
Creation of trusted web application is fairly simple and it won't take more than few hours to go create the application. Google keeps on updating the wrapper code to facilitate more and more functionality.

_When to go for a TWA_

- **Smaller Size(Lite app)**
The app comes super handy with much smaller size than 2MB which is a blessing for lower end phones.

- **Time to market**
If you have a web application ready and you want the app to be rolled out ASAP then TWA comes pretty handy as it takes just few hours to setup the entire app.

- **Minimalistic app crash rate**
Since the app does not contain much of native code and it comes handy with minimum possible crash rates.

- **Frequent updates**
TWA solves for a major pain point of a traditional app which is need for an update by the end user, since the app is completely created out of the web application the app does not need explicit user update unless any SKD is added.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1gqclnlz7dx9qq3iini6.gif)

_When not to use TWA_

- **Available on Android only**
At the time of writing the concept is TWA exists for android only although I have read few blogs stating apple is thinking to extend support for same but it may take time.

- **Need for native functionality**
When your application requires access to the native functionality like accelerometer, camera etc.

- **Native SDK implementations**
When you require lots of SDK in your applications, it becomes unmanageable because TWA does not provide any bridge between the native code and the web code, which makes it difficult to communicate across.

---

## Framework like Ionic/Cordova/Capacitor

These framework are created to facilitate the hybrid application approach which means you run the web app inside a native shell, in simple word these frameworks were built with a thought that web code will be bundled in the application and it will then execute in the wrapper environment specific to the platform so that end user can have the look and feel of the platform itself, like a slider for instance will feel like an android slider and on IOS it will feel like an IOS slider. A bit deeper can be understood by the architectural diagram of cordova.
Cordova is the first one to hit the market in the above three, but capacitor is developed by the ionic team only.

![Corodova architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jaokac5ysqp6tjo4nak.png)


_When to go for framework_

- **Native APIs access**
If you have web app and you want to use native APIs for camera, bluetooth etc. then frameworks like this provides an excellent and easy integration across.

- **Usage of native & web view both**
If you have use case where in you want to use the natively built code alongside the web views, this is a perfect opportunity for you to use these frameworks.

- **Write once use twice(Android & IOS)**
The ionic follow the hybrid approach which will be able to create two different packages for two different platforms.

_Few no gos for frameworks_

- **Absence of few stable plugins**
Few plugins are not very stable in nature which creates conflicts with another plugins.

- **Random crashes**
Build can crash randomly and it becomes very difficult to find out the reasons.

- **Unfriendly error messages**
While developing and debugging it becomes very difficult to understand and debug the error because they are not very clear.

---

## Web application as web view

This is one of the most easiest way out, so essentially we open the webview as the very first home page of the application. The major pain point which comes with this approach is the poor user experience.
The web view is not very performance focused approach and the user experience become pretty poor even when you have web apps with faster load time. The web views are slower than custom chrome tab which makes TWA a better choice but it limits the application to Android only. So the better approach is to make a native home page and move on with the subsequent journeys in web views.

_When to go for web view approach_

- **Ease of updates**
Since the entire code base remains remote in nature the intended update to user will be a painless stuff and the user does not need to explicitly update the app to get their hands on to new features.

- **Time to market & efficiency**
Time to market is one of the most demanding metric from engineering teams for the budding startups or for the experimental idea, this approach comes super handy to reduce time to market.

_When to hold back for web view approach_

- **Performance**
The performance dip is one of the biggest bottleneck that gets slipped in the app, the web views are not super performant in nature and end user may get some sloppy UI in this case.

- **Absence of native API access**
Web views does not provide the native api's access, so all the cases where native apis are needed ,this is definitely not the recommended approach for instance the application needs bluetooth access and accelerometer web-view will not be able to provide the required support.

Well this was pretty much everything for the bird eye view for my readers. I am surely planning more detailed write ups for TWA and Ionic.