Author: @Yang Zhedi

In our daily development, we will accumulate a wealth of business components, whether it is to build their own wheels or based on excellent component library secondary encapsulation. Over time, more and more components can become a burden to manage and share these business components. The Bit introduced in this article provides a new solution to this scenario.

What is a Bit?

Bit leverages components to make them reusable not only within applications, but also to provide an ecosystem for sharing components between applications and across repositories.

Bit is a tool for sharing and synchronizing components across projects.

Bit simplifies collaboration on UI components, allowing team members to share, maintain, and synchronize isolated components from different projects.

How does Bit work?

This article will introduce the differences between Bit and traditional component library management from three modules: component composition, component life cycle and Bit workflow.

components

For each component, the Bit stores three elements

  • Source code (including test and documentation)

  • The content of a component is not only the source code itself, but also other related files, such as style files, assets (images, fonts), test code, documentation.

  • Depend on the map

  • When a source is added to a Bit component, the Bit analyzes all the dependencies it contains (that is, import and require statements in the code).

  • Dependency diagrams make components stand alone and allow components to be moved around the project without losing any references.

  • Configuration items

  • Compiler, bit Provides the Compiler bit.envs/compilers/[email protected]

  • Tester, an extension provided by bit to run tests associated with a component and return status.

The source code is similar to the source code of the original component library, the dependency map is similar to the map generated by WebPack during the import dependency phase, and the configuration items are similar to webpack.config.js. Bit will help you package and compile the components. Part of the reason why Bit is so easy to encapsulate components is because it takes the packaging and compiling of component libraries out of the way.

Component life cycle

Production of components

The production component has three actions: Track, Version, and export.

  1. Track: Specifies the component composition file in the workspace.

  1. Version: The marked Version locks the content and metadata of files under the Version. If the component has a compiler, Bit builds the component and locks the built component (think of it like a Git commit and NPM release at the same time).

  1. Export: The Export command creates a unique ID for this component. The unique ID is the remote scope name and the local component name. The remote scope name can include any namespace (username. Collection? The namespace). Bit. Dev/yangzhedi/t…

Consumer component

Once uploaded to a remote server, the component is made available to other workspaces. Components can be used through install or import.

  • Install: Bit adds the component to the node_modules folder as a regular NPM package. When installing the component (bit install/NPM install/YARN add), the component is added to package.json, pointing to the installed version: “@bit/yangzhedi.test.list”: “0.0.1”. Code for installed components is not changed.

import List from ‘@bit/yangzhedi.test.list’;

  • Import: Bit adds components to the Workspace – Components folder and tracks their changes. When importing, you can see package.json pointing to the local file: “@bit/yangzhedi.test.list”: “file:./components/list”,

  • Keep track of code changes and can export them as new versions. Eject: If a new version is exported, it can be restored to an installed component. In this case, package.json will be updated back to “@bit/ Yangzhedi.test. list”: “0.0.2”

Bit workflow

Ad-hoc Sharing

_ | _

This workflow applies to:

  • There are several products with UI component libraries.

  • You need a consistent UI/UX across projects.

  • There is no time/capability to assemble a dedicated team to maintain components.

Benefits brought about

  • It doesn’t take a long time to build and maintain a shared library for UI components, sharing components already developed in existing projects.

  • Use bit.dev as the discovery portal for all components in the collection portal, including demos and documents.

  • Component code can be changed in any project, and local changes that use components in a project can be retained and still be merged with incoming updates.

  • Components can be installed using NPM/YARN, so they fit into the normal workflow of a project developer.

risk

  • Standardize the export process for components

Centralized Library

This workflow applies to:

  • A centralized repository that needs to share UI components

  • A dedicated team manages shared UI components

  • There are multiple projects that use shared components

Benefits brought about

  • For the producer

  • Bit automatically packages each component at a higher granularity without the overhead of maintaining individual packages, automatically versioning components as their dependencies change

  • Building components locally without a project context shortens the feedback loop on how components are invoked on other projects.

  • Increase component adoption by publishing components to bit.dev to make them visible to all teams bit helps control who is changing components.

  • For consumers

  • Obtaining the smaller discrete components required for each project for: reducing the bundle size of the application.

  • You can import only the components they need. Reduce final package volume and shorten build time.

  • A finer-grained call component library can improve project stability.

risk

  • If you have a team dedicated to maintaining a uniform library of components, being too granular can be a burden

How is it different from NPM?

  • Bit automates code packaging based on code analysis.

  • Bit can access packages (Bit import) without leaving the context of the project.

  • For producers, components can be uploaded directly without having to copy them separately

  • For consumers, the Clone component library is not required to modify the component, but can be modified directly in the project

  • Bit can use component code in any project and then make changes directly in it.

Bit cli provides a platform similar to npm.org: bit.dev, where you can see the styles of components and how they are called. You don’t need to write your own docs.

Reference:

Docs. Bit. Dev/docs/quick -…

recruitment

Bytedance’s commercial front end team is hiring! Where can I find a place where I can talk about my dreams with tech celebrities every day, participate in the exchange and sharing of tech celebrities, enjoy four meals a day, top geek gear, free gym, and do challenging things with excellent people? Come and join us!

Resume should be sent to [email protected]