Dashing with just the HTML and the CSS?

[shuhaowu]

Is it possible to get a minimal setup with just the HTML, CSS, and some JavaScript? I don't need to fetch the events and what not.

The alternative would be specifying a set of server APIs that needs to be implemented for the client side app to use.

[pushmatrix]

Dashing is currently relying on Sprockets to compile all the coffeescript assets and provide it in 1 single file. It also does some nifty things like making the widget html files available at /views/[widget_name].html.

The real way of doing this without a backend would be to handle includes using something like RequireJS, and compile coffeescript assets manually.

In the meantime, (and as a proof of concept) I just copied the generated application.js and application.css files and placed them in a repo:

DEMO: http://pushmatrix.github.io/mini-dashing/ https://github.com/pushmatrix/mini-dashing

You can play around with the widgets with something like:

Dashing.widgets.welcome[0].receiveData({text:"WOOHOO IT WORKS"})

[shuhaowu]

Looks good! I tried (unsuccessfully) ripping this out too, but this is great!

[shuhaowu]

So are there a general outline on how to compile the assets manually? I'm not too familiar with that domain yet or how the code is structured as of right now.

It would be really nice if Dashing could be a standalone batmanjs project without additional backends so that one can just extend widgets easily and make other backends for it. See: https://github.com/shuhaowu/monitoring-dashboard

[pushmatrix]

That is the idea for Dashing 2.0, to be able to support different backends.

In the meantime, include the following scripts in your html (in this order)

• jquery
• es5-shim
• batman
• batman.jquery
• dashing.js (compiled from dashing.coffee.)
  You can find these in (https://github.com/Shopify/dashing/tree/master/javascripts)
  Here's a link on compiling all coffeescript files in a directory (http://stackoverflow.com/questions/8817281/coffeescript-compile-all-coffee-files-in-current-directory-and-all-sub-direct)

Now you need to include each widget you want. So if you want the list widget, the meter widget, and the text widget, you would compile the list.coffee, meter.coffee and text.coffee. and require them in your html.

You will also need to include all the files in https://github.com/Shopify/dashing/tree/master/templates/project/assets/javascripts. Be sure to compile the coffeescript files.

As for css, you need to require all the files in https://github.com/Shopify/dashing/tree/master/templates/project/assets/stylesheets. For the scss ones, you can find documentation online on how to convert them. I personally use LiveReload to monitor and compile assets (if I don't have a backend doing it for me).

Next is to include all the css for the widgets. You need to compile all the individual widget scss (list.scss,etc...), and include those.

Those should be all the files you need to keep the project more maintainable (and less of a giant blob of js).

[terraboops]

Is this still the idea for Dashing 2.0? :+1:

[tijszwinkels]

Thank you for the helpful pointers!

I needed this as well, so I spend some time picking Dashing apart.

I created a new project on github. It's keeping everything nice and separated, and uses gulp and browserify to compile all the resources into something that can be uploaded to a webserver.

It's available here: https://github.com/Iperity/Dashing-browser

[razb]

We already had a real-time Express application utilizing websockets and didn't want to manage another messaging/events layer. We ended up integrating the Express app with dashing js and using the existing primus library for both.

It was pretty straight forward. The clients connect to specific channels for each widget. As an example for the 'welcome' text widget:

primus = Primus.connect()
welcome = primus.channel('welcome')
welcome.on "data", (event) ->
   Dashing.widgets.welcome[0].receiveData event

and the jobs on the server just need to use primus instead of batman:

welcome.write({text: data });

[RaresSalcudean]

@pushmatrix Thank you for the mini-dasbhoard repo, I was really looking for something like this. Is there any chance we can have the mini-dasbhoard without Batman.js? I'm really looking only for the basic dasbhoard with widgets, but no binding, only pure css html and js that is required to have the minimal functionality. Thank you!