html5 - What kind of architecture should I learn to make good JavaScript based software? -

I know the model-view-controller well, know about it for many years and it's server-side Languages ​​are used with development languages ​​like PHP.

However, I am now working with Javascript and using a SVG, canvas is creating a big application, which is in support of modern browsers. The project is large, so the architecture behind it should not be delicate.

Javascript and MVC do not get like a house on fire, because JavaScript is an event induced by nature. So, is there any architecture or something else, should I definitely learn, understand and implement?

Software has to deal with data. It already uses local storage and web SQL database. I need a model, right? Have a UI, so do I have views? However, do I have a controller? What about the events?

Architecture, Architecture, Architecture - That's My Interest. I am fine with the language of my choice. First of all, I am the author of Javascript MVC, so I am very biased in many different ways.

Respond to user events

Update DOM

Data from server

Organize your front business logic

Your choice of architecture You can depend on the device that you want / require.

For general architecture, I think it is important to separate the concerns.

I firmly encourage you to find a way to manage dependency, and encourage client side templates. They will make your life a lot easier.

JavaScriptMVC uses a tiered MVC approach that is very much based around custom UI events and openAgeX events.

I create my low-level widgets in a similar way how you will create jQuery widgets. The big difference is that widgets produce a non-EUI event that the top-level controllers can hear. For example, a tab widget can generate a "tab.activate" event such as:

  $ ('. Tab'). The trigger ('tab.activated')  

Then, my higher command can listen to the control tab. Active models, and a model for updating tab content:

  ". Flickr tab. Active": function (tabEl, eve) {Flickr.findAll ({type: "rainbow"} , Function (image) {tabEl.html ("// path / in / view", image);}}  

Flickr.findAll essentially performs a query for flicker messages , Then calls back with a list of images. Wrapping service / AJAX functionality with the model makes them very reusable.

You will see that the callback I update the html element of the tab element with the content provided from one view, this is probably not the best way to do this, but I wanted a quick example. It would be better if the tab controller The sung output will be given to do so to do this so that it will happen to it. In this way, if your tab wants to fade in the material someday, it will be able and your master controller Do not know about the implementation of the tab.

The most important thing is that you can break your app in the smallest pieces. Make them personally testable (and flexible), and small Combine the parts into large parts because you do your work on your application.