How to apply a MVC architecture to a ExtJS project ?

Question

Hello,

I would like to build a web project, using ExtJS, the famous javascript library. The goal is to use only ExtJS (and some CSS and HTML) to build the entire client-side web application. I also would like to apply a Model-View-Controller structure to the code of this project.

First question: is it possible and pertinent to apply such an architecture to an ExtJS project ?

Second question: how can i easily apply a MVC architecture to a ExtJS project ?

I already read this but it does not answer my questions.

The documentation from the ExtJS communauty does not provide such tips. In all given samples, code is contained in one single file, and UI code is not separated from the application logic code. For example, listeners methods and calls to server come along with UI code.

In fact, all tips to separate application logic from user interface code are welcomed.

EDIT: An other question: What do you think is the best way to design a ExtJS based web application ? I did not found any good designer for ExtJS. The designers I found (this and this) dont seem to be reliable (code generation of the first sometimes fails).

Thanks

Answer 1

Use some libraries which makes javascript OOP lang. Then use MVC pattern. Also you can use Ext-GWT for developing web on OOP java.

Answer 2

In my experience, you want to think about two separate applications.

On the server side, you want to fashion a pretty typical MVC application that simply provides a web service. You're probably fine just talking JSON. Look into doing things RESTfully.

On the client side, you have a javascript application. If you're really leveraging ExtJS, you should only have an initial request/response that sets up the application. Everything from then on should just be XHR requests to your web service (and, if you're getting fancy, lazy-loading of ExtJS-driven javascript files).

This kind of architecture will pay for itself when all of a sudden you want to open up a public web service, or write some alternative client (iPhone apps, for example). These alternative clients should be able to rely on the already-running web service.

Switching gears to the client-side, ExtJS driven stuff -- MVC can help you here, but you're making a mental context switch from a request-driven system (on the server), to a more open-ended event-driven system in the browser.

Use a lot of the practices the ExtJS community talks about (smart use of factory methods, extending built-in classes, module pattern, ExtJS's template methods, etc).

While organizing your javascript application, try to think in an MVC sort of way. Learn how event bubbling and relayEvents() work. You've got your model stuff (basically, they'll derive from the built-in store classes), view stuff (Grids, Trees, etc), and controller stuff (usually attached to some container. Read Saki's stuff about inter-component communication at extjs.eu.)

There's certainly more than one way to do it when it comes to heavyweight client-side application design. But if you want to seriously leverage ExtJS's potential, it's worth it to take the time to read up on things. Look at articles or books about GUI programming in general -- writing an ExtJS app is more similar to writing a traditional desktop application than writing a web application.

In this domain, the "web" stuff gets very simple -- you're just handling data on the server side. The tricky stuff is figuring out how to organize and optimize the in-browser code.