From: Bill Erickson Date: Thu, 26 Apr 2018 15:25:48 +0000 (-0400) Subject: ang2 preso X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=fb81481ecd7fbc007ba6baa19c629f302e205633;p=working%2Frandom.git ang2 preso Signed-off-by: Bill Erickson --- diff --git a/ang2-preso.adoc b/ang2-preso.adoc index ef45f9e2c..b4a407d6e 100644 --- a/ang2-preso.adoc +++ b/ang2-preso.adoc @@ -38,6 +38,7 @@ A complete redesign and rewrite of AngularJS. == Key Changes and Additions +[role="incremental"] * Nested Routing and Lazy Loading * Integrated i18n * Use of TypeScript @@ -48,11 +49,6 @@ A complete redesign and rewrite of AngularJS. * Integrated ReactiveX library for JavaScript (RxJS). * ng-cli Command line tool for compiling, testing, building. -== Nested Routing and Lazy Loading -* Routers and resolvers all the way down. -* Code and templates for lazy-loaded modules is retrieved on demand. -* Apps can have many modules and still load quickly. - == Integrated I18N [source,html] @@ -100,7 +96,7 @@ 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). -== Retire Template Toolkit? +== Skipping Template Toolkit? * Using standard ng5 layout and tools ** Mixing ng5 i18n and TT no-go. @@ -108,6 +104,7 @@ resolved at runtime, and maybe *code translations* if we have the time * Org unit template overlays possible via alternate mechanisms == RxJS + * Promises are now supported by default in major browsers. ** No "notify" support * rxjs.Observables handle data streams @@ -119,12 +116,17 @@ this.net.request(...).subscribe( () => console.log('All done') ); -------------------------------------------------------------------------- -* Use .toPromise() to translate to a promise. -** Resolves with the last observed value +* .toPromise() resolves with the last observed value * Observables not observered are not executed!! == TypeScript +[role="incremental"] +* JavaScript superset that compiles to JS. +* Classes (inheritance), Interfaces, Types, etc. +* https://www.typescriptlang.org/ +* https://github.com/Microsoft/TypeScript/ + == TypeScript Fun: Interfaces [source,js] -------------------------------------------------------------------------- @@ -139,10 +141,10 @@ search(params: SomeParams) {...} search({name: 'jane', valid: true}); -------------------------------------------------------------------------- -== Bootstrap CSS v4 & ng-bootstrap +== Other Changes... Bootstrap v4 * https://getbootstrap.com/ -* New ng-bootstrap supports Bootstrap v4 only. +* https://ng-bootstrap.github.io/ -- v4 only * Panels, Thumbnails, and Wells replaced with "Cards" * Expanded utility classes! * No more glyphicons -- licensing issues. @@ -156,12 +158,12 @@ search({name: 'jane', valid: true}); * Using Angular style guide. * Experiment with downgrading ng5 services for use in ng1. -== Intermission: New App Demo - -* New app +== Ng5 App Demo https://35.186.179.218/eg2/staff/splash +NOTE: This server will be alive for ~1 month. + == Strategies for Migrating to ng5 * Inline Replacement @@ -188,24 +190,26 @@ https://35.186.179.218/eg2/staff/splash * Mixing ng5 and EGWeb problematic ** Path resolution issues (TT2 vs. html) -* New Ang5 components must be Bootstrap-3 comatible. +* New ng5 components must be Bootstrap-3 comatible. * Ties new project to /eg/staff * Documentation assumes a single-app upgrade. * Highly customized == Parallel Migration +[role="incremental"] * Create a new pure ng5 app (/eg2/) +** Use ng5 i18n, build tools, recommended structure, etc. +** Framework for non-staff apps * Staff seamlessly navigate between /eg/staff and /eg2/staff * Data shared via localStorage, cookies, etc. -* Code and interfaces migrated wholesale to ng5 == Parallel Migration v1: Shared Code -* Add ng5 shell to ng1 as a code mediator -* Can activate ng5 shell on a per-app basis. +* Add the ng5 shell to ng1 * Migrate shared services/components to ng5 and "downgrade" * Maintain a single copy of shared service/directive +* Can activate ng5 shell on a per-app basis. == Shared Parallel: Challenges @@ -220,8 +224,9 @@ https://35.186.179.218/eg2/staff/splash == Parallel Migration v2: No Code Sharing * No ng-upgrade * /eg/staff remains pure ng1 -* Code and interfaces migrate wholesale to /eg2/ over time. +* Services, interfaces migrated in discrete units. ** Start with core services & components +* No ng5 shell requirement * No Bootstrap v3 requirement * Less complicated overall @@ -229,25 +234,24 @@ https://35.186.179.218/eg2/staff/splash * Maintaining multiple versions of share-able code. ** The ~1/4 -== Intermission: Migration App Demo - -https://35.186.179.218/eg2/staff/splash - == Other Migration Tasks * Phasing out Dojo UI's and iframes. == Decisions + [role="incremental"] * Are we doing this? * Pick a migration strategy * Pick an icon set * Determine minimum requirements for initial deployment. -== Potential Migration Milestones (parallel / no downgrades) +== Possible Migration Plan + +[role="incremental"] * 3.2 Key services ported and navbar synchronized. -* 3.3 First batch of Dojo/iframe UIs migrated. Initial deployment. -* 3.4 More Dojo UI's migrated. New UI's too. +* 3.3 Initial deployment. First batch of Dojo/iframe UIs migrated. +* 3.4 More Dojo UI's migrated. New UI's. * 3.5 Dojo wrapped up, first batch of ng1 UI's ported. * 3.6 More ng1 UI's ported. * 3.7 ng1 migration wrapped up, ng1 deprecated.