As part of our consultant showcase series, we caught up with Jeremy Stocker, a Senior React Developer, who is currently working with a Major Supermarket Chain to modernize its eCommerce experience and deliver front-end engineering capabilities to the project. Jeremy is helping ensure a streamlined integration between Major Supermarket Chain website content management system and their front-end layer.
Content authors at the client need to be able to regularly update the website with new specials, updated pricing, and promotional material that are jurisdiction-specific. This is where Jeremy comes in as part of a highly skilled team to help deliver a solution that integrates with the front end so that the website can be updated in a seamless and user-friendly way.
What is the issue?
The CMS chosen (Adobe Experience Manager – AEM) means there are new integration requirements to make it easier for the CMS to operate across the whole website. The goal is to drive efficiency, provide a practical and reliable way for content authors to log in and update the website, and ensure this could occur over and over again without impacting the client experience.
Consequently, Restive Tech was brought in to provide the right leadership, skills, and experience to collaborate with the Major Supermarket Chain team to ensure the successful design, completion, and rollout of a new eCommerce website.
The solution
Jeremy, as a senior front-end developer, brought his knowledge of front-end design, architecture, and development practices namely in React and TypeScript to the project. The Major Supermarket Chain also utilizes an NX Monorepo which is particularly important in the context of what was needed for them, as it ensures a more effective project management solution that allows developers to keep several projects within a maintainable workspace. This makes it easier for them to use the same UI components for other products and ensures speedier development for engineers. In addition to this, the Monorepo is beneficial for the client because it allows for easier collaboration, code sharing, and cross-dependency management. It also allows for a more centralized approach to testing, deployment, and versioning. Additionally, because all code is in one location, it can simplify the code review process and make it easier to track and understand the entire codebase.
Other dependencies in use through the project include React Testing Library (RTL) which is a library for testing React components. RTL is beneficial because it encourages testing the behavior of a component rather than its implementation, which helps to ensure that tests are more maintainable and less prone to breaking when changes are made to a component’s implementation.
Additionally, React Testing Library focuses on testing the component as a user would interact with it, which makes it easier to test components in a way that mirrors how they will be used in the application. It also provides utility functions to interact with the DOM and its components, which makes it easy to test different scenarios and edge cases. Utilising React Testing Library within the client project has helped to:
- Ensure that individual units of code work as intended, which has helped catch bugs early in the development process.
- Provide a way to automatically test the code, saving time and effort compared to manually testing the code.
- Provide a way to test the code in isolation, which has helped to identify issues that may not be apparent when the code is integrated with the rest of the application.
- Provide a way to test edge cases and different scenarios, which has helped ensure that the code is robust and handles unexpected input.
- Provide a way to document how the code should behave and what it should accomplish, which has made it easier to understand and maintain the code.
- Provide the client with a safety net when making changes to the codebase, ensuring it is easier to refactor and improve the codebase with confidence.
Overall, React Testing Library has helped engineers write unit tests to improve the quality and maintainability of the client’s codebase while making the development process more efficient.
Jeremy’s role
Jeremy played a large part in making the front-end code work seamlessly with the CMS, as well as writing test cases with React Testing Library, addressing bugs and various engineering issues that came up. There was a lot of cross-collaboration with other developers, which means Jeremy was often involved in finding optimal solutions for complex problems promptly. For example, Jeremy was heavily involved in helping solve issues around server-side rendering (SSR) with the CMS, which was affecting search engine optimization.
Jeremy was able to advise how to get SSR to work seamlessly with Adobe Experience Manager (AEM) which required several changes to core infrastructure in addition to utilizing an AEM Remote SPA. The fact that Jeremy could apply his server-side rendering-specific knowledge was a huge benefit to the team. To do this successfully required excellent communication and collaboration skills– some of Jeremy’s many great strengths.
Challenges
As with any complex delivery, there were challenges along the way which required teamwork skills throughout the development.
A specific obstacle the team had to overcome was the turnover of people involved, meaning the learning curve around development workflow and domain-specific knowledge – which is key for the project – is often being reset with each new person joining. Jeremy, as someone who knew the workflow well, took it upon himself to create processes and documentation to show new team members how the code works and how to map components together between the CMS and front end so that each team member can onboard efficiently.
That enabled the project to continue unimpeded and for team members in other areas, such as those working on infrastructure and other areas of the application, to have an understanding of the solution, code and CMS being used.
The end result
It is early days, as the project is a large and ambitious one with a planned phased roll-out of the client’s website. However, we are already seeing the AEM integration making it easier for developers to make future changes, which will provide a lot of enhancements to the user experience and growth of the client’s online network. This is largely due to the modern technical approaches and practices being implemented by Jeremy and the team along with the customization and flexibility the AEM brings.
Using a modern tech stack, architecture, design approaches, and coding quality standards has enabled flexibility and reusability of code, as well as speed in development at the client.
A modern tech-stack and microservices-based architecture have enabled flexibility by allowing different components of the application to be developed, deployed, and scaled independently. Implementing specific development principles and approaches at the client has also enabled modular design as well as a separation of concerns which has helped to create a flexible and reusable codebase by making it easier to understand and maintain the code.
Coding quality standards such as code reviews, automated testing, and continuous integration has also helped to improve the flexibility and reusability of code by catching bugs and errors early in the development process and ensuring that the code written adheres to best practices.
Overall, using a modern tech stack, architecture, design approaches, and coding quality standards helped to create a flexible, reusable, and high-performing codebase that can be easily maintained and scaled over time.
For the client, as a large national business, this will improve conversion rates of order placements and seamlessly service a large customer base in an easy and time-efficient way.
Liked this article? Get the latest insights straight to your inbox.
More from the Restive Files
React vs Angular
