📅 June 13, 2019
👷 Chris Power
Using React best practices and tools, I helped re-write DRAFT’s web application within 9 months. Here is the overview of how that was accomplished.
DRAFT is a daily fantasy sports company that prides themselves on unique and fun DFS sports games and formats. They have multiple betting games for sports ranging from Football to Golf. In 2017 they were acquired by Paddy Power Betfair, and have been operating as DRAFT (by Fanduel) since 2018. DRAFT mostly focuses on their iOS and Android mobile apps, but they also have a very extensive Web Application that compliments the mobile apps, originally built in Ember.
In early 2018 due to the lack of interest in the engineering team, and a lack of available talent, and a new investment from PPB, DRAFT began the process of re-writing their Ember app in React. DRAFT has a robust Ruby on Rails API that serves the mobile applications, and the web application; however, adoption of new API calls was dwindling due to the lack of Ember work the team was putting out. The front-end client (the Ember web application) was missing out on new functionality and new game formats.
Browntree Labs was originally hired to work on the Ruby on Rails API in anticipation of the upcoming football season. After 3 months on the API team; however, it became clear that the new React team needed help pushing the re-write project over the finish line. In a very short amount of time, yours truly was working on a very large and complicated React application, implementing features as quickly as possible. the team and I used a few main concepts to build features quickly and maintain great code:
DRAFT has a lot of re-use in their web application. Imagine the concept of a ‘player card’. A ‘Player’ could be a professional athlete who plays in the NHL, the NBA, the MLB, or the PGA. In the re-write, we created the concept of a ‘player card’ that encapsulates all of these scenarios, and we were able to share it throughout the whole application. By creating solid components in React and re-using them in different places, we quickly implemented many features of the previous web application.
For this project, the team and I used the Atomic Design Pattern to structure the application. If you’re unfamiliar with this pattern, it looks something like this:
atoms - molecules - organisms - templates -> pages
The Atomic Structure pattern works very well when applied to a React Project. In React, you create everything in terms of components. And with an Atomic Structure, you can think of differently sized components fitting neatly into the various parts of the structure.
Imagine our Player Card from above. There are actually many parts to this
component. We have some components that span multiple levels of our Atomic
Structure in our Player Card alone! We have a player avatar, that stems from an
avatar atom component. We have a table for stats, that comes from a
statList molecule component. And we put everything together in the
playerCard which happens to be an organism component — a component that
combines molecules and atoms to form a more complex piece of UI.
playerCard component may be grouped up into a list of players. This list
could be considered a template. And you can combine these templates together
to form a page. In our image above, we can see the Page that displays the
winnings and scores from past contests in DRAFT.
Using a set structure helped us come up with UI components very quickly, as we had a good mental picture of how things should fit together through code. We also were able to quickly re-use large pieces of functionality, because we split up our code in neatly packaged components, like organisms and templates.
applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger
Redux works really nicely with React with the React-Redux package.
A quick example would be the Results page shown above. When we make a request from the API, we get a whole bunch of data. Most of this data is not necessary for the Results page; however, we can use Redux’s reducers to slice the data to only the relevant pieces we need. Slicing the data is a great way to keep each page lean.
React is an amazing library, and when you couple it with the right tools and concepts, you can very quickly create very complicated applications. We (the front-end team at DRAFT and I) used a few principles and concepts to very quickly re-create a whole complex web application in React with a very tight deadline.