dev:browser_staff:manifesto
Differences
This shows you the differences between two versions of the page.
Next revision | Previous revision | ||
dev:browser_staff:manifesto [2014/01/08 10:21] – Staring browser staff manifesto erickson | dev:browser_staff:manifesto [2022/02/10 13:34] (current) – external edit 127.0.0.1 | ||
---|---|---|---|
Line 3: | Line 3: | ||
Development guidelines for the browser-based staff client interface. | Development guidelines for the browser-based staff client interface. | ||
- | * This list is under construction. | + | * **Note**: |
=== Javascript === | === Javascript === | ||
Line 10: | Line 10: | ||
* Stick with egNet, egPCRUD, and $http and you're covered. | * Stick with egNet, egPCRUD, and $http and you're covered. | ||
* Use PCRUD whenever possible -- it's faster. | * Use PCRUD whenever possible -- it's faster. | ||
- | * Avoid global variables | + | * Avoid global variables. Instead use Angular services for app-global data management. |
* Avoid DOM manipulation outside of Angular directives | * Avoid DOM manipulation outside of Angular directives | ||
* There is one case in prototype code where this was unavoidable. | * There is one case in prototype code where this was unavoidable. | ||
Line 28: | Line 28: | ||
* For example, in the prototype the URL " | * For example, in the prototype the URL " | ||
* Use angular and angular-ui only. Avoid loading new 3rd-party libraries without community approval. | * Use angular and angular-ui only. Avoid loading new 3rd-party libraries without community approval. | ||
+ | * Avoid adding items to the controller' | ||
Line 34: | Line 35: | ||
* For dynamic UI elements, use http:// | * For dynamic UI elements, use http:// | ||
* if something doesn' | * if something doesn' | ||
+ | * Do not use HTML tables for page layout. | ||
+ | * Actions which modify the URL should be presented as text links (a/href), while controls which perform in-page actions (e.g. open a modal dialog) should be rendered as buttons. | ||
+ | |||
| | ||
=== Templates === | === Templates === | ||
- | * When a template is needed on page load, use a server-side | + | * When a template is needed on page load, use a server-side Template Toolkit INCLUDE to include the template within the body of the main page. |
* <code html>[% INCLUDE ' | * <code html>[% INCLUDE ' | ||
* When a template is not needed on initial page load, especially rarely used templates, load them on-demand via AngularJS templateUrl. | * When a template is not needed on initial page load, especially rarely used templates, load them on-demand via AngularJS templateUrl. | ||
* <code javascript> | * <code javascript> | ||
* For any grey area, use best judgement. | * For any grey area, use best judgement. | ||
+ | * Use i18n filters for dates and money: | ||
+ | * The exact filter options may change w/ settings, etc. | ||
+ | |||
+ | === Tips and Gotchas === | ||
+ | |||
+ | * Disable all browser caching during development. | ||
+ | * Chrome aggressively caches on-demand templates. | ||
+ | * In Chrome, in the JS console, click on the configure icon and choose " | ||
+ | * Beware multiple ng-view directives in the page -- this will cause looping and will probably kill your browser! | ||
+ | * $location.path(...) values always starts with a "/" | ||
+ | * Test on-demand templates by fetching them directly in the browser first. | ||
+ | * Bootstrap does not support nested menus, since they are not mobile friendly. | ||
+ | * If your browser window is too small, you will see the mobile layout. |
dev/browser_staff/manifesto.1389194517.txt.gz · Last modified: 2022/02/10 13:34 (external edit)