dev:angular_dev_best_practices
Differences
This shows you the differences between two versions of the page.
Next revision | Previous revision | ||
dev:angular_dev_best_practices [2019/01/18 11:21] – created erickson | dev:angular_dev_best_practices [2023/11/24 23:05] (current) – [Code quality] update outdated command sandbergja | ||
---|---|---|---|
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' | + | * Run %%'ng build --prod' |
* This ensures the templates also compile successfully. | * This ensures the templates also compile successfully. | ||
* 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 extract-i18n' | ||
* use camelCase variables when possible for consistency. | * use camelCase variables when possible for consistency. | ||
+ | * Use 2-space indentation in HTML files | ||
+ | * Use 4-space indentation in Typescript and CSS files. | ||
+ | * Avoid column widths in code that extend well beyond 80-100 characters | ||
+ | * Avoid subscribing to Observables within other subscriptions (nested subscriptions). | ||
+ | |||
+ | ==== UI ==== | ||
+ | |||
* Design for screen width of 1350 pixels. | * 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. | * 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. | * Browser dev tools can show the width of the current browser window. | ||
- | * Use 2-space indentation in HTML files | ||
- | * Use 4-space indentation in Typescript and CSS files. | ||
- | * Avoid column widths that extend well beyond 80-100 characters | ||
* Use Bootstrap utility classes when possible instead of writing custom CSS. | * Use Bootstrap utility classes when possible instead of writing custom CSS. | ||
* https:// | * https:// | ||
* These are especially useful for margins and padding. | * These are especially useful for margins and padding. | ||
* Use console.debug() for debugging. | * Use console.debug() for debugging. | ||
+ | * Make resources deep-linkable where possible (/ | ||
+ | * Give form inputs ID values with linked i18n labels | ||
+ | * <label for=" | ||
+ | * Beware repeatable components have unique form input IDs (extend id with incrementor, | ||
+ | * Give buttons meaningful title or aria-label attributes | ||
+ | * Give images meaningful alt attributes (alt="" | ||
+ | * Test keyboard navigation with tab, shift+tab, arrow keys, and other keys as appropriate. Make sure that all buttons, links, and other interactive elements are focusable. | ||
+ | * The [[https:// | ||
+ | * Don't add Bootstrap' | ||
+ | * Make sure that your screens have an < | ||
+ | |||
+ | |||
+ | ==== Unit Tests ==== | ||
+ | |||
+ | * Files named *.spec.ts are automatically treated as unit test files. | ||
+ | * Unit test files should live in the same directory as the code they are testing. | ||
+ | * e.g. idl.service.ts and idl.spec.ts are in the same directory. | ||
+ | * See Open-ILS/ | ||
+ | * The highest priority for unit test implementation are shared *.service.ts files, followed by shared components, since changes to these files have the broadest impact. | ||
+ |
dev/angular_dev_best_practices.1547828479.txt.gz · Last modified: 2022/02/10 13:34 (external edit)