Call me naïve, but routing in a single page application is just not that hard of a problem. At the core it's about having a piece of state¹ (your active route) which determines which part of the app you want to render–something you can do with a switch statement². On top of that, you want to synchronize that state to the page URL³.
Doing it yourself requires more boilerplate code, no question about it. But it's not that much code tbh (not very complex either), and you get back control over that important piece of state, which otherwise remains opaque and difficult to work with–i.e., its "shape" is pre-determined by the routing library you use. For example, react-router doesn't support parallel routes.
¹ https://github.com/superegodev/superego/blob/main/packages/a...
² https://github.com/superegodev/superego/blob/main/packages/a...
³ https://github.com/superegodev/superego/blob/main/packages/a...
I also agree it isn't a hard problem, but personally I'd say you got the flow the wrong way around. You don't want to "synchronize state to the page URL" but rather treat the page URL as something you create state from, so it works both when you navigate there by pressing anchor tags, or the user manually enters the URL, and it gets a bit easier to manage.
Basically, URL is the top-level state, and from there you derive what page, then render that page, rather than the other way around.
Conceptually, however, I prefer to think of my state being at the center of things. I mean, that's where I define (via types) what the state is. The URL is just one serialization of that state that is convenient to use in a web browser (making it work with links, back/forth buttons, etc). Maybe in another environment another serialization would be needed. Or maybe no serialization could be needed at all (making it a memory router).
> One big thing: what if you want to support SSR, which I think is a pretty basic requirement these days?
I agree it's a basic requirement for a certain class of apps and websites, but there are tons of apps for which SSR is not relevant and even detrimental (in the sense that it adds complexity that is not offset by the benefits it brings).
https://github.com/dotnet/aspnetcore/blob/main/src/Http/Rout...
https://adventures.nodeland.dev/archive/you-should-not-use-u...
Whose implementation, specifically? I don't think as specified URLPattern has any inherent performance drawbacks compared to the alternatives, but it seems like V8/NodeJS/Deno definitely didn't thought closely and/or clearly about performance when they did theirs.
So I went and made an implementation of URLPatternList that uses a prefix tree and is 20-30x faster than a linear scan for large lists of URLPatterns: https://github.com/justinfagnani/url-pattern-list
I agree with the other two comments, surely almost every frontend webdev has implemented a router in their career unless they never strayed from the major frameworks. It's really not a complicated thing to have to build. I'm not one to look a gift horse in the mouth but I don't see why we're being given this one.
Unfortunately cases like here in the article are an example of why URLPattern had enormous push back during development. It's not the worst thing in the world to run three or four patterns one after another. But generally, doing a linear search for the right pattern doesn't scale well at all! If there's a dozen routes, running pattern after pattern is probably not ideal!
We can look at Hono routers, for example. Which has a bunch of different examples, most of which will one-shot a bunch of patterns at once. RegExpRouter, TrieRouter. There's good write-ups for the tradeoffs across them. But they all take a bunch of routes up front, and combine them into a single matcher, attempting to re-use work across patterns. https://hono.dev/docs/concepts/routers
Really good we have URLPattern, but this is the anti-use-case, that almost convinced folks not to make URLPattern at all.
> Another thing- should we be building a router with web components? Eh... maybe not? Lit seems to think (it would be helpful and useful)[1]. But there are a lot of considerations you have to handle with your own implementation that framework routers have already solved. Web components also add another level of security you need to be aware of.
The Lit Labs router isn't a web component. It's a Lit reactive controller that lets you define a router separately from a component, but attach it to a component so that the component updates when routes change. So we're saying don't make your router a web component (ie `<my-route path="...">`
Also there isn't another level of security web components. They're implemented in script just like a router. Script running in a page can do all kinds of things.
teddyh•2mo ago
embedding-shape•2mo ago
simon04•2mo ago
teddyh•2mo ago
embedding-shape•2mo ago