Circus Street
What was 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.
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.
Needs and problems
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.
Main pain points
After our initial consultation, we outlined the key issues that Circus Street’s current app was suffering from.
The application was monolithic. And compounding this problem was the fact that they were running an old version of AngularJS instead of a recent version.
Since Circus Street applied the same code to their mobile and desktop applications, everything was interconnected. That meant that instead of working on separate solutions for their web and mobile applications, Circus Street needed to fix both apps at once.
The main application’s code was structured in an excessively rigid way, thus limiting our flexibility. Applying changes and fixes to the code took longer than it should have.
Skills for a digital economy
Five areas of remote training:
Digital essentials
Reaching audiences
Insight and analysis
Strategy & transformation
Spotlights
Web and mobile platforms
Employees can learn anytime and everywhere with:
Classic web apps
Tablet access
Mobile apps
What we did
Solution
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 could rewrite Circus Street’s entire application at once. While this would be a holistic approach, it would also preclude any possibility of improving the application for a long time. This solution did not work for Circus Street because they had already established an expectation that their app would receive consistent updates. Their clients would not accept this type of approach.
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 achieve this, we used web components.
Gradually, we converted the entire application. We started with the smallest and least important components first and worked our way up to replacing the AngularJS core. As a result, the final product works perfectly.
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.
Achievements During the project we:
Separated the mobile code from the desktop code so that a specialist in each area of interest could take care of these matters themselves.
Took all the code written in AngularJS and converted it to React.js and Redux.
Wrote the code more flexibly than before, thus making it easier to maintain and modify in the future.
Created clear application logic through the use of tests. We also documented the code much more thoroughly than had been done before.
Made it easier for new developers to begin working on the project.
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.
Technologies and tools
