Example of a real-world ClojureScript web application

[Filip de Waard]

I'm working on Vix, which is a document repository and content
management system written in Clojure with a CouchDB backend. After the
announcement on July 23 I immediately got excited about ClojureScript
and the Google Closure toolkit, so I dropped the existing Backbone.js
and jQuery code and rewrote all client-side functionality in
ClojureScript. Despite (or maybe because of) the fact that the
functionality is still very minimal I wanted to share this code as an
example of ClojureScript in the wild.

Be warned that:
- this is not perfect, clean example code written by a ClojureScript
expert (in several places I've used hacks and shortcuts to make things
work), but hopefully at least a starting point for others working on
similar functionality,
- you should read the installation instructions carefully (e.g. there
is still a hardcoded path in src/vix/db.clj at the time of this
writing, which I hope to correct in the near future),
- I'm actively developing this application, so things will change and
new features will be added frequently,
- the application isn't done yet, although it has a working prototype.

I'm concentrating on adding features that will allow users to manage
feeds (currently "blog" is the default feed), add media files like
images and to manage users. I had trouble getting unit testing to work
properly for the ClojureScript part of the application, so I
grudgingly wrote it using a non-TDD approach. Retrofitting unit tests
into the ClojureScript part is a priority. The user interface is also
lacking some bells and whistles that I had previously implemented in
jQuery, but still have to rewrite using Google Closure. Eventually, I
want to turn Vix into a commercial SaaS offering, with a focus on
performance (e.g. Amazon CloudFront support), scalability and webshop
functionality. The application itself, however, will be perpetually
available as open source software, because I'm committed to sharing my
code.

Here is the GitHub page for Vix: https://github.com/fmw/vix

This is not a "launch post" for Vix, because we're not ready for
supporting typical end-users yet, but I hope that the code will be
useful to other developers in the meantime. I'm also happy to receive
any feedback (positive as well as negative) and answer questions. You
can reply to this post, but if you prefer to contact me privately you
can also find my contact information on Github (https://github.com/
fmw).

Sincerely,

F.M. (Filip) de Waard / fmw

P.S. I'd like to thank the ClojureScript developers. There are
surprisingly few glitches considering that the project has only just
been released. The language is incredibly well designed and a pleasure
to use. Thanks for making client-side development more enjoyable!

[David Jagoe]

Thank you for making this available!

> --
> You received this message because you are subscribed to the Google
> Groups "Clojure" group.
> To post to this group, send email to clo...@googlegroups.com
> Note that posts from new members are moderated - please be patient with your first post.
> To unsubscribe from this group, send email to
> clojure+u...@googlegroups.com
> For more options, visit this group at
> http://groups.google.com/group/clojure?hl=en

[Scott Jaderholm]

I haven't read the code yet but I have a few questions:
Do you miss backbone.js? Are you going to use it with cljs?
Have you shared any code between the frontend and backend? As in run the same functions on both sides. If so, are you duplicating the code in both .clj and .cljs or doing something else?
How has the debugging/error notification experience been?

Scott

[Timothy Washington]

Good on you. I've been looking to find a reliable way to have Javascript unit testing run in a v8 (or any JS) shell. I've tried Jasmine and am now trying Google Closure's unit testing framework, but have so far come up short. 

Have you come up with anything that works? For now, i'm just having the tests run in the browser. But trying with Nodejs is the next step. 

Keep it up 

Tim 

On Tue, Aug 9, 2011 at 8:53 PM, Filip de Waard <f...@vix.io> wrote:

[Filip de Waard]

On Wed, Aug 10, 2011 at 11:22 PM, Scott Jaderholm <jade...@gmail.com> wrote:

I haven't read the code yet but I have a few questions:
Do you miss backbone.js? Are you going to use it with cljs?

I'm using 100% ClojureScript, with Google Closure as the only external dependency. I don't miss Backbone.js, because it's design makes less sense with ClojureScript than it does with JavaScript (i.e. it is based on the JavaScript OOP paradigm). I used what I learned from Backbone.js  while writing my ClojureScript code. I copied the idea of a routes function that generates views based on the URI. I use this routing method to generate views without reloading the page, using an event listener and the goog.history.Html5History module. One of my favorite aspects of Backbone.js is Underscore.js, which brings Lisp functions like filter, map and reduce to JavaScript, but this is clearly redundant in ClojureScript. Backbone.js is not something I would use with ClojureScript, but it is definitely designed by smart people and it is a useful source of inspiration when building client-side applications.

 

Have you shared any code between the frontend and backend? As in run the same functions on both sides. If so, are you duplicating the code in both .clj and .cljs or doing something else

