Angular day 2018: Applicazioni enterprise con Angular 6 e Schematics

11 June 2018

2115

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.