Page Background

Getting cozy with WebViews

The browser engines as well as the hardware components in smart phones have dramatically improved in the last decade. The web platform has also standardized many APIs required for mobile development. Network bandwidths have had a major uptick. Just like electron in the last 5 years has become the standard way for developing desktop apps, the time is ripe for web technologies to put the strong foot forward in mobile app development.

Web Views are out of fashion #

WebViews were vogue in the early days of mobile development. The original iPhone had support for pinning websites on the home page and that was the only way to add applications to the device. There was no App Store and no native development. By 2009, every one was building a mobile version of their website optimized for smaller screen sizes. PhoneGap was a new and promising technology that could easy mobile development by helping us write once and use multiple times - the same software could run on the iPhone, Android and the upcoming Windows phones. Even in the App Store, many apps were wrappers over the website placed to get an entry in the search results.
All that ended once the music stopped. Most major applications moved off webviews during 2011-2012 because of a variety of reasons:

You might have realized almost all of those concerns are not there any more. The core features required for mobile development have been stable in the web browsers for years and even the oldest browsers in use support most of the essentials. There are just two mobile platforms left and even they have been converging. People are holding onto their phones longer and most apps do not need to support all of the new features. Supporting the iPhone X notch is not the retina level effort. Most apps are more than 5 years old and carry similar baggage as the web. With ES6, many web apps are getting a reboot. Tooling on the web has left native far behind. The web platform has stabilized. Array.includes is not a huge change in comparison to class statement and we still get the same buzz because there is not much new to cheer about. Native has had its own share of churns - ObjC to Swift, the removal of 32 bit apps, of OpenGL and the migration from eclipse to android studio. There has been radical unification of design. Most apps look the same on Android and iOS. The differences like menu placement are minor. Many apps have started building their own conventions that are cross platform and many developers instead of building platform only features have been busy ensuring the design remains consistent.

Web has quietly surpassed mobile #

For building a regular application on mobile the web platform provides better features today than native code ever did:

Ideal apps for WebViews #

Web Views are not perfect for all app types. If you are building the Facebook app with 18000 classes even native might not be good enough. But there is a huge class of applications where Web based views are the best choices. If your app fits in these categories definitely go for web views:

Tuning WebViews for native like performance #

Most of the developer knowledge as well as the best advice is tuned to web development where downloading the resource from the internet is the biggest bottleneck and every other consideration for performance is second fiddle. This changes in the world of WebViews where most of the HTML is bundled and there are very different things we need to cater to. Here are some things to consider to get native like performance in WebViews:

Just like native apps are engineered, web apps that are used natively need to be engineered. Web is extremely easy. Easy never means we don’t need to learn. If the best practices are not followed no platform or programming language can save someone from making a horrible and extremely slow app.

Raw WebViews vs Cordova vs React Native #

Raw WebViews are good for most of the workflows, especially if there is a team of native app developers who are building the hybrid part of the application. They allow native developers to feel at home while the web developers can fully implement most of the cross platform logic. The boilerplate has been reducing over time and with most requirements never requiring native code, the reasons not putting in a webview are diminishing at a great speed.

Cordova makes it faster but it comes with a lot of baggage of historical decisions that are not relevant in the modern world. Cordova is like JQuery, it makes job easier, works around platform specific bugs and significantly speeds up the process to get up and running. But in the modern OSes, it is not essential. If we are new to the platform we can use it to get started. But most of its functionality is natively available. At some point you can replace you entire framework dependency with a ployfill that is implemented over a web view. Cordova is perfect if you do not want to maintain a build system as Phonegap build can save you the cost of buying a Mac.

React Native is an interesting experiment. It started with the concept of using Native Controls directed by JavaScript but over time with things like React Navigation, the community has gravitated away from using true native controls to custom views. There are two big advantages of react native - out of box platform specific UI and the ability to write a custom native control surrounded by regular controls. Its API surface is very small in comparison to the web platform and new features like CSS Grids may not ever land up in the platform. WebViews also have native controls although things like switches have not yet been implemented. React native is a good idea if you are in terms with the limitations of the platform and need a custom control so tightly integrated with the JavaScript views that WebViews are prohibitive. Otherwise, WebViews with react would be easier to develop over and use with comparable performance for most use cases.

Conclusion #

There was an era when programmers using compiled languages over assembly were lesser beings. This was until the compiled languages took over the desktop. Then came a time when developers distinguished between compiled and interpreted languages. Interpreted and dynamic languages took over research and server side development. Then came an era when sand-boxed web development was marked as nothing in comparison to the real “native” stuff. Web applications are getting as powerful as native desktop applications and the difference will soon be indistinguishable. We still need to write assembly for really low level, extremely performance sensitive stuff but even those strong proponents of their real native skills never go down to assembly. We are entering the golden age of developing mobile apps using web technologies. Web Technologies are the present of application development. WebViews are a great way to make them go native.

You may also enjoy

Comments

Post a new comment

We get avatars from Gravatar. You can use emojis as per the Emoji cheat sheet.