Angular js best practice

Slide from the talk: "Angular js best practice - for Enterprise development and distributed Teams"

Transcript

1. AngularJs Best Practice for Enterprise development and distributed Teams #angularconf15
2. Matteo Scandolo FE Developer Team Leader Code Quality and Maintainability @_teone
3. Enterprise? for Enterprise development … big complex fluid teams multiple developers system integrations
4. Distributed? … distributed Teams communication delays
5. 10 rules to improve your Angular project #angularconf15
6. #1 Planning - Constraints - Technical Choices - Application Architecture - Modules - Shared Method - Dependencies - Guidelines - Tooling
7. Immagine dello schema di un progetto
8. Npm Scripts
9. #2 Setup README.md - Dev Environment - Deploy - Tests - Styleguide* - Environment Configurations* - Documentation* - Contributors*
10. #3 Styleguide Force devs to write similar code - Js styleguide - Air Bnb - Angular Styleguide - Jhon Papa with a styleguide with no styleguide Dev Speed
11. ES Lint Pluggable linting utility - Configurable (Json, Yml) - Pluggable (as npm packages) - Extendable - custom rules - yeoman generator
12. ES Lint
13. ES Lint
14. Force
15. #4 Tests Why are they so important? - Prevent regressions - Reduce Bugs - Code enhancement - Document features
16. Karma + Jasmine Karma - Test Runner Jasmine - Assetion Library PhantomJs - Headless browser
17. The Old Way...
18. The Clean Way
19. #5 Documentation Not talking about high-level documentation Technical Docs - List all available methods - Teach how to use them - Specify parameter type - Provide Examples - Can do more?
20. REST API Build a representation of your restfull API - Interactive documentation - Client SDK generation
21. REST API
22. REST API
23. REST API
24. REST API Can generate ngResouces automatically! - signalfx/swagger-angular-client - swagger-api/swagger-codegen
25. NG DOC ngDoc - Extend jsDoc - Browsable Documentation - Describe the app API - Provide usage examples
26. NG DOC What can we describe: - Docs template (@ngdoc) - Name - Belongings (@methodOf) - Description - Params - Return - Angular Specific Attribute - @restrict
27. NG DOC
28. PARAMETER TYPES...
29. #6 Code Quality Automate Code Quality Check - Dependencies Status - Duplicated Code - Complex Function - Error Handling - Lint Status - Test Coverage
30. BITHOUND.IO Software insight as a service Free for OS project
31. BITHOUND.IO
32. BITHOUND.IO
33. KARMA COVERAGE Karma Coverage Plugin - Easy to set up - Generate different format
34. Usage
35. #7 Continuous Integration Why? - Automate the process - Error reduction - Generate reports - 1 click (or no-click deploy)
36. Tools Travis CI Jenkins CI Strider CD
37. Tools
38. #8 Development Workflow Git Flow - Stable branch with released version - Stable branch with new features - Shared Standard
39. How dows it work... GIT FLOW: https://www.atlassian.com/git/tutorials/comparing- workflows/gitflow-workflow Master Develop Feature Branch Release Branch HotFix Branch
40. Tools...
41. #9 Team Communication SLACK - Issues - Snippets - Usefull Link - Dependencies Docs - Real Time Notification
42. Tools...
43. #10 Ask yourself.. If I leave tomorrow… … and someone have to work on this project … Will I like to be that guy?
44. Thanks! @_teone #angularconf15