How to write a modular JavaScript application?

Question

I plan to rewrite my existing Silverlight application using HTML, JavaScript, and CSS. It will be a rich Internet application connecting to the server for data only (JSON-based web services) - therefore there will not be a server-side presentation environment like JSP or ASP.NET. The application consists of approximately 8 screens, most of them in the form of tabs. The question is ...

What is the best way to write such an application in a modular way? I would like to write separate screens as stand-alone modules that exchange only events with each other. I would also like to use some kind of MVC framework to separate the presentation layer from the model.

Any thoughts on what structures should I look at? Have you had good experience using them? I am starting to look at Backbone.js , JavaScriptMVC and SproutCore . Am I missing something worth considering?

Thanks in advance for your time.

PS If you want to see the application that I am trying to rewrite, an online demo is available here - it is a realistic trading application designed for training and technology comparison.

Answer 1

I still had no chance to try SproutCore, but I heard good things about it and I want to look at it at some point. I would recommend trying at least Backbone and Sproutcore to find out which of the two suits your needs and your programming style.

I work a lot with Backbone, and what you think sounds like would be very easy to fit into the foundation. I follow the event-driven architecture with my underlying applications, and I believe this works very well. it keeps the code clean and separate, and allows me to easily add functionality by binding events that my objects raise.

There are many great tutorials and screencasts to support there. here are a few of them that hopefully provide you with the information you need (including my own blog posts):

• http://lostechies.com/derickbailey/category/backbone/
• http://lostechies.com/derickbailey/2011/07/19/references-routing-and-the-event-aggregator-coordinating-views-in-backbone-js/ (enter event-driven applications into the trunk)
• http://joeybeninghove.com/2011/08/16/backbone-screencast-introduction-views/
• http://peepcode.com/products/backbone-js ($)
• http://tekpub.com/view/mvc3/6 ($ and depends on ASP.NET MVC integration)

again, don't just pick one and never look back. it is worth your time, at least to make some simple trial applications in trunk and sproutcore, if not an additional framework.

hope this helps.

Answer 2

With Sproutcore, you can create so-called frameworks to separate your application. Each SC project has a frameworks directory, you simply add a directory for your custom frameworks and include the frameworks in your build file.

It's a good idea with SC to at least separate your model layer from its own structure, for free connection and testing (SC is MVC). It may make sense to divide your screens into your own framework, depending on how healthy they are. One of the advantages of this approach is the ability to reuse your frameworks in other projects.

SC also includes a robust Statechart mechanism, so using custom events is natural and due to state maps it is relatively easy to ensure that events are processed only when the application is in the correct state.

Answer 3

Have you tried the Relay framework? You write your individual screens as standalone modules and use the relay event system to link them.

http://relay.github.com