Skip to content

router(refactor): single navigation stream - #25740

Closed
jasonaden wants to merge 11 commits into
angular:masterfrom
jasonaden:FW-308_single_nav_stream
Closed

jasonaden wants to merge 11 commits into
angular:masterfrom
jasonaden:FW-308_single_nav_stream

Conversation

@jasonaden

@jasonaden jasonaden commented Aug 30, 2018 •

Copy link
Copy Markdown
Contributor

This is a major refactor of how the router previously worked. There are a couple major advantages of this refactor, and future work will be built on top of it.

First, we will no longer have multiple navigations running at the same time. Previously, a new navigation wouldn't cause the old navigation to be cancelled and cleaned up. Instead, multiple navigations could be going at once, and we imperatively checked that we were operating on the most current router.navigationId as we progressed through the Observable streams. This had some major faults, the biggest of which was async races where an ongoing async action could result in a redirect once the async action completed, but there was no way to guarantee there weren't also other redirects that would be queued up by other async actions. After this refactor, there's a single Observable stream that will get cleaned up each time a new navigation is requested.

Additionally, the individual pieces of routing have been pulled out into their own operators. While this was needed in order to create one continuous stream, it also will allow future improvements to the testing APIs as things such as Guards or Resolvers should now be able to be tested in much more isolation.

  • Add the new router.transitions observable of the new NavigationTransition type to contain the transition information
  • Update router.navigations to pipe off of router.transitions
  • Re-write navigation Observable flow to a single configured stream
  • Refactor switchMap instead of the previous mergeMap to ensure new navigations cause a cancellation and cleanup of already running navigations
  • Wire in existing error and cancellation logic so cancellation matches previous behavior

@jasonaden
jasonaden force-pushed the FW-308_single_nav_stream branch 2 times, most recently from eab89ba to df21572 Compare August 30, 2018 20:52
@mary-poppins

Copy link
Copy Markdown

You can preview df21572 at https://pr25740-df21572.ngbuilds.io/.

@mary-poppins

Copy link
Copy Markdown

You can preview 0b85cc5 at https://pr25740-0b85cc5.ngbuilds.io/.

@mary-poppins

Copy link
Copy Markdown

You can preview a15e683 at https://pr25740-a15e683.ngbuilds.io/.

@mary-poppins

Copy link
Copy Markdown

You can preview e5e9939 at https://pr25740-e5e9939.ngbuilds.io/.

@jasonaden
jasonaden force-pushed the FW-308_single_nav_stream branch from e5e9939 to 99a63a5 Compare September 10, 2018 03:15
@jasonaden

Copy link
Copy Markdown
Contributor Author

Presubmit

@mary-poppins

Copy link
Copy Markdown

You can preview 99a63a5 at https://pr25740-99a63a5.ngbuilds.io/.

@mary-poppins

Copy link
Copy Markdown

You can preview 78885c4 at https://pr25740-78885c4.ngbuilds.io/.

@mary-poppins

Copy link
Copy Markdown

You can preview ce4e81d at https://pr25740-ce4e81d.ngbuilds.io/.

@mary-poppins

Copy link
Copy Markdown

You can preview 8c24876 at https://pr25740-8c24876.ngbuilds.io/.

@jasonaden
jasonaden force-pushed the FW-308_single_nav_stream branch from 8c24876 to 92c7b90 Compare September 12, 2018 03:56
@mary-poppins

Copy link
Copy Markdown

You can preview 92c7b90 at https://pr25740-92c7b90.ngbuilds.io/.

@jasonaden
jasonaden force-pushed the FW-308_single_nav_stream branch from 3eae0c5 to 5417fb8 Compare September 12, 2018 05:24
@mary-poppins

Copy link
Copy Markdown

You can preview 3eae0c5 at https://pr25740-3eae0c5.ngbuilds.io/.

@jasonaden
jasonaden force-pushed the FW-308_single_nav_stream branch from 5417fb8 to 35905e2 Compare September 12, 2018 05:29
@jasonaden

Copy link
Copy Markdown
Contributor Author

Global presubmit

@mary-poppins

Copy link
Copy Markdown

You can preview 5417fb8 at https://pr25740-5417fb8.ngbuilds.io/.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use mergeMap... reasoning: "flattening" is too general.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If order matters, this should be a concatMap.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: name this urlAfterRedirects

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

