{"id":12537,"date":"2015-09-17T01:00:00","date_gmt":"2015-09-17T00:00:00","guid":{"rendered":"http:\/\/pjagielski.github.com\/2015\/09\/17\/clojure-web-dev-state"},"modified":"2022-08-03T09:02:58","modified_gmt":"2022-08-03T07:02:58","slug":"clojure-web-development-state-of-the-art","status":"publish","type":"post","link":"https:\/\/touk.pl\/blog\/2015\/09\/17\/clojure-web-development-state-of-the-art\/","title":{"rendered":"Clojure web development – state of the art"},"content":{"rendered":"

It\u2019s now more than a year that I\u2019m getting familiar with Clojure and the more I dive into it, the more it becomes the language<\/strong>. Once you defeat the \u201cparentheses fear\u201d, everything else just makes the difference: tooling, community, good engineering practices. So it\u2019s now time for me to convince others. In this post I\u2019ll try to walktrough a simple web application from scratch to show key tools and libraries used to develop with Clojure in late 2015.<\/p>\n

Note for Clojurians<\/strong>: This material is rather elementary and may be useful for you if you already know Clojure a bit but never did anything bigger than hello world application.<\/p>\n

Note for Java developers<\/strong>: This material shows how to replace Spring, Angular, grunt, live-reload with a bunch of Clojure tools and libraries and a bit of code.<\/p>\n

The repo with final code and individual steps is here<\/a>.<\/p>\n

Bootstrap<\/h2>\n

I think all agreed that component<\/a> is the industry standard for managing lifecycle of Clojure applications. If you are a Java developer you may think of it as a Spring (DI) replacement – you declare dependencies between \u201ccomponents\u201d which are resolved on \u201csystem\u201d startup. So you just say \u201cmy component needs a repository\/database pool\u201d and component library \u201cinjects\u201d it for you.<\/p>\n

To keep things simple I like to start with duct<\/a> web app template. It\u2019s a nice starter component application following the 12-factor<\/a> philosophy. So let\u2019s start with it:<\/p>\n

lein new duct clojure-web-app +example<\/pre>\n
The +example<\/code> parameter tells duct to create an example endpoint with HTTP routes – this would be helpful. To finish bootstraping run lein setup<\/code> inside clojure-web-app<\/code> directory.<\/p>\n
Ok, let\u2019s dive into the code. Component and injection related code should be in system.clj<\/code> file:<\/p>\n
\n
(defn new-system [config] (let [config (meta-merge base-config config)] (-> (component\/system-map :app (handler-component (:app config)) :http (jetty-server (:http config)) :example (endpoint-component example-endpoint)) (component\/system-using {:http [:app] :app [:example] :example []}))))<\/pre>\n
 <\/p>\n<\/div>\n
In the first section you instantiate components without dependencies, which are resolved in the second section. So in this example, \u201chttp\u201d component (server) requires \u201capp\u201d (application abstraction), which in turn is injected with \u201cexample\u201d (actual routes). If your component needs others, you just can get then by names (precisely: by Clojure keywords).<\/p>\n
To start the system you must fire a REPL – interactive environment running within context of your application:<\/p>\n
lein repl<\/code><\/p>\n
After seeing prompt type (go)<\/code>. Application should start, you can visit http:\/\/localhost:3000<\/a> to see some example page.<\/p>\n
A huge benefit of using component approach is that you get fully reloadable application. When you change literally anything<\/strong> – configuration, endpoints, implementation, you can just type (reset)<\/code> in REPL and your application is up-to-date with the code. It\u2019s a feature of the language, no JRebel, Spring-reloaded needed.<\/p>\n
Adding REST endpoint<\/h2>\n
Ok, in the next step let\u2019s add some basic REST endpoint returning JSON. We need to add 2 dependencies in project.clj<\/code> file:<\/p>\n
\n
:dependencies ... [ring\/ring-json \"0.3.1\"] [cheshire \"5.1.1\"]<\/pre>\n<\/div>\n
Ring-json<\/a> adds support for JSON for your routes (in ring it\u2019s called middleware) and cheshire<\/a> is Clojure JSON parser (like Jackson in Java). Modifying project dependencies if one of the few tasks that require restarting the REPL, so hit CTRL-C and type lein repl<\/code> again.<\/p>\n
To configure JSON middleware we have to add wrap-json-body<\/code> and wrap-json-response<\/code> just before wrap-defaults<\/code> in system.clj<\/code>:<\/p>\n
\n
(:require ... [ring.middleware.json :refer [wrap-json-body wrap-json-response]]) (def base-config {:app {:middleware [[wrap-not-found :not-found] [wrap-json-body {:keywords? true}] [wrap-json-response] [wrap-defaults :defaults]]<\/pre>\n<\/div>\n
And finally, in endpoint\/example.clj<\/code> we must add some route with JSON response:<\/p>\n
\n
(:require ... [ring.util.response :refer [response]])) (defn example-endpoint [config] (routes (GET \"\/hello\" [] (response {:hello \"world\"})) ...<\/pre>\n<\/div>\n
Reload app with (reset)<\/code> in REPL and test new route with curl<\/code>:<\/p>\n
\n
curl -v http:\/\/localhost:3000\/hello < HTTP\/1.1 200 OK < Date: Tue, 15 Sep 2015 21:17:37 GMT < Content-Type: application\/json; charset=utf-8 < Set-Cookie: ring-session=37c337fb-6bbc-4e65-a060-1997718d03e0;Path=\/;HttpOnly < X-XSS-Protection: 1; mode=block < X-Frame-Options: SAMEORIGIN < X-Content-Type-Options: nosniff < Content-Length: 151 * Server Jetty(9.2.10.v20150310) is not blacklisted < Server: Jetty(9.2.10.v20150310) < * Connection #0 to host localhost left intact {\"hello\": \"world\"}<\/pre>\n<\/div>\n
It works! In case of any problems you can find working version in this commit<\/a>.<\/p>\n
Adding frontend with figwheel<\/h2>\n
Coding backend in Clojure is great, but what about the frontend? As you may already know, Clojure could be compiled not only to JVM bytecode, but also to Javascript. This may sound familiar if you used e.g. Coffeescript. But ClojureScript philosophy is not only to provide some syntax sugar, but improve your development cycle with great tooling and fully interactive development. Let\u2019s see how to achieve it.<\/p>\n
The best way to introduce ClojureScript to a project is figweel<\/a>. First let\u2019s add fighweel plugin and configuration to project.clj<\/code>:<\/p>\n
\n
:plugins ... [lein-figwheel \"0.3.9\"]<\/pre>\n<\/div>\n
And cljsbuild configuration:<\/p>\n
\n
:cljsbuild {:builds [{:id \"dev\" :source-paths [\"src-cljs\"] :figwheel true :compiler {:main \"clojure-web-app.core\" :asset-path \"js\/out\" :output-to \"resources\/public\/js\/clojure-web-app.js\" :output-dir \"resources\/public\/js\/out\"}}]}<\/pre>\n<\/div>\n
In short this tells ClojureScript compiler to take sources from src-cljs<\/code> with figweel<\/code> support and put resulting JavaScript into resources\/public\/js\/clojure-web-app.js<\/code> file. So we need to include this file in a simple HTML page:<\/p>\n
<\/div>\n
To serve this static file we need to change some defaults and add corresponding route. In system.clj<\/code> change api-defaults<\/code> to site-defaults<\/code> both in require section and base-config<\/code> function. In example.clj<\/code> add following route:<\/p>\n
\n
(GET \"\/\" [] (io\/resource \"public\/index.html\"))<\/pre>\n<\/div>\n
Again (reset)<\/code> in REPL window should reload everything.<\/p>\n
id=\"main\"><\/pre>\n
But where is our ClojureScript source file? Let\u2019s create file core.cljs<\/code> in src-cljs\/clojure-web-app<\/code> directory:<\/p>\n
\n
(ns ^:figwheel-always clojure-web-app.core) (enable-console-print!) (println \"hello from clojurescript\")<\/pre>\n<\/div>\n
Open another terminal and run lein figwheel<\/code>. It should compile ClojureScript and print \u2018Prompt will show when figwheel connects to your application\u2019. Open http:\/\/localhost:3000<\/code>. Fighweel window should prompt:To quit,\u00a0type<\/span>: :cljs\/quit cljs.user=<\/span>><\/p>\n
To quit, type: :cljs\/quit cljs.user=><\/pre>\n
<\/div>\n
Type (js\/alert \"hello\")<\/code>. Boom! If everything worked you should see and alert in your browser. Open developers console in your browser. You should see hello from clojurescript<\/code> printed on the console. Change it in core.cljs<\/code> to (println \"fighweel rocks\")<\/code> and save the file. Without reloading the page your should see updated message. Fighweel rocks! Again, in case of any problems, refer to this commit<\/a>.<\/p>\n
UPDATE:<\/strong> In the latest duct<\/a> release, there is an +cljs<\/code> option which make it possible to use reloaded repl and fighweel in a single REPL. Highly recommended!<\/p>\n
In the next post I\u2019ll show how to fetch data from MongoDB, serve it with REST to the browser and write ReactJs\/Om components to render it. Stay tuned!<\/p>\n","protected":false},"excerpt":{"rendered":"It’s now more than a year that I’m getting familiar with Clojure and the more I dive into it, the more it becomes the language. Once you defeat the “parentheses fear”, everything else just makes the difference: tooling, community, good engineering practices. So it’s now time for me to convince others. In this post I’ll try to walktrough a simple web application from scratch to show key tools and libraries used to develop with Clojure in late 2015. \nNote for Clojurians: This material is rather elementary and may be useful for you if you already know Clojure a bit but never did anything bigger than hello world application. \nNote for Java developers: This material shows how to replace Spring, Angular, grunt, live-reload with a bunch of Clojure tools and libraries and a bit of code.\nThe repo with final code and individual steps is here.\nBootstrap\nI think all agreed that component is the industry standard for managing lifecycle of Clojure applications. If you are a Java developer you may think of it as a Spring (DI) replacement – you declare dependencies between “components” which are resolved on “system” startup. So you just say “my component needs a repository\/database pool” and component library “injects” it for you. \nTo keep things simple I like to start with duct web app template. It’s a nice starter component application following the 12-factor philosophy. So let’s start with it:\nlein new duct clojure-web-app +example\nThe +example parameter tells duct to create an example endpoint with HTTP routes – this would be helpful. To finish bootstraping run lein setup inside clojure-web-app directory.\nOk, let’s dive into the code. Component and injection related code should be in system.clj file:\n\n(defn new-system [config]\r\n  (let [config (meta-merge base-config config)]\r\n    (-> (component\/system-map\r\n         :app  (handler-component (:app config))\r\n         :http (jetty-server (:http config))\r\n         :example (endpoint-component example-endpoint))\r\n        (component\/system-using\r\n         {:http [:app]\r\n          :app  [:example]\r\n          :example []}))))\n\nIn the first section you instantiate components without dependencies, which are resolved in the second section. So in this example, “http” component (server) requires “app” (application abstraction), which in turn is injected with “example” (actual routes). If your component needs others, you just can get then by names (precisely: by Clojure keywords).\nTo start the system you must fire a REPL – interactive environment running within context of your application:\nlein repl\nAfter seeing prompt type (go). Application should start, you can visit http:\/\/localhost:3000 to see some example page.\nA huge benefit of using component approach is that you get fully reloadable application. When you change literally anything – configuration, endpoints, implementation, you can just type (reset) in REPL and your application is up-to-date with the code. It’s a feature of the language, no JRebel, Spring-reloaded needed.\nAdding REST endpoint\nOk, in the next step let’s add some basic REST endpoint returning JSON. We need to add 2 dependencies in project.clj file:\n\n:dependencies\r\n ...\r\n  [ring\/ring-json \"0.3.1\"]\r\n  [cheshire \"5.1.1\"]\n\nRing-json adds support for JSON for your routes (in ring it’s called middleware) and cheshire is Clojure JSON parser (like Jackson in Java). Modifying project dependencies if one of the few tasks that require restarting the REPL, so hit CTRL-C and type lein repl again.\nTo configure JSON middleware we have to add wrap-json-body and wrap-json-response just before wrap-defaults in system.clj:\n\n(:require \r\n ...\r\n [ring.middleware.json :refer [wrap-json-body wrap-json-response]])\r\n\r\n(def base-config\r\n   {:app {:middleware [[wrap-not-found :not-found]\r\n                      [wrap-json-body {:keywords? true}]\r\n                      [wrap-json-response]\r\n                      [wrap-defaults :defaults]]\n\nAnd finally, in endpoint\/example.clj we must add some route with JSON response:\n\n(:require \r\n ...\r\n [ring.util.response :refer [response]]))\r\n\r\n(defn example-endpoint [config]\r\n  (routes\r\n    (GET \"\/hello\" [] (response {:hello \"world\"}))\r\n    ...\n\nReload app with (reset) in REPL and test new route with curl:\n\ncurl -v http:\/\/localhost:3000\/hello\r\n\r\n< HTTP\/1.1 200 OK\r\n< Date: Tue, 15 Sep 2015 21:17:37 GMT\r\n< Content-Type: application\/json; charset=utf-8\r\n< Set-Cookie: ring-session=37c337fb-6bbc-4e65-a060-1997718d03e0;Path=\/;HttpOnly\r\n< X-XSS-Protection: 1; mode=block\r\n< X-Frame-Options: SAMEORIGIN\r\n< X-Content-Type-Options: nosniff\r\n< Content-Length: 151\r\n* Server Jetty(9.2.10.v20150310) is not blacklisted\r\n< Server: Jetty(9.2.10.v20150310)\r\n<\r\n* Connection #0 to host localhost left intact\r\n{\"hello\": \"world\"}\n\nIt works! In case of any problems you can find working version in this commit.\nAdding frontend with figwheel\nCoding backend in Clojure is great, but what about the frontend? As you may already know, Clojure could be compiled not only to JVM bytecode, but also to Javascript. This may sound familiar if you used e.g. Coffescript. But ClojureScript philosophy is not only to provide some syntax sugar, but improve your development cycle with great tooling and fully interactive development. Let’s see how to achieve it.\nThe best way to introduce ClojureScript to a project is figweel. First let’s add fighweel plugin and configuration to project.clj:\n\n:plugins\r\n   ...\r\n   [lein-figwheel \"0.3.9\"]\n\nAnd cljsbuild configuration:\n\n:cljsbuild\r\n    {:builds [{:id \"dev\"\r\n               :source-paths [\"src-cljs\"]\r\n               :figwheel true\r\n               :compiler {:main       \"clojure-web-app.core\"\r\n                          :asset-path \"js\/out\"\r\n                          :output-to  \"resources\/public\/js\/clojure-web-app.js\"\r\n                          :output-dir \"resources\/public\/js\/out\"}}]}\n\nIn short this tells ClojureScript compiler to take sources from src-cljs with figweel support and but resulting JavaScript into resources\/public\/js\/clojure-web-app.js file. So we need to include this file in a simple HTML page:\n\n<!DOCTYPE html>\r\n<head>\r\n<\/head>\r\n<body>\r\n  <div id=\"main\">\r\n  <\/div>\r\n  <script src=\"js\/clojure-web-app.js\" type=\"text\/javascript\"><\/script>\r\n<\/body>\r\n<\/html>\n\nTo serve this static file we need to change some defaults and add corresponding route. In system.clj change api-defaults to site-defaults both in require section and base-config function. In example.clj add following route:\n\n(GET \"\/\" [] (io\/resource \"public\/index.html\")\n\nAgain (reset) in REPL window should reload everything.\nBut where is our ClojureScript source file? Let’s create file core.cljs in src-cljs\/clojure-web-app directory:\n\n(ns ^:figwheel-always clojure-web-app.core)\r\n\r\n(enable-console-print!)\r\n\r\n(println \"hello from clojurescript\")\n\nOpen another terminal and run lein fighweel. It should compile ClojureScript and print ‘Prompt will show when figwheel connects to your application’. Open http:\/\/localhost:3000. Fighweel window should prompt:\n\nTo quit, type: :cljs\/quit\r\ncljs.user=>\n\nType (js\/alert \"hello\"). Boom! If everything worked you should see and alert in your browser. Open developers console in your browser. You should see hello from clojurescript printed on the console. Change it in core.cljs to (println \"fighweel rocks\") and save the file. Without reloading the page your should see updated message. Figweel rocks! Again, in case of any problems, refer to this commit.\nIn the next post I’ll show how to fetch data from MongoDB, serve it with REST to the broser and write ReactJs\/Om components to render it. Stay tuned! \n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[594,491,71,402],"class_list":{"0":"post-12537","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-development-design","7":"tag-api","8":"tag-clojure","9":"tag-frontend","10":"tag-rest"},"_links":{"self":[{"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/posts\/12537","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/comments?post=12537"}],"version-history":[{"count":16,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/posts\/12537\/revisions"}],"predecessor-version":[{"id":14888,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/posts\/12537\/revisions\/14888"}],"wp:attachment":[{"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/media?parent=12537"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/categories?post=12537"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/tags?post=12537"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}