How to achieve reusability with React components

Summary

Alex Gregorian, Senior Director of Engineering at Walmart Labs, discusses the company's transition from a Java stack to React and Node, emphasizing the importance of reusability of React components across various Walmart applications. He outlines the challenges faced, such as dependency management and consistency across components, and introduces solutions like the 'archetype' for dependency control and a meta team for quality assurance. Gregorian also highlights the need for a cultural shift towards a reuse-focused philosophy and the critical role of CI/CD in maintaining component integrity.

Takeaways

• 🛒 Alex Gregorian is a Senior Director of Engineering at Walmart Labs, focusing on the application platform that builds frameworks for the frontend experience.
• 📈 Walmart Labs transitioned from a Java stack to React and Node.js to leverage React components across different applications and entities.
• 🔄 The scale of Walmart's operations involves hundreds of components, numerous engineers, and dozens of applications, necessitating a robust system for component reuse.
• 🔗 The importance of reusability is paramount due to the structure of Walmart, which is organized for productivity and efficiency, with separate teams for different pages like homepage, item page, search, cart, checkout.
• 🌐 Components are developed independently outside of applications, housed in their own repositories on GitHub, and published to npm for use across different apps.
• 📦 Dependency management is crucial, with 'archetypes' being a key concept. Archetypes are packages that consume many production and development dependencies, ensuring consistency across components.
• 👥 A 'meta team' at Walmart ensures quality and consistency, with senior representatives from each team participating in regular calls to discuss component management and changes.
• 🔄 The process of proposing new components or changes involves a GitHub proposal process, encouraging open discussion and collaboration before components are finalized.
• 🔍 Discovery of components is facilitated by 'Electrode Explorer', an open-source tool that runs all components in the organization, allowing anyone to view documentation, dependencies, and even modify components in a playground.
• 🛠 CI/CD is critical for managing updates and ensuring that changes in components do not break other applications, with automated pipelines that update and test other applications using a component.
• 🌟 The philosophy of reuse must permeate every layer of management and development, affecting how features are built and estimated, and requiring a collaborative approach across teams.

The video is abnormal, and we are working hard to fix it.
Please replace the link and try again.