A case study of a unique challenge that we tackled for adidas.
· 5 min read
Our partners often come to us with unique technical challenges. Embedding a React app into an AngularJS app may seem like a strange ask. In this case study, I will highlight the business need that created a case for us to do this, how we approached the situation, and the results of the final solution.
Our partner, adidas, first approached us about the need to integrate two existing systems (I can't get into details about the systems so I will stay high level). One team had a legacy AngularJS app with a lot of front-end business logic, which they were running for their B2B platform. Think internal e-commerce website. Another internal dev team (different country's business unit working on a similar platform) had created a React application that allowed for a custom add-on to products. Think personalized clothing for sports teams. After some discussion about approaches we came to a few conclusions:
We set the right expectations from the beginning and didn't promise something that we couldn't deliver.
I just wanted to make clear that we were completely transparent and upfront about never doing something like this before. I think that this is a big reason why the project was ultimately a success for all parties. We set the right expectations from the beginning and didn't promise something that we couldn't deliver.
We decided that the best way forward would be to build a proof of concept. This would allow us to do a few things:
After doing some research (a.k.a Googling 'integrating react into angularjs') and consulting some colleagues that had done similar integrations, we decided to try using ngReact. ngReact is an Angular module that allows React components to be used in AngularJS applications. This seemed like a good place to start because it had 2.6k stars on Github and (at the time) was actively maintained. It also seemingly did what we needed based on the documentation. Our code looked something like this (obviously a contrived version just to illustrate the idea):
We decided to take a step back and try a different approach.
Instead of trying to make this work the "Angular" way, we decided that we would just try to make this work. We included the UMD versions of the dependencies we needed manually in the
Then we created a Redux store, applied the Thunk middleware, and initiated the React app.
We were able to access all of the libraries globally (avoiding any compiling issues) since we included them with script tags. We created a simple
to bootstrap the React app. Other than a few styling issues, this actually worked, so we brought this back to the teams at adidas.
As a team, we decided to pursue this method and build out a more robust implementation. It was by no means a perfect (or pretty) solution, but it was a practical and viable solution that solved the problem. Some further challenges and drawbacks that we encountered were:
It was by no means a perfect (or pretty) solution, but it was a practical and viable solution that solved the problem.
But all in all, this was a win. We were able to successfully integrate two complex systems. We made sure to do knowledge transfers so that there was an internal understanding of the implementation. And ultimately our partner was happy, so we were happy.
Stack Five is a React and NodeJS consulting company that strives to push the boundaries of the web and build meaningful things. If you're looking to create a cutting-edge web application or need software engineering resources for your project, please contact us.