In early-2018 I joined John Lewis as a senior front-end developer primarily attached to 'Findability' – an eclectic and high-energy team responsible for maintaining and improving the customer's journey through the site. In a nutshell, Findability makes sure that visitors to the John Lewis website can quickly and easily find what they are looking for.
Attracting in the region of forty million visitors each month, and allowing customers access to over 160,000 products, the johnlewis.com website was a monolithic beast: a dusky Java inventory system, with a Java-based middle-tier alongside AEM for content, and a front end primarily built with Handlebars with Sass and vanilla JavaScript. Testing was covered via Groovy and client-side unit tests, whilst additional A/B testing came via New Relic and Monetate.
Where responsibilities for different areas of the site had started to be divvied up amongst the various teams, a little standalone React had also made an appearance within the codebase.
The remit was wide: as a team we owned the site-wide header and footer, the technology behind the search engine, the product listing pages and filtering mechanisms, and eventually the product details pages too, amongst many others.
During my time at John Lewis my team and I introduced countless improvements, optimisations and new features, including a smart 'chunk loading' system which allowed us to introduce infinite scrolling to the Product Details page whilst retaining the chunk-based delivery from the backend. This used localStorage to keep track of data on-page and position whilst only calling for additional data when it was clear the user was going to need it. This reduced page load times, increased user’s ability to find what they were looking for and removed redundant calls back to the serving infrastructure.
Although not strictly a 'front-end' task, another performance issue my team and I tackled very early on was a culling of third-party scripts and clutter loaded onto the page. At one point there were nearly forty different third-party scripts coming in at load time, which significantly delayed the page loads and added very little – if anything – beneficial to the end-users. Many of these scripts also listened and processed events like scroll, which made the pages unresponsive and janky.
It fell to me to catalogue these third-party scripts, their performance impact, and then try and trace which team originally introduced it. Fun! Over the course of several months the team was able to reduce this third-party bloat by over 75% (again, with no discernible benefit or obstruction to the end-user) which in turn drastically improved site performance and reduced bounce rate.
The largest piece of work I was involved in was already nearly two years in train when I joined: the rebranding and repositioning of John Lewis and Waitrose to 'John Lewis & Partners' and 'Waitrose & Partners' respectively.
Over the course of several months we put together a concise style guide and matrix of every on-site element that would need to change as a result of the rebrand (going from warm-and-green, to minimalist-and-monochrome). With significant refactoring of the existing codebase, we were able to consolidate almost every styling element into Sass variables, which could then be switched via a feature switch at build time. The result was two identical versions of the site running side-by-side, and a simple feature toggle on the morning of 4th September 2018.
