At Ionic, we’re incredibly bullish on the future of the web on mobile: Progressive Web Apps (PWAs). In this future, web developers are building quality, performant mobile and web experiences using open standards that run on a plethora of platforms, using the skills they already have.
And we’re not alone. Progressive Web Apps are exploding in popularity right now because we’re finally at the intersection between Capability and Practicality: PWAs are capable of implementing many of the same experiences of a traditional native mobile app, and broad browser support landing only recently is making them finally practical. As always, if web developers can do things their way, they will.
Unfortunately, web developers building Progressive Web Apps often run into a few consistent challenges that make building these apps a lot harder than it should be.
Missing Building Blocks
A PWA is just a web site, and any web developer knows that the Browser delights in giving you a blank slate, devoid of common UI controls your app will need.
Historically, developers building traditional responsive web sites have used toolkits like Bootstrap to fill in the gaps, and those frameworks work well. When web developers started targeting app stores and native app style UIs, many of them looked to toolkits like Ionic to do the same.
Progressive Web Apps have a similar challenge, perhaps doubly-so. Not only do they need to provide a great, app-like UI for mobile, they also need to work on desktop and tablet screen sizes as well. Additionally, many web developers want to target the app store at the same time to take advantage of as many distribution channels and APIs as they can, so they need a toolkit with great native mobile UI implementations as well.
Put simply: there is no “UI Kit” for Progressive Web Apps, furthering the divide between native app developers and web developers.
The Progressive Web App Operating System
Along with UI primitives, native apps have something that web apps don’t: pre-built utilities and access to other apps!
To use an example, if you need to take a photo in a native iOS or Android app, the app is going to present a high quality camera experience with familiar tools and features (such as rotating the camera, and adjusting exposure).
Guess what you get when you try to take a photo on the web?
That’s it, just a rectangle rendering a stream from the camera. It’s totally up to you to spruce it up and add functionality to make it look like what you might expect:
The browser doesn’t give you a “Camera App,” it just gives you the low-level primitives that makes it possible to build your own. Having built custom cameras on iOS and Android, the Media Capture APIs available for the web are certainly a lot easier to build with, but they are only that: building blocks.
Clearly, there’s still room for a “Progressive Web App OS” providing reusable App interfaces for common operations like Media, along with consistent UI controls and APIs, mirroring the utilities available when building native apps.
Where Ionic is heading
To build Progressive Web Apps that rival the best native apps, web developers will need higher level components and pre-built app UIs to get there. Building optimized, themeable, and reusable UI components is too much work to do for each app, and buliding custom App UIs for things like the Camera isn’t in the scope of most apps.
At Ionic, this is one of the problems we are most excited about solving. We want to provide this “Progressive Web App OS,” and we are doing a few things to get there:
Lightweight Web Components Running Everywhere
The days of having to pick a UI library based on the frontend framework you use are coming to an end. Soon, Ionic controls will function like any other HTML element, pulling in only what you use and working in any frontend framework you like.
No more buying into a huge UI library just to use a few controls, and no more picking a framework just because your UI controls use it.
Native-quality UI controls
Web Developers are excited about Progressive Web Apps, but we know first-hand that many of them also want to target native apps in the app store. We think Ionic can bridge this gap with UI controls that work great in Progressive Web Apps and when running in a native app context for the app stores.
Pre-designed “App” experiences and the “Progressive Web App OS”
We are working on a number of reusable App experiences, such as a rich Camera UI, that work across all browsers that support Progressive Web Apps, and scale up well from mobile to desktop.
We are trying to realize this goal of building the “Progressive Web App OS” that gives web developers everything they need to build PWAs and app store apps, with the same APIs and the same code.
Stay tuned
2018 is going to be a big year for Progressive Web Apps, and newly production-ready APIs like Web Components. The web is back in a big way, and it feels like day one again. We are betting the farm that PWAs are going to be huge, and we are going to give it our all to make sure Ionic is the leader in this market, while continuing to invest in app store/native apps as well.
Stay tuned for our Web Component release of Ionic (4.x) in a month, our new PWA elements (i.e. the Camera experience), the PWA Toolkit, and our new Capacitor project that will make it easier to bridge between web and native.
Maybe those webOS people really were on to something? 🤔
