Coder’s download, Part 1: How 4 Seattle tech teams use the React library

by Quinten Dol
May 23, 2019

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.

Used in the construction of user interfaces, we wanted to learn more about how the tech community in Seattle leverages this maturing JavaScript library. In part one of a two-part series, we spoke with four Seattle area engineers about the user experiences they’ve built using React, the challenges they’ve encountered and how they dealt with them.

 

Check out Part 2Why 4 Seattle tech teams build user interfaces with React

 

new engen seattle tech startup react engineers
photo via 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.

 

payscale seattle tech startup react engineers
photo via 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 react engineers seattle tech
photo via 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 seattle tech startup react engineers
photo via 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.

 

Read More About the Benefits of React

Jobs from companies in this blog39 open jobs
All Jobs
Data + Analytics
Design + UX
Dev + Engineer
HR
Marketing
Operations
Product
Sales
Content
Data + Analytics
new
PayScale
Seattle
Data + Analytics
new
PayScale
Seattle
Content
new
TUNE
Seattle
Developer
new
Pioneer Square Labs
Seattle
Marketing
new
New Engen
Seattle
Data + Analytics
new
New Engen
Seattle
Sales
new
PayScale
Seattle
Sales
new
PayScale
Seattle
Operations
new
PayScale
Seattle
Marketing
new
New Engen
Seattle
Developer
new
New Engen
Seattle
Sales
new
PayScale
Seattle
Product
new
New Engen
Seattle
Sales
new
PayScale
Seattle
Sales
new
New Engen
Seattle
Design + UX
new
New Engen
Seattle
Sales
new
TUNE
Seattle
Developer
new
TUNE
Seattle
Design + UX
new
New Engen
Seattle
Design + UX
new
New Engen
Seattle
Design + UX
new
New Engen
Seattle
Operations
new
New Engen
Seattle
Marketing
new
New Engen
Seattle
Developer
new
Pioneer Square Labs
Seattle
Marketing
new
New Engen
Seattle
Sales
new
PayScale
Seattle
Data + Analytics
new
New Engen
Seattle
HR
new
PayScale
Seattle
Marketing
new
New Engen
Seattle
Operations
new
TUNE
Seattle
Design + UX
new
TUNE
Seattle
Developer
new
Pioneer Square Labs
Seattle
Product
new
New Engen
Seattle
Sales
new
PayScale
Seattle
Developer
new
Pioneer Square Labs
Seattle

Seattle startup guides

LOCAL GUIDE
Best Companies to Work for in Seattle
LOCAL GUIDE
Best Software Engineer Jobs in Seattle
LOCAL GUIDE
Best Data Science & Analyst Jobs in Seattle
LOCAL GUIDE
Best Sales Jobs in Seattle
LOCAL GUIDE
Best Marketing Jobs in Seattle
LOCAL GUIDE
Best Design Jobs in Seattle
LOCAL GUIDE
Your Guide to the Seattle Startup Community
LOCAL GUIDE
Top Seattle Startup Funding Rounds