ang2 preso

Signed-off-by: Bill Erickson <berickxx@gmail.com>

diff --git a/NOTES.adoc b/NOTES.adoc
index febbf24..2a24af1 100644 (file)
--- a/NOTES.adoc
+++ b/NOTES.adoc
@@ -210,6 +210,7 @@ is viable.  This approach means we'd be retaining both ang1 and ang2
 versions of shared services until all of the ang1-only apps were migrated.
 
 === Complications with full mixed-use approach
+* Lose benefits of following standard Ang5 dev approach.
 * Use of EGWeb and TT2
 * Using base href /eg/staff complicates the process of creating a framework
   for sharing new ang2 with non-staff apps.

diff --git a/ang2-preso.adoc b/ang2-preso.adoc
index 679105d..87a60d6 100644 (file)
--- a/ang2-preso.adoc
+++ b/ang2-preso.adoc
@@ -10,11 +10,9 @@
 == Recap & Terminology
 
 * Evergreen browser client uses 'AngularJS' (v1.6)
-** AKA Angular1
+** AKA ng1
 * The future of 'AngularJS' is 'Angular' (v5.2)
-** AKA Angular.io
-** AKA Angular2+
-** AKA Angular5
+** AKA ng5
 
 == AngularJS SITREP
 
@@ -34,18 +32,26 @@ applications using AngularJS 1.7.x to stop working.
 
 https://blog.angular.io/stable-angularjs-and-long-term-support-7e077635ee9c
 
-== Angular
+== Introducing Angular
 
 A complete rewrite of AngularJS.
 
-== Key Changes
+== Key Changes and Additions
 
 * Nested Routing and Lazy Loading
 * Integrated i18n
+* Use of TypeScript
+* Service Workers Module
 * Integrated ReactiveX library for JavaScript (RxJS).
-* TypeScript
+* Template Reference Variables
+* Expressive component interactions
+* ng-cli Command line tool for compiling, testing, building.
 
 == Nested Routing and Lazy Loading
+* ng5 code operates a single application
+* App-specific modules and templates are loaded on demand.
+* No longer need startup.js and env.js
+
 == Integrated I18N 
 == More I18N On the Horizon
 
