Understanding JS Code Automation for Beginners

Introduction

In this article, I'll explore code generation with JavaScript (JS). I aim to share why I embarked on this journey and what insights you can expect from this and subsequent articles.

Note: Feel free to skip the story section if you prefer! :)

Storytime

My venture into the world of code automation began when I attempted to master all the content in the Angular documentation, but found myself stumped by one particular topic: Angular Schematics. The challenge wasn't just the complexity of the topic but the lack of thorough documentation.

My manager at the time decided not to guide me through schematics, suggesting instead that I undergo a similar rigorous process of self-discovery that he had. Admittedly, it was tough. The internet offered only basic tutorials, most of which felt like rehashes of the same examples. Even when someone attempted to explain schematics, their explanations were hardly straightforward, leaving the audience impressed but unable to apply what they'd heard to real-world problems.

After a year and a half of piecing together information from various online resources and meticulously studying the official GitHub repository, I've amassed enough knowledge to fill the gaps and share my findings.

I hope this series of articles will simplify your day-to-day tasks as a JS developer and demystify the process of using Angular Schematics.

What Does Code Automation in JS Mean?

Code automation is quite straightforward. When you have existing code that you want to replicate with some variations, you typically have two options:

1. Copy and paste: Simply duplicate the code and manually adjust the necessary parts.

2. Templates: Utilize templates from sources like Gist or a GitHub repository template.

Manual adjustments, however, are prone to errors due to the repetitive nature of the task.

Code automation involves placing your code into a "factory" that automatically generates the required variations for you.

Why Are Schematics Important in Code Automation?

Angular Schematics offer powerful functionalities for code automation:

1. Modify, create, and/or delete files.

2. Template code: You can define parts of your code to be dynamic.

3. Staging area: Schematics provide a rollback feature if errors occur during file generation, restoring the initial state.

4. Modularity: Schematics operate like LEGO pieces, where each one can invoke others, allowing for modular code management.

These features highlight the advantages of schematics over using plain Node.js for certain tasks, particularly in terms of modularity and error handling.

Yet, despite these benefits, schematics suffer from significant drawbacks:

1. There is hardly any robust documentation available.

2. Content creators seldom discuss schematics due to the lack of good documentation.

3. Angular has not prioritized adding new features to schematics as there hasn't been much demand for enhancements.

Result of My Research

Here are the key issues I've uncovered:

1. A severe lack of documentation.

2. Challenges in initiating new schematic projects.

3. While the main schematic library is framework-agnostic, its usage is generally restricted to Angular or NestJS through CLI commands.

Solutions

To address these issues:

Lack of Documentation

I've developed a comprehensive documentation site covering everything I've learned about schematics over the last eighteen months, accessible at https://schematics.pbuilder.dev/.

Challenges in Starting and Using Schematic Projects

I've created a framework-agnostic CLI that allows the execution of schematics in any JS environment, simplifying the start of fully-configured schematic projects with just a single command.

Framework-Specific Limitations of Schematics

Thanks to the new CLI, you can now use schematics across different JS frameworks or environments, expanding their applicability beyond Angular or NestJS.

This introduction aims to set the stage for a deeper exploration of schematics in code automation, highlighting both their potential and the obstacles to their wider adoption and understanding.

Summary

In this series, you will delve into the world of code automation using Schematics, equipping yourself with the necessary tools and knowledge to enhance your projects and daily workflow.

While I cannot be certain who will read these articles, my hope is that they will aid at least one person in navigating the complexities of Schematics, making their coding journey a little easier and more efficient.

Please check the fully schematic documentation: https://schematics.pbuilder.dev/