:email: berickxx@gmail.com
:date: Evergreen Conference 2018
:duration: 50
-:backend: deckjs
+:backend: slidy
:max-width: 45em
:deckjs_theme: web-2.0
* 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
== 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
== 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.
== 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
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
* 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
* 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
== 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 <ng-view> 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
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
== 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.