Tag Archives: web

Clojure on CloudFoundry

Posted on by
1

In this article, I will show you how to develop and deploy clojure web application on CloudFoundry. As you may know, CloudFoundry is an opensource PaaS backed by VMWare. Java, Ruby and Nodejs are officially supported. As a JVM language, clojure is born to be also available on this platform, although it’s not listed.

CloudFoundry accepts a .war file for Java web application deployment. So you don’t need the ring-jetty-adaptor and a procfile as heroku requires. To help your development and deployment, I strongly recommend the lein-ring plugin:

  :dev-dependencies [[lein-ring "0.5.4"]]

CloudFoundry provides backend services like mysql, redis, mongodb and more. The connection information are stored as environment variables. Here you can find a subset of them.

Take mongodb as example, connection information (host, port, username and password) are encoded as JSON, stored in environment variables. You can get them with this function:

(defn mongo-config [key]
  (if-let [services (System/getenv "VCAP_SERVICES")]
    (let [services-dict (json/read-json services false)]
      (-> services-dict
        (get "mongodb-1.8")
        first
        (get "credentials")
        (get key)))))

In the server bootstrap function, create the mongodb connection:

(defn app-init []
  (def db-conn (make-connection
                 (or (mongo-config "db") "lazypress")
                   :host (or (mongo-config "hostname") "localhost")
                   :port (or (mongo-config "port") 27017)))
  (when-not (nil? (mongo-config "username"))
    (authenticate db-conn
      (mongo-config "username")
      (mongo-config "password")))

By adding check for nil, local databased is also supported. This is pretty convenience for local development. These environment variables are consistent on all cloudfoundry application, so it’s possible to deploy the application on multiple accounts without any changes.

Then you can add your web stuff just like standard clojure web development. (If you are using compojure, place your static files under resource/public.)

Finally, package it. (Suppose your application is named as “lazypress”)

lein ring uberwar lazypress.war

Use the vmc tool to deploy it:

vmc update lazypress

For more usage about the vmc tool, you can read this article.

So you have finished deploying your clojure web application to cloudfoundry.

Backed by spring and vmware, cloudfoundry is more Java-friendly than other PaaS like heroku. You don’t have to start a Java process by yourself (“lein run” isn’t a graceful way to start your app in product environment). And you don’t have to worry about your web container settings (configure jetty with limited options via ring-jetty-adaptor). All you have to do is package the application as a portable war file, which you can deploy to tomcat, glassfish, and also cloudfoundry. The vmc tool could detect you war file and handle it correctly.

Weekend Project: LazyPress

Posted on by
2

发布一个典型的weekend project, 名字叫做LazyPress.顾名思义,这是一个在线的写作系统. 取名Lazy, 除了因为它用Clojure写成,更因为他的简单: 没有繁琐的注册,没有繁琐的分类tag,没有繁琐的格式化,无论是使用还是开发都力求做到最简单.
LazyPress采用Mozilla刚刚发布的BrowserID. 技术作为账号系统, 用户只需要在首次登录后提供一个ID即可(原本这一步也可以省略, 但是为了保护您的邮箱隐私, 现在需要一个LazyPress专用的ID). 这样LazyPress本身不存储用户的密码,也简化了用户账号管理的代价. BrowserID的登录流程非常简单, 速度也比传统的OpenID和OAuth要快, 用户体验要比多次跳转好很多.
LazyPress使用Markdown进行文本格式化, 简单的编辑器可以支持绝大多数格式的要求. 另外,在浏览器后台LazyPress使用HTML5 LocalStorage技术自动保存用户的文本草稿, 如果用户没有成功发布, 可以在下次浏览器打开时进行恢复.

LazyPress后台存储采用mongodb. 正是mongodb的schema free特性降低了项目功能重构的成本, 促进了人们更快更频繁地优化产品的模型. 这应该是文档型数据库之于传统关系型数据库最大的优势. (犹如git之于svn, 开分支的成本要低得多, 看似是一个普通的功能改进, 实则鼓励促进了开发人员通过开分支实现自己的修改)
LazyPress运行在最近发布的compojure 1.0.0和ring 1.0.0上, 打包为标准的Java web应用直接部署在cloudfoundry上. 前端继续使用的是我偏爱的Mootools库, 因为使用了很多新的浏览器技术, 所以目前只能保证在最新的Firefox和Chromium/Chrome上正常使用.

Fork me on github: http://github.com/sunng87/lazypress

使用Enlive作为模板引擎

Posted on by
Reply

在所有的clojure web开发例子里，对模板的介绍都很少。很多的简单例子都是以hiccup作为页面生成的手段。hiccup是个clojure的html DSL，例子里用这样的DSL生成页面确实很酷，可是他是real world吗，当然不是。

好在clojure世界里早就有了enlive，它不仅是一个通过css selector解析html的库，本身也可以作为模板引擎应用在web开发中。我不知道这种通过css selector的方式是否是enlive首创，不过他实在是非常新颖独特，而且平滑了页面设计和程序的集成。

例如这样一个模板 index.html：

<div id="cc">Sample Text</div>

在clojure程序中，使用enlive的deftemplate

(deftemplate index "index.html"
  [ctx]
  [:div#cc] (content (:data ctx)))

在控制器里，可以很MVC地渲染页面

(index {:data "rendered text"})

除了content用于渲染文本，还有html-content可以渲染含html标签的内容，以及set-attr用来修改页面元素的属性。

和传统的模板引擎相比，最大的不同是enlive里没有嵌入模板的直观的控制流，没有循环和条件判断，但是并非不可实现。

循环输出一组list

页面 list.html

<ul id="the-list">
<li class="list-item"></li>
</ul>

定义一个enlive的snippet

(defsnippet item-model "page.html" [:.list-item]
  [ctx]
  [:.list-item] (content (:data ctx)))

在页面模板里

(deftemplate list-page "list.html"
  [ctx]
  [:ul#the-list] (content (map item-model (:some-list ctx))))

这样在页面里列表项会被循环输出，而在页面设计时这里可以放任意个li，并且直接交给后台作为模板。

条件判断

页面，设计时显示所有的内容 msg.html

<span id="msg">只在一定条件下显示</span>

在模板中通过clojure的if进行判断

(deftemplate msg "msg.html"
  [ctx]
  [:span#msg] (if (:show ctx) identity (html-content "")))

解决了这两个问题，基本上用enlive作为模板引擎就没有障碍了。不过enlive也有一点小问题，其一可能是性能的问题，方便的selector显然要比传统的模板语言消耗更多的CPU。另外，在开发过程里，页面文件在服务器启动后不能热加载，修改页面必须重启ring才能看到。也许有时间的话，可以给它加一个reload选项。

HeatCanvas hits 1.0, and public available

Posted on by
8

As described in Wikipedia, a heat map is a graphical representation of data in a two-dimensional table. HeatCanvas enables heat map on HTML5 canvas. With HeatCanvas, you can visualize your data on modern web browser without server-side support.

HeatCanvas is based on the prototype I wrote 15 months ago. I just rewrite the whole with WebWorker API to keep user away from UI frozen and annoying slow-script warning. HeatCanvas is implemented as pixel based, so the image quality is great.

The API is rather simple. There are only three steps to create a basic heat map.

1. Create the heat map object:

var heatmap = new HeatCanvas('canvasId');

2. Add some data to heat map:

heatmap.push(223, 98, 10); // x,y and value for this point

3. Render it:

heatmap.render();

In contrast to the base API, HeatCanvas also supports flexible options to customize the rendering. Even custom colour scheme is allowed. You can refer to the doc for detail.

And for your convenience, we have a GoogleMap plugin, HeatCanvasOverlayView, that wraps HeatCanvas. You can use it in your GoogleMap application.

For live demos, you can find at:
http://sunng87.github.com/heatcanvas/

As always, the project is hosted on github:
https://github.com/sunng87/heatcanvas .

The three javascript files are only necessary in your application, thus, please ignore the htmls in your deployment. Any feedback is welcomed and also please kindly let me know your application using this API.