===== Staff Client Angular 5 Migration Notebook =====

==== Resources ====

  * Learning the basics of Angular5
    * https://angular.io/tutorial
  * Bootstrap Version 4
    * https://getbootstrap.com/
  * ng-bootstrap -- Angular 5 / Bootstrap 4 compatible Bootstrap controls
    * https://ng-bootstrap.github.io/#/components/
  * Webpack -- JS bundling, minification, lazy loading, and more used by Angular5.
    * https://webpack.js.org/
  * ReactiveX -- Reactive extension used by Angular5
    * http://reactivex.io/rxjs/
  * Typescript docs
    * https://www.typescriptlang.org/docs/home.html
  * Upgrade Process
    * https://angular.io/guide/upgrade

==== Bootstrap 4 Notes ====

  * The Ang5-compatible bootstrap library ng-bootstrap supports BS4 only.
  * Version 4 is mostly backward compatible with version 3.
  * The "panel" is no more -- replaced with "card".
  * Glyphicons are deprecated (and have license restrictions).  BS suggests some alternatives.
    * https://getbootstrap.com/docs/4.0/extend/icons/
    * I tested the Google Material Icons and they work well and use an Apache 2 license.  Attribution is optional.
      * https://material.io/icons/
  * The utility classes have been expanded
    * https://getbootstrap.com/docs/4.0/utilities/
    * Margins, padding, text, colors, borders, and more!
    * These remove the need to write a lot of local CSS.  Want a small amount of margin up top? class="mt-1"

==== Upgrade Path Recommended by Angular ====

See also https://angular-2-training-book.rangle.io/handout/migrate/ng-upgrade/order_of_operations.html

=== I. Follow the AngularJS Style Guide ===

=== II. Use a Module Loader ===

  - Angular5 (well, ng-cli) uses Webpack by default.
  - May be implemented independent of any Ang5 upgrade plans.
  - Improved options for creating of JS, etc. bundles
  - Can be implemented in low-impact phases.
    - Phase I: Use webpack as a drop-in replacement for Grunt for compiling builds (and use npm to run karma unit tests).
      - No application code changes are required.
      - I have a branch that does this (plus Angular 1.6 -- https://bugs.launchpad.net/evergreen/+bug/1739803 [pushed to 3.1-beta])
    - Phase II: Start using ES6-style module 'import' statements for specifying dependencies.
      - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
      - These ultimately replace <script/> imports

=== III. Migrating to TypeScript ===

=== IV. Using Component Directives ===

=== V. Upgrade with ngUpgrade ===