AngularJs Best Practice

for Enterprise development anddistributed Teams

#angularconf15

MatteoScandolo

FE Developer

Team Leader

Code Quality and Maintainability

@_teone

Enterprise?

for Enterprise development …

bigcomplex

fluid teams

multiple developers

system integrations

Distributed?

… distributed Teams

communication delays

10 rulesto improve your Angular project

#angularconf15

#1Planning

- Constraints- Technical Choices- Application Architecture

- Modules- Shared Method- Dependencies

- Guidelines- Tooling

Immagine dello schema di un progetto

Npm Scripts

#2Setup

README.md

- Dev Environment- Deploy- Tests- Styleguide*- Environment Configurations*- Documentation*- Contributors*

#3Styleguide

Force devs to write similar code

- Js styleguide- Air Bnb

- Angular Styleguide- Jhon Papa

with a styleguide

with no styleguideDev Speed

ES Lint

Pluggable linting utility

- Configurable (Json, Yml)- Pluggable (as npm packages)- Extendable

- custom rules- yeoman generator

ES Lint

ES Lint

Force

#4Tests

Why are they so important?

- Prevent regressions- Reduce Bugs- Code enhancement- Document features

Karma + Jasmine

Karma- Test Runner

Jasmine- Assetion Library

PhantomJs- Headless browser

The Old Way...

The Clean Way

#5Documentation

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?

REST API

Build a representation

of your restfull API

- Interactive documentation- Client SDK generation

REST API

REST API

REST API

REST API

Can generate ngResouces automatically!

- signalfx/swagger-angular-client- swagger-api/swagger-codegen

NG DOC

ngDoc

- Extend jsDoc- Browsable Documentation

- Describe the app API- Provide usage examples

NG DOC

What can we describe:- Docs template (@ngdoc)- Name- Belongings (@methodOf)- Description- Params- Return- Angular Specific Attribute

- @restrict

NG DOC

PARAMETER TYPES...

#6Code Quality

Automate Code Quality Check

- Dependencies Status- Duplicated Code- Complex Function- Error Handling- Lint Status- Test Coverage

BITHOUND.IO

Software insight as a service

Free for OS project

BITHOUND.IO

BITHOUND.IO

KARMA COVERAGE

Karma Coverage Plugin- Easy to set up- Generate different format

Usage

#7ContinuousIntegration

Why?

- Automate the process- Error reduction- Generate reports- 1 click (or no-click deploy)

Tools

Travis CI Jenkins CI Strider CD

Tools

#8Development

Workflow

Git Flow

- Stable branch with released version- Stable branch with new features- Shared Standard

How dows it work...

GIT FLOW: https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow

Master

Develop

Feature Branch

Release Branch

HotFix Branch

Tools...

#9Team

Communication

SLACK- Issues- Snippets- Usefull Link- Dependencies Docs- Real Time Notification

Tools...

#10Ask yourself..

If I leave tomorrow…

… and someone have to work on this project …

Will I like to be that guy?

Thanks!@_teone

#angularconf15