+++ /dev/null
-= 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]
-------------------------------------------------------------------------
-<Directory "/openils/var/web/webby">
- FallbackResource /webby/index.html
-</Directory>
-------------------------------------------------------------------------
-
-== 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.
-
-
projects / working / random.git / commitdiff