The First Shop - 100%
After having properly celebrated the successful launch of ReactJS front end (Poseidon) in the fall of 2018, we started the conception phase of First Shop. With XXXLutz Group’s most recent expansions it’s plain to see – our management means business! In parallel with rolling out another product demo in Serbia in May 2019, we wanted for all actual online shops to also profit from Poseidon as soon as possible. So it was back to the drawing boards for our stakeholders and PMs. Their mission: determining the old front ends’ features indispensable for releasing the online shop.
And the key question: which of the remaining 18 online shops would be the chosen one? It was a tough decision to make, but at the end of the day, it was easy to see: the Austrian online shop! After all, this is where you’ll find our company’s heart: our headquarters.
Until the day would come, there was no time for us web developers to just sit back and relax – we’re not the type to do so, anyway. There will always be technical debt, no matter how detailed you have planned your system. For us, this meant getting to work on our first refactoring.
Refactoring
In 2018, we did not dare to bet on GraphQL for the API, as the library still was in phase 0.x. Instead, we agreed on REST with the established JSON API standard. But then the open source community has proven once again just how fast you can further develop the web by joining forces. So: GraphQL it is!
Refactoring didn’t just stop there:
React keeps on developing new features and concepts – which also demands work our side.
Our implementation of i18n hasn’t been quite ready yet.
A11y also needed improvements.
Security audits and penetration testing revealed shortcomings (the enemy never sleeps) that immediately need patching.
Argo CD offers a UI for simplifying deployments and rollbacks
… and accordingly, the establishment of CD/CI has to be understood throughout the company.
Further development
While dealing with these obstacles, we also had to familiarise more and more developers with our stack. We even opened up a new office with devs in Barcelona, which needed us to revolutionize our overall internal communication.
To make this happen, we enhanced our set of beliefs by an important building block: truly living a culture of professional growth. We simply cannot assume that each and every colleague already knows everything. Not knowing something is no grounds for dismissal. We need to be able to ask questions free of fear in order for us to scale new heights. We grow from our mistakes. Therefore, in our PRs, we embrace an inclusive and educational approach. Each dev is free to train their colleagues in brief workshops. In order to share knowledge across locations, we organize internal meetups every two weeks, where we present the latest technology or show the most wanted tutorials.
Performance
With 1,400 menu items needing to be rendered and close to 5,500 DOM nodes, even the slightest mishap is at the expense of performance. Of course, this is just one of many issues everybody needs to be aware of right from the start. However, sometimes, you are just blunted by habit or faced with structural issues. Last September, shortly before the end of our self-imposed deadline, we realized that there was no way for us to go online without going over our performance concept once again. Since we could not task our colleagues with fixing these issues just like that, and because an unbiased view from outside often proves to be helpful, we asked external, international experts for their assistance.
Poor performance affects all areas. If we depend on our customers to have powerful computers and state-of-the-art devices in order to shop with us, our turnover would substantially decrease. But it’s not just the customer who is affected by this: The longer it takes for the shop to fully load, the longer it takes to conduct GUI tests, slowing down our developers. Our SSR service also requires a great deal of additional resources which involves increased costs. But at the end of the day, the investment really pays off.
These performance issues are now a thing of the past. Paying more attention to this matter, we have adapted our workflow. One result of this change is how we plan to integrate Lighthouse CLI. As soon as a new branch falls below a certain threshold, this feature cannot be deployed as long as the performance has not been reviewed and optimized.
Live
At the time of writing this blog post, 50 % of the Austrian traffic goes to Poseidon. With our user tracking indicating that our customers’ behaviour has changed for the better, we feel like we are on the right path. The percentage of traffic on the new page is increased so we can reach 100 % as soon as possible. The architecture also lives up to our expectations and its scaling in the Cloud is as anticipated. Christmas business – bring it on!
Join us
There are many areas where we need your support, know-how and mindset. Help us grow. We are currently looking for Developers, Cloud Engineers, Product Owners and Test Engineers, who would like to accompany and support us on this journey into the future.
Author: Michael Huber, Teamlead E-com Development
*German version to be found here