@@ -54,40 +60,154 @@ In v6 we will release runtime i18n: one bundle for all locale, translations
 resolved at runtime, and maybe *code translations* if we have the time 
 (otherwise it'll come soon after). 
 
-== OPTIONAL: Migrating Away from TT2
+== Skipping Template Toolkit
 
-* Inline i18n
-* Org unit template overlays using ModRewrite
-* Brings us inline with standard Angular dev practice
-* Templates are simpler for new developers
-* Developing with code and templates in the same place is efficient.
+* Mixing ng5 i18n and TT no-go.
+* Lets us return to standard ng5 structure.
+* Code & templates in same directory
+* Org unit template overlays possible using ModRewrite
 
 == RxJS
 == TypeScript
 
+== TypeScript Fun: Interfaces
+[source,js]
+--------------------------------------------------------------------------
+// pcrud.ts
+interface EgPcrudReqOps {
+    authoritative?: boolean;
+    anonymous?: boolean;
+    idlist?: boolean;
+    atomic?: boolean;
+}
+search(/*...*/, reqOps?: EgPcrudReqOps) { ... }
+
+// client
+pcrud.search('aou', {parent_ou:null}, {}, {anonymous:true}).subscribe(...
+--------------------------------------------------------------------------
+
 == Bootstrap CSS v4 / ng-bootstrap
 
+* https://getbootstrap.com/
 * New ng-bootstrap supports Bootstrap v4 only.
 * Bootstrap v4 is a "reboot" of v3.
 * Panels, Thumbnails, and Wells replaced with "Cards"
+* Expanded utility classes!
 * No more glyphicons -- licensing issues.
 ** https://getbootstrap.com/docs/4.0/extend/icons/
 ** https://material.io/icons/ -- apache license
 
-== Exploring Angular
-* Building new structure
-* Building some Angular apps
-* Using Angular5 services in the browser client.
+== Exploring ng5
+
+* https://angular.io/tutorial
+* Build a plain ng5 app 
+* Option for expanding beyond staff UI's
+* Using ng5 services in the ng1 browser client.
+
+== Intermission: New App Demo
+
+* New app
+
+https://35.186.179.218/eg2/staff/splash
+
+== Migration Preamble: ng5 Shell
+
+Migrations where code is shared between ng1 and ng5 require loading
+ng5 first, which then bootstraps ng1
+
+== Strategies for Migrating to ng5
+
+* Inline Replacement
+* Parallel Apps with Shared Code
+* Parallel Apps w/o Shared Code
+
+== Inline Replacement
+
+* Insert an ng5 shell to ng1 (/eg/staff/)
+* Migrate services and apps in chunks.
+* No change in browser paths
+* Least amount of code duplication
+
+== Inline Replacement: Challenges
+
+* Requires a lot of steps
+.. Rearranging file structure
+.. Adherence to AngularJS style guide
+.. Integration of TypeScript
+.. Migrating to component directives
+.. Migrating from ng1 to ng5
+
+== Inline Replacement: Challenges Continued
+
+* Mixing ng5 and EGWeb problematic 
+** Path resolution issues (TT2 vs. html)
+* Mixing Bootstrap 3/4 problematic
+* Ties new project to /eg/staff
+* Documentation assumes a single-app upgrade.
+
+== Parallel Migration
 
-== Migrating to Angular
+* Create a new pure ng5 app (/eg2/)
+* Code and interfces migrated wholesale to ng5
+* Staff seamlessly navigate between /eg/staff and /eg2/staff
+* Data shared via localStorage, cookies, etc.
+* ng5 app follows Angular guidelines
 
-== Mixed-Mode Gotchas
-* Avoid use of page-level controllers (ng-controller).
-** Controllers should be instantiated via routing
-* Template variables must live within a controller
-** egCore.strings.setPageTitle() => ng2Title.setTitle()
+== Parallel Migration Sharing?
+
+== Parallel Migration v1: Shared Code
+
+* Add ng5 shell to ng1 as a code mediator
+* Can activate ng5 shell on a per-app basis.
+* Migrate shared services/components to ng5 and "downgrade"
+* Maintain a single copy of shared service/directive
+
+== Shared Parallel: Challenges
+
+* Less prep than inline, but still some gotchas for ng5 shell
+** No page-level controllers 
+* Only a portion of the code can be shared.
+** Core services and components only
+** Otherwise migration module gets huge
+** Roughly 25% of the codebase can potentially be shared
+
+== Shared Parallel: Challenges Continued
+
+* ng5 shell requires global adoption before we benefit from shared code.
+* Shared components have to be BS3 compatible
+* ng1 client must also load and run ng5
+* Running 3 types of apps at once: ng1, ng1+ng5, and ng5
+
+== Shared Parallel Schematic
+
+image:images/ng1_plus_ng5_shared.png[ng1 sharing with ng5]
+
+== Parallel Migration v2: No Code Sharing
+* /eg/staff remains pure ng1
+* Code and interfaces migrate wholesale to /eg2/ over time.
+** Starting with core services & components
+* Conceptually simple
+
+== Unshared Parallel: Challenges
+* Maintaining multiple versions of share-able services
+** ~25% code duplication
+
+== Intermission: Migration App Demo
+
+https://35.186.179.218/eg2/staff/splash
 
 == Other Migration Tasks
-* Propose we phase out all iframes and Dojo UIs by EG 3.7.
+
+* Phasing out iframes and Dojo UIs by EG 3.7.
+** Maybe start with these
+
+== IMHO
+
+* Use Parallel migration without sharing code
+* Start by migrating Dojo / iframe interfaces
+* Follow the Angular style guide.
+
+== Questions
+