Talk

General Description

The goal of this talk is to present the entire front-end stack at Ricardo France. What this talk is not: a general discussion about well known, widely used frameworks and libraries, like React, Express, etc. This talk will instead present what makes our front-end stack maintainable and continuously re-factored, what is Ricardo specific, how do we handle and manage apps observability, deployment, scaling. In the context of a high traffic website, with millions of monthly users (Ricardo is kind of leboncoin, but for Switzerland).

Observability standards.

• Implementing and improving observability. How the node.js apps maintained by front-end engineers reach the same level of observability than the back-end micro-services, using Prometheus, Loki. How the teams (whatever the technical stack) are aligned using ADRs (Architectural Decision Records) and what are node.js specific metrics.
  
• Code example: from incoming message to outgoing calls to back-end micro-services. How the BFF propagates down important information in HTTP headers, interfacing with both the platform and the back-end micro-services. An example of AsyncLocalStorage from async_hook Node.js library.
• Observing errors in the client. How we take advantage of Sentry, how is it implemented and how we use it. Code example: how do we React Error Boundary componentDidCatch method to log every problem.

Building, running and deploying apps and custom dependencies

• Long, long ago, in a far away galaxy: manual deployments, once a week. A little bit of history to understand where is Ricardo coming from and where we are today.
• How do we achieve to deploy multiple services and apps several times a day, without breaking user experience. How do we ensure this is not even noticeable from a user perspective. Example with our Kubernetes cluster and our custom isopod solution, simplifying the deployment of all apps in such a cluster.
• How load variations are handled for the node.js based BFFs, continuously creating and destroying kubernetes pods running node.js apps without breaking the user experience. Which node.js metrics HPA (Horizontal Pod Autoscaling) is using to scale our cluster up and down.
• Improving build and deployment time using yarn 3 berry for dependency management and circleCI parallel run of tests and quality checks. An example on how a full app can be deployed in minutes. And how we can further improve this process. Code example: a circleCI generic configuration file and the corresponding node.js / yarn commands.
• Staging and secret management. Where are our secrets stored, how do we ensure to write 12 factor apps.

Re-platforming and continuous re-factoring

• How Ricardo went from a MVC.NET, monolithic solution to the current, node.js based one, and what’s the current architecture.
Code example: the case of server side rendering for web pages. The custom build system based on webpack and babel. How do we implement server side hydration of React pages by having a strict universal code, making HTTP calls to the server wherever it’s run, server side or client side. How do we handle routing and redux actions bound to route changes.
• Why we started migrating to Next.js and what are the benefits, the challenges and the drawbacks of this very famous React based framework. How do we proceed to ensure smooth migration without preventing us to deliver value and new features. What are the promises, successes and drawbacks of Next.js, according to our own experience.
• The front-end guild as a driver to continuous refactoring and alignment of different apps to the same architecture. Management example: how to take advantage of tech enthusiasts to continuously re-factoring and improving our front-end tech stack.

Remark: I can do this talk in French also if needed.