Upgrade to Pro — share decks privately, control downloads, hide ads and more …

"Angular on Rails": Model-driven Angular with Schematics, CLI and TypeScript Compiler API @wjax 2018 in München

15934fa2aa7b2ce21f091e9b7cffa856?s=47 Manfred Steyer
PRO
November 08, 2018
270

"Angular on Rails": Model-driven Angular with Schematics, CLI and TypeScript Compiler API @wjax 2018 in München

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer
PRO

November 08, 2018
Tweet

Transcript

  1. ManfredSteyer "Angular on Rails": Model-driven Angular with Schematics, CLI and

    TypeScript Compiler API Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer
  2. ManfredSteyer About me… • Manfred Steyer • Blog: SOFTWAREarchitekt.at •

    Angular Trainings and Consultancy • Google Developer Expert (GDE) Page ▪ 4 Manfred Steyer Public: Vienna, München In-House: everywhere http://softwarearchitekt.at/workshops
  3. ManfredSteyer Have you ever tried to … … setup a

    modern JavaScript project manually? • Compiler/ Transpiler • Package manager and packages • Build chain optimized for bundle size, performance, etc. • Testing tools including code coverage • Linting tools
  4. ManfredSteyer Angular CLI

  5. ManfredSteyer Using the CLI ng new my-project cd my-project ng

    generate component my-component
  6. ManfredSteyer Vision ng new my-special-templ:my-project cd my-project ng generate my:menu-component

    side-menu
  7. ManfredSteyer Contents • What is Schematics? • How to create

    custom schematics? • How to use parameters? • How to use templates? • How to scaffold whole projects?
  8. ManfredSteyer What is Schematics?

  9. ManfredSteyer Schematics Scaffolding Tool used by Angular CLI Schematics: The

    whole project Schematic: Code Generator Collection: Set of Schematics
  10. ManfredSteyer Calling a Schematic • ng new project --collection myCollection

    • ng generate myCollection:menu side-menu • ng add library • ng update library
  11. ManfredSteyer Nrwl Nx

  12. ManfredSteyer

  13. ManfredSteyer DEMO Offlinefähige PWA mit Material-Design

  14. ManfredSteyer DEMO • ng new pwa • cd pwa •

    ng add @angular/pwa • ng add @angular/material • ng generate @angular/material:table table • ng generate @angular/material:nav nav • Manual: App → Nav → Table
  15. ManfredSteyer Schematics are atomic (like db transactions) A B D

    E C F A B D E C F Your Project Staging Area Tree Object
  16. ManfredSteyer Schematics are atomic (like db transactions) A B D

    E C F A B D' E C F Your Project Staging Area Tree Object
  17. ManfredSteyer Schematics are atomic (like db transactions) A B D

    E C F A B D' E C F G Your Project Staging Area Tree Object
  18. ManfredSteyer Schematics are atomic (like db transactions) A B D

    E C F A B D' E C F G Your Project Staging Area Tree Object
  19. ManfredSteyer Schematics are atomic (like db transactions) A B D'

    E C F G A B D' E C F G Your Project Staging Area Tree Object
  20. ManfredSteyer How to Create Custom Schematics?

  21. ManfredSteyer You can create a schematic … … with a

    schematic!
  22. ManfredSteyer Scaffold Collection npm install -g @angular-devkit/schematics-cli schematics blank --name=hello-world

    schematics schematic --name=hello-world Contains sample schematics
  23. ManfredSteyer

  24. ManfredSteyer Project Structure Schematic Rule- Factory

  25. ManfredSteyer Rule Factory export function helloWorld(options: any): Rule { […]

    }
  26. ManfredSteyer Rule Factory export function helloWorld(options: any): Rule { return

    (tree: Tree, _context: SchematicContext) => { _context.logger.debug('Manfred was here!'); tree.create('hello.txt', 'Hello World!'); return tree; }; } Rule
  27. ManfredSteyer Testing npm run build schematics .:hello-world

  28. ManfredSteyer Testing in Demo App npm install hello-world schematics hello-world:hello-world

  29. ManfredSteyer Testing in Demo App npm install hello-world ng generate

    hello-world:hello-world
  30. ManfredSteyer DEMO

  31. ManfredSteyer How to use Parameters?

  32. ManfredSteyer Case Study

  33. ManfredSteyer Result Optional

  34. ManfredSteyer Execution ng g nav:menu side-menu --menu-service

  35. ManfredSteyer Project Structure Parameters Rule- Factory

  36. ManfredSteyer Option Class in schema.ts export interface MenuOptions { name:

    string; project: string; […] menuService: boolean; […] } provided by the CLI custom stuff
  37. ManfredSteyer Rule Factory gets Parameter Object export default function (options:

    MenuOptions): Rule { return (host: Tree, context: SchematicContext) => { […] } }
  38. ManfredSteyer Rule Factory gets Parameter Object export default function (options:

    MenuOptions): Rule { return (host: Tree, context: SchematicContext) => { […] } }
  39. ManfredSteyer How to use Templates?

  40. ManfredSteyer Project Structure

  41. ManfredSteyer Template export interface <%= classify(name) %>Item { title: string;

    iconClass: string; } passed property passed function
  42. ManfredSteyer Template names are templates! passed property passed property passed

    function
  43. ManfredSteyer Rule Calling Templates export default function (options: MenuOptions): Rule

    { […] }
  44. ManfredSteyer Rule Calling Templates export default function (options: MenuOptions): Rule

    { return (host: Tree, context: SchematicContext) => { […] } }
  45. ManfredSteyer Rule Calling Templates export default function (options: MenuOptions): Rule

    { return (host: Tree, context: SchematicContext) => { const templateSource = apply(url('./files'), [ filterTemplates(options), template({...stringUtils, ...options}), move(options.sourceDir) ]); […] } } passed properties passed functions
  46. ManfredSteyer Rule Calling Templates export default function (options: MenuOptions): Rule

    { return (host: Tree, context: SchematicContext) => { const templateSource = apply(url('./files'), [ filterTemplates(options), template({...stringUtils, ...options}), move(options.sourceDir) ]); const rule = chain([ branchAndMerge(chain([ mergeWith(templateSource), […] ])) ]); return rule(host, context); } }
  47. ManfredSteyer DEMO

  48. ManfredSteyer Modifying existing Code

  49. ManfredSteyer Declaring Generated Components import { NgModule } from '@angular/core';

    import { CommonModule } from '@angular/common'; import { SideMenuComponent } from './side-menu/side-menu.component'; @NgModule({ imports: [ CommonModule ], declarations: [ SideMenuComponent ], exports: [ SideMenuComponent ] }) export class CoreModule { }
  50. ManfredSteyer Existing Rules • addDeclarationToModule • addExportToModule • …

  51. ManfredSteyer Injecting Service into Component […] import { SideMenuService }

    from './core/side-menu/side-menu.service'; @Component({ […] }) export class AppComponent { constructor(private sideMenuService: SideMenuService) { // sideMenuService.show = true; } }
  52. ManfredSteyer Custom Rule for Modifying Existing Code • String Operations

    • RegExp • TypeScript Compiler API
  53. ManfredSteyer Custom Rule for Modifying Existing Code • String Operations

    • RegExp • TypeScript Compiler API
  54. ManfredSteyer Code File as Syntax Tree (simplified) ClassDeclaration ClassKeyword (class)

    Identifier (Demo) … SyntaxList class Demo { constructor(otherDemo: Demo) {} } Subtree w/ Constructor …
  55. ManfredSteyer DEMO

  56. ManfredSteyer Scaffolding whole Angular Applications?

  57. ManfredSteyer

  58. ManfredSteyer

  59. ManfredSteyer Scaffolding a CRUD Module

  60. ManfredSteyer Needed Steps Example covering all cases Finding Variation Points

    Define Model to describe Variation Points Write and Test Generator
  61. ManfredSteyer DEMO

  62. ManfredSteyer Current State Use it as is or Fork it

    or Contribute!
  63. ManfredSteyer Further Information • Great introduction in Angular Blog •

    https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2 • My Tutorial/ Case Study (5 articles so far) • https://goo.gl/kGS6L5 • Angular-Crud (Generator) • https://www.npmjs.com/package/angular-crud
  64. ManfredSteyer Conclusion Automate boring tasks! Official Solution in ng world

    Staging Area, Templates, Rules schema.json w/ JSON Schema Create own or tweak existing ones
  65. ManfredSteyer Contact and Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer

    http://softwarearchitekt.at/workshops Slides & Examples d