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