User Tools

Site Tools


dev:browser_staff:angjs_to_ang_migration

Browser Client AngularJS to Angular Migration

Summary

The browser client is built using AngularJS. The AngularJS project is getting overhauled and replaced by a fully refactored framework simply called Angular. The two projects are similar in concept, but the underlying code and how we as developers build code for each is quite different. Transitioning to Angular will require significantly more code changes than a typical AngularJS update.

AngularJS Project Status

The final release of AngularJS will be version 1.7. It will be an LTS release with 3 years of support.

https://blog.angular.io/stable-angularjs-and-long-term-support-7e077635ee9c

Key Code Changes

  • Angular services, components, etc. have different structures
  • Lazy-loading, nested routing.
  • Native i18n support
  • Move to TypeScript
    • Note that TypeScript is universal in Angular, ng-bootstrap, rxjs libraries, documentation, stackoverflow, etc. Using Angular means using TypeScript.
  • Using ES6-style imports
  • Migrating from Bootstrap v3 to v4.
  • Use of Angular CLI for building

Migration Strategy Proposal

  • Create a parallel Angular app following Angular.io style guide
  • Use plain HTML templates – No Template Toolkit!
    • Mixing TT2 with angular-cli for compiling, building, and i18n is a no-go, because it has to parse the HTML at compile time (not run time). It won't understand Template Toolkit.
    • Short of an alternate approach, this means no org-unit template overrides (like the TPAC and AngularJS has).
  • Use Angular i18n (again, no TT2)
  • Copy key services and components to Angular app
  • App look and feel should match AngularJS UI
    • Make it as seamless as possible to staff, documentation, etc.
  • App shares data with AngularJS app via local/sessionStorage, cookies, etc.
  • App navbar, etc. links point back to the AngularJS version of each interface.
  • As interfaces are moved from AngularJS to Angular, links in the AngularJS app are updated to refer to the Angular version.
  • Dojo and iframe-based interfaces are migrated to Angular first.

Migration Timeline Proposal

  • 3.2 Core services ported to Angular and navbar synchronized.
    • Unit tests for all core services included.
  • 3.3 Angular app included in release.
    • First batch of Dojo/iframe UIs migrated.
    • New UI's use Angular app
  • 3.4 More Dojo UI's migrated.
  • 3.5 Dojo UI's fully migrated. First batch of AngularJS UI's ported.
  • 3.6 More AngularJS UI's ported.
  • 3.7 AngularJS migration wrapped up, AngularJS deprecated.
  • 3.8 (4.0?) Remove AngularJS

Evergreen Angular Proof-of-Concept (and more) code

Highlights

  • Significant progress toward porting core services
  • Significant progress toward porting core services unit tests
  • Grid mostly ported
  • Fieldmapper Editor ported
  • UI's ported
    • Login
    • Workstation Admin
    • Server admin splash page
    • Billing Type Admin (under Server Admin)
    • Hard Due Date Admin (under Server Admin)
    • Nascent staff Angular catalog

Resources

NOTES

2018-05-17

Unit Tests

  • Added first unit tests for core services (idl, org, event).
  • Unit test syntax is practically identical, some minor variation in setting up the tests and using TS.
  • Unit tests live in *.spec.ts files (e.g. org.spec.ts) right beside the tested code (e.g. org.service.ts)

ng lint

  • Discovered 'ng lint'. Running it on the code base shows a bunch of warnings. Slowly cleaning those up. One useful warning in particular is how various 'rxjs' libs are imported. Generic imports (import {blah} from 'rxjs') imports way too much code. So I'm making those more specific (e.g. import {map} from 'rxjs/operators/map').
dev/browser_staff/angjs_to_ang_migration.txt · Last modified: 2018/05/18 10:02 by erickson

© 2008-2017 GPLS and others. Evergreen is open source software, freely licensed under GNU GPLv2 or later.
The Evergreen Project is a member of Software Freedom Conservancy.