npm i ultra
Add pushstate navigation to your component-based web app. Integrate seamlessly with React, Preact, and Vue.
| download | dependencies |
|---|---|
4.6 kb |
none |
Benefits
- Embrace component paradigm, stay framework agnostic
- Use conventions to map url string to component (sub)trees
- Independent of rendering or view layer
- Routing should be immune to complexity introduced by framework-level abstractions (context in React for e.g.)
- Co-locate routes to support scalability
- Routes are data. Similar types of information are best understood if they exist in the same space.
- On the other end, as relationships between components get more complex, it is best to leave route matching logic out of the mix.
- Extensible
- Composable API provides clear separation between route configuration and runtime to avail maximum reuse and target different environments
- Compact
- Ideal for mobile/progressive web apps
- No runtime dependencies
4.6 kb > ultra (> preact)- Code splitting friendly
- Ideal for mobile/progressive web apps
Trade-offs
- For modern browsers with pushstate support
- Does not render component or fetch data
- Relies on use of path keys (strings) to derive result
- More complex update process involves replacing path keys throughout the app
- Path keys (non-minified) may contribute to bloated bundles
- Concern for apps with multiple deeply nested routes, e.g. Amazon
- For the Developer: Overcome the notion of changing your routing code again this season, and actually following through. No pun intended.
Resources
- Quick start (build navigation for a news website tutorial)
- React bindings: react-ultra
- Code examples in
/examplesdirectory
To-dos
- Create automated cross-browser test suite
- Add Preact and Vue.js examples
- Implement Node.js container for ultra-router
License
MIT
Handle a route or two without breaking a sweat.
⚔️ ULTRA