Since it first appeared on coders’ screens back in 1995, JavaScript has become one of the most popular coding languages in the tech world, spawning a number of libraries in the years since. One of the most popular JavaScript libraries is React, which was originally developed at Facebook and used in the development of its News Feed.
In part two of a two-part series on why tech teams use React in the construction of user interfaces, we spoke with engineers at four Seattle-based tech companies — some small, some very, very large — about the benefits and challenges associated with its use.
Founded in San Francisco back in 2006, Twitter has since become one of the biggest social media platforms on the planet, and a favored tool for journalists, comedians, politicians and ordinary folks to connect with one another. The company opened its Seattle engineering hub in 2013, and the Westlake office has grown over time as Twitter has sprawled into new territory, opening offices throughout Europe, the Middle East, the Asia-Pacific region and the Americas.
Web Team Senior Software Engineer Katie Sievert said Twitter started using React shortly after embarking on a full rewrite of the company’s mobile website using a modern web stack.
What cool features have you been able to build into Twitter’s user interfaces using the React library?
Twitter uses React in our progressive web app, which progressively adapts to the capabilities of the device using it — ranging from screen size to available hardware and software — and provides a range of app-like capabilities like push notifications and offline browsing support.
Our progressive web app can be found at mobile.twitter.com — or in the Android app store as Twitter Lite — and is built on a full JavaScript stack using React, Redux and NodeJS.
Since React purely drives the visual layer, it gives us flexibility with how we choose to handle data structures and flow of data.”
What made you decide to use React over options like Vue and Angular?
What appealed to us about React was how well it fit with our goal of a component-based design system, since components defined with React provide a very clean API in the form of props and a reusable, self-contained UI in the form of its render output. Component-based design isn’t unique to React, but the best tools set you up for success and the highly compositional nature of React made it particularly easy to reason about.
Other factors that we considered included the growing community adoption and internal Facebook usage, which was a positive indication of ongoing support and longevity; ample, easy-to-follow documentation and examples, which is an often overlooked factor in driving adoption; React’s virtual DOM for optimizing performance on updates, given our desire to build a progressive web app; and React being a library versus a framework. Since React purely drives the visual layer, it gives us flexibility with how we choose to handle data structures and the flow of data.
Rover’s rapidly growing platform connects pet parents with house sitters, dog walkers, doggy day-cares, groomers and drop-in visitors throughout a huge number of cities across the country. All those services funnel through the Rover app, which allows users to pay for services and rate service providers. Headquartered in Belltown, the company has raised more than $310 million since it was founded in 2011.
Engineering Manager Jacob Friedmann said his team tried a number of UI frameworks before settling on React.
What cool features have you been able to build into Rover’s user interfaces using the React library?
One of the things that we really get excited about as an engineering team is performance, which we see a core part of a user’s experience. By investing in things like server-side rendering for our React application, we have been able to make some meaningful improvements to important performance metrics like “time to interactive.”
In the end, the primary reason for landing on React was the vast and vibrant ecosystem that surrounds it.”
What made you decide to use React over options like Vue and Angular?
Our road to React at Rover was not a straight line. When we began the process of modernizing our application, we actually tried a number of front-end frameworks, including Vue. In the end, the primary reason for landing on React was the vast and vibrant ecosystem that surrounds it: robust component libraries, flexible state management solutions, cross-platform solutions like React Native and endless blog posts on scaling applications. The benefits of building on the shoulders of giants that openly share their knowledge and hard-earned wisdom is invaluable and allowed us to get a head start on building amazing experiences for our pet owners and sitters.
What challenges have you faced in using React, and how have you overcome them?
The big challenge of operating within the vast React ecosystem is avoiding decision fatigue. React is relatively un-opinionated and there are many different ways to use it. Choices have to be made about which open source components to use, what state management strategy to employ and what abstractions to embrace. Each one of these decisions can have lasting impacts on how the codebase for a product evolves and can manifest in unexpected ways as an engineering organization grows. The lessons we’ve learned in this department are not unique to React or to our team but have been reinforced: early abstraction can lead to unnecessary complexity, and don’t reinvent the wheel when there are well-documented, community-supported alternatives.
Using Apptio’s range of cloud-based software applications, businesses manage and optimize their IT spending. The idea is to make sure that every dollar is contributing in some way to business value, with tools to manage financial accountability, billing, planning and more for information technology spending. Apptio debuted on the stock exchange in 2016, then went private again last year when Vista Equity Partners bought the company for $1.94 billion.
Senior Software Development Engineer Son Nguyen said his team loves the ecosystems that surround the React library.
What cool features have you been able to build into Apptio's user interfaces using the React library?
Many of our new applications are built in React since we adopted it at Apptio. We have also created a shared React UI components library to help engineers develop new applications faster. One of the latest features we have built is “Comments,” a social feature that helps engage users with each other in Apptio and can provide much-needed context to complex reports. Using React, we were able to build this application in a way that integrated seamlessly into our existing applications, which were built in different frameworks like Google Web Toolkit and Durandal.
React and its ecosystem come with a steep learning curve.”
What made you decide to use React over options like Vue and Angular?
React is un-opinionated in many ways, which has allowed us to gradually migrate to it from old frameworks like Durandal and GWT. We love the ecosystem around React and are leveraging many OSS solutions to accelerate our development across the organization. The interop layers are very simple to reason about. Thinking in React is very different than the development model our UI engineers have been used to for a while. It forces you to think about the flow of data differently — in a good way!
What challenges have you faced in using React, and how have you overcome them?
React and its ecosystem come with a steep learning curve. Many of our front-end engineers are not familiar with this framework, so getting more engineers ramped up can be time intensive. We’ve had weekly Lunch and Learn sessions to promote React within Apptio to share knowledge and increase exposure.
Also, since our existing apps are not built in React, we needed to build infrastructure in GWT and Durandal to allow our legacy apps to render React components. This integration layer took us quite some time to design and build.
Zipwhip claims to be the first company that enabled text messaging through landline phones. Now, the company’s cloud-based platform and API help businesses eliminate missed connections with customers and create a new line of communication through the wildly popular form of texting. In addition to React, Zipwhip uses Redux for app data storage needs and for components that connect in order to get data updates.
Senior Software Engineer Jake Grajewski and Front End Engineer Kris Brown highlighted their company’s custom component library, which supports the construction of React apps.
What cool features have you been able to build into Zipwhip’s user interfaces using the React library?
Zipwhip utilizes a custom component library called Zipkit. The component library is used to support building core React applications and administrative support applications. Zipkit contains many generalized components, which are composed to build specialized components for specific applications. Examples include custom icons, form components and UX control components.
The Zipkit project utilizes the Storybook tool for developing UX components in isolation. Each custom Zipkit component has a corresponding Storybook story that can render generalized component versions. Storybook is used for isolation development and quick overview of component features.
The constraints on data flow direction and data mutations reduced lots of complexities around JavaScript piping.”
What made you decide to use React over options like Vue and Angular?
The React unidirectional data flow model represented the most coherent strategy for a single-page application framework. The constraints on data flow direction and data mutations reduced lots of complexities around JavaScript piping that’s prevalent in numerous other frameworks. Vue utilizes a hybrid strategy that features more options for developers but with increased complexity cost. And Angular — well, no more needs to be said.
What challenges have you faced in using React, and how have you overcome them?
React is an evolving framework that's constantly changing. Keeping up with the changing versions and adopting them in enterprise timescale is very challenging. This is especially so when trying to maintain legacy code written in previous versions that may have deprecated features. It takes lots of effort to overcome, with no simple answers. That being said, these are problems that are systemic to all front-end frameworks and not React-specific issues.
