From: Bill Erickson Date: Wed, 18 Apr 2018 19:08:19 +0000 (-0400) Subject: ang2 preso X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=dd6154b24f9cdbb3370358e8a47b23e6235ad78c;p=working%2Frandom.git ang2 preso Signed-off-by: Bill Erickson --- diff --git a/NOTES.adoc b/NOTES.adoc index febbf248e..2a24af1fa 100644 --- 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 679105d85..87a60d692 100644 --- 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 +