This content is part of the Essential Guide: Top JavaScript frameworks accelerate software development

React and Angular frameworks speeding up JavaScript performance

New JavaScript frameworks, like React and Angular, are changing the way web and mobile UIs are developed, with performance being one of their strongest traits.

Developers are now rushing to bring engaging and interactive capabilities to modern apps using frameworks like React and Angular. These can reduce the amount of development effort but also add a lot of overhead, thus slowing time to engagement. At the 2017 Fluent Conference, Addy Osmani, staff engineer at Google working on Chrome, explained how developers are starting to use more modular frameworks, like Preact, Svelte and Polymer, to build next-generation apps that load much faster.

In particular, Google is championing a new style of mobile apps called progressive web apps (PWAs), which provide mobile app-like experiences through a mobile web browser. This includes capabilities like extensive use of caching, push notifications and the ability to install launch icons on the home screen, all of which are easily developed using JavaScript frameworks, like React and Angular.

Osmani said several major brands adopting PWAs are seeing a significant boost in time to engagement, repeat visits and interactivity. Twitter saw a 65% increase in pages per session and a 75% increase in tweets. Lyft provides a lite version that supports most of the same features as its mobile app without the need for an install. Truecaller has built a PWA that is fully interactive in under 1.7 seconds on older mobile devices. Other brands adopting PWAs include CNet, CNN, Forbes and the Washington Post.

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.
Addy OsmaniStaff engineer at Google

"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."

Next Steps

What do they mean when they talk about MEAN development?

These are the most popular tools for AngularJS development

How do Angular and React frameworks compare?

Comparing MERN vs. MEAN stacks for web app development

Dig Deeper on Front-end, back-end and middle-tier frameworks

App Architecture
Software Quality
Cloud Computing
Security
SearchAWS
Close