Angular CLI is a command-line interface tool that simplifies the Angular project workflow. The ng generate command scaffolds boilerplate code in a snap. The ng add command adds a library dependency without requiring manual configuration. And the ng update command accelerates migrations.
Angular CLI is an excellent tool, but with Angular schematics, the toolkit that powers Angular CLI, you can streamline your workflow as your team and codebase scale. For instance, onboarding one new developer is relatively simple, but onboarding five teams of developers can be complex and time-consuming. Similarly, providing migration support to one project is straightforward, but supporting migration across five projects can be challenging. With Angular schematics, you can simplify processes, keep your codebase sustainable by enforcing architecture decisions, and help your developer team ship faster.
In this blog post, we'll explore practical use cases of leveraging Angular schematics to enhance the developer experience for both your team and developers who adopt your design system.
Speed up ramp-up time for new developers
Imagine that a developer joins your team and wants to build a feature in the codebase. What does it take to see that code from creation to production?
Some of the typical to-dos include:
- Read documentation
- Add code that follows conventions (e.g., where code belongs)
- Integrate new code into the existing codebase (e.g., adding a component to the NgModule)
- Add unit tests and integration tests
- Add documentation for the new code and storybook examples
New developers may have more challenges getting up to speed. For instance, they may be unaware of conventions that are well-known by the current team, documentation may be scattered across different places, and the documentation may be outdated. Out of these challenges, outdated documentation could be the most harmful, resulting in features built on top of deprecated code, leading to reworks. While having a mentor to coach the new hire can avoid most of these challenges, how can we make the onboarding process more efficient when the codebase scales? Especially when we need to onboard considerable teams of developers to contribute to the design system codebase, the supporting work can grow exponentially.
We can use Angular schematics to scaffold code starter templates based on the task. The templates should not contain complicated logic but follow the code convention. These templates can serve as alternate documentation that helps developers learn a subset of the codebase one at a time.
For example, a workflow for creating a component module involves adding storybook examples and integration tests. We construct Angular schematics to generate a component module with necessary imports baked into the template. The schematics can also automatically add test examples and Storybook stories. Developers unfamiliar with Storybook and the test framework required by the project can focus on building the component.
Communicate conventions and changes for the codebase
Working on a large codebase can be challenging, especially when multiple teams are involved. An inconsistent codebase can happen when numerous teams work in silos concentrating on their features without communicating clearly to the rest of the project teams. Inconsistencies in implementations lead to longer code review time and a higher risk of introducing bugs and technical debts. In this case, we can create a custom schematic that generates features based on pre-defined architecture decisions and prompts developers to choose from a limited set of options for each new feature. This can help ensure that new features are built using consistent architecture decisions and best practices, leading to a more maintainable and scalable codebase over time.
The needs of developers will change and evolve, and a process working well in one phase of the project might need to revisit to improve efficiency or reduce errors. Angular schematics make it easy to consolidate architecture decisions and communicate changes continually. I once onboarded a new team holding a long-last feature branch, which was out of sync with the main branch. The team got stuck in the code review cycle to complete the work. I used Angular schematics to create a feature module with routing and state management templates. The team moved their work to this base feature module so that their work could merge quickly.
How Angular schematics can enable smoother design system adoption
Now that we understand how Angular schematics can help your development team's experience, we'll cover how schematics can benefit design system adoption.
1. Setting up a custom schematic for your design system flattens the learning curve for developers who want to use your design system.
Complex components such as table and step form are a pain to work on because they often require a lot of boilerplate code and can be time-consuming to create and maintain, but using a pre-configured template generated by Angular schematics can help speed up development and reduce the risk of errors or inconsistencies.
2. Add configurations automatically with schematics.
Sometimes, your design system requires additional configurations before using it. For example, developers may need to link a couple of stylesheets from a separate design token library to make the design system work with their project. While you can document those configurations on a README file, it’s much easier to construct the schematics to add those configurations automatically using the ng add command. This way, your team will be less likely to get ping to support teams having trouble using the design system.
3. Schematics can be used to migrate and handle breaking changes.
One of the hottest Angular features released recently is stand-alone components. To handle this migration, the Angular team uses the ng generate schematic to help convert an application from modules to stand-alone components. Read more about standalone migrations here.
This migration tool gives teams using Angular the confidence to transition to the latest standard of Angular smoothly. The `mode` and `path` flags used with the ng generate command also provide a flexible plan for Angular users to choose the solution that suits their needs.
Similarly, it’s common to have breaking changes in a design system. The APIs of a component may change when the business requirement changes. Some components may be deprecated and removed completely. While the product team that adopts the design system is usually the one responsible for updating the codebase to accommodate the breaking change, it’s not a great developer experience, and the impact of the design system is the team will be burdened with more work to support deprecated APIs instead of shipping new features. We can construct schematics to update the breaking change code using the ng update command. This way, product developers save time on the migration. And since we use AST to make changes programmatically, the upgrade by the schematic is less error-prone.
Further reading: Angular schematics explained
Interested in learning more about Angular schematics? Reach out to us and chat with one of our Angular experts.
