Component-Driven Collaboration

355 reads

Component-Driven Collaboration (CDC) is a way to build frontend code, as a team, by delivering code updates as meaningful and purposeful independent components. CDC can be contrasted by the "traditional" way of delivering updates with no clear borders, meaning or purpose.

reactions

CDC is a way to maximize or even augment the benefits of Component-Driven Development.

reactions

'Component-Driven Development' (CDD) is a methodology for building UIs from the bottom up, starting from small and independent components, all the way to full pages. This methodology is, essentially, a "UI take" on an old and familiar concept in programming - modularity.

reactions

Just so we're on the same page - why CDD?

Building with independent components means more code gets reused as each component is built to be pure, independent and with a clear and explicit API.

Modular UI or component-first UI, is easier to understand, maintain and debug. The reason for this is quite obvious - atomic pieces of code are more predictable, testable and easier to comprehend than a single elaborate monolith.

Lastly, CDD also means a better separation of concerns as each component addresses a specific concern or serves a single purpose and needs not to know about the function of other components.

Getting the Most out of CDD with Bit and Bit.dev

Bit.dev is a cloud component hub. It is a place to publish, document, organize and collaborate on individual frontend components (React, Vue, Angular, Svelte, etc.).

reactions

Published components can be installed using NPM/Yarn or cloned into any repository, using Bit's CLI. Cloned components can be updated in their "host repository" and published back to Bit.dev.

reactions

Bit.dev works perfectly with Bit, an open-source tool for independent versioning and publishing of components. By using Bit, each component, in any codebase, can be versioned separately, built separately and published - you guessed it - separately.

reactions

Using these two tools, and a couple of integrations, I'll present a better way to collaborate on frontend code, a way that maximizes the benefits of Component-Driven Development. I'll use a simple demo app to demonstrate this and, hopefully, prove my point.

reactions

Github repo: https://github.com/teambit/react-demo-app

reactions

Publishing components to Bit.dev - Maximizing code reuse

Building components as agnostic and independent pieces of code is essential for code reuse but not enough. To get others in your team to use your code it has to be both easily discovered and easily imported into different repositories.

reactions

Example

reactions

Let's say I've built my components and composed a much needed to-do app. Now, I'd like others in my team to learn about my great achievement and use my components in and across our different projects/repositories.

reactions

For that I'll first need to install Bit globally.

reactions

$ yarn global add bit-bin

I'll then, login and initialize a Bit workspace in my project's directory.

reactions

$ bit login $ cd react-demo-app $ bit init --package-manager yarn // or with NPM $ bit init

I'll then start tracking my components (each separately, remember?)

reactions

$ bit add src/components/*

I'll then want to configure a compiler to decouple my components from my project's build setup (again, each component is built separately).

reactions

$ bit import bit.envs/compilers/react --compiler

I'll then tag my components with a single version number, just to make things simpler (keep in mind - each component is actually versioned independently). The 'tag' command locks changes, runs unit-tests and builds each component using its configured compiler (for most cases, a single compiler will do for all components under the same project, for obvious reasons).

reactions

$ bit tag --all 1.0.0

I'll then export (publish) my components to Bit.dev.

reactions

'

learn-bit'

reactions

= my organization/username

'

react-demo-app

reactions

$ bit export learn-bit.react-demo-app

' = my component collection (scope) on Bit.dev

I'll then go over to Bit's playground, inspect my components there and add examples for them.

reactions

https://bit.dev/learn-bit/react-demo-app

reactions

My team can now easily find my reusable components, see their documentation, inspect them and install them in their project as a packages using NPM/Yarn.

reactions

Each component can also be imported or cloned to other projects. That means you get source-code and can even change it and push it back to Bit.dev with a bumped version.

reactions

Delivering intelligible updates - Easier maintenance

Picture this: you're responsible for the content and marketing pages in your organization's many apps and websites. You've built a whole lot of components for that. Each of them is published and available to all. Each is used multiple times, in and across projects.

reactions

Now it is time for an update in one of your component. So, you do your thing, change it, and export it back to Bit.dev.

reactions

Once you've published your updated component three main things happen:

reactions

Updates to documentation and live playground

reactions

Your collection in Bit.dev is updated. Changes can be seen in Bit.dev's live playground. That's not only a way to let others see the changes but also a way to test if your example still works. It could be that Bit.dev is no longer able to render your component using the previous example - and that tells you it may not work in other projects.

reactions

Automated (intelligible) PRs to all connected repositories

reactions

An automated PR is sent to all connected/consuming repositories using BitDevBot, Bit.dev's Github bot. And, as mentioned earlier, this PR is intelligible - a component that does X has changed - its clear now what could change in each project and what could possibly break.

reactions

Now that you've released this update you can keep track of where it's in use, where it's been updated and where it is still pending.

reactions

(Learn more about it here).

reactions

Slack notifications - Notifying on changes to features, not 'lines'

reactions

Delivering changes as components makes it easy to notify your team of changes in a more abstract way. A change to a component is easily understood, it means a certain feature has been changed.

reactions

Delivering changes as components makes it easy to notify your team of changes in a more abstract way. A change to a component is easily understood, it means a certain feature has been changed.

reactions

Delivering changes as components makes it easy to notify your team of changes in a more abstract way. A change to a component is easily understood, it means a certain feature has been changed.

reactions

Bit.dev integrates with Slack to do exactly that. It makes use of this abstract level to communicate to other developers, designers, product managers, etc., that a certain feature has been changed. Notified stakeholders could then examine it as part of a project or independently, in Bit.dev's playground. (Learn more about it here).

reactions

Conclusion

As I’ve hopefully managed to demonstrate component-driven collaboration is a sure way to a more effective collaboration. It makes code more comprehensible, predictable and maintainable. It speaks a more abstract language, one that is more concise and efficient.

reactions

Tags