From 777eee75b65b7a06043c1fbcc6b1bb3426cf7548 Mon Sep 17 00:00:00 2001 From: werivik Date: Fri, 17 Jan 2025 14:16:33 +0100 Subject: [PATCH 1/8] started the case study Copy pasted the given format from the CA powerpoint, started writing a bit about Bit. Still unsure if thats what I want to write about, but oh well --- src/content/docs/bit/bit-case-weronika-vik.md | 56 +++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 src/content/docs/bit/bit-case-weronika-vik.md diff --git a/src/content/docs/bit/bit-case-weronika-vik.md b/src/content/docs/bit/bit-case-weronika-vik.md new file mode 100644 index 000000000..621ecb05c --- /dev/null +++ b/src/content/docs/bit/bit-case-weronika-vik.md @@ -0,0 +1,56 @@ +--- +title: Bit Case Study +author: Weronika Vik, werivik +tags: case study, bit, AI +--- + +## Introduction + +In the fast paced world of software development, efficiency and collaboration have become the key to delivering high-quality applications and steadily more desirably. Modern development processes increasingly rely on modular and reusable code, enabling teams to work faster and easier. One such platform that uses this approach is Bit - a tool for managing, sharing and reusing components across projects. + +This Report explores Bit as a Case Study, examining it's functionality, the positive- and negative traits of the platform, and the impact it has on frontend development workflows. Bit serves as a solution to common challanges faced by development teams, such as redundant work, inefficient collaboration, and maintaining consistent design systems.By streamlining component management and fostering collaboration, Bit offers a practical approach to modern software engineering. + +## Brief History + +Blah + +## Main Features + +Blah + +- **Example Feature:** This feature does something for a specific reason. +- **Example Feature:** This feature does something for a specific reason. +- **Example Feature:** This feature does something for a specific reason. + +Example feature table: + +| Feature | Description | +| --- | --- | +| Example Feature | This feature does something for a specific reason. | +| Example Feature | This feature does something for a specific reason. | +| Example Feature | This feature does something for a specific reason. | + + +## Market Comparison + +Blah + +## Getting Started + +Blah + +## Conclusion + +Blah + +## References + +- [Example.com](https://example.com) +- *Good Examples* by John Doe, 1990 +- The Example Podcast, Episode 1 +- [Examples Explained](https://youtu.be/dQw4w9WgXcQ) + +## Additional Resources + +- [More about Examples](https://example.com) +- [Examples, the Full Course](https://youtu.be/dQw4w9WgXcQ) \ No newline at end of file From 3b6fbb67f95d45fe983fb18a0bd250a629d98aed Mon Sep 17 00:00:00 2001 From: werivik Date: Fri, 17 Jan 2025 14:49:28 +0100 Subject: [PATCH 2/8] brief history & main features finished brief history...? Started on the main features, going smoothly --- src/content/docs/bit/bit-case-weronika-vik.md | 30 ++++++++++++++----- 1 file changed, 22 insertions(+), 8 deletions(-) diff --git a/src/content/docs/bit/bit-case-weronika-vik.md b/src/content/docs/bit/bit-case-weronika-vik.md index 621ecb05c..a9a5be814 100644 --- a/src/content/docs/bit/bit-case-weronika-vik.md +++ b/src/content/docs/bit/bit-case-weronika-vik.md @@ -1,7 +1,7 @@ --- title: Bit Case Study author: Weronika Vik, werivik -tags: case study, bit, AI +tags: case study, bit --- ## Introduction @@ -12,15 +12,25 @@ This Report explores Bit as a Case Study, examining it's functionality, the posi ## Brief History -Blah +- 2015: Bit was conceptualised by a team of developers who aimed to solve the problem of reusing UI components across multiple projects. +- 2016: Bit's first version was launched, focusing on enabling developers to share and manage React components in a collaborative way. +- 2018: The platform introduced support for multiple frameworks, including Vue and Angular, broadening it's appeal to diverse developer communities. +- 2019: Bit launched a visual workspace for component exploration, making it easier for teams to preview, test and integrate components into projects. +- 2020: Bit became widely recognized as a useful tool for maintaining design systems. +- 2022: Bit expanded it's collaboration features, allowing real-time updates to components shared across distributed teams. +- 2024: Bit introduced advanced version control and AI-powered suggestions for component optimization, setting a new standard in component management. ## Main Features -Blah +Bit is a platform designed to streamline the development, sharing and management of UI components, addressing common challanges in modern frontend development. Below is an overview of it's primary features and their benefits: -- **Example Feature:** This feature does something for a specific reason. -- **Example Feature:** This feature does something for a specific reason. -- **Example Feature:** This feature does something for a specific reason. +- **Component Sharing:** Bit allows developers to extract individual components from their projects and share them across teams or applications. This helps reduce duplication and ensures consistency across codebases. +- **Version Control for Components:** Each component managed by Bit is version-controlled, enabling developers to track changes, roll back to earlier version and maintan a stable development environment. +- **Framework Compatibility:** Bit supports multiple frameworks such as React, Vue and Angular, making it a versatile tool for teams with diverse technologies. +- **Component Testing and Previewing:** Bit offers a visual workspace for testing and previewing components before integrating them into projects. Developers can see how components behave in isolation or with mock data. +- **Collaboration-Friendly:** Bit fosters collaboration by creating a shared hub for components, enabling teams to work together more efficiently, especially in distributed setups. +- **Blach:** Blach +- **Blach:** Blach Example feature table: @@ -45,12 +55,16 @@ Blah ## References -- [Example.com](https://example.com) +- https://bit.dev/blog +- https://itnext.io/building-a-frontend-developer-platform-in-2024-872911462d3d +- https://github.com/teambit/bit/blob/master/CHANGELOG.md +- [Explains what Bit is, how it works and examples on usage] (https://www.youtube.com/watch?v=E5lgoz6-nfs) + - *Good Examples* by John Doe, 1990 - The Example Podcast, Episode 1 - [Examples Explained](https://youtu.be/dQw4w9WgXcQ) ## Additional Resources -- [More about Examples](https://example.com) +- https://bit.dev - [Examples, the Full Course](https://youtu.be/dQw4w9WgXcQ) \ No newline at end of file From 8221a590a05dbdf2a25f9b827ce2be96cf1ce959 Mon Sep 17 00:00:00 2001 From: werivik Date: Fri, 17 Jan 2025 15:12:51 +0100 Subject: [PATCH 3/8] updated main features & started market comparison --- src/content/docs/bit/bit-case-weronika-vik.md | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/src/content/docs/bit/bit-case-weronika-vik.md b/src/content/docs/bit/bit-case-weronika-vik.md index a9a5be814..94fb0748e 100644 --- a/src/content/docs/bit/bit-case-weronika-vik.md +++ b/src/content/docs/bit/bit-case-weronika-vik.md @@ -29,21 +29,19 @@ Bit is a platform designed to streamline the development, sharing and management - **Framework Compatibility:** Bit supports multiple frameworks such as React, Vue and Angular, making it a versatile tool for teams with diverse technologies. - **Component Testing and Previewing:** Bit offers a visual workspace for testing and previewing components before integrating them into projects. Developers can see how components behave in isolation or with mock data. - **Collaboration-Friendly:** Bit fosters collaboration by creating a shared hub for components, enabling teams to work together more efficiently, especially in distributed setups. -- **Blach:** Blach -- **Blach:** Blach +- **Dependency Management::** Bit handles component dependencies automatically, ensuring that each piece of the project is functional and up to date without manual intervention. +- **Consistansy:** Bit is widely used to manage design systems, helping organications to maintain consistent branding and UI across large scale projetcs. -Example feature table: +## Market Comparison -| Feature | Description | -| --- | --- | -| Example Feature | This feature does something for a specific reason. | -| Example Feature | This feature does something for a specific reason. | -| Example Feature | This feature does something for a specific reason. | +In the evolving landscape of software development, tools and platforms that streamline workflows and enchance collaboration have become essential. With the rise of component driven development, plenty of developers seek ways to efficiently manage and reuse UI components across projects. Bit is one such platform, offering solutions for component sharing, versioning and collaboration. +However, Bit is not the only tool on the market with such qualities, the top competitors with similar features are Storybook, Lerna and npm. Several other platforms offer similar functionalities, each with it's strenght and weaknesses. By evaluating the advantages and disadvantages of these platforms, I aim to provide a clearer picture of how Bit stands in a relation to it's competitors, and where it excels and/or falls short. +- **Bit vs Storybook:** Blah -## Market Comparison +- **Bit vs Lerna:** Blah -Blah +- **Bit vs npm:** Blah ## Getting Started From de0afade364bf968c597a8b924e48eeb711ba46f Mon Sep 17 00:00:00 2001 From: werivik Date: Fri, 17 Jan 2025 15:45:40 +0100 Subject: [PATCH 4/8] bit vs Storybook Compared bit to Storybook, added the reference Ive used as well --- src/content/docs/bit/bit-case-weronika-vik.md | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/src/content/docs/bit/bit-case-weronika-vik.md b/src/content/docs/bit/bit-case-weronika-vik.md index 94fb0748e..b48ffb075 100644 --- a/src/content/docs/bit/bit-case-weronika-vik.md +++ b/src/content/docs/bit/bit-case-weronika-vik.md @@ -37,7 +37,10 @@ Bit is a platform designed to streamline the development, sharing and management In the evolving landscape of software development, tools and platforms that streamline workflows and enchance collaboration have become essential. With the rise of component driven development, plenty of developers seek ways to efficiently manage and reuse UI components across projects. Bit is one such platform, offering solutions for component sharing, versioning and collaboration. However, Bit is not the only tool on the market with such qualities, the top competitors with similar features are Storybook, Lerna and npm. Several other platforms offer similar functionalities, each with it's strenght and weaknesses. By evaluating the advantages and disadvantages of these platforms, I aim to provide a clearer picture of how Bit stands in a relation to it's competitors, and where it excels and/or falls short. -- **Bit vs Storybook:** Blah +- **Bit vs Storybook:** While Bit and Storybook operate within the component-driven development ecosystem, they serve distinct purposes and are not direct competeitors. Bit is primarily focused on enabling developers to share and collaborate on reusable components across different projects, while Storybook serves as a development environment for building and testing UI components in isolation within a single project. +One key difference between the two is their focus on integration. Bit supports a wide range of frameworks, such as React, Vue and Angular, allowing developers to use it across various technologies and projects. This makes it a versatile solutoin for teams working with different tech stacks. in contrast, Storybook is more specialized, initially focused on React, though it has expanded to support other frameworks. It's core strength lies in providing a platform for developers to build and visually test UI components in isolation, making it an excellent tool for dovumenting and showcasing individual components within a project. +When it comes to collaboration, Bit has a clear advantage, it enables teams to share components across projects, ensuring consistency and reducing redundancy. The platform's version control system allows developers to track changes to individual components and roll back if necessary, making it ideal for large teams working on multiple applications. On the other hand, Storybook excels in helping developers design, build and test components in isolation but does not offer the same level of cross-project sharing or version control. It is more geared towards creating comprehensive components libraries and documenting them for other developers to reference. +In summary, Bit and Storybook serve different needs within the development process. Bit is better suited for teams that need to manage and collaborate on reusable components across multiple projects, while Storybook shines when it comes to building and documenting components in a single codebase- Both tools enchance the component-driven development workflow, but they cater to different aspects aspects of the process. - **Bit vs Lerna:** Blah @@ -53,16 +56,12 @@ Blah ## References -- https://bit.dev/blog -- https://itnext.io/building-a-frontend-developer-platform-in-2024-872911462d3d -- https://github.com/teambit/bit/blob/master/CHANGELOG.md +- [Bit's Blog] https://bit.dev/blog +- [Development Platforms]https://itnext.io/building-a-frontend-developer-platform-in-2024-872911462d3d +- [Bit's github] https://github.com/teambit/bit/blob/master/CHANGELOG.md - [Explains what Bit is, how it works and examples on usage] (https://www.youtube.com/watch?v=E5lgoz6-nfs) - -- *Good Examples* by John Doe, 1990 -- The Example Podcast, Episode 1 -- [Examples Explained](https://youtu.be/dQw4w9WgXcQ) +- [Bit & Storybook comparison] https://machineservant.com/blog/2023-01-25-storybook-vs-bit/ ## Additional Resources -- https://bit.dev -- [Examples, the Full Course](https://youtu.be/dQw4w9WgXcQ) \ No newline at end of file +- [Bit]https://bit.dev \ No newline at end of file From b7c9f11fea4642b869f4723b1b1de2f05eca9946 Mon Sep 17 00:00:00 2001 From: werivik Date: Fri, 17 Jan 2025 16:16:45 +0100 Subject: [PATCH 5/8] bit vs lerna compared Bit and Lerna, added Lernas website where they talk about Lerna and so on in the reference list --- src/content/docs/bit/bit-case-weronika-vik.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/content/docs/bit/bit-case-weronika-vik.md b/src/content/docs/bit/bit-case-weronika-vik.md index b48ffb075..b212f7ea8 100644 --- a/src/content/docs/bit/bit-case-weronika-vik.md +++ b/src/content/docs/bit/bit-case-weronika-vik.md @@ -42,7 +42,10 @@ One key difference between the two is their focus on integration. Bit supports a When it comes to collaboration, Bit has a clear advantage, it enables teams to share components across projects, ensuring consistency and reducing redundancy. The platform's version control system allows developers to track changes to individual components and roll back if necessary, making it ideal for large teams working on multiple applications. On the other hand, Storybook excels in helping developers design, build and test components in isolation but does not offer the same level of cross-project sharing or version control. It is more geared towards creating comprehensive components libraries and documenting them for other developers to reference. In summary, Bit and Storybook serve different needs within the development process. Bit is better suited for teams that need to manage and collaborate on reusable components across multiple projects, while Storybook shines when it comes to building and documenting components in a single codebase- Both tools enchance the component-driven development workflow, but they cater to different aspects aspects of the process. -- **Bit vs Lerna:** Blah +- **Bit vs Lerna:** Bit and Lerna are both tools that aim to streamline development processes, but they target different areas of the workflow. Lerna is designed primarily for managing monorepros - repositories that contain multiple packages. It simplifies tasks such as dependency amanagement and versioning within a single repository. Lerna helps teams working with a monorepo structure to manage their projects more effectively by handling inter-package dependenvies and potimizing the publishing process for multiple pakcages at once. +Bit is more focused on managing individual UI components and enabling their reuse across multiple projects. It allows developers to isolate components from their codebases and share them with other teams or applications, making it easier to maintain consistency and reduce duplication. Unlike Lerna, whihc is mostly used for managing code within a single monorepo, Bit operates across different repositories, making it a more versatile tool for teams working with multiple projects or in distributed environments. +While Lerna excels at handling multiple packages within one codebase as previously mentioned, Bit offers more granular control over the reuse of specific components, which can be shared and versioned independently across different projects. This makes Bit particulary valuable for teams working on projects where modularity and component sharing are essential. However, Lerna may still be the preferred option for teams using monorepo and needing to manage entire packages rather than individual components. +In conclusion, Lerna is ideal for monorepos where managing multiple pakcages and dependencies is a priority, while Bit is better suited for teams looking to share and collaborate on reusable components across different projects. - **Bit vs npm:** Blah @@ -61,6 +64,7 @@ Blah - [Bit's github] https://github.com/teambit/bit/blob/master/CHANGELOG.md - [Explains what Bit is, how it works and examples on usage] (https://www.youtube.com/watch?v=E5lgoz6-nfs) - [Bit & Storybook comparison] https://machineservant.com/blog/2023-01-25-storybook-vs-bit/ +- [Lerna] https://lerna.js.org ## Additional Resources From 878744d0a4930775b9381db5dc094b96c9ca01fa Mon Sep 17 00:00:00 2001 From: werivik Date: Fri, 17 Jan 2025 16:58:31 +0100 Subject: [PATCH 6/8] bit vs npm + getting started --- src/content/docs/bit/bit-case-weronika-vik.md | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/src/content/docs/bit/bit-case-weronika-vik.md b/src/content/docs/bit/bit-case-weronika-vik.md index b212f7ea8..32908d9cd 100644 --- a/src/content/docs/bit/bit-case-weronika-vik.md +++ b/src/content/docs/bit/bit-case-weronika-vik.md @@ -47,11 +47,22 @@ Bit is more focused on managing individual UI components and enabling their reus While Lerna excels at handling multiple packages within one codebase as previously mentioned, Bit offers more granular control over the reuse of specific components, which can be shared and versioned independently across different projects. This makes Bit particulary valuable for teams working on projects where modularity and component sharing are essential. However, Lerna may still be the preferred option for teams using monorepo and needing to manage entire packages rather than individual components. In conclusion, Lerna is ideal for monorepos where managing multiple pakcages and dependencies is a priority, while Bit is better suited for teams looking to share and collaborate on reusable components across different projects. -- **Bit vs npm:** Blah +- **Bit vs npm:** Bit and npm (Node Package Manager) are both tools used in the development process, but they serve fundamentally different purposes. npm is primarily a package manager for JavaScript and Node.js projects. It allows developers to manage install dependencies from a large registry of pakcages. Developers can use npm to download libraries and tools that they need to build their apllications and it also provides a way to publish their own packages for others to use. +In contrast, Bit is a platform that focuses on the management and sharing of indicidual UI components. While npm manages entire pakcages, which are often composed of many different modules of features, Bit allows developers to break down their projects into smaller, reusable components. These components can be shared across different applications, versioned and updated independently, helping to maintain consistency and reduce redundancy. +One major difference between the two is that npm is a general-puprose package manager, widely used for handling dependencies in JavaScript and Node.js projects, where as Bit is a specialized tool that facilitates the sharing and collaboration of indicidual components, especially in component driven development workflows. Bit add a layer of functionality on top of package management by offering features like version control for components, real-time updates and a visual workspace for testing components. +While npm has a much larger community and a wider range of packages, Bit provides a more targeted solution for teams that need to collaborate on reusable components across different projects. For developers looking to share small, specific pieces of UI code rather than entire packages, Bit offers a more granular and flexible apporach. +In Summary, npm is an essential tool for managing JavaScript dependencies, while Bit excels in the sharing and versioning of individual components across multiple projects. Developers who need to manage entire packages would benefit from npm, but for teams focused on component reuse and collaboration, Bit offers more specialized features. ## Getting Started -Blah +I will be exploring how to set up and use Bit within a project using VS Code as the code editor and Bash for terminal commands. Bit is a platform that is supposed to manage, version and share components across projects, and I am going to showcase that and give a step by step tutorial. + +1. Ensure Node.js is installed either on the computer or in the code editor. To check you can use the command "node -v" to see what version of Node.js you have, if nothing comes up or it's outdated, run the "npm install node" or check the Node.js guide from their official website to update/install Node.js. +2. Install Bit by using the command "npm install bit-bin --global" in the terminal. +3. Create a folder to keep your components inside, and make a file to test Bit with, such as button.js, and add a basic button component inside. +4. Run the Bit add command in the terminal, "bit add components/button.js --main button.js". This will add the component to the Bit workspace, after the component is tracked by Bit you can version it using the Bit tag command, "bit tag components/button 1.0.0". +5. To share the component with others or use it across multiple projects, use the command "bit export .". +6. To test if the export worked, create a new directory for a different project/workspace. Open this new project in the code editor and initialize it with Bit by using the commands: "mkdir testing-bit", "cd testing-bit" and "bit init". Write the Bit import command to fetch the button we made in step 3. "bit import ./button", once that is done, make a file where you wish the Bit component should be in, and fetch the button. ## Conclusion @@ -65,6 +76,8 @@ Blah - [Explains what Bit is, how it works and examples on usage] (https://www.youtube.com/watch?v=E5lgoz6-nfs) - [Bit & Storybook comparison] https://machineservant.com/blog/2023-01-25-storybook-vs-bit/ - [Lerna] https://lerna.js.org +- [npm-about] https://docs.npmjs.com/about-npm +- [Bit - Getting Started] https://bit.dev/docs/intro/ ## Additional Resources From 48349a264ef2f26898cdd0b3c9c9b5291294224b Mon Sep 17 00:00:00 2001 From: werivik Date: Sun, 26 Jan 2025 15:26:08 +0100 Subject: [PATCH 7/8] udpating the how to --- src/content/docs/bit/bit-case-weronika-vik.md | 29 ++++++++++++++----- 1 file changed, 21 insertions(+), 8 deletions(-) diff --git a/src/content/docs/bit/bit-case-weronika-vik.md b/src/content/docs/bit/bit-case-weronika-vik.md index 32908d9cd..c3ec7a2d9 100644 --- a/src/content/docs/bit/bit-case-weronika-vik.md +++ b/src/content/docs/bit/bit-case-weronika-vik.md @@ -55,14 +55,27 @@ In Summary, npm is an essential tool for managing JavaScript dependencies, while ## Getting Started -I will be exploring how to set up and use Bit within a project using VS Code as the code editor and Bash for terminal commands. Bit is a platform that is supposed to manage, version and share components across projects, and I am going to showcase that and give a step by step tutorial. - -1. Ensure Node.js is installed either on the computer or in the code editor. To check you can use the command "node -v" to see what version of Node.js you have, if nothing comes up or it's outdated, run the "npm install node" or check the Node.js guide from their official website to update/install Node.js. -2. Install Bit by using the command "npm install bit-bin --global" in the terminal. -3. Create a folder to keep your components inside, and make a file to test Bit with, such as button.js, and add a basic button component inside. -4. Run the Bit add command in the terminal, "bit add components/button.js --main button.js". This will add the component to the Bit workspace, after the component is tracked by Bit you can version it using the Bit tag command, "bit tag components/button 1.0.0". -5. To share the component with others or use it across multiple projects, use the command "bit export .". -6. To test if the export worked, create a new directory for a different project/workspace. Open this new project in the code editor and initialize it with Bit by using the commands: "mkdir testing-bit", "cd testing-bit" and "bit init". Write the Bit import command to fetch the button we made in step 3. "bit import ./button", once that is done, make a file where you wish the Bit component should be in, and fetch the button. +I will be showing how to set up and use Bit within a project using VS Code as the code editor and Bash for terminal commands. I will be using the Bit Getting started guide on how to install and initialize the project. + +OBS! Make sure you make an account before starting, only registered users can use Bit (as far as I am aware). + +### Creating a Component + +1. Make a new repro where your will be testing and creating your components using Bit. +2. Install Bit by using the command "npx @teambit/bvm install" in the terminal of your computer. +3. To initalize a workspace use the command "bit init --default-scope my-org.my-project" in the terminal, replace the my-org with your organization name and my-project with your projects name, either a already existing project or a new one. +4. Make a new folder inside the repro where you wish your component to be inside, I made a folder named button and added a button.html, button.css and button.js files with basic codes inside. +5. To add your component to Bit use the command: "bit add your-component.js your-component.css your-component.html --main your-component.js". Since I named everything "button" for me it looks like such: "bit add button.js button.css button.html --main button.js +". +6. Now that the component is successfully added to Bit, we will need to tag it to give it a version number so we can later fetch and update the component. using the command "bit tag --build" Bit should do everything by itself. +7. Before we can export the component, we must be logged in, to make sure you are logged in use the command "bit login". If you are not logged in, you will be transfered to a new webpage where you must login to your Bit account. +8. Once the component is tagged, and we are logged in to our Bit account, we can export it to the Bit platform so that it is available to be used in other projects or teams. Use the command: "bit export" in the terminal to push the component. To check if you have successfully exported your component, open up the webpage with you Bit account and under "overview" you can see if you have gotten a new/existing repro and a new component inside it. + +### Fetching a Component + +1. To start fetching yours or others components, you must first see if they exist. In your Bit account, navigate where the component you wish to fetch is, if we continue where we left off, the component will be inside the repro you have made earlier, under "overview". You should see the component listed there with the version 1.0.0 as it was the first component we made and have not added any "updates" to it. You can also see all the details to it by clicking the component to ensure everything is correct. +2. To confirm that our component has been exported and can be used in other projects, we can import it into a different project, or even the same project we used earlier. Open up the terminal and navigate into your new/previous repro. Import the component by running the command "bit import your-org.your-repro-name.component". Replace your-org with your organization name, repro-name with your previously made repro's name where the component is inside, and component with the component's name. +3. If it everything goes successfully, the component should now be inside your new repro, or "reused" in your old repro. To test if it works you can run the command "bit start" or use live-server. ## Conclusion From dba451f1d4bbdbf679f553ddf358a36e666ba6c4 Mon Sep 17 00:00:00 2001 From: werivik Date: Sun, 26 Jan 2025 15:49:50 +0100 Subject: [PATCH 8/8] added a conclusion bit --- src/content/docs/bit/bit-case-weronika-vik.md | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/src/content/docs/bit/bit-case-weronika-vik.md b/src/content/docs/bit/bit-case-weronika-vik.md index c3ec7a2d9..0a2f887b9 100644 --- a/src/content/docs/bit/bit-case-weronika-vik.md +++ b/src/content/docs/bit/bit-case-weronika-vik.md @@ -55,11 +55,10 @@ In Summary, npm is an essential tool for managing JavaScript dependencies, while ## Getting Started -I will be showing how to set up and use Bit within a project using VS Code as the code editor and Bash for terminal commands. I will be using the Bit Getting started guide on how to install and initialize the project. +I will be showing how to set up, export and import Bit Components within a project using VS Code as the code editor and Bash for terminal commands. I will be using the Bit Getting started guide on how to install and initialize the project. +OBS! Make sure you make an account before starting, only registered users can use Bit. -OBS! Make sure you make an account before starting, only registered users can use Bit (as far as I am aware). - -### Creating a Component +Downloading and Importing Components: 1. Make a new repro where your will be testing and creating your components using Bit. 2. Install Bit by using the command "npx @teambit/bvm install" in the terminal of your computer. @@ -71,7 +70,7 @@ OBS! Make sure you make an account before starting, only registered users can us 7. Before we can export the component, we must be logged in, to make sure you are logged in use the command "bit login". If you are not logged in, you will be transfered to a new webpage where you must login to your Bit account. 8. Once the component is tagged, and we are logged in to our Bit account, we can export it to the Bit platform so that it is available to be used in other projects or teams. Use the command: "bit export" in the terminal to push the component. To check if you have successfully exported your component, open up the webpage with you Bit account and under "overview" you can see if you have gotten a new/existing repro and a new component inside it. -### Fetching a Component +Fecting and Testing Components: 1. To start fetching yours or others components, you must first see if they exist. In your Bit account, navigate where the component you wish to fetch is, if we continue where we left off, the component will be inside the repro you have made earlier, under "overview". You should see the component listed there with the version 1.0.0 as it was the first component we made and have not added any "updates" to it. You can also see all the details to it by clicking the component to ensure everything is correct. 2. To confirm that our component has been exported and can be used in other projects, we can import it into a different project, or even the same project we used earlier. Open up the terminal and navigate into your new/previous repro. Import the component by running the command "bit import your-org.your-repro-name.component". Replace your-org with your organization name, repro-name with your previously made repro's name where the component is inside, and component with the component's name. @@ -79,7 +78,15 @@ OBS! Make sure you make an account before starting, only registered users can us ## Conclusion -Blah +In this raport, I have explored Bit as a powerful tool for modern software development, focusing on it's ability to streamline the management, sharing and reuse of UI components across various projects. Through it's features, such as version control, component sharing and dependency management, Bit simplifies the development process and promotes collaboration within teams. It enabled modular, reusable code that not only reduces redundancy but also ensures consistency across applications. + +The main advantages of Bit include it's versatility across frameworks such as React, Angular and Vue, it's version control capabilities and the ease with which teams can collaborate on shared components easily. These features make Bit particulary valuable in large, distributed development evniroments where maintaining a consistent design systm and reusing components can be a challange. Additionally, Bit's visual workspace for previewing and testing components ensures that developers can validate components before integration, enchancing quality control. + +However, Bit does have some limitaions, as most Development Platforms. Bit requires and online account to fully utilize it's platform, which may be a hurdle for teams or developers who prefer local only workflows. While Bit excels at managing individual components, it is not a direct replacement for tools like Lerna or npm, which are btter suited for managing entire project pakcages. Additionally, Bit's platform apporach may not always intergrate seamlessly with all existing tools or workflows. + +Looking towards the future, Bit's continued focus on enchancing collaboration and optimizing component management makes it an increasibly attractive tool for teams focused on modular, component driven development. As the trend towards composable software and reusable components grows, Bit is likely to remain a key player in helping teams work more efficiently and maintain high quality codebases. + +In conclucion, Bit presents a promising solution for teams seeking management and sharing UI components, offering a range of features designed to improve collaboration, version control and consistency. While it may not replace all tools in a development ecosystem, Bit offers significant advantagesfor teams focused on modularity and reusability, positioning itself as an indispensable asset in the modern software development landscape. ## References