Empower everyone to share and collaborate on reusable components in React, Vue, and Angular.
Modern application development is component-driven. Today, a large proportion of applications we develop are made up of modern components in React, Vue, Angular, or even pure web components using compilers like Stencil.
That’s a good thing, because building with Lego is faster and more scalable. However, once development scales up, many teams need to build many different projects with Lego bricks, but there is no really effective way to collaborate.
What you want to achieve is that developers can build components independently, but also share their components with others and use components shared by other teams.
To do this, you should create a shared Lego box for all developers and teams to use and build their applications.
This will unleash three powerful advantages.
Faster development – No need to write the same component twice.
Consistent development – components look and feel the same.
Scalable development – Many teams can build and work together.
Solutions. A shared component market
To achieve this, you need to create or adopt a component platform within your organization where all teams can share and collaborate on components in a centralized but highly collaborative and fluid manner.
This helps you to standardize component development on the one hand, and it makes it easy for all product builders to know which components already exist and are shared by other teams — and to use them.
In the end, you create a living, vibrant ecosystem of components. This means, for example, that developers can send updates to components that will be acquired and integrated by projects that use them.
A component market is also well suited to designing systems and micro frontages – helping to build and orchestrate components together.
Build your own and use an off-the-shelf platform
When you decide to empower your development team with a component marketplace, you have two options.
1. Use a component platform such as bitwise – and immediately get a powerful, flexible, enterprise-tested solution with all the functionality right out of the box.
2. Build your own component marketplace — create everything or glue together different tools for singletons, releases, documentation, etc.
So far, I’m not aware of any other options, but feel free to add one in the comments below. Let’s compare and analyze these options.
1. Component platforms that use bits
An e-commerce application as a collection of components on bit.dev ->
Bit is the world’s leading component-first platform (200K+ developer). With the release of V15 “Harmony “in 2021, it provides a lightweight and highly customizable OSS toolset for component-driven development, as well as an enterprise-level cloud platform for teams of all sizes.
Bit’s component development open source software toolset makes it easy for developers to create, manage, share, and integrate independent software components across different projects. It even comes with standardized but highly customizable templates for component development and distribution.
Medium.com/media/34e1d…
The platform provides an out-of-the-box component collaboration solution for enterprises to work together to build and distribute modern applications faster. Trusted by Fortune 50 companies, it comes equipped with enterprise-class capabilities.
With Bit, developers can create and share components freely and fairly easily across projects and teams, while working together in a central hub (bit.dev).
In this hub, all components are hosted, organized, marked, recorded, annotated, visualized, and can be explored and then installed from the built-in registry using the package manager client of your choice (NPM/YARN).
It has everything the team needs to build with components.
- Component hosting and enterprise-level security
- Advanced search and discovery for components
- Standalone versions of the component’s built-in registry
- Automated documentation with API documentation, visual composition, editable sample rendering, isolated unit test results, and more.
- There is even a dependency graph explorer for each component and project.
Click to view
- Ripple CI (Closed Beta) is the world’s first component-driven CI that propagates component updates to all affected components and applications — constantly integrating the entire organization. And it even has visual previews, so you can see what the changes look like in each individual page and application!
- ** Everything is customizable and extensible -**Bit is highly customizable and extensible, so you can choose your own development stack, workflow, and even style design. You can extend any part of the Bit, from the native development UI to the build pipeline that your components will pass through. Since the Bit itself is 100 percent component-built, every extension you make is also a component that can be reused by many developers and other components, adding standardization to your newfound benefits.
Try it out for yourself, or book a demo here.
Bits: platform for modular networks
Build your own component marketplace
In order to create a Lego-like workflow of independently shared components between your team and your project, you will have to solve a complex set of problems.
- Turn applications and Libs into singletons with many packages.
- Set up a version of the package for each component.
- Publish all components to a package registry and somehow make it easy for all developers to publish their components.
- Share standard templates for component development and publishing.
- Create and maintain a documentation web site for components. Add and maintain API documentation, visualization examples, and more.
- Create search and discovery capabilities for components.
- In some way, all developers can suggest changes.
- Provide high-level security and team management for everything.
- Component updates are provided and tracked in a manner that incrementally establishes changes to affected projects and applications.
- Create integrations with GitHub, Figma, Slack, and more.
Naturally, this will involve a lot of work on the platform team, writing a lot of tools and gluing together Lerna, StoryBook, NPM, Codepen, Docusaurus, Jenkins, etc. None of this was built for that purpose.
I’ve seen many teams attempt to tackle this challenge, including some of the world’s top teams from Fortune 500 and even F-50 organizations. To be honest, I have yet to see an organization happy with the results, but some organizations are still struggling to build and grow their platforms.
An interesting example is Wal-mart Global Technologies.
How do I implement reusability with the React component
conclusion
Modern application development is component-driven. This meant the team needed to find a way to turn components into “Lego” pieces that could be shared in a common Lego box and used to build their different projects.
Collaborating on shared components is a great way to speed up development, ensure consistency in code and design, and increase project and team size.
For organizations, the component market is a common puddle from which all the teams and applications consume their Lego pieces. It is a way for organizations to work together to build and ship many component-driven projects.
When building your component marketplace, you will be faced with two choices.
- Use an off-the-shelf platform and customize it to your needs.
– or –
- Build everything from scratch and build your own solutions.
Either way, don’t give up on owning your component market — it’s a game changer when it comes to modern web application delivery 💪
Thanks for reading!
Cheers 🍻
To learn more
Bits: platform for modular networks
Medium.com/media/71f25…Medium.com/media/68e3e…Medium.com/media/00149…
Building a component market for Your team was originally published in Bits and Pieces magazine, and people continued the conversation by highlighting and responding to the story.