How to leverage Bit+NPM to simplify React and other UI component sharing, reuse and collaboration. When working with components, reusability across projects and teams is often the key to faster development, and simpler maintenance. UI UI consistency As today components are designed to be with , Vue and other great frameworks, the ability to reuse them is becoming critical. When different developers are rewriting the same components in different places, time is wasted and maintenance soon becomes a nightmare. reusbale React Using and together you can bring new found and to the workflow, as the entire team can collaborate and share code between their projects while keeping it synced. Bit NPM Simplicity Scalability code-sharing Component reuse can be tricky The biggest problem with reusing components is the overhead around it. First, to make a reusbale component reusbale, you’d have to turn it into a package. This means , including , build and test configurations etc, and then publish it to NPM. Splitting the repo boiler-plating a package package.json You’d also have to document the component, create a wiki, and somehow organize all these components and make them discoverable for the team. The developers using this code will install it with a package manager, which means they can’t make changes to the component when needed without a large amount of overhead. This makes maintenance much harder over time. Many teams encounter these problems, which might end up leading to undesired forced architectures or code duplications. But, with Bit + NPM you can scale component reuse without this overhead. Here’s how. Bit + NPM: Scale component reuse With a components can be shared, developed and synced across project without the overhead mentioned above. Here’s how it works in 3 simple steps, from publish to syncing changes between teams. Bit+NPM workflow 1. Zero publish overhead Example: Here’s an example app and React components published from it. Instead of forcing you to refactor your code or split repositories to publish packages, Bit lets you seamlessly in any existing project. isolate components This is done using the command to point Bit to the sets of files you want to reuse. When Bit identifies the components, it will automatically detect their dependencies so that you don’t have to configure anything. bit add Then, you can add pre-made build + test environments (or create your own) and lock a version for the components using . All that’s left is to publish the components using and that’s it. bit tag bit export All the components from the project are now available to reuse and install with NPM, or to consume via to develop them from any project. bit import This means , , and . While eliminating the overhead around publishing the components, you can scale component reuse. 0 refactoring 0 code or file changes 0 configurations no manual dependencies definition 2. Discoverability and teamwork https://bitsrc.io/bit/movie-app/components/hero Once exported, all the components are organized in the cloud to be made more discoverable than they would have been with NPM alone. Here are a few key features to help find and navigate components at scale: : Component can be organized into collection by theme, team, project or anything you’d like. Collections : UI Components (React for now) can be rendered so that you can play with the components and choose with your own eyes. Visualization : Bit builds and runs tests for your components outside of your project, to make sure they’re battle-ready. The results are are presented as a useful indication that it works and in what cases. Test + Build results : Bit will automatically parse and present docs and examples from the code itself using files and . Auto-parsed docs .md jsdocs As a result, and combined with Bit’s team managing features, you can more easily find and manage the components you share, their quality and so on. 3. Collaborative workflow: 2-way development Another useful feature of Bit is that apart from installing the components with NPM/Yarn, you can also use to source the components in any project using them(!). bit import This means that when a component needs slight improvements or modifications, you can simply import it into the consuming project, make the changes, and share the new version back out to your team’s collection. Then, if you choose to do so and have the right permissions, you can update the component in any project it’s in, including the original repository from which it was shared. Changes can be merged between projects using Bit’s extension of Git’s utility, which means the sync process across projects is smooth and fluent. merge When a team or several teams are working together, this makes development and maintenance much faster over time. So far, ~75% of the thousands of developers using Bit since Jan 2018 prefer importing the components over installing them as packages. distributed workflow What’s next Bit + NPM is a useful workflow for effective sharing and collaborating on UI components across projects and teams. Bit isn’t limited to UI components, so the same workflow works for Node.js modules, pure JS functions and more. Future roadmap includes features to increase discoverability even further, a smart event-driven update mechanism, and support for more languages. Bit is open source, and is being constantly maintained and developed. Feel free to give it a try, suggest feedback, contribute or extend it yourself. _Bit helps you share, discover and use code components between projects and applications to build new features and…_bitsrc.io Bit - Share and build with code components _bit - Easily share code between projects with your team._github.com teambit/bit Learn more _11 Useful Javascript utility libraries to speed your development._blog.bitsrc.io 11 Javascript Utility Libraries You Should Know In 2018 _9 Useful tips for writing better code in React: Learn about Linting, propTypes, PureComponent and more._blog.bitsrc.io How To Write Better Code In React _How to leverage Bit + NPM to go monorepo without the overhead._blog.bitsrc.io Monorepos Made Easier with Bit and NPM
