<p>
Ever feel like, when you’re coing up that next great Ajax application, that you’re doing the same things over and over again? Like there has to be something better out there to help you make development of common functionality a lighter and easier task? MVC (Model/View/Controller) just might be what you’re looking for, and in this new posting on PHPied.com, they show you the basics of creating your own Ajax MVC framework.

This is sort of a framework thing to create AJAX applications, based on the MVC design pattern. Yep, I have a lot of buzzwords here, I admit, but this shouldn’t be taken too seriously. I was doing a bunch of small projects lately and I found myself using something like this little framework, without even thinking about it. Then I thought about it and I found that the scripts and the organization of them may resamble MVC a bit. So how does MVC fit when you mix things like thin and fatter client, HTML, JavaScript, XMLHttpRequest, PHP and CSS?

They answer the question by comparing the “usual flow” of an Ajax application to the structure that MVC provides. They use PHP for some of the backend work, but they use Javascript (including some Yahoo UI libraries) to handle the interaction with the user (in the View). They also use an Ajax connection to grab data from the backend server and a little extra Javascript to push that content out to the page.

It’s a pretty simple example of what can be done, but it gives you a good idea of how Ajax/advanced Javascript can be integrated very easily with the Model/View/Controller style of development. To check out a demo of this mini-app, click here, and to just grab the source files click here.

Given enough time, eventually a million Javascript Ajax coders will reproduce Java Swing in Javascript.

Comment by Ivan — September 20, 2006

So the solution to feeling that you’re “doing the same things over and over again?” is “creating your own AJAX MVC framework”?

Comment by Gonzalo — September 20, 2006

That’s where TIBCO GI started back in 2000 — a MVC approach to deliver web apps that look and feel like desktop GUIs. There were lots of comparisons to JavaSwing and this architectural approach to the challenges that arise once you go beyond basic DHTML manipulation cases back then too.

MVC is news? A fundamental approach to OOP is just now occuring to Javascript developers? I can only assume this is a link to help out the newbies.

Comment by Tim — September 21, 2006

On InfoQ.com, I am using some in-house developed code that allows DWR integration with WebWork, so we have AJAX-MVC. The benefits are qutie obvious and I am very happy with this decission. And by the way: I have contributed back this code to DWR (it still needs polishing and small fixes, but for now it prooved good enough).

Check out JavaScriptMVC for a complete MVC framework. It’s got everything you would need.

Include – makes it easy to compress any JavaScript application, no matter how complex its dependencies. It leaves you to focus on organization with logically separated JavaScript files.

Model – Easily connect to any data source using REST APIs. Based on the Jester library, Model uses a simple, ActiveRecord-like syntax and supports cross-domain communication.

View – Views cleans the HTML out of your JavaScript with client side templates. Instead of messy HTML string concatenation, organize your code with templates that let you see the structure of your markup.

Also, everything is a plugin, so you only have to load the components you want. Even better, we are making library INTERdependent. This means that if you include a library like prototype, JavaScriptMVC will know to only load functionality that prototype doesn’t provide.