extract the "async tap" into it's own operator and reuse... that's the bit that is mergeMap(t => whatever().pipe(map(() => t)).

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above with async tap comment.

Comment thread packages/router/src/router.ts Outdated
Comment thread packages/router/src/router.ts Outdated

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add some comments through this error handling describing why/what is being done

Comment thread packages/router/src/router.ts Outdated
Comment thread packages/router/src/router.ts Outdated

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could just be:

const activate = (rootContexts: ChildrenOutletContexts, routeReuseStrategy: RouteReuseStrategy,
        forwardEvent: (evt: Event) => void) => map(t => {
          new ActivateRoutes(
              routeReuseStrategy, t.targetRouterState !, t.currentRouterState, forwardEvent)
              .activate(rootContexts);
          return t;
        })

Also, maybe make the name more explicit, activate what?

Comment thread packages/router/src/router.ts Outdated
@jasonaden
jasonaden force-pushed the FW-308_single_nav_stream branch from 35905e2 to 2bc405a Compare September 17, 2018 22:27
@mary-poppins

Copy link
Copy Markdown

You can preview 2bc405a at https://pr25740-2bc405a.ngbuilds.io/.

@jasonaden
jasonaden force-pushed the FW-308_single_nav_stream branch from 2bc405a to 9ea5928 Compare September 18, 2018 03:56
@mary-poppins

Copy link
Copy Markdown

You can preview 9ea5928 at https://pr25740-9ea5928.ngbuilds.io/.

@jasonaden
jasonaden force-pushed the FW-308_single_nav_stream branch from 9ea5928 to b42836c Compare September 18, 2018 17:27
@mary-poppins

Copy link
Copy Markdown

You can preview b42836c at https://pr25740-b42836c.ngbuilds.io/.

@mary-poppins

Copy link
Copy Markdown

You can preview 698f80e at https://pr25740-698f80e.ngbuilds.io/.

@mary-poppins

Copy link
Copy Markdown

You can preview 5ac8d64 at https://pr25740-5ac8d64.ngbuilds.io/.

@mary-poppins

Copy link
Copy Markdown

You can preview 0ce3cb5 at https://pr25740-0ce3cb5.ngbuilds.io/.

@jasonaden jasonaden added the action: merge The PR is ready for merge by the caretaker label Sep 27, 2018
…cumentation

* Pull out `activateRoutes` into new operator
* Add `asyncTap` operator
* Use `asyncTap` operator for router hooks and remove corresponding abstracted operators
* Clean up formatting
* Minor performance improvements
@jasonaden
jasonaden force-pushed the FW-308_single_nav_stream branch from 0ce3cb5 to b2e5580 Compare September 27, 2018 20:56
@mary-poppins

Copy link
Copy Markdown

You can preview b2e5580 at https://pr25740-b2e5580.ngbuilds.io/.

@alxhub alxhub closed this in 4decc85 Sep 27, 2018
alxhub pushed a commit that referenced this pull request Sep 27, 2018
This is a major refactor of how the router previously worked. There are a couple major advantages of this refactor, and future work will be built on top of it.

First, we will no longer have multiple navigations running at the same time. Previously, a new navigation wouldn't cause the old navigation to be cancelled and cleaned up. Instead, multiple navigations could be going at once, and we imperatively checked that we were operating on the most current `router.navigationId` as we progressed through the Observable streams. This had some major faults, the biggest of which was async races where an ongoing async action could result in a redirect once the async action completed, but there was no way to guarantee there weren't also other redirects that would be queued up by other async actions. After this refactor, there's a single Observable stream that will get cleaned up each time a new navigation is requested.

Additionally, the individual pieces of routing have been pulled out into their own operators. While this was needed in order to create one continuous stream, it also will allow future improvements to the testing APIs as things such as Guards or Resolvers should now be able to be tested in much more isolation.

* Add the new `router.transitions` observable of the new `NavigationTransition` type to contain the transition information
* Update `router.navigations` to pipe off of `router.transitions`
* Re-write navigation Observable flow to a single configured stream
* Refactor `switchMap` instead of the previous `mergeMap` to ensure new navigations cause a cancellation and cleanup of already running navigations
* Wire in existing error and cancellation logic so cancellation matches previous behavior

PR Close #25740
alxhub pushed a commit that referenced this pull request Sep 27, 2018
alxhub pushed a commit that referenced this pull request Sep 27, 2018
…cumentation (#25740)

* Pull out `activateRoutes` into new operator
* Add `asyncTap` operator
* Use `asyncTap` operator for router hooks and remove corresponding abstracted operators
* Clean up formatting
* Minor performance improvements

PR Close #25740
@angular-automatic-lock-bot

Copy link
Copy Markdown

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: merge The PR is ready for merge by the caretaker cla: yes target: major This PR is targeted for the next major release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants