Bitnoise_ build solid products

Specialist provider of online training in digital skills

How Circus Street switched from AngularJS to React without losing momentum

About the client

Circus Street is the only specialist provider of online training in digital skills specifically designed for global enterprises. Circus Street partners with their clients to design learning paths that meet the individual needs of their business. Programs are delivered through an LMS friendly platform that houses an online library of 100+ lessons, all made with Circus Street elements that make the knowledge stick. The courses are created with; scriptwriters to simplify complex topics, award-winning animations that are entertaining and educational, interactions and assessments to embed knowledge, and dynamic presenters that keep learners engaged. The platform offers translated video captions and assessment questions, integrates with LMS’s, adopts single-sign-on, and automates management tools.

The challenge

Migrating from one technology to another is a tall task for companies of any size. The larger the project, the more things can go wrong.

At Bitnoise, we like to take on large-scale applications and solve their issues using React.js. However, one of our clients’ foremost fears is adapting their project successfully to this new library while retaining the same level of service their clients expect.

In this case study, we’ll demonstrate how we cooperated with our client, Circus Street, to change their technology from AngularJS to React.js. As a result of our successful collaboration, Circus Street was able to open up a new path of product development without harming the performance of its application in any way.

Goals

Originally, Circus Street reached out to us to get help maintaining their main web application. At the time, it was running on AngularJS. During our initial technical consultation, we both realized that one sticking point was causing Circus Street a lot of harm. AngularJS is an old and static technology , any support for this library was soon to end in 2022. Circus Street needed a solution that would allow them to introduce new features to web and mobile apps more quickly. The solution also needed to be flexible enough that Circus Street could make the switch without inhibiting its ability to deliver a quality experience for its clients.

What we did

React.js wasn’t a new solution to the Circus Street team. For instance, internal tools like the admin panels had been using React since the beginning of their organization’s life. The whole team at Circus Street was quite familiar with the technology. However, we had a massive conundrum. How could we upgrade such a rigid app without impacting its performance for the end users? To tackle this issue, we engaged in an ideation process and outlined two potential paths:

-

We considered rewriting Circus Street’s entire application at once, which would have allowed for a complete overhaul and modernization of the system. While this holistic approach might seem ideal from a technical perspective, it came with a significant drawback: it would prevent any updates or improvements from being delivered for an extended period. For Circus Street, this was not a viable solution. The company had already built a reputation for providing consistent updates to their application, which their clients had come to expect and rely on. A prolonged pause in updates would not only disrupt the user experience but could also harm client relationships and trust. As a result, this approach was incompatible with the business model and the expectations of their client base.

-

On the other hand, we had the option of using the Strangler Pattern, which allowed us to migrate the application from AngularJS to React.js piece by piece. Taking one step at a time, we would rewrite bits of Angular code into React and nest it within the old Angular code – which worked on React components. To ensure seamless integration and compatibility between the two frameworks, we utilized web components.

We gradually converted the entire application, starting with smaller, less critical components and progressing to the AngularJS core. This method ensured minimal disruption and allowed for continuous testing. As a result, the final product functions seamlessly and meets all expectations.

04.2

How we worked and build trust with Circus Street’s Team

At the beginning of the project, we only deployed a single team, made up of a combination of frontend and backend developers, plus a quality assurance engineer. Later, Circus Street wanted a team that was more integrated into their internal processes and workflows and instead created 4 separate teams : one for frontend development, one for the backend, one for mobile development, and one Quality Assurance team. This change allowed us to speed up the development process and complete the project more efficiently.

Additionally, the process of integrating our team with Circus Street’s workflow was smooth and with no big delays. Not only was our team respected for their high-end technical skills, but they also possessed the soft skills required to get along with everyone on the client’s team.

Communication isn’t just about sensitivity to the opinions of others. In a remote world, communication also needs to happen smoothly in a technical sense . We ensured that we addressed things like the sound quality and other mundane things ahead of time so that communication between our team members and Circus Street was always flawless.

Moreover, the higher-ups at Circus Street also respected our team’s abilities and as a result, they placed quite a bit of faith in our team from the beginning. We made decisions independently, and if something needed changing, we organized this ourselves without dragging down their internal workflows. Organized under a strong project manager, we were able to work with Circus Street’s team effectively.

Results

With the 2022 Angular deadline looming, Circus Street needed to upgrade its application fast. They were gaining users every day, and couldn’t continue to maintain this user base with old and soon-to-be irrelevant technology in AngularJS. From the technical side, we fixed any issues with AngularJS’ flexibility by replacing it with React . This also allowed us to split Circus Street’s mobile and web applications to make the application leaner and easier to modify. Working in parallel with the old technology and implementing React code piece by piece was the best solution for Circus Street. After all, they had an in-demand platform with plenty of clients. They couldn’t just stop maintaining the application altogether while rewriting everything at once. Every company’s ideal solution is different. This Circus Street case study exemplified our ability to adapt to the client’s needs and solve technological problems for applications with thousands of end-users. Reach out to us at hi@bitnoise.pl to learn how we might adapt to your use case.

What went great

Took all the code written in AngularJS and converted it to React.js and Redux.

Wrote the code more flexible, making it easier to maintain and modify in the future.

Made it easier for new developers to begin working on the project.

Created clear application logic through the use of tests. We also documented the code much more thoroughly than had been done before.

Separated the mobile code from the desktop code so that a specialist in each area of interest could take care of these matters themselves.

Let’s get talking

Tell us about your needs

Tell us about your needs and we'll get back to you shortly