Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular js best practice

2,394 views

Published on

Slide from the talk: "Angular js best practice - for Enterprise development and distributed Teams" at Angular Conf 2015 in Turin.

  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Angular js best practice

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

×