8

I'm setting out to develop a JavaScript web application for visualization, featuring bookmarking of various graphs with annotations etc.
A typical example would be: Given a url state, show two SVG graphs and a time slider for manipulation together with some informative annotations placed out here and there.

Traditionally (and not having written JS for some time), I'd try some sort of modular JS approach:

src   
   data
   chart
       chartType1
       chartType2
       chartType3
   layoutManager
   stateManager
   utils
lib
   d3?
   backbone?
   jquery?

... breaking out the data handling, some utility functions, state & layout manager etc.

But with a plethora of libraries out there, perhaps I should hold my horses and try a new approach?

Code organization?
- Like above or more MVC like?
- Any specific patterns that would be helpful?
(pseudocode is much appreciated)

State handling/Models?
- Backbone.js
- JavaScriptMVC

Views?
- Are there any good examples of JS vis applications using SVG libraries (D3, Raphaël etc.) together with an mvc framework?

Compiler/minifier?
- Google Closure Compiler
- Jammit

IDE?
- Aptana Studio 3
- Netbeans
- Other?

Desktop version? (criteria: data storage, updatable etc.)
- AIR
- Chromium Embedded
- XULrunner
- Titanium appcelerator
- other options?

I'm sorry that the scope of this question is rather wide, but I shall consider it answered if insight into any of these domains is gained. So please help me choose ...

7
  • 2
    This is more like a philosophical startpoint then a question :) Anyway - I like it. I used backbone.js & raphäel.js together in a project hosted on appengine with python: ichbinadrian.ch/blog/2011/04/29/maps-a-decentralised-mindmap - all the code is on github as well, maybe that helps.
    – user56725
    Commented May 4, 2011 at 6:02
  • I can tell you that backbone.js is really the backbones. It's the most bare Javascript MVC framework without any fancy widgets and stuff. And it does what it does very good.
    – user56725
    Commented May 4, 2011 at 6:04
  • Thanks for sharing monkee - I'll download the project from github and surely learn a number of things. My main concern is whether I should change the JS approach completely trying to be true to the mvc framework of choice?
    – dani
    Commented May 4, 2011 at 9:42
  • If you go with backbone.js & jQuery you'll have all in one file. Data & state will be covered by backbone. Layout & utils by jQuery. I'm not a master js coder but I could get into the whole thing quite fast and I'm happy with it. It's clean and tidy.
    – user56725
    Commented May 4, 2011 at 9:51
  • Be sure to check out raphäel.js 2.0: raphaeljs.com/2.0 & source here: github.com/DmitryBaranovskiy/raphael/tree/2.0 since it has some nice new features
    – user56725
    Commented May 4, 2011 at 9:53

2 Answers 2

1

If you already know MVC really well, you could do great with Backbone. There were just so many unknowns with how to organize frontend javascript, we went with JavascriptMVC, which makes a lot of the decisions for you.

Not sure why I would use an IDE.. TextMate & console work great for me. NetBeans looked good when I was playing with it. JetBrains RubyMine is the highest quality and by far the best IDE, but it is commercial.

EDIT Yes, JMVC is not worth the trouble for what it provides. Backbone is elegant and simple. The only issue is if you are fairly new to code structuring, since you must define the structure of your code. If you are using rails, just copy the organization of your rails app: routers/ views/ templates/ models/

And a separate file for each class, of course. Then use something to require everything, Sprockets if you're on Rails 3.1 or really like it, or Jammit if you're on 3.0.x.

If you use coffeescript, just realize that your code is probably wrapped in a top-level closure, so if you'll either have to add your classes into a top-level hash, or declare them as window.Classname.

(Actually, "this" is "window" at the top level, so you can declare it as: class @Classname )

Good luck!

3
  • I would also recommend JetBrains WebStorm if you dont need Ruby or RoR
    – Raynos
    Commented Jun 15, 2011 at 8:02
  • 1
    Having worked with JavascriptMVC for some time, I can unequivocally say, go with backbone if you are using a backend system with decent js asset management. I ended up hacking StealJS to be a no-op and manually including all of JMVC's libraries with Jammit, because JMVC's Java-based compiler takes forEVER and its coffeescript plugin breaks after a certain number of files.
    – Duke
    Commented Jul 27, 2011 at 23:40
  • that should be a re-vised edit/update to your answer telling us your experiences one month in.
    – Raynos
    Commented Jul 27, 2011 at 23:43
0

Code organization? - I do MVC like in rails (app/views, helpers, controllers, model) - framework should be grouped together IMO

State handling/Models? - Backbone.js definitely.

Views? - I don't know about vis library. For general backbone views and templating I built this https://github.com/juggy/backrub which takes care of updating the views based on events from your model/views. It saves a lot of glue code.

Compiler/minifier? - Google Closure Compiler - Jammit

I use Jammit with closure compiler as the backend. Jammit lets you group/break files efficiently.

IDE? Up to you, the lighter the better.

Desktop version? (criteria: data storage, updatable etc.) With some config you can now run web apps locally. I think you can have a look at that instead.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.