a-b-street / osm2streets

Convert OSM to street networks with detailed geometry
https://a-b-street.github.io/osm2streets
Apache License 2.0
102 stars 9 forks source link

Rewrite the web app in Svelte #219

Closed dabreegster closed 1 year ago

dabreegster commented 1 year ago

Street explorer and the lane editor have thus far been written in framework-less JS. I've found it rather painful as the web apps have grown, and have felt slowed down when trying to rapidly experiment with new ideas (thickening road center lines until they hit buildings, live-tuning parameters for edge costs in pathfinding, extracting POIs from OSM). I've become quite comfortable in Svelte, TS, and MapLibre over the past months from work projects. In the background, I've slowly been exploring rewriting the osm2streets apps using this stack in https://github.com/dabreegster/osm2svelte. This PR is finally bringing the results of that experiment over here, replacing the old JS app!

Existing JS app: https://a-b-street.github.io/osm2streets New Svelte app: https://dabreegster.github.io/osm2svelte (I'll change the github workflows to deploy here once this PR is merged)

Quick demo of the street explorer:

https://github.com/a-b-street/osm2streets/assets/1664407/73773556-a6a8-41e5-b20e-a9a5ffe4c8e9

And the lane editor:

https://github.com/a-b-street/osm2streets/assets/1664407/bad8bd88-7ac1-4ec3-9131-9474a0f53d09

Big changes

There are a few unimplemented features from the previous version, notably debug layers. I'll file an issue with those tasks, but I don't want to block cutting over to this on that, because small iterations are easier once I'm using the new UI day-to-day and am motivated to improve it. :)

A common library

I'm going to keep the osm2svelte repo around and use it for my wild experiments. After this PR is merged, I'm going to delete dupe code from there and depend on things here by npm github dependencies. My intention is to later split out the osm2streets-svelte subdirectory as a standalone NPM module, document it better, and encourage people to build their own web apps making use of it.

Reviewing

Happy for a real code review, but I recognize this is absolutely massive. @BudgieInWA, if you're happy with the overall tech choices, that's the main thing I'm looking for.

CCing @andrewphilipsmith for osm2streets / A/B Street context. When we start "lifting" things like the turn restriction code to happen at the osm2streets layer, this is a place for us to interactively debug and make simple UIs for diff testing. npm run wasm && npm run dev is orders of magnitude faster than rebuilding A/B Street for tiny changes in one base crate, because we don't need to link to dozens of dependencies to effectively reimplement a web browser. :)

And CCing @yongrenjie if there's any interest in discussing Svelte style. I've made some choices here I'm happy with, but other things (ordering and reactive statements) are very awkward.

I'll leave a bunch of comments on the code to try and intro some Svelte and explain weird choices.

BudgieInWA commented 1 year ago

After only reading through the PR description, I am happy to see this, and happy for it to merge! I'm going to keep this PR around to look back at later.

dabreegster commented 1 year ago

Merging, then will fix up GH actions. (Hopefully in one commit, but if it turns into whack-a-mole with bugs, I'll switch to a tmp branch)