Tanta roba ad Angular day 2018. Paolo Galfione ci spiegherà come gestire applicazioni Enterprise con Angular 6 e Schematics

All’Angular Day di Verona, il prossimo 15 giugno,¬†Paolo Galfione terr√†¬†il talk Gestire applicazioni di classe Enterprise con Angular 6 e Schematics, dove approfondir√† Schematics e Workspace, due nuove features disponibili con Angular 6.

Ecco una brevissima anticipazione del tema:

Schematics

Gli Schematics sono una libreria, presente nella nuova versione di Angular. A che cosa servono? Non √® semplicissimo farsi un’idea leggendo la documentazione. In sintesi si tratta di un tool di workflow per la generazione e manipolazione di “Tree”, ovvero di alberature di files.

Uno Schematics altro non √® infatti che una serie di regole: prende in ingresso un altro schematics, lo “manipola”, e produce in uscita a sua volta uno Schematics¬†modificato. L’alberatura in s√© non √® agganciata a nessun file system, e consente il chaining di diversi Schematics, in modo da modularizzare il pi√Ļ possibile le operazioni su un progetto.

Uno dei vantaggi¬†degli Schematics √® appunto¬†la facilit√† di concatenarli¬†insieme. Nell’esempio qui sotto (preso da blog.angular.io) lo Schematic¬†‘component’¬†√® chiamato¬†dalla¬†collection¬†@schematics/angular per aggiungere un componente all’applicazione e agganciare una header a ciascun¬†file TypeScript aggiunto dallo Schematic stesso.

import { Rule, SchematicContext, Tree, chain, externalSchematic } from '@angular-devkit/schematics';
const licenseText = `
/**
 * @license
 * Copyright Google Inc. All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.io/license
 */
`;
export function myComponent(options: any): Rule {
  return chain([
    externalSchematic('@schematics/angular', 'component', options),
    (tree: Tree, _context: SchematicContext) => {
      tree.getDir(options.sourceDir)
          .visit(filePath => {
            if (!filePath.endsWith('.ts')) {
              return;
            }
            const content = tree.read(filePath);
            if (!content) {
              return;
            }
            // Prevent from writing license to files that already have one.
            if (content.indexOf(licenseText) == -1) {
              tree.overwrite(filePath, licenseText + content);
            }
          });
      return tree;
    },
  ]);
}

Il Tree viene considerato una sorta di area di staging, e non effettua modifiche fisiche ai files finch√© non avviene il “commit”. Per cronaca, occorre dire che Angular CLI gi√† usa gli Schematics dietro le quinte, e che di fatto gli Schematics sono stati resi “disponibili” per uso diretto a seguito di un refactoring del cuore di CLI, esportandoli in quello che ora viene chiamato DevKit.

Workspace

Cos’√® un workspace in Angular 6?

An Angular Workspace is a directory which is generated via Angular CLI and able to contain multiple projects or libraries that derive the configuration out of a single file.

Tutta la documentazione √® disponibile ovviamente su GitHub. A ogni modo si tratta di una ridefinizione dell’alberatura, in modo da consentire la configurazione del processo di build per diverse applicazioni in modo indipendente.

The `angular.json` appears after initializing a new workspace
Il file ‘angular.json’ viene creato automaticamente, e contiene lo schema JSON di validazione dei dati

 

LINK

Your first @angular/schematics

Schematics ‚ÄĒ An Introduction

@angular-devkit/schematics

Understanding the Angular CLI Workspace File