The website for regular users and the admins were in the same domain. Regular users could use the website without authentication. But to get access to admin space, the admin has to go to the sign-in page. Only after authorization will private pages become available. It created difficulties in the maintenance app. My team was responsible for dividing the big ReactJS App into 2 separate smaller ones. I was the lead of this project. I prepared a plan and led the team to a successful outcome.
Solution:
Split pages (delete unused pages)
Split redux store (delete unused part of stores)
Split components (delete unused components)
Delete unused styles
Split env files
Fix redirects
Add new repository
Add new S3 bucket
Setup redirect rules
Result:
2 separate react apps with separate domains
Decrease deployment duration
Decrease bundle size
Decrease initial load
Notes:
A lot of unused components were deleted
Some components were refactored due to updates or deletions in store, related components, utils, etc.
It would be better to start separation from high-level infrastructure to low-level (Pages -> Components -> Styles -> Utils).
Upgrade moon.io version
The internal styling library was upgraded to the new versions with new fancy components. Designers are asking to use them. We had to migrate to the latest version to avoid creating custom components and make the development process faster. It helped us avoid mismatching with design, and designers became free to use new components. I helped to make the migration process smoother, prepared a migration plan, and helped implement it.
Solution:
Upgrade Node.js version from v14.x to v20.x
Upgrade all dependencies
Use new components instead of old
Result:
Bundle size was decreased
Around 10 custom components were replaced with components from the new library version
Designers stopped being limited by components that they could use for designing
Notes:
Better to use Redux Toolkit instead of Redux (easy to use, reduce a lot of boilerplate code)
We needed to carefully go through all dependencies, check possible migration documentation for tips, and retest functionality
Styled Components to Tailwind CSS
Our team migrated to a new version of the internal styling library. The old version was based on Styled Components, but the latest version of the styling library is based on Tailwind CSS. In case it did not support 2 different approaches of styling, we had to eliminate Styled Components. My goals were to set up Tailwind for the project, provide guidelines on migrating, and help my team with obstacles.
Solution:
Config for Tailwind CSS
Replace Styled Components with Tailwind CSS
Delete unused libraries
Result:
Development speed was increased 1.5x-2x times (no need to create custom components; Tailwind CSS is easy to use)
Notes:
Use merge class names library
Use converting tools CSS to Tailwind CSS to improve confidence
Try to use default Tailwind CSS tokens
Build transparency and trust with a client
The non-technical client did not fully understand what we were doing and how much effort was needed to finish some scope of the work. Because of this, we had a lot of critical tasks in the backlog that had to be completed ASAP. The team was overloaded. The solution was to create transparency between our team and a client. We decided to have a regular call where we discussed current progress, discussed different topics, and shared the plans for the next few weeks.
Solution:
Regular calls with clients (demo, hot topics discussion, estimates, plans for next sprints)
Document all topics that were gathered during the sprint
Meeting notes with document
Regular releases with demo and release notes
Result:
The team felt more appreciated
We clearly understood client needs and increased the level of our decisions in terms of priorities
Clients trust us with new projects
Notes:
Sometimes it seems like redundant but at the end you will see the result
Migration legacy AngularJS app to ReactJS app
The performance of the big grid with parent and child rows was too slow. It took minutes to load the grid with 20-30 raws. The team migrated to a better solution for handling a big grid with many interactions. ReactJS started to become the default choice for websites where interactivity and performance were keys. Our team has prepared a migration plan to integrate a new ReactJS app into the big AngularJS project. We've created a directive with the ReactJS app. The best performance optimization approaches were used during migration. And we were able to improve performance 4-5 times. After migration, the grid with 80-100 raws worked smoothly.
Solution:
ReactJS app as a directive inside AngularJS
Redux selector
Lazy loading
Data storing optimization
Pure Component
Result:
Performance was increased 4-5 times. The app started to handle the grid with 80-100 records smoothly
Notes:
Bundle size and initial load were increased
Some features were duplicated across the AngularJS app and ReactJS app