-
Notifications
You must be signed in to change notification settings - Fork 0
Misc Boilerplate Documentation
Angular is built on top of RxJS. It uses it for HTTP communication, routing communication, form communication, and more. RxJS can be really hard to learn with a long learning curve. The boilerplate serves as an example of good RxJS usage and avoids its many pitfalls. Here is a slide deck that explains RxJS in depth. Here is a sandbox Angular application to learn more about RxJS, and see both good and bad patterns in action.
Performance is very important to consider for the overall user experience, but in particular for IE11, the older Trident-based Edge, and old mobile devices.
One very powerful tool to improve performance is to use OnPush change detection everywhere. It is explained in more detail here.
Another tool is to use trackBy with *ngFor, especially in instances where the list can update. This gives the iterator an index, so it can perform a shallow and much faster search. Without trackBy, it performs a deep object comparison. trackBy is explained more here.
Using ng-container and ng-template in tandem with *ngIf helps with performance because neither of those elements are themselves inserted into the DOM. This is explained well here.
Lazy loading can help with the initial project load, since the entire application isn't loaded. It can also help with memory-strapped devices.
The boilerplate uses a number of different techniques to improve site accessibility. It uses semantic HTML elements to help explain the site structure like main, nav, and footer.
It has only one h1, which is global. Pages should only have one h1 element, and with Single Page Applications, it can be hard to predict if an element will be rendered more than once. The boilerplate sets a global h1 element on the wrapping AppComponent template. It renders the routed component's title property. The h1 is hidden, although not to screen readers, because the design used to build the boilerplate did not have a good universal place to put a visible h1 element. It could easily be made visible in a design that supports it. All other headers throughout the application are h2 or below.
The boilerplate supports keyboard navigation with the navigation bar and with buttons. The navigation bar manages focus to improve the keyboard navigation experience. This logic is in the root AppComponent to help automatically support any routed content.
The boilerplate sets ARIA/alt text on all visual elements, and tooltips on icon buttons.
The dynamic form helps set labels, ids, and names for form fields to improve accessibility.
Writing unit tests is hard. It can be hard to budget the time for it, or initially see the benefit. It's even harder in Angular, where Dependency Injection requires spies and mocks to emulate. The boilerplate aims to have unit test coverage for business logic. The unit tests will also hopefully serve as a guide for how to write tests in Angular.
The boilerplate uses the testing tools that Angular ships with: Jasmine, Karma, Istanbul and Protractor. This was to make it easier to find resources on Angular testing. The boilerplate also uses the ng-mocks library, to help mock out dependencies, component dependencies in particular. This helps prevent warnings in the test output about misunderstood references in templates.