From: Bill Erickson Date: Mon, 23 Apr 2018 19:03:03 +0000 (-0400) Subject: ang2 preso X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=c320bc89051de3fc82feee5a4101e2b19bc554ac;p=working%2Frandom.git ang2 preso Signed-off-by: Bill Erickson --- diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..2d19fc766 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +*.html diff --git a/NOTES.adoc b/NOTES.adoc deleted file mode 100644 index 14c83aa4d..000000000 --- a/NOTES.adoc +++ /dev/null @@ -1,262 +0,0 @@ -= AngularJS -> Angular2+ Upgrade Notes = - -== State of AngularJS == - - * Final AngularJS release 1.7 June 2018 - * 3-year LTS -- support ends June 2021. - * EG version 3.7 (March 2021) - -https://blog.angular.io/stable-angularjs-and-long-term-support-7e077635ee9c - -== Writing a new app the Angular2 way to experiment == - -* https://angular.io/tutorial - ** Angular5 is AngularJS in Greek. Same concepts, new language. - ** Modules, Services, Directives+Controllers=Components - -=== General Stuff === -* TypeScript is not required, but is almost universally assumed in - Angular, RXJS, ng-bootstrap, stackoverflow, you-name-it documentation. -* TS works well with IDEs - -* NodeJS automates various developer tasks. - ** Handles boilerplate code generation. - ** TypeScript AOT (ahead-of-time) compiler - ** NodeJS is not required for serving files in real time. - ** Some dependencies we manually manage (uglify, karma, etc.) are - baked into 'ng build' - ** TypeScript and other dependency mangling can be precompiled to JS for - deployment to use with Apache, etc. - ** 'ng update' updates dependencies (edits package.json) - -[source,sh] --------------------------------------------------------- -# --prod includes uglify, etc. -ng build [--dev|--prod] --------------------------------------------------------- -* Observables are more common than Promise's (same idea, different terms). - ** http://reactivex.io/rxjs/ - ** http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html - ** These have a slight benefit over promises of a consistent caller API - for atomic and streaming calls. - ** New-style promises no longer have a 'notify' operation! - ** https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise - ** Observables are the only way to have a stream. -* Promises are good for representing a binary success/fail operation, while - Observabes are better suited to shuffling data, particularly streams of data. -* RouteResolvers only want a single value from an observable. Unclear why. -* Observables not observered are not executed!! -* route changes that do not result in a new component being loaded - do NOT force running components to reload! you have to watch - for route changes. - -* Use 'declare' to tell TypeScript about global, legacy/non-exported - variables, e.g. opensrf libs. -[source,sh] ------------------------------------------------------------------------- -// Global vars from opensrf.js -declare var OpenSRF, OSRF_TRANSPORT_TYPE_WS; ------------------------------------------------------------------------- - -* this - -[source,sh] ------------------------------------------------------------------------- -foo => {this.bar} // 'this' refers to container class instance when present -function foo() {this.bar} // 'this' refers to function ------------------------------------------------------------------------- - -* Consider local style guide recommendation for using camelCase for consistency. - -* c-sharp style get/set handler -[source,sh] ------------------------------------------------------------------------- -get foo(): String {return this.foo} -set foo(str: String): void {this.foo = str} ------------------------------------------------------------------------- - -=== i18n! === - ** All text lives in templates -- could bypass TT2 - ** use XLIFF file by default - *** Has context and notes information. - *** Not supported by launchpad. - *** cursory glance suggests .po files aren't supported - ** Pre-compile language-specific builds for speedy fun-times - *** ng build --aot --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr - *** Final build only contains french strings. - ** can drop the egStrings module - ** keeping all files within the Ang2 universe makes things like IDEs possible - ** In the works for 5.x: translations for strings /in typescript code/ -- woohoo. - *** https://github.com/angular/angular/issues/11405 - -=== Services and Classes === -* Many services can just be classes - ** Many egCore services don't need to be services, they're just - coded that way because that's how AngJS allowed us to inject - shared code into each module. - ** E.g. we don't need an injectable shared service for egEvent. - All we need is a class definition. - ** Services used for sharing data and actions across modules, - singleton objects, shuffling data, linking into ang lifecycle. -* UPDATE: to some extent, this comes down to style/preference, but -using services seems to be the Ang2 way so likely the better approach. - -* Using JQUERY -[source,sh] ------------------------------------------------------------------------- -npm install --save jquery -npm install -D @types/jquery -# In the code: -import * as $ from 'jquery'; ------------------------------------------------------------------------- - -* Imports editing tsconfig.json -[source,sh] ------------------------------------------------------------------------- -"compilerOptions": { - ... - "baseUrl": "src", - "paths": { - "@eg/*": ["app/*"], - "@env/*": ["environments/*"] - }, - ... -} ------------------------------------------------------------------------- - -== Integrated service workers - * Not yet researched - -== Baked-in page title service - -* https://angular.io/guide/set-document-title -* this solves the problem of our ang1 title service not working. - -== Configure Apache for lazy-loading / nested modules - -* Assumes ng-build is compiling to /openils/var/web/e2 (or symlinked) -* Another nod toward going all angular .html / no TT2 or EGWeb required. - -== Nested routing - -* No need to call egStartup.go() in every component, it will already - have run before every component is even loaded using resolvers. - Resolvers proceed as expected, from the base components out to the - children. - -* egStartup.go() is broken out into route-specific data fetching / - it cascades down to each app: - - ** load idl => verify auth / load common staff data => load app-specficic data. - -* Base routes defined in root, child routes defined in child routing - module, and on down. - -[source,sh] ------------------------------------------------------------------------- - - FallbackResource /webby/index.html - ------------------------------------------------------------------------- - -== per-component css -* surprisingly handy - -=== angular-cli - * Compiling code bundles - * Minifying - * i18n translation file generation - -== ng-bootstrap / Bootstrap 4 -* No more glyphicons -- note also licensing issues. -* https://material.io/icons/ -- apache license - -== Upgrading... - -* Angular2 rewritten from scratch (in typescript) -* Bootstrap4 is a "reboot" -* ng-bootstrap rewritten from scratch -* ng-build compiles the TS for us and handles the bundling, but we can't - mix this w/ TT easily. - -== ng-upgrade, etc. - -* Ang2 bootstraps ang1. -* Beware an1 page-level controllers (see patron search app failure to load). -* - -=== Migration Plan - -* Phase I: separate branch/repo -** Make /eg2/ a viable parallel structure -*** Mainly navbar w/ hotkeys that link back to ang1 -** Enable ang2 mixed mode on ang1 apps. -* Phase II -** Merge to master and start running in mixed mode. -** Migrate core services to ang2 and "downgrade" -** Migrate core components to ang2 and "downgrade" -*** TODO: how will mixing bootstrap versions behave? -* Phase III -** Migrate existing apps to /eg2/ -*** Goal is new UI's are indistinguishable -- no new training, etc. -** All new apps are built in /eg2/ -* Phase IV -** Remove any remaining /eg/staff/ code / templates - -We may find that some ang1 apps are not quickly amenable to running -in mixed mode. In such cases, it make sense to leave them as ang1-only -apps during phases I and II, then port them directly to ang2 once /eg2/ -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. -* lazy-loaded ang2 components that depend on route-resolvers would not be - available to ang1 code unless they were pre-loaded and any data they - depend on loaded by route resolvers would have to be replicated in - ang1 somehow. -* Dependencies for both ang versions have to be handled separately regardless. -* Mixing bootstrap 3 and 4 ? (TODO test) - -== If we give up TT - -Can get org fall through magic with apache via: - -[source,conf] ---------------------------------------------------------------------------- -RewriteEngine on -RewriteCond %{DOCUMENT_ROOT}/child_org/%{REQUEST_URI} -f -RewriteRule ^(.+) %{DOCUMENT_ROOT}/child_org/$1 [L] -RewriteCond %{DOCUMENT_ROOT}/root_org/%{REQUEST_URI} -f -RewriteRule ^(.+) %{DOCUMENT_ROOT}/root_org/$1 [L] ---------------------------------------------------------------------------- - -== 0 to 60 - -* Install Evergreen working/lp1626157-ang2-sandbox -* Edit eg_vhost.conf (see fallback resource above) -* mkdir Open-ILS/web/eg2 -* opensrf: ln -s /home/berick/code/Evergreen/Open-ILS/web/eg2 /openils/var/web/eg2 -* sudo npm install -g @angular/cli -* cd Open-ILS/src/eg2 -* npm install -* ng build --aot --app eg-migration --output-path ../../web/js/ui/default/staff/ng2-shell -* ng build --aot --app eg --deploy-url /eg2/ --base-href /eg2/ --output-path ../../web/eg2/ --watch - -== - -In a way, we're on a journey alongside the angular team. have a chance -to review the /eg/ work and reassess some things. - -* many deps are the same as we're already using -- jasmine, karma - -== - -Dependencies can be a bear. Should we consider pinning and posting the -ang1 and ang2 node_modules dirs somewhere so we can just fetch them and -not have to rely on npm for dependency fetching. - - diff --git a/ang2-preso.adoc b/ang2-preso.adoc index 183d932ea..ef45f9e2c 100644 --- a/ang2-preso.adoc +++ b/ang2-preso.adoc @@ -105,7 +105,7 @@ resolved at runtime, and maybe *code translations* if we have the time * Using standard ng5 layout and tools ** Mixing ng5 i18n and TT no-go. * Code & templates in same directory is very convenient -* Org unit template overlays possible using ModRewrite +* Org unit template overlays possible via alternate mechanisms == RxJS * Promises are now supported by default in major browsers. @@ -217,10 +217,6 @@ https://35.186.179.218/eg2/staff/splash * Shared components have to be BS3 compatible * ng1 client must also load and run ng5 -== Shared Parallel Schematic - -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