Does anyone know if there are any implementations of a Front Controller in Javascript? This could be really handy for my work on the statzen interface.
Here are the problems I am hoping to solve:
- The browser’s “back button” doesn’t typically work for AJAX interfaces. The Yahoo! UI Library has a History Manager that solves this problem, but it doesn’t really do it for me.
- I need to be able to call an event to change a majority of the main area of the screen which may include complex actions such as adding and executing additional javascripts to the document.
- I need it to work with the tools I am already using (mostly ExtJS)
- Users should be able to return to the URL that is in the Location Bar and see something similar to the last time they visited that URL.
I think that a Javascript Front Controller can do all of these things. First up there is the back button. YUI’s History Manager uses named anchor links (i.e. adding #someaction to the URL). This method allows you to change the URL in the Location Bar without reloading the entire page. This also solves the last problem of having persistent URLs.
The Front Controller would allow you to match a named anchor string (or a regex match) and tie that to a function call (possibly using match variables from the regex). Using an onload function the Front Controller would process new requests and call the function that would build the page appropriately. Then you would be able to further call new actions through the front controller. When the Front Controller was called it would check the named anchor string against location.hash and update it if necessary. The Front Controller would then call the appropriate function.
So, let’s say someone went to http://example.com and clicked which was a blog. They then clicked to view a post which called something like FrontController.load(’#post-1234′). the Front Controller would then change the Location Bar to http://example.com/#post-1234. The Front Controller would then check it’s “routes” hash and see that it should send the post id to the viewPost method like viewPost(1234). This could then make an AJAX call to retrieve the post as JSON and possibly load a new JavaScript that knew how to build (template) the post. If the user later returned to http://example.com/#post-1234 they would see the same content that they saw before.
The Front Controller would work with whatever tools you wanted to use no matter how complex because it just calls a method and passes arguments to it. There could even be a method for JIT script loading (especially if the JavaScript “controllers” followed a simple naming convention (hell, even additional routes could be pulled down when needed). Because the controller scripts would be cached by the browser the second post would load faster than the first.
It looks like there are some Javascript MVC frameworks out there, but that seems like overkill to me. Especially since the libraries I am using already have an idea about Models (JSON) and views (components, widgets, etc).
I don’t really want to start developing frameworks again, but I do hate repeating myself. Still, I am really hoping someone out there already knows about something that does this.
update: As I started playing with a proof of concept I realized the YUI solution to the back button is much more complex than I initially thought (then I found this really great post about what it took to create it). Hopefully I didn’t think about that because it is late. Anyway, I don’t want to duplicate the YUI work. As I look a little deeper I must say that the YUI History Manager is a mighty fine piece of work. I think I will use YUI History Manager to create my simple Front Controller.
