Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dev Tools #52

Open
jamesknelson opened this Issue Feb 18, 2019 · 6 comments

Comments

Projects
None yet
2 participants
@jamesknelson
Copy link
Collaborator

jamesknelson commented Feb 18, 2019

Navi needs some dev tools. As a result of Navi's architecture, they should be able to support time travel and give you a window into what's going on under the hood.

I'd really appreciate any help putting them together. I'd be happy to contribute to and link to a quality project that's maintained by someone else.

How Navi Works (the 2 minute version)

When you pass Navi a new URL or Context, it will map them to an array of simple objects called Chunks, which are then reduced into your Route object with a Redux-like configurable reducer.

The array of chunks corresponding to a single URL/context grows over time. Each Matcher (i.e. mount(), route(), withView(), etc.) maps a URL/context pair to an arbitrary number of chunks to the route during each iteration.

There's one special type of chunk: "busy". When Navi encounters a busy chunk (which will contain a promise), it'll wait until that promise resolves or is rejected, and then it'll recompute the list of chunks from scratch (thus allowing it to grow over time). Once there are no busy chunks, the route is considered "steady".

Dev Tools

Due to Navi's architecture, it should be possible to visualize how each Route is computed in response to a Request or Context change, possibly as a list of actions.

Request(/members)
- Chunks [view, busy]
- Chunks [view, redirect(/login), status(302)]

Request(/login)
- Chunks [view, status(200]

Context({ isAuthenticated: true })
- Chunks [view, status(200]

Request(/members)
- Chunks [view, busy]
- Chunks [view, data, busy]
- Chunks [view, data, status(200)]

Being able to see at a glance the information that is mapped to the current URL, and the process used to fetch it, should be useful for debugging routing issues. It would also allow for developers to pick a previous state and use that instead, i.e. time travel.

@nshoes

This comment has been minimized.

Copy link

nshoes commented Mar 1, 2019

I'm very interested in this!

@jamesknelson

This comment has been minimized.

Copy link
Collaborator Author

jamesknelson commented Mar 1, 2019

Okay :-)

Any ideas on the approach you'd take to putting this together?

@nshoes

This comment has been minimized.

Copy link

nshoes commented Mar 1, 2019

Not at all! 🤡But I have really been enjoying Navi at work and want to help out. This sounds like a fun project to tackle. Maybe we could start by chatting somewhere that's not GitHub?

@jamesknelson

This comment has been minimized.

Copy link
Collaborator Author

jamesknelson commented Mar 3, 2019

Glad to hear that you're enjoying Navi at work :D Where do you think would be a good place to chat? Perhaps I should start a Spectrum?

@nshoes

This comment has been minimized.

Copy link

nshoes commented Mar 4, 2019

Yeah, Spectrum, Slack, Gitter, what every you're digging!

@jamesknelson

This comment has been minimized.

Copy link
Collaborator Author

jamesknelson commented Mar 4, 2019

Ok! Just created a spectrum: https://spectrum.chat/navi

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.