User Tools

Site Tools


dev:angular_dev_best_practices

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
dev:angular_dev_best_practices [2019/05/13 13:24]
sandbergja Adding some a11y considerations
dev:angular_dev_best_practices [2019/08/09 21:12] (current)
sandbergja [Evergreen Angular Development Best Practices] reorganizing, adding RxJS tip
Line 4: Line 4:
 Loose collection of practices to review with developers so we can agree on UI developer guidelines. Loose collection of practices to review with developers so we can agree on UI developer guidelines.
  
 +==== Code quality ====
  
   * Run %%'ng build --prod'​%% before committing.   * Run %%'ng build --prod'​%% before committing.
Line 9: Line 10:
   * Run 'ng lint' before committing.   * Run 'ng lint' before committing.
     * This does more than check style, it also warns when an import pulls in too much code, among other things.     * This does more than check style, it also warns when an import pulls in too much code, among other things.
 +  * Make sure that 'ng xi18n' runs before committing (some i18n syntax errors are not caught by ng build)
   * use camelCase variables when possible for consistency. ​ (Note fields on IDL objects don't apply).   * use camelCase variables when possible for consistency. ​ (Note fields on IDL objects don't apply).
-  * Design for screen width of 1350 pixels. 
-    * This is somewhat arbitrary, but seems to cover most laptops and smaller (non-mobile) screens without being too limiting. 
-    * Browser dev tools can show the width of the current browser window. 
   * Use 2-space indentation in HTML files   * Use 2-space indentation in HTML files
   * Use 4-space indentation in Typescript and CSS files.   * Use 4-space indentation in Typescript and CSS files.
   * Avoid column widths in code that extend well beyond 80-100 characters   * Avoid column widths in code that extend well beyond 80-100 characters
 +  * Avoid subscribing to Observables within other subscriptions (nested subscriptions). ​ Instead, you should should use pipeable rxjs operators like switchMap, mergeMap, filter, map, and tap. [[https://​github.com/​cartant/​rxjs-tslint-rules|Some of these tslint rules]] can be helpful for catching nested subscriptions and other RxJS issues.
 +
 +==== UI ====
 +
 +  * Design for screen width of 1350 pixels.
 +    * This is somewhat arbitrary, but seems to cover most laptops and smaller (non-mobile) screens without being too limiting.
 +    * Browser dev tools can show the width of the current browser window.
   * Use Bootstrap utility classes when possible instead of writing custom CSS.   * Use Bootstrap utility classes when possible instead of writing custom CSS.
     * https://​getbootstrap.com/​docs/​4.2/​utilities/​     * https://​getbootstrap.com/​docs/​4.2/​utilities/​
dev/angular_dev_best_practices.1557768263.txt.gz · Last modified: 2019/05/13 13:24 by sandbergja

© 2008-2017 GPLS and others. Evergreen is open source software, freely licensed under GNU GPLv2 or later.
The Evergreen Project is a member of Software Freedom Conservancy.