Share your existing technology in a visual way to help R&D, Product, Marketing and everyone else build together.
Lately, I had an argument with a frontEnd developer on my team, regarding a new product feature I was planning. She really pushed to avoid making some changes I thought were really good. Finally, I realized she was just pushing for reusing an existing component and not writing a new one. Why? because it will be faster to build and more consistent for our users. She was right.
When R&D, product, Marketers, Designers, Leadership and other stakeholders can have access to see the reusable components your company has, building new features and products become faster and more collaborative. Your users will get a better consistent expirience too.
Moreover, decision-makers with different responsibilities can have a much better understanding of the technological assets built by your team, so that they can make informed decisions based on the real state of your technology.
Let everyone learn which components you have
Through the popular bit.dev component platform, you can organize all your real-code components in a hub where everyone can view the components with their own eyes, and learn exactly which components can be reused.
First introduced in 2018, the bit.dev platform now helps over 50k developers and team share and collaborate over components to build their applications. The beauty of the bit.dev component hub is that it’s not a documentation site for components which really just sit around deep in the code of your projects.
It’s where you actually share the components that developers build and install in their different applications. Meaning, the visual rendering that you see is the actual representation of the code used to build your applications. Developers install the same component everyone else sees with their eyes.
See all the reusable components your organization has
When all stakeholders in the organization, from the CEO to every different member of the organization, can learn exactly which technological assets you really have, everyone can make better decisions on what and how to build.
Leadership: Visibility into your existing technology
The company’s strategic decision-making team has to take into account factors like time to market, return on investment and the technological assets you have. When they don’t have all the information, they risk making uninformed decisions which might hurt the success of the company.
By making each technological building block you have (and bit.dev isn’t just for frontEnd) visible to the company's leadership, you minimize the risk of making mistakes and help the company steer its patch the right way.
You also help decision-makers understand the concerns and limitations your R&D team has, so they can better understand which new products or features will take more time or complicate development. This helps reduce confusion or miscommunication within your organization, for everyone involved.
Marketing: Learn what pages you can build fast
Marketing teams and managers often need to build multiple landing pages, websites or even entire applications- and do it fast. When they can see all the reusable components your R&D team has, they can use them to design new things that can be built with the existing components your team already has.
This means your product will get more people exposed to it much faster, while the R&D team enjoys more certainty and simpler development. Moreover, when you reuse UI component you create a more consistent expirience to your users that helps to improve conversion numbers across the board.
Through bit.dev you can even filter components by the weight they add to your app, to make sure it will load blazingly fast for your users. This means better SEO, better on-page conversion and more people engaging with you.
Product: Know your real building blocks
Product managers have to consolidate the requirements, needs, and limitations of everybody else. So, giving them the ability to learn exactly which components are at the team’s disposal and how they look or work, will, in turn, help them define accurate and effective releases for your product.
Through bit.dev product, design, R&D, marketing and everyone else can see the same thing and share the same knowledge of what you really have. Defining new features turns, in part, into planning the Lego-like composition of existing pieces and the creation of new missing pieces. Fewer mistakes, fewer misunderstandings, more common language, and better collaboration.
Designers: Visualize the real code and monitor changes
Explore each component to see how it works for your users
Today, your components go from design in Sketch/other tool to Zeplin and from there to becoming code inside a shared UI component library. During this process things changes, break and evolve.
Over time you keep updating the components in the library to fit into different usecases and the specific needs of your different apps. The components are no longer the images you paint, they are now living and breathing code pieces.
When you share them to bit.dev you can visually see and keep track of how these code components really look like and really behave. When changes are made, you can keep track and make sure these changes meet your guidelines.
Moreover, you can play with examples of different components in a live editable playground, to learn not only how they look in a static state, but also how they really behave to users. This means you can keep a consistent UX/UI expirience users across apps, improving their successful engagement with your product and their ability to safely navigate the expirience you build.
A Pacman loader component in React: Visually see and play with the real code
Using bit.dev you gain an X-Ray view into how developers implement the components you design and monitor real UX/UI changes over time.
Developers: Share and collaborate on components across projects
Bit is a popular open-source tool built for sharing and managing components between different teams and projects.
Using Git-like commands it lets you automatically isolate components in your project (app or library), with all their files, dependencies and setup. Then you can version and publish individual components to a shared collection.
From the collection, you can easily discover components and learn all about them: see visual snapshots, play with examples online, see exact bundle-size and dependencies, view auto-extracted API docs and run tests in isolation.
Search components by bundle-size and dependencies
Then you can install each component individually using npm/yarn, to reuse it in another project. When you need to make a change to a component, you can just use bit to bring the code into the consuming project, make changes, and bump the version in the collection (given permissions). No more waiting on long PRs, enter a collaborative workflow over shared components.
By making your component available for everyone to see, you help others (product, design) plan and design features that use the code you wrote and fit into your expirience. Fewer mistakes, fewer misunderstandings for everyone.
Feel free to visit the project on GitHub, create a free account in bit.dev, explore components in the open community or read the docs to learn more.
Conclusion
Designing components and building a library is great. But, when you consolidate your actual code components with a visual expirience — reflecting on the real code written and updated- you can help everyone collaborate over your components to build new things faster with the code you already have.
Even more importantly, your users will get a consolidated and consistent experience that will translate into better numbers across the board. It’s also a solid way to make sure your design system keeps track of changes over time. Furthermore, decision-makers can make informed choices when building your next product or choosing a right strategic path of your company.
Feel free to take bit and bit.dev for a ride yourself, and don’t hesitate to get in touch with any questions you might have. Thanks for reading and happy sharing 🍺
Top comments (2)
It all sounds great but I wonder if the marketing team can really handle using React components, for example... I guess today, when marketing is so interent-driven, more and more marketers have pretty decent dev skills...
💪🏻💪🏻