-
Notifications
You must be signed in to change notification settings - Fork 16
Testing
React is cool and humans are awesome... A true story about a team, components and millions of users.
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.
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. It has some technical challenges such as Server-Side Rendering, SEO, Performance, I18N, A11y, Theming, Immutable deployments, Microservice oriented, Client-Side Component Encapsulation, Global user base.
Putting the audience on context, talking about the goals of the platform and the problems it tries to solve.
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?
Showing the power, and tradeoffs, of applying the immutability concept to Code, Deployments, and Documentation.
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.
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.
How to deal with production bugs, client feedback and keep evolving a platform?
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.
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.
How we learned to differentiate and prioritize daily moves vs strategic ones.
How we learned to play safely for our production users whilst still trying new things such as Functional CSS, React16 and Hooks.
Reverting a very bad performance by using Lazy load, Performance budgets, Components state optimizations, and reducing the amount of Requests.
The story of how we made a Diary Error Report that pinpoints flaws of the system.
Not paying attention to these little monsters can really slow you down.
Bootstrap, BEM, CSS Variables, Styled components, and Functional CSS.
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.
-
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.
Why does this talk need to happen? Why are you excited about it?
In our opinion, this talk is NOT about showing the world the awesomeness of our platform (because it is not awesome yet ;)). It is about putting in front of the community, these real examples of situations that a small team have been dealing with for the last two years. We made huge mistakes and did some really cool things. Our biggest hope with this talk is that the community can benefit in some way from these experiences.
In addition, we wish to express how the non-technical side such as showing the power of the iteration word, the ability to take good and bad decisions and accept their consequences, the power of staying together as a team all this applied. In our own context, and that of the development process, this could make the audience reflect on the human part of the software development process.
Why are you the right person to give it?
I had the opportunity and privilege to be guiding the team during this journey and also being responsible for most of the technical and non-technical decisions. I have suffered and enjoyed every step from the front line. So every page of the story is a very accurate reflection of the true experience.
To be totally transparent, I’m a brand new speaker, I don’t have online recordings or anything like that. I had made the mistake in my career that, even when I love to speak to people, I don’t put that into my priorities. I used to be very good at speaking at school, college and work, I also had played guitar and sang in front of a lot of people (I don’t know if that counts here ;) hahaha). So, guys if you give me the opportunity I can send you online recordings of the talk every week three months before the Event and you can kick me out without compromise if you feel that they are not good enough.
I'm Dariel, a front-end lover from the heart, I have created some open source projects such as AniJS, AniCollection, and SmartComments. I formerly worked as a front-end lead developer at Everymundo, developing a bunch awesome stuff with great frameworks like React. Now working as one of the Technical Leads and founders of Front10, in which we are working to develop a process to create awesome React components as fast and efficient as the boundaries of technology allow us.