The rise of React

The rise of React

On the social, cultural, and technological impacts of the increasingly ubiquitous frontend framework.
Part of
Issue 13 May 2020

Frontend

The World Wide Web of 2020 is a far cry from what it was just five years ago, never mind 20 or more. In the early 2000s, when the first screech of my dial-up modem died down and data began to course through the copper wires of my telephone connection into my desktop PC, I suddenly had all the world’s information at my fingertips—and boy, did I know it. There was a cacophony of colors, screaming headlines, and marquee scrolling text. Websites were an unpredictable mashup of styles, content, and form. You practically needed a compass to navigate them.

With the death of GeoCities and the disappearance of much of Web 1.0, many of the riotous early years of life online are gone forever. Some small vestiges remain: Visit the website for Ling’s Cars, a secondhand car dealership near my home in North East England, and you’ll find a site that deliberately, nostalgically shuns today’s web design standards. Ling’s Cars has it all, with gigabytes of Gaudí-like design hearkening back to a simpler (yet more maximalist) time.

But Ling’s Cars is a beautiful, messy outlier. Traverse the web today and you’ll see a sea of standardized—dare I say, boring—sites. Rounded, flattened buttons give way to oceans of white space. Drop-down menus have disappeared, replaced by mobile-friendly nav bars. Hamburger buttons proliferate faster than McDonald’s—billions installed—and everything is modular.

“We’re 30 years in and still trying to figure out what’s best for the web in what circumstances,” says web design consultant and CSS advocate Eric Meyer, author of a number of popular books about CSS. The solution of the moment appears to be modular design, enabled by frameworks like React, an open-source JavaScript library that allows sites to render pages dynamically in response to user input and actions. Modular design is defined by small, standalone components that can be plugged into sites where and whenever needed, which can help sites scale quickly. It has been popularized by big platforms like Facebook, which handles countless components and features for billions of users. “I wonder, sometimes, if it’s the right answer, or if it’s one good answer that’s being overused, which I think happens a lot in our industry,” Meyer says. “The latest shiny thing comes out and then, after you use it for a few years, you say, ‘I should use this sometimes, not all the time.’”

React is both ubiquitous and a lightning rod for criticism, but it’s just one aspect of a broader trend toward, as Meyer puts it, “shoving everything into JavaScript.” That’s good news if you’re a JavaScript programmer, but it could have downsides for users. “I’ve noticed React-driven websites tend to be pretty battery-draining on my mobile because there’s a lot of heavy lifting going on,” he says.

The widespread adoption of React, and JavaScript more broadly, is due in part to support from a handful of big-name tech companies. As social platforms have grown to dominate our lives, they’ve muscled into the design world, too. Since its creation by software engineer Jordan Walke in 2013, React has been maintained by Facebook, where it’s the driving force behind Facebook and Instagram’s frontends. The design decisions the framework funnels people toward are quickly becoming the norm online: Dropbox, Netflix, Reddit, and the BBC all use React.

“I think there’s a good amount of people looking at it and thinking, ‘If a trillion-dollar company is using modularity, there must be something to it,’” says Meyer. “Even if it has nothing to do with how they became a trillion-dollar company.”


Some see Facebook’s ownership of React as a positive. The vast resources the company can throw at a problem, no matter how minute, allows developers to identify and solve issues that might otherwise be overlooked. “When you work at a large tech company, the technical challenges tend to be larger than [they would be] at a small company. It makes it easier to identify certain problems of scale, which in a smaller space might also be there, but which you might not feel as acutely and might not identify as an opportunity to make an improvement,” explains Sophie Alpert, a former engineering manager and manager of React at Facebook, who now works at the Silicon Valley firm Humu. (Alpert is also an Increment contributor.)

Others worry that Facebook’s stewardship has not been especially helpful to most users. Meyer, for instance, believes React is a mostly useful framework, but that it “has been treated by Facebook as a way to solve Facebook’s problems, and few of us have websites that have Facebook’s problems.”

For instance, Facebook is a bunch of little modules pieced together to form a website, and React is designed to make everything a little module. That may suit Facebook—and Twitter, which recently used React in the 2019 redesign of their web app—but “most projects are not like that,” says Meyer. “When I’m making a website, I often don’t have that need for extreme modularity.” Moreover, modularity can, in some instances, be a resource drain, and for the websites Meyer is building—it tends to not be worth it.

Meyer doesn’t begrudge those who are all in on modularity, however. “If you’re working in an environment where everything is React, that starts to draw your focus in a certain direction,” he says. “React makes certain things easy and other things hard. We generally move toward the things that are easy and away from the things that are hard. It herds you in a certain direction.”

A friend of Meyer’s works for a company that provides turnkey websites to car dealerships. There, the modular approach works well: The dealerships all want slightly different versions of sites they’ve seen elsewhere, and they want them to be intuitive and reliable. So they go for a React-based design.

Alpert doesn’t think that it’s Facebook’s way or the highway, or that React’s ties to the tech colossus mean only Facebook’s needs get served. “Even in a large organization, there are always people who are learning the framework for the first time, people who are starting from scratch,” she says. For example, while Facebook employees, who had a unified software pack for most of their web properties, didn’t have to configure the JavaScript bundling on React themselves, they learned through community feedback that others did, and implemented an application, Create React App, to help.


Matt Mullenweg, the developer of WordPress, says modularity is becoming the norm, though it isn’t necessarily new—at least, not the underlying concept. “I don’t know how far back you want to go, but I think it really comes from CSS and the idea of separating out the content from the styling,” he says, citing examples such as Yahoo’s mid-2000s YUI Library and Apple’s even earlier design guidelines as prototypical examples of the brave new modular future we now inhabit.

