Testing

React is cool and humans are awesome... A true story about a team, components and millions of users.

Abstract

Who wants to hear a true story about how a small team built, maintained and kept growing a React based platform used by millions of users daily? Want to know our pitfalls, challenges, and lessons learned during this journey?

The platform is being used by more than twenty airlines around the world and allows the distribution of isolated React components via Client Side or Server Side Rendering in whatever page you want. It has some interesting technical challenges such as:

• Server-Side Rendering.
• SEO.
• Performance.
• Internationalization.
• Accessibility.
• Theming.
• Immutable deployments.
• Microservice oriented.
• Client-Side Component Encapsulation.
• Very diverse user base, all around the globe.

Details

• Brief introduction…

  • Putting the audience on context, talking about the goals of the platform and the problems it tries to solve.

• Good, pretty and fast…

  • As an engineer, you will want to spend a “reasonable” amount of time planning and designing your awesome architecture. But sometimes, life and users get in the way. How can one deliver an awesome product as fast as possible?

• Immutable everything (not just the state)... *Showing the power, and tradeoffs, of applying the immutability concept to Code, Deployments, and Documentation.

• You can be wrong, learning to shift the wheel…

  • One of our biggest mistakes was trying to be too immutable with the client side code. That gave us a lot of performance issues. How we accepted that we were on the wrong path and we turn the wheel 180 degrees to pivot in a very transparent way.

• Iteration; such a powerful word…

  • How we reduced the amount of time that we spent planning and having endless discussions by iterating. Nobody has the right until you prove it in production.

• Once in production, your life will change…

  • How to deal with production bugs, client feedback and keep evolving a platform?

• Breaking in production and not knowing why… *Being awake in the middle of the night because your components are not showing up in the pages, it's a bad experience. Not knowing why is a really bad one. How we solved these problems so we could focus on making the platform awesome.

• 4 eyes are better than 2, Having a code review process.

  • How we moved from a very “democratic model” in which everybody had written access to the repositories, to setting up a code review process that is helping us to improve our code quality, as well as our professional skills, every day.

• Daily things vs Strategic moves.

  • How we learned to differentiate and prioritize daily moves vs strategic ones.

• Pragmatic decisions, but don’t let the dream die…

  • How we learned to play safely for our production users whilst still trying new things such as Functional CSS, React16 and Hooks.

• Speed matters on the web platform, really?…

  • Reverting a very bad performance by using Lazy load, Performance budgets, Components state optimizations, and reducing the amount of Requests. Automating is not the only path… The story of how we made a Diary Error Report that pinpoints flaws of the system. Artifacts... yes, they will grow and multiply like hamsters. Not paying attention to these little monsters can really slow you down. Styling and Theming the world… Bootstrap, BEM, CSS Variables, Styled components, and Functional CSS. The team, the team, the team, staying together is your most powerful weapon… Projects, products, timelines, ideas, all of these are very important, but the opportunity of working together as a team towards a common goal is what creates the magic, all the human connections that this creates, emotions, mutual respect, and being confident that somebody is going to have your back when you are falling has no equal.