ultra

Router for component-based web apps. Pair with React, Preact, Vue.js, and others.

Stats

StarsIssuesVersionUpdatedCreatedSize
ultra
3500.7.24 years ago7 years agoMinified + gzip package size for ultra in KB

Readme

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

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 /examples directory
    • Vehicle shop: jsfiddle
    • Tap (intercept routing): jsfiddle
    • Loading modules and routes dynamically

To-dos

  • Document API
  • 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. :crossed_swords: ULTRA

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.