Linting Angular

Following best practices is essential for the final success of any projects. Although Angular 2 is still in beta there are established practices and styles which help us create better software. Unfortunately, the process of enforcing them is manual and error-prone - through code reviews. In the talk I will demonstrate how to automatically encourage best practices and verify common style by using static code analysis with codelyzer.

Transcript

1. Linting Angular
   github.com/mgechev
   twitter.com/mgechev
   blog.mgechev.com
   

   View Slide

2. github.com/mgechev
   twitter.com/mgechev
   blog.mgechev.com
   About
   deprecated
   

   View Slide

3. agenda
   

   View Slide

4. – angular.io
   “…a list of guidelines on building
   Angular applications…”
   Angular Style Guide
   

   View Slide

5. – angular.io
   “…a list of guidelines on building
   Angular applications…”
   Angular Style Guide
   

   View Slide

6. Using Style Guide in
   your project
   

   View Slide

7. Enforcing common style
   • Fork the official style guide
   • Modify the styles according to your needs
   • Introduce the style guide to your team
   • Verify that each individual code change follows it
   

   View Slide

8. Enforcing common style
   • Fork the official style guide
   • Modify the styles according to your needs
   • Introduce the style guide to your team
   • Verify that each individual code change follows it
   

   View Slide

9. Enforcing common style
   • Fork the official style guide
   • Modify the styles according to your needs
   • Introduce the style guide to the rest of your team
   • Verify that each individual code change follows it
   

   View Slide

10. Enforcing common style
    • Fork the official style guide
    • Modify the styles according to your needs
    • Introduce the style guide to the rest of your team
    • Verify that each individual code change follows it
    

    View Slide

11. Code Review
    process
    

    View Slide

12. View Slide

13. manual
    boring
    error-prone
    

    View Slide

14. introducing codelyzer
    

    View Slide

15. “Codelyzer contains set of rules
    that provide automatic alignment
    to the Angular Style Guide”
    

    View Slide

16. View Slide

17. Why not
    instant feedback
    

    View Slide

18. View Slide

19. Why it’s possible in
    Angular 2
    

    View Slide

20. Analyzable templates
    https://flic.kr/p/irHwLW
    

    View Slide

21. Angular 1
    
    
    

    View Slide

22. 
    
    Angular 1
    

    View Slide

23. 
    
    
    
    Angular 1
    

    View Slide

24. 
    
    
    
    Angular 1
    

    View Slide

25. 
    
    Angular 2
    

    View Slide

26. 
    
    
    
    Angular 2
    

    View Slide

27. How codelyzer
    Works
    

    View Slide

28. import { Component } from '@angular/core';
    @Component({
    selector: 'sd-home',
    template: `{{ 'Hello ' + name }} `
    })
    class HomeComponent {
    name: string;
    }
    Typical Linter
    

    View Slide

29. import { Component } from '@angular/core';
    @Component({
    selector: 'sd-home',
    template: `{{ 'Hello ' + name }} `
    })
    class HomeComponent {
    name: string;
    }
    Script
    class
    CustomHeading
    members
    decorators
    expression
    expression
    Component
    arguments
    properties
    property
    ObjectLiteral
    …
    name
    selector
    initializer
    custom-
    heading
    property
    name
    template
    initializer
    {{heading}}
    
    TypeScript AST
    

    View Slide

30. Angular has
    templates
    

    View Slide

31. import { Component } from '@angular/core';
    @Component({
    selector: 'sd-home',
    template: `{{ 'Hello ' + name }} `
    })
    class HomeComponent {
    name: string;
    }
    

    View Slide

32. Script
    class
    CustomHeading
    members
    decorators
    …
    property
    name
    template
    initializer
    {{foo + bar}}
    …
    HtmlElementAst
    h1
    HtmlTextAst
    {{“Hello” + name}}
    import { Component } from '@angular/core';
    @Component({
    selector: 'sd-home',
    template: `{{ 'Hello ' + name }} `
    })
    class HomeComponent {
    name: string;
    }
    TypeScript + template
    ASTs
    

    View Slide

33. Angular’s templates have
    expressions
    

    View Slide

34. import { Component } from '@angular/core';
    @Component({
    selector: 'sd-home',
    template: `{{ 'Hello ' + name }} `
    })
    class HomeComponent {
    name: string;
    }
    

    View Slide

35. Script
    class
    CustomHeading
    members
    decorators
    …
    property
    name
    template
    initializer
    {{foo + bar}}
    …
    HtmlElementAst
    h1
    HtmlTextAst
    {{“Hello” + name}}
    import { Component } from '@angular/core';
    @Component({
    selector: 'sd-home',
    template: `{{ 'Hello ' + name }} `
    })
    class HomeComponent {
    name: string;
    }
    +
    “Hello” name
    {{}}
    TypeScript + template +
    Angular expressions ASTs
    

    View Slide

36. codelyzer
    analyzes all produced ASTs
    based on their context
    

    View Slide

37. Based on tslint with
    extended parsing
    

    View Slide

38. Adoption
    

    View Slide

39. View Slide

40. View Slide

41. and later…
    

    View Slide

42. View Slide

43. Available
    in angular-cli
    

    View Slide

44. ng2lint
    

    View Slide

45. ng2lint
    

    View Slide

46. github.com/mgechev/
    codelyzer
    

    View Slide

47. Thank you!
    github.com/mgechev
    twitter.com/mgechev
    blog.mgechev.com
    

    View Slide