Building maintainable web apps with Angular MS TechDays 2017

8. “The ratio of time spent reading versus
writing is well over 10 to 1.
We are constantly reading old code as part
of the effort to write new code”

11. Boy Scouts have a rule regarding
camping, that they should leave the
campground cleaner than
they found it. ... By ensuring that the
campground is cleaner when they
leave than it was when
they arrived.

12. Readability is king!
Use consistent naming through chain
(DB -> WebApi -> Angular)
Ubiquitious language (DDD) | Vocabulary
Naming guidance:
https://angular.io/guide/styleguide

13. Symbol name with suffix (.component.ts, .service.ts)
Functional naming (NavigationComponent,
LoggerService)
Do use PascalCasing when naming classes, interfaces
Do use camelCasing to name properties and methods

14. One Component per file
Do make locating code intuitive, simple and fast
Do create folders named for the feature area they
represent
Do extract templates and styles into a separate file,
when more than 3 lines

15. DEMO
Example naming/structuring in Angular

17. A class should have just a single responsibility
Design for low coupling and high cohesion

18. Apply the single responsibility principle to all
components, services, and other classes
The number of functions on a class should be very
limited
The number of lines of each function should be
very limited

20. Child 2
@OUTPUT
A component can send data to its parent by triggering an event the parent listens to
@INPUT
A component can receive data from its parent
Parent
Child 1
@OUTPUT
@INPUT

21. Child 2
Feature
component
Child 1
@OUTPUT
@INPUT
@INPUT

22. Presentation
component 2
Feature
component
Presentation
component 1
@OUTPUT
@INPUT
@INPUT

23. Consider feature/presentation
components
Consider using inheritance (DRY)
Consider shared components (DRY)
Rethink/Refactor your hierarchy when
needed

24. A class receives its dependencies from external
sources rather than creating them itself.
Create a loosely coupled system
Angular ships with its own dependency injection
framework

25. import { Injectable } from '@angular/core';
import { IFilter } from '../interfaces/IFilter';
@Injectable()
export class SessionstorageService {
public loadFilter(): IFilter {
. . .
return filter;
}
public saveFilter(filter: IFilter): void {
. . .
}
}
@Component()
export class FilterComponent {
constructor(private sessionStorageService: SessionStorageService)
}

26. @Pipe({name: 'processNameFilter'})
export class ProcessNameFilter implements PipeTransform {
transform(processes: Process[], args: any) : Process[] {
if (!args || !processes) {
return processes;
}
return processes.filter(p => p.name.toLowerCase().indexOf(args.toLowerCase()) > -1 ||
p.productgroup.toLowerCase().indexOf(args.toLowerCase()) > -1
);
}
}
<table id="withOrder"
class="table table-striped"
[mfData]="processes | processNameFilter:processSearchKey"
#mf="mfDataTable”>

28. Support for multiple environments:
(Test, Acceptance, Production)
Supporting hotfixes and parallel development
Feature branches

31. Guards against changes that break existing code
(“regressions”).
Clarifies what the code does, it is a specification.
Reveals mistakes in design and implementation.

32. Isolated unit tests for pipes and services
Angular testing utillities for Components
Karma/Jasmine integration
https://angular.io/guide/testing

33. DEMO
Testing Angular with Karma/Jasmine

34. Be careful, mileage may vary
Can block your Angular upgrade path
Consider Angular Material UI
or
Commercial UI component library

35. "@angular/cli": "1.2.0",
"@angular/compiler-cli": "^4.0.0",
"@angular/language-service": "^4.0.0",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",

36. Q & A