Six years since it was first released into the wild, there has been a great deal of conversation in the JavaScript community about the pros and cons of coding using the React library. Developed inside Facebook and first deployed on the social media giant’s News Feed product in 2011, React ushered in a new generation of JavaScript frameworks, replacing the likes of Backbone and Ember with the ability to handle data reactively.
Five React JS Advantages
- Easy to learn
- Vast library of developer tools
- Better user experience
- Seamless integration into existing applications
- Provides app-like capabilities
Used in the construction of user interfaces, we wanted to learn more about how the tech community leverages this maturing JavaScript library. We spoke with software engineers about the user experiences they’ve built using React, the challenges they’ve encountered and how they dealt with them.
New Engen
New Engen deploys deep learning technology to analyze the success of a business’ various marketing strategies across e-commerce, social media and search platforms. The technology can then adjust resources accordingly to maximize return on marketing dollars. Headquartered in Belltown, the startup has grown quickly since it came out of stealth mode last year.
Senior Front End Software Development Engineer Jake Chapman advises engineers working with React to focus on delivering features and products first, and to worry about performance later.
What cool features have you been able to build into New Engen’s user interfaces using the React library?
We’re a data company and deal with a bunch of different ways of handling data — both user-generated and channel-specific report data. So we’ve had a rad opportunity in building different types of UI. You’ve got your basic forms, which are Complex data tables with up to 35 columns of data per row, so we had to implement floating headers and columns to help the user navigate through them.
We’ve just started planning one of our newest features and have begun architecting the best way of handling completely user-configurable data visualizations. These will handle a wide array of data sources, a user’s own aggregation options and where they want the graphs to live on a page — all completely tailored to how that user views the data best. If they enjoy bar charts, they can make it a bar chart; if they visualize data better with scatter chart — boom! — they get a scatter chart.
A lot of engineers tend to ‘over-engineer,’ and focus on performance before addressing immediate issues or writing core features into their software.”
What made you decide to use React over options like Vue and Angular?
We picked React because it’s not like the others — it’s not really a framework. At its core, it’s just a view rendering library, part of a much wider ecosystem of open source projects for the various needs of the features we work on and build. We’d used Vue and Angular at previous jobs and we decided we didn’t want to be confined to an entire framework rather than one single library.
What challenges have you faced in using React, and how have you overcome them?
Ultimately, I think we face similar challenges to every company using React at this level of application development. These include keeping things as dry as possible, trying to reduce component complexity while being flexible enough for reusability, and using the best React patterns that the JavaScript community has found to be most useful for specific situations.
A lot of engineers tend to ‘over-engineer,’ and focus on performance before addressing immediate issues or writing core features into their software. There will always be code debt; there won’t always be time to attract or keep that user because of a feature you didn’t ship because it wasn’t as good as it could have been.
Rover
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.
PayScale
PayScale helps users figure out how their compensation stacks up compared to their colleagues across industries, and works with businesses to create compensation plans that make them attractive places to work. California-based Francisco Partners recently acquired the Seattle tech company from Warburg Pincus for an undisclosed sum, in which PayScale was valued at $325 million.
Software Development Manager Nicole Cua and her colleagues first picked up React on side projects, and eventually found a way to incorporate it into larger projects.
What cool features have you been able to build into PayScale’s user interfaces using the React library?
When we started using React four years ago, we created many small widgets and integrated them into our existing pages. In the last six to 12 months we’ve released our salary survey and research center employer pages — both user interfaces written 100 percent in React.
A few of us originally started trying it out during hack days and in very small projects.”
What made you decide to use React over options like Vue and Angular?
Before React, we were mainly using jQuery. A few of us originally started trying it out during hack days and in very small projects. We started training our peers and it sort of just stuck — it gave us the performance and componentization we wanted. We haven’t had blocking issues using React, so there’s been little to no experimentation with similar libraries or frameworks.
What challenges have you faced in using React, and how have you overcome them?
We’ve had two major challenges using React, the first of which was server side rendering. We care a lot about SEO, so we needed our React pages to be fully server side rendered. Traditionally we’ve used C# and ASP.NET, so we started with a .NET core server but ran into stability issues. Recently, we switched to using NextJS with an Express server and it’s been amazing.
The second challenge involved A/B testing. We use a tool called VWO to run A/B tests. Since it uses jQuery to update the UI, testing React components got tricky. This required my team to truly understand how these two technologies were manipulating the document object model so that we could get them to play nicely together.
Pioneer Square Labs
Pioneer Square Labs combines entrepreneurs, funding and interesting business ideas to spin out startups. The company is backed by 14 venture funds and 50 angel investors, and has spun 13 startups out since it launched in 2015. The studio prides itself on betting on its ability to work on ideas — and abandon them when it becomes clear that the idea isn’t working.
Principal Software Engineer Adam Loving said PSL has used React in several of its startups, including Boundless Immigration, Gemma Labs and NextStep Careers.
What cool features have you been able to build into Pioneer Square Labs’ user interfaces using the React library?
React has helped us build feature-rich interfaces quickly. This creates a good experience for customers, and makes our small startups competitive with big companies.
We used React to create slick entry forms for Boundless Immigration, with animated navigation, autocomplete, careful validation and constrained input. We’re also creating a custom form experience for Gemma Labs. Nicely designed web front ends with carefully considered interactions like animation and validation help give a startup the feel of a big company.
React Native has been critical for NextStep Careers because it offers cross-platform support, but it also offers a better development paradigm for rapid development. React Native’s flex layout paradigm is easier to work with than XCode’s constraint-based layouts.
I’m a late adopter. It wasn’t until friends had been telling me about React for a year-and-a-half that I finally started playing with it.”
What made you decide to use React over options like Vue and Angular?
I’m a late adopter. It wasn’t until friends had been telling me about React for a year-and-a-half that I finally started playing with it. That was 2015. Now React is a very mature and widely adopted technology. There are a couple reasons why it was easy to adopt. One, you can start with a single small component that lives by itself on a web page without needing to create an entire single-page application. Angular, for example requires a bigger investment up front in understanding and planning how your components fit into an app.
Two, the React paradigm, which separates component props from component state, is very easy to understand. These two things — simple composability and a simple data-flow paradigm — make React not only easy to start out with, but easy to stick with.
What challenges have you faced in using React, and how have you overcome them?
The challenge comes when you start building a complex app out of those separate components. Adding URL routing, and figuring out how data will flow in and out of your app requires a bit more thinking and planning. Luckily, there are established patterns, and plenty of documentation to help out. Another challenge is the complicated state of building for the web with Node. On one web project — which integrates client, server and Shopify code — we’ve got three separate builds and three separate Webpack configurations. So there’s some standardization, but still a huge amount of complexity. For me, the solution to that is staying with the default Create React App tools for as long as possible, until we’ve got sufficient dev power to customize our build process.
TUNE
TUNE says its Partner Marketing Platform is one of the tech industry’s most flexible SaaS offerings for building, managing and scaling mobile advertising campaigns. The software is designed to work for any marketer’s partner organization across apps, mobile web and desktop platforms, and measures performance, letting marketers view the performance of all partner organizations in one place. Founded in 2009, the company is headquartered in Belltown with more than $35 million in funding under its belt, along with clients like Groupon, Baidu and Shopify.
Senior Software Development Engineer Shafiul “Jacky” Islam said his team has found React handy in the construction of multiple user interfaces.
What cool features have you been able to build into TUNE’s user interfaces using the React library?
At TUNE, the most impactful thing we have built with React has been our internal component library, based on our UX patterns that we call the “TUNE Experience Language”, or TXL. Design and engineering teams partner to establish these patterns for engineers to implement in the shared component library. Any of our user interfaces are able to use these components, so whether we are delivering a new feature or re-engineering an existing feature, we can more easily work toward a cohesive user experience for our customers.
Skills learned in React have allowed us to build two mobile apps using React Native.”
What made you decide to use React over options like Vue and Angular?
React was first adopted at TUNE in early 2015 when it was more mature than Vue so, at that time, React was the natural choice for a component-based library, since we were moving away from AngularJS. Additionally, skills learned in React have allowed us to build two mobile apps using React Native.
What challenges have you faced in using React, and how have you overcome them?
One main challenge has been managing shared state in a way that maximizes reusability and minimizes boilerplate when using React with Redux. This challenge has been overcome at TUNE by designing and implementing a microframework that enables pub/sub interaction patterns among components through Redux (like connected components at any level). This microframework was used in both Search/Filter Disabled Links and in Offer-Level Automation Rules. In the near future, we plan to provide more details about this microframework on the TUNE blog.
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.
Apptio
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
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.