“When I think about web modularity today, what’s exciting to me is that people aren’t just open-sourcing the code but also the design,” he says.

Mullenweg elected to deploy modularity on his platform, used by an estimated one in three websites today. But while WordPress now has a modular design, allowing people to create posts using blocks of content—their own modular format, which can be taken off WordPress and embedded elsewhere—Mullenweg hasn’t always had an easy time with modular development.

The biggest change to WordPress over the last 15 years has been the introduction of its new editor, Gutenberg. On December 6, 2018, the team published WordPress 5.0 and released Gutenberg, which broke down every post into modular content blocks. But the release almost didn’t happen, due to a controversy in the community that shows why hitching your wagon to a tech trend can sometimes be more trouble than it’s worth.

WordPress was deep into the development of Gutenberg using React when users began to raise concerns—not with the modular design (although some feel WordPress’s shift to blocks has complicated its editor), but with a small clause inside React’s license. Fearing it would become a target for patent litigation, Facebook inserted a clause stating that users couldn’t sue them for patent infringement, wrote Adam Wolff, an engineering director at Facebook at the time. WordPress users were wary of the clause, and of signing away their rights—and Mullenweg had a decision to make.

“It’s a big responsibility, because when we ship a new version of WordPress, everyone auto-updates. We’d have been opting millions of people and companies into this patent clause,” he says.

Mullenweg didn’t see the point of the clause; he believed Facebook was protecting itself from something that would never happen. “It seemed like something a lawyer had slipped in [that] they didn’t need,” he says. So around the same time the Apache Software Foundation placed Facebook’s patent clause on its list of disallowed licenses, Mullenweg began to lobby the Silicon Valley giant through backchannel connections. He was surprised when Facebook stood firm: It would maintain the clause.

Mullenweg was torn. He could accept the patent clause, roll out the Gutenberg update, and opt in millions of people despite their protestations. Or he and his team could rewrite it from scratch without using React, a decision that would add anywhere from six to 12 months to the development timetable.

He chose the latter, and published a September 2017 blog post explaining his rationale. “We couldn’t imagine this patent clause being pushed on our users,” he says.

To Mullenweg’s surprise, a week later, Facebook changed course. “We are going to relicense our open-source projects React, Jest, Flow, and Immutable.js under the MIT license,” wrote Wolff. “React is the foundation of a broad ecosystem of open-source software for the web, and we don’t want to hold back forward progress for nontechnical reasons.”


The skirmish between Facebook and the open-source community over React is emblematic of broader concerns about the ubiquity of tech giants on the web: By handing over control of something so ubiquitous to a supranational tech firm, you cede the ability to have a say.

Do the net benefits outweigh the risks? “I will say, React does not want for resources,” Meyer admits. While a lot of open-source projects follow a familiar trajectory—plenty of excitement and fanfare when first announced, followed by a rapid decline and fade-out as people lose interest—that’s not the case with React. “If Facebook has a problem, they’re going to throw resources at the problem, so React can keep advancing.”

Sophie Alpert has seen that firsthand. While the team of developers working on React—usually seven people, never more than nine—may seem minuscule in light of Facebook’s sheer size, such problem-solving is a luxury few others could afford, not least the vast majority of open-source projects that rely on volunteer contributions. Institutional support from Facebook, and the security of salaried, long-term contracts, has another benefit: continuity. Those working on the project have the time and resources to delve into deeper issues and develop more than quick fixes. “The team can take on larger projects that might take multiple years to finish, because it’s this long-term team that is chasing after the singular goal of how [to] make it easier to build user interfaces,” she says.

That long-term thinking benefited the React community in a number of ways. Two recently rolled-out features, Concurrent Mode and Suspense, stem from Alpert’s ability to dedicate time to projects that push the envelope. “It’s too early to tell if these ideas are going to catch on in the industry,” she says, but she doubts they would have arisen in a library developed by a group of contributors with significantly fewer resources.

And what about the longer-term impact? “This is another step in that process of trying to figure out the best way to create websites and web apps,” says Meyer, who doesn’t believe there will be a definite answer, other than HTTP and HTML. “It’s another example of us as an industry trying out a new approach and figuring out what it’s best for.”

Meyer and Mullenweg agree that, at the very least, it won’t be a flash in the pan. What differentiates websites from one another today isn’t their underlying architecture but their content, design, and editorial. Mullenweg adds: “We’ve moved to levels of abstraction that enable much richer user experiences and [allow] technology to have a much greater impact on people’s lives. To me, web modularity is just a layer of abstraction. How do we abstract the easy stuff so we can spend time on what’s interesting and new?”

Alpert, who helped chart React’s rise, doesn’t see an alternative emerging anytime soon. “If you were to sit down and say, ‘I don’t want to use any of these libraries or frameworks,’ chances are you’ll end up [creating] a library or framework of your own. It just won’t be as thought-out or have a community or extensive documentation around it.”

She encourages others to think about the broader impact of React and of modularity. “I think it’s really great that anyone can build their [own] applications on top of the same technologies that power the biggest websites in the world.”

About the author

Chris Stokel-Walker is a UK-based features journalist for The Economist, Bloomberg, the BBC, and Wired UK. His first book, YouTubers, was published in 2019, and his second, TikTok Boom, was published in July 2021.

@stokel

Artwork by

Ariel Davis

arielrdavis.com

Buy the print edition

Visit the Increment Store to purchase print issues.

Store

Continue Reading

Explore Topics

All Issues