ang2 preso
authorBill Erickson <berickxx@gmail.com>
Thu, 19 Apr 2018 16:08:28 +0000 (12:08 -0400)
committerBill Erickson <berickxx@gmail.com>
Thu, 19 Apr 2018 16:08:28 +0000 (12:08 -0400)
Signed-off-by: Bill Erickson <berickxx@gmail.com>
ang2-preso.adoc

index afba002..1dc5eb8 100644 (file)
@@ -3,7 +3,7 @@
 :email: berickxx@gmail.com
 :date: Evergreen Conference 2018
 :duration: 50 
-:backend: deckjs
+:backend: slidy
 :max-width: 45em
 :deckjs_theme: web-2.0
 
@@ -72,7 +72,7 @@ A complete rewrite of AngularJS.
  
 * ng xi18n
 * https://en.wikipedia.org/wiki/XLIFF -- default format
-* PO files not supported, but XLIFF
+* PO files not supported, but XLIFF/PO translators exist
 ** http://docs.translatehouse.org/projects/translate-toolkit/en/latest/commands/xliff2po.html
 
 == I18N XLIFF Sample
@@ -108,7 +108,17 @@ resolved at runtime, and maybe *code translations* if we have the time
 == RxJS
 * Promises are now supported by default in major browsers.
 ** No "notify" support
-* rxjs.Observabbles handle data streams
+* rxjs.Observables handle data streams
+[source,js]
+--------------------------------------------------------------------------
+this.net.request(...).subscribe(
+    result => console.log(`got a result: ${result}`),
+    error  => console.error(`got error ${error}`),
+    ()     => console.log('All done')
+);
+--------------------------------------------------------------------------
+* Use .toPromise() to translate to a promise.
+** Resolves with the last observed value
 * Observables not observered are not executed!!
 
 == TypeScript
@@ -116,20 +126,18 @@ resolved at runtime, and maybe *code translations* if we have the time
 == TypeScript Fun: Interfaces
 [source,js]
 --------------------------------------------------------------------------
-// pcrud.ts
-interface EgPcrudReqOps {
-    authoritative?: boolean;
-    anonymous?: boolean;
-    idlist?: boolean;
-    atomic?: boolean;
+interface SomeParams {
+    name:   string,
+    email?: string, // optional
+    valid:  boolean
 }
-search(/*...*/, reqOps?: EgPcrudReqOps) { ... }
+search(params: SomeParams) {...}
 
 // client
-pcrud.search('aou', {parent_ou:null}, {}, {anonymous:true}).subscribe(...
+search({name: 'jane', valid: true});
 --------------------------------------------------------------------------
 
-== Bootstrap CSS v4 / ng-bootstrap
+== Bootstrap CSS v4 & ng-bootstrap
 
 * https://getbootstrap.com/
 * New ng-bootstrap supports Bootstrap v4 only.
@@ -141,10 +149,10 @@ pcrud.search('aou', {parent_ou:null}, {}, {anonymous:true}).subscribe(...
 
 == Exploring ng5
 
-* https://angular.io/tutorial
-* Build a plain ng5 app 
-* Option for expanding beyond staff UI's
-* Test using ng5 services in the ng1 browser client.
+* https://angular.io/tutorial.
+* Build a pure ng5 app.
+* Using Angular style guide.
+* Experiment with downgrading ng5 services for use in ng1.
 
 == Intermission: New App Demo
 
@@ -152,11 +160,6 @@ pcrud.search('aou', {parent_ou:null}, {}, {anonymous:true}).subscribe(...
 
 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
@@ -167,7 +170,7 @@ ng5 first, which then bootstraps ng1
 
 * Insert an ng5 shell to ng1 (/eg/staff/)
 * Migrate services and apps in chunks.
-* No change in browser paths
+* No new in browser paths
 * Least amount of code duplication
 
 == Inline Replacement: Challenges
@@ -186,16 +189,14 @@ ng5 first, which then bootstraps ng1
 * New Ang5 components must be Bootstrap-3 comatible.
 * Ties new project to /eg/staff
 * Documentation assumes a single-app upgrade.
+* Highly customized
 
 == Parallel Migration
 
 * 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
-
-== Parallel Migration Sharing?
+* Code and interfaces migrated wholesale to ng5
 
 == Parallel Migration v1: Shared Code
 
@@ -207,14 +208,9 @@ ng5 first, which then bootstraps ng1
 == 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
-
+** No page-level controllers / must be <ng-view> loaded.
+* It only makes sense to share core services & components. 
+** Roughly 1/4 of the webstaff codebase
 * 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
@@ -224,15 +220,16 @@ ng5 first, which then bootstraps ng1
 image:images/ng1_plus_ng5_shared.png[ng1 sharing with ng5]
 
 == Parallel Migration v2: No Code Sharing
+* No ng-upgrade
 * /eg/staff remains pure ng1
 * Code and interfaces migrate wholesale to /eg2/ over time.
-** Starting with core services & components
-* No services are downgraded
-* Conceptually simple
+** Start with core services & components
+* No Bootstrap v3 requirement
+* Less complicated overall
 
 == Unshared Parallel: Challenges
-* Maintaining multiple versions of share-able services
-** ~25% code duplication
+* Maintaining multiple versions of share-able code.
+** The 1/4
 
 == Intermission: Migration App Demo
 
@@ -240,11 +237,11 @@ https://35.186.179.218/eg2/staff/splash
 
 == Other Migration Tasks
 
-* Phasing out iframes and Dojo UIs by EG 3.7.
-** Maybe start with these
+* Phasing out iframes and Dojo UIs.
 
 == IMHO
 
+[role="incremental"]
 * Use Parallel migration without downgrading services
 * Start by migrating Dojo / iframe interfaces
 * Follow the Angular style guide.