Wednesday, September 20th, 2006
AJAX MVC (so to speak)
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.
So the solution to feeling that you’re “doing the same things over and over again?” is “creating your own AJAX MVC framework”?
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.
—
So the solution to feeling that you’re “doing the same things over and over again?†is “creating your own AJAX MVC framework�
—
It’s not re-inventing the wheel. It’s called searching for the most convenient way of designing, developing, and deploying web applications.
Riiiiight…..
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.
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).
./alex
–
:Architect of InfoQ.com:
.w( the_mindstorm )p.
Co-founder of InfoQ.com
It really doesn’t have to be complicated. jMVC gives you the framework and templating system in less than 100 lines of code…
http://blog.codeville.net/2007/10/04/rich-javascript-mvc-user-interfaces-with-jmvc/
Update: jMVC is now integrated with ASP.NET, making a simple yet powerful way to put MVC-clean UIs in your existing ASP.NET application. The tricky client/server plumbing is dealt with automatically, so your strongly-typed .NET objects can be read and written in your client-side view.
http://blog.codeville.net/2007/10/18/jmvcnet-neat-client-side-mvc-for-aspnet/
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.
Controller – Keep your application logic separate from your HTML with simple, DRY event handlers. Controllers use event delegation, meaning you never have to reattach your event handlers even when edit your page’s HTML.
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.