React and Angular frameworks speeding up JavaScript performance

React and Angular browser support

Major mobile browsers, including Chrome, Firefox, Internet Explorer and Opera, are starting to support the core technologies required for PWAs. Apple has yet to implement important components like service workers, PWA installs and push notifications. These are rumored to be coming. In the meantime, Osmani said some of the design patterns of PWAs are still relevant to iOS users.

For example, the cosmetics retailer Lancôme decided to pursue a PWA strategy even though 65% of its users come from iOS devices. It found that session length increased with iOS users. Osmani said, "Some of the same concepts of trying to ship something that allows a better user experience and that is granularly served down benefit people even if they don't support the same engagement features or the same features for repeat visits."

One of the most interesting aspects of PWAs is the dramatic size differences compared to dedicated mobile apps. Twitter is delivering a 0.6 MB PWA compared to a 23 MB Android app and a 100 MB iOS app. Lyft's PWA is less than 1 MB, compared to 17 MB on Android and 75 MB on iOS. Osmani did not go into much detail on what these much smaller PWAs were lacking compared to their full-blown brethren.

Pairing down the cruft

Osmani suggested one good metric for developers to focus on is for the user to be able to start interacting in under 5 seconds, even on 3G or slower connections. This gives a budget of sorts for developers to consider when adopting a framework. Larger, full-blown frameworks, like React and Angular, leave a lot less headroom for custom code than more modular frameworks, like Preact, Polymer and ViewJS.

He said, "If you are picking something out, make sure you understand the cost of it, how long it is taking you to parse and compile that JavaScript code and how long it is taking to boot it up on mobile. There are plenty of lightweight options for mobile today. A lot of these options have relatively low footprint on mobile and can set you up for success a lot better than the other options available today."

A lot of the PWAs are using React and Angular. It just means you will have to put in a little extra work.

"That is not to say you cannot choose React and Angular to ship a PWA. In fact, a lot of the PWAs are using React and Angular. It just means you will have to put in a little extra work to make sure you are splitting up your experience and serving it down in a granular, efficient way so your users can check it out."

Google has released a PWA-friendly testing tool called Lighthouse that can help developers optimize their single-page applications. It's even being baked into the latest version of Chrome Canary channel. It allows developers to audit the current site experience, analyze static content for best practices and recommend performance best practices.

One great resource for evaluating these different frameworks is HNPWA.com, which demonstrates a wide variety of modular frameworks in action, including Svelte, Vue, Angular and React. Most can deliver an interactive experience in under 5 seconds over slower networks. A few, including viperHTML and Preact, even beat 2 seconds.

"In many ways, PWAs are becoming the new normal," Osmani said. "Not just for global brands, but also for the tools we enjoy using every day. We are finding this balance between DX [developer experience] and hopefully a place where we will be able to ship better UX on mobile. Most of the larger companies have shipped an initial experience and incrementally added feature until they were able to be a PWA. So, it's not a case of having to write a completely new app from scratch."