No-hashes bidirectional routing in re-frame with silk and pushy

Update: there’s a version of this article that uses bidi instead of silk: No-hashes bidirectional routing in re-frame with bidi and pushy. The content is very similar, only the code changes.

I recently replaced secretary with silk and pushy in a re-frame project that was created fresh out of leiningen template and this is how I did it, but first, the reason.

What I like about silk is that it’s bidirectional. It not only parses URLs into data structures but also generates URLs from data structures. This is not unique to silk, bidi also does it and feature-wise they are almost equivalent. On bidi’s website you can find this table comparing various routing libraries:

Library clj cljs Syntax Isomorphic? Self-contained? Extensible?
Compojure Macros
Moustache Macros
RouteOne Macros
Pedestal Data
gudu Data
secretary Macros
silk Data
fnhouse Macros
bidi Data

I don’t have a strong reason to chose silk over bidi, both seem like excellent choices. I also added pushy to the mix so I could have nice URLs, such as /about  instead of /#/about. The reason for this is that it looks better, follows the semantics of URLs better and allows for server side rendering, to be covered in a future article. It uses HTML5 pushState which by now it’s widely supported.

Let’s get started

I’m going to use a fresh project for this article, but the information here is applicable to any similar situation. Let’s get started:

lein new re-frame projectx +routes

The first step is to get rid of secretary and include silk and pushy by replacing

[secretary "1.2.3"]

with

[com.domkm/silk "0.1.1"]
[kibu/pushy "0.3.2"]

The routes

The routes.cljs  file will be completely re-written. The namespace declaration will include silk and pushy:

(ns projectx.routes
  (:require [clojure.set :refer [rename-keys]]
            [domkm.silk :as silk]
            [pushy.core :as pushy]
            [re-frame.core :as re-frame]))

The first step is to define the routes we want. One of the designing features of silk is that routes are data structures, not function/macro calls:

(def routes (silk/routes [[:home [[]]]
                          [:about [["about"]]]]))

The app-routes function that used to define functions is replaced by one that sets up pushy:

(defn app-routes []
  (pushy/start! (pushy/pushy dispatch-route parse-url)))

parse-url  is a very simple function that uses silk/arrive to turn a URL into a data structure representing it:

(defn- parse-url [url]
  (silk/arrive routes url))

Then dispatch-route is called with that structure:

(defn- dispatch-route [matched-route]
  (let [matched-route (sanitize-silk-keywords matched-route)
        panel-name (keyword (str (name (:name matched-route)) "-panel"))]
    (re-frame/dispatch [:set-active-panel panel-name])))

The :name of the matched-route will be :home or :about and panel-name  is constructed to be :home-panel  or :about-panel so that we can dispatch setting the active panel the same way secretary used to do it.

sanitize-silk-keywords  just simplifies the namespaced keywords silk produces:

(defn- sanitize-silk-keywords [matched-route]
  (rename-keys matched-route {:domkm.silk/name    :name
                              :domkm.silk/pattern :pattern
                              :domkm.silk/routes  :routes
                              :domkm.silk/url     :url}))

And that’s the core of it. You now have to change URLs in the view to be /about  and / instead of /#/about and /#/ respectively.

Generating URLs

The whole point of using silk was to not hard-code the URLs, for that I added this function to routes.cljs:

(def url-for (partial silk/depart routes))

which allowed me to replace the previous URLs with:

(routes/url-for :about)

and

(routes/url-for :home)

This works fine until you try to re-load the about page and you get a 404 Not Found error. This is because the server doesn’t know about the /about  URL or any other URL the client-side might support. What you need to do is just send serve the application no matter what the URL and let the client do the dispatching (with any exceptions you might have for APIs and whatnot).

I’m actually not quite sure how you do it with a figwheel-only project, probably by setting a ring handler. With compojure I ended up creating a route like this:

(routes (ANY "*" [] (layout/render "app.html")))

Something else you might consider is passing the whole matched-route  structure to the handler, so that the handler has access to path and query attributes.

And that’s it! Now you have beautiful bi-directional no-hash client-side routing.

Summary

For your reference, the full routes.cljs :

(ns projectx.routes
  (:require [clojure.set :refer [rename-keys]]
            [domkm.silk :as silk]
            [pushy.core :as pushy]
            [re-frame.core :as re-frame]))

(def routes (silk/routes [[:home [[]]]
                          [:about [["about"]]]]))

(defn- parse-url [url]
  (silk/arrive routes url))

(defn- sanitize-silk-keywords [matched-route]
  (rename-keys matched-route {:domkm.silk/name    :name
                              :domkm.silk/pattern :pattern
                              :domkm.silk/routes  :routes
                              :domkm.silk/url     :url}))

(defn- dispatch-route [matched-route]
  (let [matched-route (sanitize-silk-keywords matched-route)
        panel-name (keyword (str (name (:name matched-route)) "-panel"))]
    (re-frame/dispatch [:set-active-panel panel-name])))

(defn app-routes []
  (pushy/start! (pushy/pushy dispatch-route parse-url)))

(def url-for (partial silk/depart routes))

and the full views.cljs:

(ns projectx.views
    (:require [re-frame.core :as re-frame]
              [projectx.routes :as routes]))

;; --------------------
(defn home-panel []
  (let [name (re-frame/subscribe [:name])]
    (fn []
      [:div (str "Hello from " @name ". This is the Home Page.")
       [:div [:a {:href (routes/url-for :about)} "go to About Page"]]])))

(defn about-panel []
  (fn []
    [:div "This is the About Page."
     [:div [:a {:href (routes/url-for :home)} "go to Home Page"]]]))

;; --------------------
(defmulti panels identity)
(defmethod panels :home-panel [] [home-panel])
(defmethod panels :about-panel [] [about-panel])
(defmethod panels :default [] [:div])

(defn main-panel []
  (let [active-panel (re-frame/subscribe [:active-panel])]
    (fn []
      (panels @active-panel))))

4 responses to “No-hashes bidirectional routing in re-frame with silk and pushy”

  1. Paul Avatar

    Just a small correction – Pedestal routes, the creation of routes, and even the router are all programmed against protocols and are fully extensible.

    1. Pablo Fernández Avatar

      If you are referring to the table, we just copied it from bidi’s web site, so it probably has the same issue.

  2. Pablo Fernández Avatar

    Be aware of this issue when mixing Silk and Pushy: https://github.com/kibu-australia/pushy/issues/10

  3. kennethkalmer Avatar

    Thanks for this great post, I learned a lot by following along and implementing this.

    I did however need to do it in a figwheel-only project, so I went ahead and documented the small changes that were required. The post is published at http://opensourcery.co.za/2016/05/27/smooth-client-side-routing-in-a-figwheel-only-project/

Leave a Reply

Hi, I'm Pablo, this is my web site. You can follow me or connect with me:

Or get new content delivered directly to your inbox.

Join 4,025 other subscribers

I'm writing a book

Stack of copies of How to Hire and Manage Remote Teams

How to Hire and Manage Remote Teams, where I distill all the techniques I've been using to build and manage distributed teams for the past 10 years.

I write about:

announcement blogging book book review book reviews books building Sano Business C# Clojure ClojureScript Common Lisp database Debian Esperanto Git history idea Java Kubuntu Lisp music Non-Fiction OpenID programming Python Rails rant re-frame release Ruby Ruby on Rails Sano science science fiction security self-help Star Trek startups technology Ubuntu video web Windows WordPress

I've been writing for a while:

%d bloggers like this: