We used to have a project planning document literally called “The Ongoing Reactification of CodePen” in our company Notion. It’s called “CodePen on the New Stack” now, as of course, React is just one of the tools in our new preferred stack that we build new UI with and replace other areas of the site with.

CodePen has long been a Ruby on Rails site, and we aren’t looking to change that necessarily, but as time ticks on our stack evolves.

  • More and more of our site is powered by Node and serverless functions, so much so that we recently decided to consolidate all our Node projects into a monorepo in order to more efficiently share code.
  • More and more of our site is client-side routed and built from React components.
  • More and more of our data is accessed from Apollo GraphQL queries and changed and sent back with Apollo GraphQL mutations.
  • More and more of our client state is managed with Apollo as well, a move away from our early days in Redux.

We’re not exactly on a mad dash to replace the entire site in React’n’friends, but quite a while ago we decided that all new UI development would be done on this new stack. So if we needed to touch something significantly or build anything from scratch, we had to do it in the new stack. No editing our old jQuery/Rails stack for anything other than quick bug fixes.

Drawing this kind of line in the sand has been effective for us. More and more of the site gets moved over time, but we don’t need to make site re-architecture itself a priority project. Although the closer we get to having the whole site in the new stack, the more tempting that becomes.

Recently, we released all user and team profiles on the new stack. You probably won’t notice anything majorly significantly different, but there are some changes:

  • It will feel much faster to navigate within the profile (SPA!)
  • More pages within your profile are able to be viewed in List View and sorted
  • The grids of Pens/Project/Post/Collections in Grid View have a context menu with more functionality, with Deleting, Pinning, and Following joining Adding to Collections.

Those changes to Grid View now percolate to all the rest of the site that uses New Stack grids, like the homepage and all Explore pages. That’s part of the beautify of building from highly re-usable components! More and more of the site will be able to re-use these components, which allows us to move faster and build more useful features, which keeping technical debt low.

We’ve found that as we release work on the new stack, we’re ultimately able to delete more code than we’re adding, which is one of the best feelings there is in web development.

🎉 I’d like to take this opportunity also to thank Cassidy Williams who helped with a lot of this transitional React work. Cassidy has taken a job over at React Training which sounds like a great fit and we wish her all the best.