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

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