Angular Hybrid of Helix

Proof of concept, demonstrating an upgrade path to Angular from AngularJS via ngUpgrade.

Transcript

1. Angular hybrid of Helix Upgrading AngularJS to Angular via ngUpgrade
2. Terminology Angular = Angular4 AngularJS Directives = Attribute directives in both frameworks Components require:'E' Element directive in Angular JS Components in Angular Services in Angular are known as Providers/Services
3. Upgrading with ngUpgrade Tools/utilities to bootstrap and manage an angular hybrid Developed by Angular Team Allows us to mix & match angular components in the same application We dont have to upgrade all the components at once
4. How ngUpgrade works It allows us to run both AngularJS & Angular side by side No emulation, both frameworks are fully featured versions Components & services of the 2 frameworks can interoperate via 3 main areas: Dependency Injection DOM Change Detection
5. Dependency Injection AngularJS Angular Dependency injection tokens are always strings Tokens can have different types. They are often classes. They may also be strings. There is exactly one injector. Even in multi‐module applications, everything is poured into one big namespace. There is a tree hierarchy of injectors, with a root injector and an additional injector for each component.
6. Even though different, ngUpgrade makes DI work seemlessly We can inject AngularJS services into Angular code by upgrading them. We can inject Angular services into AngularJS code by downgrading them. The same singelton instance is shared across both frameworks
7. DOM In both angular worlds the dom is made up of components & directives They communicate via inputs & output bindings or shared injected services via ngUpgrade Every DOM element is owned by one of the 2 frameworks Elements not used by the other, are ignored A hybrid app kicksoff as an AngularJS app, and AngularJS bootstraps the root template
8. Change Detection AngularJS has a digest loop, Angular has Angular Zone In AngularJS scope.apply() , $timeout(()=>{}); In Angular you dont need to call anything to get change detection ngUpgrade bridges these 2 concepts
9. Things to know when upgrading scope{} ‐ In Angular all components have isolated scopes. bindToController: {} . Component inputs and outputs should be bound to the controller instead of using the $scope. controller and controllerAs . Components have their own controllers. template or templateUrl . Components have their own templates. $compile ‐ is not supported by Angular or ngUpgrade replace:true ‐ is not supported by Angular or ngUpgrade terminal & priority ‐ is not supported Factories ‐ are not supported, change to a service.
10. The prototype Helix as an Angular Hybrid
11. The scaffolding Current Helix repository we created a folder called ax/ at the same level as the Ux/ folder. Angular CLI was used to create an initial Angular project Within src/ we created a folder called legacy/ which contains the bundled & minified AngularJS version of Helix Gulp Build has been modified to copy these files across angular‐cli.json tells our app to bundle these files
14. What's missing Haven't looked at unit test Sourcemaps from legacy bundles aren't working Interfaces & classes nested in namespaces wont work with ES6 style imports. API.Resources and API.Models formats are not compatible
15. The Pros & Cons of upgrading What does it mean if we upgrade now
16. The Pros Devs can start developing with Angular concepts now Devs wont need to double up on new effort later We get a chance to fix tech debt and refactor code We can pick and choose when and what to convert UI team can build HxUI Angular web components now UI team wont need to double up on new effort later V&V can take a similar approach and test in parts We can stay current and ahead of AngularJS's looming end of life date
17. The Cons No squad will want to be the one working on legacy code :﴿ Larger payload downloading both frameworks on initial load Devs will need to learn new concepts We wont get all the Angular performance gains or features like Aot while it's a hybrid but we may be able to have lazy loading ﴾needs more research﴿ It may get fiddly and difficult to make complex AngularJS components work via the upgrade wrapping method. Very new approach so not much out there to lean on