The concepts of componentization and reuse are well-known in the realm of software engineering. Reusable components are UI elements that perform a certain role in many contexts within the same or different applications to produce multiple UI instances.
A button is an example of a UI element that may be used in several apps, each of which has a different purpose. Minor functionality (attributes) of a button, such as onclick, type, style, and size, must be controlled. There are both few and many dependents for Button. This link highlights how reusable this UI component is.
Everywhere we frequently demand the same component, which finally forces us to write the same code many times for different projects. In many cases, it is permissible to write or copy the same code into many projects if a component is small, like a button. What about bulky or intricate components, though?
Sharing components between several component-based apps made using React and VueJs enters the picture at this point.
Test automation services in USA by AfourTech.
Ways to share components across apps
- NPM – Code sharing registry and widely used dependency installer method
- Bit – Component sharing through bit.cloud
- Lerna – a tool to manage Mono repos with Git and npm
- Multiple Git repositories – Reusable code in single Git repo and used in others as a package
- WORKSPACE – Group of files or directories which provide context for components to be versioned, composable, and maintained
- SCOPE – This is a collaboration server for components where we can put together all components
- STATUS – Bit workspaces track components’ changes and show each component’s state in your project’s workspace.
- NPX – is a tool to execute packages in that directory only
- INSTALL – after installation, the component resides in the node modules directory.
- FORK – copies code from remote (do not have permission to edit) workspace to your workspace
- IMPORT – copies code from remote (have permission to components) workspace to your workspace where you can make changes as per requirements
- Let us continue with actual commands
- Installing BIT
- > npx @teambit/BVM install
NPM and BIT / Bit. dev
Bit is a component-driven programming tool that is open source and extendable. It is employed for component development, source control, and teamwork.
Bit is neither a platform for publishing packages nor a package registry, despite the fact that npm and bit are frequently conflated. Bit is an extendable, component-driven development. The components can be designed and exported remotely, and we can each improve a component independently. We could also upload certain components to the bit repository. Npm is a publishing and package management tool based on the Javascript programming language. We can build standalone packages with the help of npm.
One advantage Bit provides in component-driven development is the visibility of source code in the app where it is used. Furthermore, Bit is in charge of component versioning.
Let’s bit. dev
Bit is exactly like git, but it only works with component-based programmes. Bit is a distributed version management system for building blocks and the libraries that support them
What is bit.dev?
Bit. On the cloud-based development platform, we may modularize and reuse components using Bit. Bit allows us to design small, independent components. Additionally, we may use Bit components to develop our service.
📷
Fig. 1 Common developers use case
Devops engineering services in USA by AfourTech.
Let us understand common BIT Vocabulary before we get to the commands.
Initiate BIT workspace
On bit.cloud, we must launch Bit Workspace. We may develop new components, utilise and modify existing components, and export your modifications using this distributed component service.
Run the command shown below for bit workspace.
> bit new react my-wiki –default-scope my-org.wiki
The above command will create react project named my-wiki with bit default scope. But if we want to initialize an existing project with the bit then Go to that project and run the below command
> bit init
It will provide the below output
> successfully initialized bit workspace
To start the server for the bit project, you can start it by using the below command
> bit start
OR
> npm start
Page Break
Cyber security testing services in USA by AfourTech.
Create a remote scope
A scope is a server where we can collaborate, export, and store components remotely.
Then we must create one scope in bit.cloud account. For that, go to bit.cloud, create your account, and create scope under it.
Then go to your local project directory and find worspace.jsonc file and update “defaultScope”:
“organisation_name.your_scope_name”
This will help while adding and exporting components from a local project to bit.cloud repository
Then choose or create components which we can use in other projects like buttons, dialog boxes, forms, cards, or navbars.
After creating a shared(common) component, add that component to your bit.cloud by the below command
Add the component to bit locally
> bit add folder_path/folder_name
After adding components on bit locally we must tag those components
> bit tag –message “initial message.”
Digital Transformation Services in USA by AfourTech.
Export changes to remote scopes
After tagging component changes, we can export those components to remote scope on bit.cloud
> bit export
Now exported components can be used by any developer in any other project if the access to that scope is public.
Install component [NPM]
If you only want to use shared components in your project and you do not want to change or maintain them, then you must install them through bit or npm by the following command
> bit install @afourtech/shared_components.dialog
> npm install @afourtech/shared_components.dialog
Import component [Code sharing with the same version]
The components which need to be maintained or updated for the project then we must import from remote scope into the local workspace
> bit import afourtech.shared_components/dialog
After a successful import, the package's source code has been added to your workspace and produced in the node modules directory. It may be maintained and exported like other components after being imported into your workspace.
When one of your imported components has imported or utilised another component, meaning it is reliant on another component, we must also add the dependent component.
To achieve the above scenario, we can run the below command into the workspace
> bit import – -dependents
Automation testing company in USA by AfourTech.
Fork Component [Code sharing with branch]
We can fork a component into our project and then update it as necessary for the components we wish to utilise but do not have write access for. It is copied into our workspace default scope during forking.
The command to fork the component from remote is listed below.
> bit fork afourtech.shared_components/dialog
After installing, importing, OR forking components from a remote workspace, we can just use them as it is by importing that from the actual path in needed files
Like below is an example
>import Dialog from @bit/afourtech.shared_components.dialog
Developer use cases:
- Share component uses it with NPM in another app.
- Share a component from an App, import it into another App and see the code in both apps Always change the code of the shared component from one app only.
- Share components and allow the creation of branches separately in both the apps
UI UX development services in USA by AfourTech.
BIT sharing and security
Bit suggests using login security while transmitting data to bit. Additionally, bit.cloud allows us to add the SSH key for exporting components.
The bit login command is listed below.
> bit login
This command will launch the bit.cloud website, allowing us to access our accounts there.
Additionally, we are allowed to reuse and export components.
All members of the organisation can view any bits that have been exported to the scope of the organisation in their workspace.