From: Bill Erickson Date: Thu, 19 Apr 2018 16:08:28 +0000 (-0400) Subject: ang2 preso X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=a198c543bc6c6054aac8437c0b685f9694bec4f5;p=working%2Frandom.git ang2 preso Signed-off-by: Bill Erickson --- diff --git a/ang2-preso.adoc b/ang2-preso.adoc index afba002da..1dc5eb883 100644 --- a/ang2-preso.adoc +++ b/ang2-preso.adoc @@ -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 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.