Nx Workspace + ESLint = {CLEAN_CODE};

A new software project starts pristine — no code, no projects, no files. However, in just a few days or weeks of development there might be some variations of code syntax and formatting. This may be due to different developer styles, IDEs, text editors, tools, or even scaffolding generators.

It is much easier to gain control and manage the code syntax and formatting rules with a shared monorepo and Nx Workspace. A new Nx Workspace provides ESLint rules and configuration for all projects within a workspace.

What Does It Do

The name is the combination of ES and Lint. ESLint provides the ability to…

Angular Business Rules and Validation Strategies

Today, most web applications are not simple — especially when they include forms, APIs, and a database. Modern web applications now contain complex business rules and data validation requirements. Most business applications collect a fair amount of data. This means that the application or software must verify or validate that the information is correct before making expensive API calls. In addition to this, there may be other business rules that must be evaluated to ensure that the business logic is correct.

Therefore, what is your strategy to implement business rules and data validation? Most likely if you have five developers…

State Machines In Angular: Very nice article and I love the references. I think one of the challenges is thinking in states for an application. Knowing and understanding each state provides a blue-print for the application feature(s).

To me, state management is much more than storing and retrieving data from a store, it has implications to the overall experience of the application and its quality.

I attended the Enterprise NG Conference by ng-conf last week. Eric Simons (@EricSimons40) the founder of StackBlitz got me re-engaged with StackBlitz. I learned about StackBlitz 3 years ago when I attended an Angular Meetup hosted by StackBlitz in San Francisco (2017). I was on a pleasure trip with my wife — however, when I found out that the Angular Core Team was going to be there that evening I just had to go. It was a fun night!

One of the main use-cases of StackBlitz is for online documentation — to show some code, or rather a working application…

Have you ever wanted to compose your large application with much smaller micro-apps — and lazy-load them as feature modules in your host application?

Angular 6 gave us the Angular Workspace and the new library project type. The library project type allows us to create things that can be shared — reusable code is good. No more copy and paste programming, right? There are many use cases for Angular libraries. Most of the common libraries include the following:

  • utilities
  • frameworks
  • components
  • foundational
  • cross-cutting concerns

These are single libraries that are used by multiple application and/or other library projects. However, there…

Angular libraries are much better with configuration using RxJS, interfaces, and typed configuration.

A working solution is available on Github at:

The Angular Workspace provides the ability to have multiple library and application projects in a single environment. Although this capability has been available since version 6, I find that many developers and teams are not taking full advantage of shared libraries. Having the ability to share and reuse code in the form of libraries adds to the effectiveness of your development team.

Think of the many shared libraries that would benefit your Angular applications. Here is a list of different library types that are common to applications.

  • features
  • cross-cutting concerns
  • utilities
  • frameworks

It would be nice to have the ability to include schematic projects in your Angular Workspace, right? Many teams and developers are using a workspace and developing one or more applications that are also taking advantage of sharable library projects. We are also using the Angular CLI in the workspace - so why not be able to develop, debug, test, use, and publish custom schematic projects from the Workspace.

Previous to this post, I published an article about How to Debug an Angular Schematic using Visual Studio Code. It demonstrates how to setup debugging on the default schematic project configuration…

Get under the Angular Schematic hood with the Debugger and VS Code

Get under the Angular Schematic hood with the VS Code Debugger.

Being able to debug and walk through code as it executes is fundamental to our development workflow. It is an essential capability that allows us to debug and determine what the code is doing. It can be part of our testing workflow — attaching a debugger and walking through tests in specific scenarios.

Debugging also provides an opportunity to learn how code (that we didn’t implement) works. This is certainly the case with schematics. As Angular developers, we have certainly used schematics on a daily basis while using the…

Recently, I was asked if I would change a company’s technology stack to Angular — due to the problems they were having after a 2+ years of development in React. I answered, “No.”.

I also replied that it doesn’t matter what technology you choose, you will always have issues if there is not proper guidance and architecture. Therefore, this started me to think about why this company was in this problem and how may have it been avoided.

  • Was it the churning of developers over the last 2–3 years.
  • Was it the inconsistent designs and implementation patterns?
  • Was it that…

All The Cool Cats are Using Workspaces Now, Are YOU?

Github.com: https://github.com/buildmotion/workspace-demo

The most recent version of Angular is a significant release — version 6.0.3 as of this post. We get a lot of new tools and features that provide a more efficient develoment environment.

When we use the new Angular 6 CLI, the default environment is now a workspace (well, maybe not — more later) that allows for the development of multiple applications and libraries in a single workspace. When you add new applications and/or libraries, you are creating project items. A project item has a specific type to indicate whether it is an application or a library.

Matt Vaughn

I love tacos, code, jazz, my husky and maybe 3 people in this world...and of course: Angular. Angularlicious podcast — more info at www.AngularArchitecture.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store