[WIP] Angular 2 Migration Preparation(Draft)

[mtho11]

From @mtho11 on December 13, 2016 4:17

Purpose

The purpose of this issue is to identify the tasks need for Angular 2 migration. So we can identify task dependencies and blockers and also split up the work on these individual tasks.
At this time, this is a living document so feel free to add items or elaborate or question tasks.

This is an open task for anyone to contribute, so we can just start to get our hands around all the migration issues and create a plan.

Tasks

• 1. NPM packaging (replacing bower)
• * Yarn (via 5.1+ --yarn option) is probably a better replacement (and it is already based on npm packages) since Rails 5.1+ uses it by default as dependency management (and it handles both bower and npm) possible replacement with yarn since it handles both bower and npm?
• 3. Webpack packaging (for production build)
  • * Phase 1: custom webpack solution for fine release
  • * Phase 2: solved by webpacker and Rails 5.1+
• 4. Configure dev server strategy for web app auto-reload for quick development (webpack dev-server perhaps?) -- solved by webpacker ?
• 5. NgModules structure (what ngModules will we have? (common/feature/provider)
• 6. Directory structure (do we wish to change the organization of things)
• 7. Assets (do we handle assets differently with webpack (because we can))
• 8. Do we use Rails Sprockets (asset pipeline) or not (with webpack)?
• 9. Do Websockets via cable still work in ng2?
• 10. Can we use ng-cli?
• 11. Rx.js version moves from 4 to 5 with ng2 and the syntax changes quite a bit
  • Does our limited existing ngrx stuff still work?
• 12. Angular Routing (we use routing minimally)
  • UI Router 1.0.0+ to bridge to New Angular 2 router
• 14. I18n (gettext_i18n_rails_js for ng2?)
• 15. Is there issues with some of the javascript 3rd party libraries (which there are many)
• 16. Use ng2 Ahead-of-time compile(AOT) for production use (saves ~40% on ng2 libs and equally on startup time; since there is no ng 'compile' at runtime as is usual)

Recommendation

Use Rails 5.1+ for both webpack and Yarn (via webpacker) to make their way into Rails as a standard. This should not stop prototypes(using the above solutions), just that we don’t want to create a non-standard solution for the future.

Starting with ngUpgrade for an interim period should provide a less painful path forward as both Angular 1 and Angular 2 can coexist (albeit at a cost of both runtimes); until everything can be fully converted to Angular 2.

Angular 1.x Best Practices (TBD)

This is probably best off in its own issue as it could be lengthy and have many of its own conversations. (This may not be needed given that we need to migrate to ng2 and the ng1 stuff will exist for a short time period) I cannot compete wtih what is already out there:

• Sitepoint Angular 1.5 Components

Next

Surely, there are things missing here, as the migration is large and complex, however, this should serve as a starting place. Please edit as needed so we can divide these up and conquer.

Copied from original issue: ManageIQ/manageiq#13131

[mtho11]

@martinpovolny here is the starter Angular 2 migration issue; feel free to edit...
CC: @himdel @skateman @dclarizio @karelhala

[mtho11]

From @skateman on December 13, 2016 7:22

@mtho11 actioncable already works well in SSUI and I don't think there will be any compatibility issues with ng2

[mtho11]

From @himdel on December 13, 2016 12:13

@mtho11 great list.. just adding some random thoughts.. :)

For point one (yarn), we already have ManageIQ/manageiq#12581

And, maybe you mean it that way, but.. I'd rather do the webpack transition in this release, separate from any Angular 2 efforts. So that we don't move to webpack & angular 2 at the same time :).

And agreed we definitely need to look into webpacker since it will be the default in rails 5.1.

Another thing, ngUpgrade should probably never get into a production build. Meaning we should ideally start right after fine gets its own branch, and finish before an RC.

Probably agreed on the UI router, although since we're still not using any frontend routing, if at that point we still don't, it may make sense to go with the new default router.. Especially since 1.6 should have a router closer to ng2..

And i18n may be a toughie.. but some gettext version will exist :).

[mtho11]

@himdel sounds like a smart thing to do webpack in this release so like you said to "isolate the Angular 2 efforts".

[mtho11]

From @himdel on December 19, 2016 21:37

10. Rx.js version moves from 4 to 5 with ng2 and the syntax changes quite a bit
    Does our limited existing ngrx stuff still work?

Created ManageIQ/manageiq#13255 to address the rx update (but depends on npm)

[mtho11]

From @dclarizio on January 12, 2017 22:34

@mtho11 can you please close this and reopen on the ui-classic repo? Thx, Dan

[mtho11]

FYI: this issue was migrated from manageiq repo with comments intact via:
https://github-issue-mover.appspot.com/

[martinpovolny]

@AparnaKarve, @h-kataria, @hstastna : can you, please, read/comment this? We need to make sure that we don't introduce new obstacles for Angular 2 in our own PRs as well as in review.

From my point of view the Angular 1.x Best Practices are critical for us so that with each PR we don't increase the amount of work that will have to be done to get to Angular 2.

Thx!

[hstastna]

I've read this list and I like it. If there will be something to add to the list from my point of view, I will do it.

[mtho11]

Angular 2 integration with Rails as a standard option is now feasible: https://github.com/rails/webpacker#ready-for-angular-with-typescript

[martinpovolny]

@himdel, @skateman, @AparnaKarve : ^^^

[himdel]

Nice, so I guess we'll have to go rails 5.1 first, but hopefully that's the plan anyway.

[miq-bot]

This issue has been automatically marked as stale because it has not been updated for at least 6 months.

If you can still reproduce this issue on the current release or on master, please reply with all of the information you have about it in order to keep the issue open.

Thank you for all your contributions!

[ZitaNemeckova]

React was chosen over Angular 2/4.

@miq-bot close_issue