feat: take million router implementation to next level

[Borrus-sudo]

Is your feature request related to a problem? Please describe.
This feature is to take million/router to next level

Describe the solution you'd like
My presented solution is to make url prefetching and diffing faster by doing it ahead of time and parallel in a web worker. Users can present links with a dummy attribute to recognise the priority of resource. All the links in the current page view will be collected and sent off to the web worker where it will request and cache resources based on priority. On caching, high priority resources can be made into a vdom representation in the worker and sent back to the main thread where it will use the watchMedia function to render it in a template tag. When the user clicks that url, simply the template tag can be brought in. This will make mpa traversing faster. Additionally it can even provide some transitions animation technique support like FLIP

Describe alternatives you've considered
turbodrive seems to provide similar functionality but with millionjs perf, ahead of time parallelized caching and concurrent morphing of the template dom based on the availability of main thread we will be better than turbodrive. Also FLIP support and minimal size will be good to have add-ons

[Borrus-sudo]

I will be happy to help you in implementation

[Borrus-sudo]

Is your feature request related to a problem? Please describe. This feature is to take million/router to next level

Describe the solution you'd like My presented solution is to make url prefetching and diffing faster by doing it ahead of time and parallel in a web worker. Users can present links with a dummy attribute to recognise the priority of resource. All the links in the current page view will be collected and sent off to the web worker where it will request and cache resources based on priority. On caching, high priority resources can be made into a vdom representation in the worker and sent back to the main thread where it will use the watchMedia function to render it in a template tag. When the user clicks that url, simply the template tag can be brought in. This will make mpa traversing faster. Additionally it can even provide some transitions animation technique support like FLIP

Describe alternatives you've considered turbodrive seems to provide similar functionality but with millionjs perf, ahead of time parallelized caching and concurrent morphing of the template dom based on the availability of main thread we will be better than turbodrive. Also FLIP support and minimal size will be good to have add-ons

The common problem with MPA is that the DOM is reconstructed which is bad for subsequent navigations. Hence million/router will solve this. Plus we will also need to think about ways in which common dom elements (eg navbar) can be preserved across multiple pages skipping the diffing and patching the dom phases for them yielding boosted perf

[Borrus-sudo]

The compilation steps can also be introduced to save http round trips.

Without compilation

Page A -> Page B (cached ahead of time)
Then User immediately navigates from page B -> page C (no time to cache ahead of time)

With compilation:

Page A -> Page (B+C) (cached cause we know C is pretty high priority so we will save http round trip)

[aidenybai]

Hmm it seems like you currently know a lot more about this topic than I do, I might need some time to familiarize with this topic. I think this is over a great idea!

I will be happy to help you in implementation

Any help would be great! I've invited you as a contributor to the repository

[dperrymorrow]

Plus we will also need to think about ways in which common dom elements (eg navbar) can be preserved across multiple pages skipping the diffing and patching the dom phases for them yielding boosted perf

should be able to leverage Million's flags for this.

<footer data-flag="ELEMENT_IGNORE">
  ... 
</footer>

but would need to support grabbing these flags off the DOM / HTML with fromStringToDomNode and fromDomNodeToVNode support methods

another idea would be to allow to target an element as the "root" of you application simular to how Turbo does. This could greatly cut down on the diffing.

import { router } from 'million/router';
router(document.getElementById("application-root"));

[aidenybai]

Thanks! I've created the router-next branch to hold the suggestions you raised (root + data-flag), the original issue, and form support (#178)

[aidenybai]

Closing due to inactivity