Vix has three quite separate components: the visitor-facing presentation layer (flat HTML pages that are used as Enlive templates and CSS), the Clojure backend (basically a document repository with a JSON API) and the ClojureScript client-side code. The client-side code, including it's templates, is fully written using the Google Closure tools and ClojureScript, so there is almost no overlap. Off the top of my head I can think of a single utility function that I copied between the ClojureScript and Clojure parts. As far as I'm aware it is not possible to share code by other means than copying yet, because there are some practical barriers for interoperability.

How has the debugging/error notification experience been?

The stack traces aren't always very informative, so some things took a while to figure out. This was usually my own fault, because I skimmed over something important in the docs, for example, but it wouldn't hurt if it was easier to figure out what was going wrong. I suggest using the generated JavaScript as the starting point for debugging. My process is pretty much to check if the  JavaScript output looks correct and use the debuggers in Firefox and Gnome if that doesn't help. I've also used the occasional (js/console.log) call and even edited the generated JavaScript on occasion to figure out the root of a particularly nasty problem.

- fmw

[Filip de Waard]

On Thu, Aug 11, 2011 at 4:03 AM, Timothy Washington <twas...@gmail.com> wrote:

Good on you. I've been looking to find a reliable way to have Javascript unit testing run in a v8 (or any JS) shell. I've tried Jasmine and am now trying Google Closure's unit testing framework, but have so far come up short. 

 

Have you come up with anything that works? For now, i'm just having the tests run in the browser. But trying with Nodejs is the next step. 

I don't have it at hand, right now, because I'm not at home, but I think the Google Closure book suggests using Selenium to automatically run the tests. Alternatively, using script/repljs might work. Do you have the tests running a browser window already? If so, I'd love to have a look at how you did that, because I haven't gotten that far yet myself. I'm going to give this another shot soon, because I've learned quite a lot about ClojureScript since I last tried to get testing to work.

-fmw 

[Linus Ericsson]

You get Selenium running by using the clj-webdriver [1], thanks to Semperos for that one!

[1] https://github.com/semperos/clj-webdriver

/Linus

2011/8/11 Filip de Waard <f...@vix.io>

[Timothy Washington]

I was able to get Jasmine tests running in the browser. You really just have to follow the pattern in Quickstart, and good.require the needed namespaces. I imagine Google Closure's testing lib will work in the same way. I'll let you know how far I get with automated testing in a nodejs shell. 

Tim Washington 

twas...@gmail.com 

416.843.9060 

[Raju Bitter]

Thanks for sharing the code with us, Filip. I have one additional
question: Which parts of ClojureScript were documented well enough for
you, and where was it difficult to find enough information on how to
implemented certain features?

Raju

[Filip de Waard]

On Wed, Aug 10, 2011 at 11:42 PM, Raju Bitter <rajub...@googlemail.com> wrote:

Thanks for sharing the code with us, Filip. I have one additional
question: Which parts of ClojureScript were documented well enough for
you, and where was it difficult to find enough information on how to
implemented certain features?

There is always some room for improvement, but in my experience the documentation is sufficient. If I had to come up with a suggestion it would be an overview of ClojureScript specific functions like (js->clj) and (js-obj)) and implementation details. I'm happy to see the ClojureScript ecosystem growing this fast and to see the increasing amount of information and tips from people on this list, blogs, et cetera. With a new project like ClojureScript there is always a certain amount of polish that still needs to be applied, but I can't say that a lack of documentation has hindered my productivity in any way.

-fmw

[Raju Bitter]

Thanks for your response, Filip. That means for such a new technology
the documentation is very good already. And the community can jump in
and improve it until the first stable release. Good to know!

Raju

[Timothy Washington]

Btw, I found a PDF version online, of "Closure: The Definitive Guide".

There's also the online docs, and a video overview by one of the main authors (Michael Bolin, I think). I found watching the video really helped me get the gist of Google Closure. 

Hope this helps with documentation. 

Tim Washington 

twas...@gmail.com 

416.843.9060 

[pmbauer]

Bit of copyright violation, that.
If you want the Closure e-book, get a licensed copy. We should encourage legal means of obtaining information rather than post links to hosts that aren't authorized to distribute materials.

[Timothy Washington]

Oops, sorry 'bout that. +1 on what you said. 

Tim 

On Sun, Aug 14, 2011 at 4:31 AM, pmbauer <paul.mich...@gmail.com> wrote:

Bit of copyright violation, that.
If you want the Closure e-book, get a licensed copy.  We should encourage legal means of obtaining information rather than post links to hosts that aren't authorized to distribute materials.

--