A Modern Approach for Angular Development

Build composable and modernized Angular apps with Bit!

Published in

Bits and Pieces

8 min readNov 23, 2023

Traditional development practices and tools often face challenges when it comes to component isolation. As applications become complex, managing and reusing components across projects becomes increasingly challenging.

This is where Bit steps in to offer a modern and efficient solution.

Bit is a build system for composable software. With Bit, you can build components as independent pieces of code shared and collaborated via remote component hostings.

Understanding App Composability

Before we jump into the specifics of Bit, let’s first grasp the concept of app composability.

At its core, app composability refers to the ability to build applications by composing reusable components.

Imagine having a toolkit of well-crafted components ready to be seamlessly integrated into your Angular project. These components, encapsulated with their logic and styles, can be combined to create complex and feature-rich applications, like assembling building blocks.

Example: a dependency graph of independent, reusable (Bit) Angular components

This method offers a plethora of benefits, including:

Enhanced maintainability: Complex applications become significantly easier to manage and update when composed of independent components.
Improved reusability: Reusable components can be shared across different applications, saving time and effort and promoting consistency.
Specialization and collaboration: Each team can specialize in specific parts of the application development (user management, APIs, forms, etc.) with a clear scope and share their components with other teams.
Better testability: Independent and smaller components are more straightforward to test individually, leading to a more robust and reliable application.

Quick start on using Angular with Bit

Integrating Bit with your Angular project is a breeze.

Step 1: Installing Bit in your Angular project

First, use Bit’s version manager (bvm) to install Bit globally and then initialize a workspace with Angular.

npx @teambit/bvm install
bit new angular my-workspace --env bitdev.angular/angular-env

Step 2: Creating and tracking components

Once Bit is set up, use the Bit CLI to create and track components.

bit create ng-standalone ui/my-button

This will create a component a Button component. You can build your component and code using standard Angular syntax. Once you’re ready to ship your component onto the world, you can run the command:

bit snap -m "Creating new ui/my-button component"

Sharing components is where the real power of Bit shines. Push your components to Bit cloud, making them accessible to your team or the broader community.

bit export

If necessary, you can also publish your components to npm’s registry instead of Bit’s registry.

Step 4: Consuming Bit components in Angular applications

Now that your components are on Bit cloud, let’s explore how to consume them in other Angular projects.

Create an Angular application

In your workspace, create a new Angular application:

bit create ng-app apps/my-angular-app

Your app should look something like this:

This is essentially a component which is deployable to providers like Netlify and Vercel.

Importing Bit components

As shown above, you can consume these components like any other package. If the new Angular application is in a different workspace, you first need to install it:

bit install @my-org/my-scope.ui.my-button

Next, you can import it like you’d normally would and continue using it:

import { MyButton } from '@my-org/my-scope.ui.my-button';

Benefits of using Bit for Angular Development

There are many benefits of using Angular with Bit. For a better understanding, let’s look at them in detail.

Bit components and Angular components

In Angular, a component is a class that contains the logic and the template of a specific part of your application.

Bit components are more like modular repositories. Their source code and artifacts, in the context of Angular, can be thought of as an Angular library. It is a collection of files that are related to a specific functionality. This means that a Bit component can contain multiple Angular components, as well as other files such as services, directives, and stylesheets.

Think of Bit components as packages. Each component will have its own package.json file and be distributed with its own package name.

Component-centric approach

Bit is a modern development tool that treats components as first-class citizens, making them easy to manage, organize, and share across projects.

Instead of dealing with cumbersome monorepos, you can focus on building and maintaining independent pieces of functionality.

Each Bit component will be automatically compiled and available in the node modules of your workspace, meaning that you can import them like any other package. This simplifies development because you do not need to build your Angular libraries before you run your app; everything is already set up for you.

Isolation and dependency management

Bit effectively isolates components and manages their dependencies seamlessly, ensuring consistent behavior across different applications.

Bit keeps track of the dependency tree and is able to understand the components that rely on each other. It does this by parsing the code to automatically generate the package.json file and categorize imports between runtime, peer, and dev dependencies.

