Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaScript visualization application - code organization, backbone mvc, desktop version etc

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 ...

like image 368
dani Avatar asked May 03 '11 19:05

dani


People also ask

What is backbone MVC?

Backbone. js is a model view controller (MVC) Web application framework that provides structure to JavaScript-heavy applications. This is done by supplying models with custom events and key-value binding, views using declarative event handling and collections with a rich application programming interface (API).

Is Backbone JS frontend or backend?

Backend Synchronization BackboneJS is use with the front-end and back-end systems, allows the synchronization with the backend to provide support to RESTful APIs.

What is backbone JS used for?

BackboneJS allows developing of applications and the frontend in a much easier way by using JavaScript functions. BackboneJS provides various building blocks such as models, views, events, routers and collections for assembling the client side web applications.


1 Answers

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!

like image 153
Duke Avatar answered Sep 28 '22 05:09

Duke