If you follow me on Twitter – @Paul_Kinlan – you will know I yap on a lot about many of my projects on Github. This post is no exception, I want to introduce LeviRoutes, a client-side JS routing framework that is loosely based on a Rails like approach to URL handling.
There are plenty of frameworks that do this already so why did you create this? I hear you ask. Well it is pretty simple. I wanted a framework that would: * execute specific methods when the URL changed and matched a certain pattern; * is quick and easy to use; * listened for changes in the URL fragment; * worked with HTML5 History APIs; * worked on browsers that don't support any of these features; * and most importantly doesn't try to do anything else.
Thus LeviRoutes was born. It came about because I am working on a project that uses NodeJS with the Express framework, and the URL handling is very simple to access and I wanted to replicate this behavior in the browser, not just the server. My ultimate goal is for me to be able to share a lot of the logic that is on the server with the client and thus cut down the amount of code that I need to do.
The LeviRoutes project started with juat the ability to listen to changes in the HTML5 History by listening to the 'onpopstate' event. When there is a 'pop', the matching code is invoked with the current window.location object. It later included a onhashchange event listener to listen to changes in the fragment and finally included a listener for the onload event. By listening to these three events.
Lets have a look at the simplest app that we can build with this.
var app = new routes(); app.get("/", function(req) { alert("On /"); });
Pretty simple right! Under the hood, the system is listening for when the URL is just '/' and nothing more, if your URL was '/index.html' the code would not be executed. If you wanted to watch for when the URL is '/index.html' you would need a route with that as the exact string.
Looking for just the root directory by itself is not very interesting, and neither are simple static URL's. Thus the named parameters from Rails and other frameworks is built straight in, and this is the most interesting part.
It also supports named parameters for route syntax:
!#javascript
app.get("/:category", function(req) { alert("In " + req.params.category); });
app.get("/:category.:format", function(req) { alert("format: " + req.params.format); });This is simple, yet powerful, LeviRoutes allows you to treat the URL as an input event to your controller, or as the controller.
Have a play, let me know what you think, and look out for my next post about FormFactorJS.
I lead the Chrome Developer Relations team at Google.
We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.
Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.
I love to learn about what you are building, and how I can help with Chrome or Web development in general, so if you want to chat with me directly, please feel free to book a consultation.
I'm trialing a newsletter, you can subscribe below (thank you!)
