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.

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