Web Apps Are the Future

Native mobile apps are a little weird, if you stop and think about them.

The average mobile app weighs around 20MB, often requires an internet connection in order to be used as intended, and issues several data-heavy updates during its lifetime. Some of these mobile apps have a web version that contains all or most of the same features, at nearly 1/20th of the size.

When you buy a mobile phone, a lot of these apps come preinstalled, and can be difficult to remove from your device. There is an app for every use you can think of, but every download means less available storage on your device. Many native apps have specific and trivial use cases (calculators, alarm clocks, sound recorders), while still having large file sizes and internet connection requirements.

If you’re a developer, it only gets weirder. You can’t just make an app and release it into the wild. You first have to get it approved it on some marketplace to be seen, which can be a difficult and expensive process ($99 USD on apple app store). If you want to make your app available to a wider audience (apple, android, and Firefox OS), you have to release separate versions, which include additional marketplace approval processes and plenty of extra development time.

The Problem

Although native mobile applications are useful and entertaining, they’re also a giant inconvenience.

For developers, they’re difficult to develop if your skill set revolves around HTML, CSS, and JavaScript. They’re difficult to get on a marketplace, because of tightly controlled requirements and licensing fees. They’re difficult to support because of multiple software versions and device incompatibilities. As an Android user, I’ve come across several great apps that I’d love to install and use, but am unable to because they only exist for iPhone users. This is an upsetting (albeit “first world”) problem, but I can’t blame the developers of the app, because supporting just one platform is difficult enough!

For users, they’re difficult to install because of bandwidth constraints, file sizes, and frequent updates (open your application manager on your phone and see how many of your apps need or have recently downloaded an update). How many times have you had to uninstall an app on your device to make room for a more important one?

Let’s not forget that several mobile applications have web versions that have the same content and capabilities, negating the need for an app in the first place.

So native mobile applications are difficult for both users and developers alike. But developers keep building them, users continue to download them, and everyone keeps complaining. So is there a solution to the problem of native mobile applications, or are we stuck with the problems we have?

The Solution

The solution is the browser. Remember when I said that most applications require some form of an internet connection to work properly? Well truthfully, all applications require an internet connection to work properly, because without the internet, you can’t download any applications. We use the internet to download applications and updates for them, and often to send and receive application-related data.

If all our applications depend so heavily on the internet, why don’t we just keep them there? This is exactly what a web app does. A web app relies on the browser and its capabilities to render the application, whereas a native mobile app relies on the device and its capabilities to render the application.

Web apps cause plenty of native mobile application headaches to disappear. If you’re a developer, you only need HTML, CSS, and Javascript to start building your application! In some cases, your application can be completely static, meaning you don’t need to rely on any server side processing.

Although marketplaces for web apps do exist, the user doesn’t need to go to one to download your application. Web apps live in the browser, which means your users can navigate to a URL to use your application, and installation is as simple as bookmarking a website. Developers can also avoid the need to make several different versions depending on their users’ operating systems.

Web apps are great for users, especially because they make distribution and installation so easy. They also eliminate size constraints, which means no more having to uninstall an application in order to make room for more! Updating a web application for a user is a seamless process, requiring nothing more than a browser refresh.

Gotchas

Although web apps offer a potential solution to native mobile headaches, there are plenty of technology gaps that exist between browser and native rendering engines. Paul Kinlan writes an excellent article about this issue, in which he journals the results of his quest to live on nothing but web apps for a whole day.

Although explained in the above article, the issue of web apps and offline performance deserves its own mention. Offline-first architecture means structuring your content in such a way that when a user doesn’t have an internet connection, they don’t get a blank white screen from your web app. Instead, they can interact with the web app, and data will sync up to a server when a connection is available. Many web apps today are very bad at this, and as a result, the market for web apps is not as large as it could be. A list Apart has a great article explaining the concept in depth, and it’s well worth the read. Solutions for solving the offline problem are growing, one of the most exciting being PouchDB (here’s a guide to getting started).

Another large issue that the web platform has yet to fully solve, is the issue of caching and storing application resources on the client side. Appcache was created to solve this problem, (we’ve covered it before), but it had its issues, and so the community is looking to service workers for a final solution. But service workers are not yet ready either.

System notifications and background tasks are two other issues that web applications have yet to solve, although Google Chrome’s hosted web app solution seems to offer a fix for these problems.

Getting Started

Even though there are areas in which web apps have yet to catch up, we shouldn’t be discouraged from building web applications today. Although technology limitations get in the way of making all web applications obsolete, we can currently start to replace native applications with the technology that we have right now. Here are some resources to help you get started.

• Hoodie is a framework for building web applications that features offline-first capabilities, making it great applications that need to work on mobile devices. Here’s how to get started with Hoodie.
• Intel XDK is an “HTML5 Cross-platform Development Tool” for building Web and Hybrid applications. Here’s a more detailed look at XDK.
• Google Chrome and Firefox OS will allow you to create “Hosted Web Apps”, which can give your application extra features and capabilities, and even make your app installable on a users device.
• Offline.js is a library that will notify your users if they have lost their internet connection.
• Famo.us is a javascript framework for building UIs that perform like native on any screen.
• Treo is a jQuery like solution to using indexedDB.

Conclusion

We’re not yet at the point where the web can fully replace all native applications, but we can build high-performing responsive web applications right now. With new web APIs and libraries getting released every day, the web app is starting to look more appealing over traditional native apps. Let’s start building things on the web that perform like native apps, taking into consideration issues such as screen real estate, offline capabilities, and file size.

If you’re looking for a new side project, pick an application currently installed on your phone, and try to build a web app prototype. As a bonus, be sure to watch this great talk by Christian Heilmann where he touches on the subject of the web versus native applications,and what developers can do to make the web a better place to visit.

What native-app-like capabilities would you like to see implemented in the web platform?