🚀 Introduction to schematics

Daniel Barrientos
2 min readNov 28, 2023

--

What is a schematic?

A schematic is a powerful tool designed to automate code generation. In Angular, it plays a crucial role in enabling efficient code creation.

We’ll delve into the Angular schematics library, but it’s important to note that its utility extends beyond Angular — you don’t need Angular knowledge to harness its code generation capabilities.

Does this sound complicated? It’s simpler than it appears. Essentially, a schematic can be thought of as a function that creates, updates, or deletes files, supplemented with tools to streamline these tasks.

Why Use Schematics Instead of the Node File System?

The Node File System is a module for interacting with files. However, code generation demands more consideration, such as:

  1. Error Handling: What if something goes wrong during the process?
  2. Execution Dependencies: How do we ensure certain actions are completed before others?
  3. Tooling: Are there utilities to expedite the process?

Schematics simplify the process of creating, updating, or deleting files, adding functionalities that enhance the code automation experience.

The Importance of Learning About Schematics

Automating repetitive processes is not just a time-saver but a necessity in modern software development. For example, automating initial configurations (like Linters, Formatters, Git Hooks, GraphQL setup, scaffolding code, SCSS structure, and HTML cleanup) saves considerable time. While manual configuration offers educational value initially, automation proves more advantageous once you understand the underlying processes.

In my extensive experience, I view automation not as a luxury, but as an essential practice in software development. This is particularly true in Angular projects, where schematics can efficiently manage repetitive tasks, enhancing productivity and reducing human error.

How can I create Angular Schematics?

It’s important to clarify that Angular Schematics are not exclusive to Angular. They primarily facilitate code generation, a function that is not framework-specific. Although Angular provides additional tools for this purpose, the principles of creating schematics are applicable across various frameworks. I’ll guide you through using these tools, enabling you to create schematics for Angular and beyond.

What’s next?

You can continue learning about schematics:

Happy Coding!!!

--

--

Daniel Barrientos
Daniel Barrientos

Written by Daniel Barrientos

I'm Principal frontend engineer, Follow me to learn together about web development, UI / UX, and problem solving.

No responses yet