You do not need to worry about manually creating and maintaining your library package file. Of course, you can still change it manually if you have any specific requirements in terms of dependencies.

Each component is then versioned independently, providing granular control over updates and changes. You do not need to wait for large-scale releases to push bug fixes and new features.

Bit’s collaboration and sharing capabilities

Bit facilitates developers’ collaboration and sharing of components by providing a centralized hub for your components. The bit.cloud platform is a repository where developers can discover, share, and collaborate on components. You can set up different levels of access to your organization’s code, and even non-developers can follow along and interact with the progress of your projects, providing valuable feedback.

This means that you can easily find out if your organization has already created the component that you need instead of reinventing the wheel. You can check its code, API, and documentation to see if it meets your expectations. You can also verify if it is compatible with your current version of Angular. If not, you can then either submit a change request or fork it to gain time.

Effortless component documentation

Documentation is often an overlooked aspect of software development. Bit, however, makes it easy to generate and maintain documentation for individual components. This enhances collaboration and serves as a valuable resource for developers using shared components.

Besides markdown documentation, you can also create compositions that simulate components in different variations for testing, visualization, and discoverability purposes. This is similar to other solutions like Storybook, except that it is already integrated, so you do not need to set it up.

This is especially interesting when you work on UI components, as it is a good way to ensure that you follow your designer’s specifications. By showcasing the different variations of each component, you can ensure that it meets the requirements. And then, by comparing the compositions of different versions, you can check if there have been any visual regressions.

Advanced component testing

Testing is a critical aspect of software development, and Bit simplifies the process by enabling developers to test components both in isolation and integrated into your applications.

When working on packages imported into different applications, a mono repository was previously the only solution to quickly test if your code changes were functional. But with Bit, you get the advantages of a mono repository while keeping the versatility of independent components. You can import everything in the same workspace locally to simulate a mono repository, but then every component is individually packaged and versioned.

By using Bit’s CI, named Ripple CI, you can ensure that your changes do not break your components’ dependents, as they can be automatically tested against the code that you pushed to bit cloud.

Streamlining continuous integration with Ripple CI

Bit utilizes Ripple CI as its default CI, offering a highly optimized CI experience specifically designed for component-driven software. Ripple CI provides several benefits for Angular development:

Parallelized component builds: Ripple CI parallelizes component builds, significantly reducing build times and improving development efficiency.
Efficient builds with optimized component dependencies: Ripple CI only builds affected components and their dependencies, ensuring efficient use of resources and optimizing build performance.
Faster feedback loops with incremental component builds: Ripple CI provides faster feedback loops by incrementally building components as they change, allowing developers to identify and address issues early on.
Automatic propagation of dependent component builds: Ripple CI automatically propagates the builds of dependent components, including those not maintained in your workspace, ensuring that the entire application is always up-to-date. You can easily detect if your modifications contain bugs or breaking changes.
Out-of-the-box configuration: Ripple CI is automatically integrated with Bit, requiring no additional configuration, thus allowing developers to focus on their code rather than spending time fine-tuning CI settings.

Basically, Ripple CI transforms all the code of your organization into a big mono repository, which means that you see the direct impact of your Bit components and how they interact with the other components and applications that depend on them.

This is where app composability takes its full meaning. You build small pieces of code, whether it be modules, services, directives, styles, or a mix of everything, and package it into a single entity that will then be used by other components or applications. In the end, everything comes together on bit cloud with Ripple CI, making sure that your code works for your whole organization.

Conclusion

Bit and Ripple CI have drastically improved how to approach Angular development. It introduces a modern and efficient process for building composable applications. By embracing app composability, developers can create more maintainable, reusable, and testable applications while enhancing collaboration and productivity.

With its powerful features, seamless integration with Angular, and out-of-the-box support for Ripple CI, Bit is the ideal solution for developers seeking to elevate their Angular development skills and create the best web applications.

If you want to explore a sample application with Bit and Angular, feel free to explore this scope in Bit Cloud.

I hope you have found this useful.

Thank you for reading!