Vodafone

Transitioning into Vodafone after having contracted for them was the next step in my career. I tech lead the broadband frontend team which consist of 3 front end teams which amounts to 16 -20 Front End developers, giving guidance both technically and from the business perspective.

• Creating story boards and architectural diagrams for change requests to give both developers and business enablers understanding on architectural changes and service integrations.

• Outlining technical requirements within features, stories and epics. Dealing with 4 -5 different propositions annually, maintaining context and being a source of truth.

• Run weekly FE KT sessions to delegate and encourage developers to have a collaborative approach on pushing forward best practices and present new tech ideas or sprint work within the project.

• Been involved in a major micro frontend end architecture solution along with other senior developing at its grass roots.

  • Researching solutions
  • Developing a POC which enabled a team to create a productionised version

• Creating an internal mocking framework solution tailor to dealing with downstream service outages to progress dev work and UAT testing in lower environments using JSON mock files.

• Code migration features for progressive changes:

  • JavaScript – TypeScript
  • Jest – RTL
  • SCSS – Styled Components

Here is a quick overview of the broadband journey microsite:

• The frontend is built in React, Mobx, Styled-components

• The app has a node server which:

  • Acts as a proxy to downstream services
  • Serves prerendered HTML (SSR) for the initial request from the client
  • Serves assets locally (assets served from CDN in production)
  • Is hosted on an ECS cluster (aws)

• Uses an in house built micro frontend implementation to serve components dynamically to other shop sites and the CMS platform (more on this below in the highlights).

This was a very interesting project that I was a part of. The business required that the content team should be able to dynamically add the availability checker component to any of there CMS pages. This would be to get customers into a buy journey quicker, however the problem was two fold:

• The availability checker was a component exclusive to the broadband repo, it was not a consumable component from our core library which the cms content platform app used to render components. It would also not make sense to make a component of that size and complexity a part of the core library.
• The other issue was an architectural one. Each shop microsite has specific API keys which connect to their own backend JCS (journey composite service) via the apps node server. The CMS platform has no concept of these API keys and it would would make no sense to add all these keys to the CMS platform as it would defeat the purpose of separate keys for each JCS.

In order to solve the issues above, we needed a dynamic way of rendering the availability checker onto marketing pages controlled by content editors via Contentful. The component also needs to be able to interact with downstream services while on a CMS page. Enter micro frontend!

The implementation built these components separate from the main app (broadband app). We then need to use import maps that were hosted on the apps node server referencing the route of the exposed JS file of the micro frontend. Then we built a federated run time which would dynamically render components referenced from these import maps on to any page within the Vodafone domain including CMS page.

The component will also make reference to its parent node server when making API calls. Which means it acts as a proxy to the node server which is again a proxy to our JCS backend service. Meaning it can now access downstream services wherever it renders.

It was quite a shift on the FE architecture as it opened up different possibilities if which were fully aware of. Now the Availability checker is rendering on CMS page whenever the content managers apply it to the page. Many other components have since become federated components and are being loaded dynamically within the Vodafone domain.