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

Automated Angular 2 Style Checking with Codelyzer

Automated Angular 2 Style Checking with Codelyzer

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.

Minko Gechev

May 06, 2016
Tweet

More Decks by Minko Gechev

Other Decks in Programming

Transcript

  1. Automated Angular 2
    Style Checking with
    Codelyzer
    github.com/mgechev
    twitter.com/mgechev
    blog.mgechev.com

    View full-size slide

  2. – angular.io
    “…a list of guidelines on building
    Angular applications…”
    Angular style guide

    View full-size slide

  3. – angular.io
    Angular style guide
    “…a list of guidelines on building
    Angular applications…”

    View full-size slide

  4. Using style guide in
    your project

    View full-size slide

  5. 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 full-size slide

  6. 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 full-size slide

  7. 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 full-size slide

  8. 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 full-size slide

  9. Code review
    process

    View full-size slide

  10. manual
    boring
    error-prone

    View full-size slide

  11. introducing codelyzer

    View full-size slide

  12. codelyzer
    “codelyzer is a project which aims to
    enforce common style, verify quality of
    your program”

    View full-size slide

  13. Why not
    instant feedback

    View full-size slide

  14. Currently
    based on tslint

    View full-size slide

  15. and later…

    View full-size slide

  16. Available
    in angular-cli

    View full-size slide

  17. github.com/mgechev/
    codelyzer

    View full-size slide

  18. Not only linting!

    View full-size slide

  19. Future plans
    • Advanced static code analysis
    • Analysis of templates
    • Auto-correct suggestions
    • Analysis of lazy-loading boundaries
    • More!

    View full-size slide

  20. Future plans
    • Advanced static code analysis
    • Analysis of templates
    • Auto-correct suggestions
    • Analysis of lazy-loading boundaries
    • More!

    View full-size slide

  21. Future plans
    • Advanced static code analysis
    • Analysis of templates
    • Auto-correct suggestions
    • Analysis of lazy-loading boundaries
    • More!

    View full-size slide

  22. Future plans
    • Advanced static code analysis
    • Analysis of templates
    • Auto-correct suggestions
    • Analysis of lazy-loading boundaries
    • More!

    View full-size slide

  23. Future plans
    • Advanced static code analysis
    • Analysis of templates
    • Auto-correct suggestions
    • Analysis of lazy-loading boundaries
    • More!

    View full-size slide

  24. Future plans
    • Advanced static code analysis
    • Analysis of templates
    • Auto-correct suggestions
    • Analysis of lazy-loading boundaries
    • More!

    View full-size slide

  25. bit.ly/codelyzer

    View full-size slide

  26. NGCON
    25% off

    View full-size slide

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

    View full-size slide