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 Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. agenda

    View Slide

  6. story time

    View Slide

  7. View Slide

  8. View Slide

  9. View Slide

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

    View Slide

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

    View Slide

  12. Using style guide in
    your project

    View Slide

  13. 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

  14. 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

  15. 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

  16. 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

  17. Code review
    process

    View Slide

  18. View Slide

  19. manual
    boring
    error-prone

    View Slide

  20. introducing codelyzer

    View Slide

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

    View Slide

  22. View Slide

  23. Why not
    instant feedback

    View Slide

  24. View Slide

  25. Currently
    based on tslint

    View Slide

  26. Adoption

    View Slide

  27. View Slide

  28. View Slide

  29. and later…

    View Slide

  30. View Slide

  31. Available
    in angular-cli

    View Slide

  32. ng2lint

    View Slide

  33. ng2lint

    View Slide

  34. github.com/mgechev/
    codelyzer

    View Slide

  35. View Slide

  36. Not only linting!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  43. bit.ly/codelyzer

    View Slide

  44. NGCON
    25% off

    View Slide

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

    View Slide