#Javascript Structure RFC
**3 things need to be addressed in CakePHP in how it handles JavaScript:**
1. JavaScript needs to be structured enough to enable code collaboration and sharing on the bakery, etc.
2. JavaScript needs variables to be generated from the server.
3. JavaScript needs a plugin system to allow drop-in components like everything else in cake
_
##Possible Solution
Having a controller / view system for JavaScript just we do for HTML would address all 3 issues.
###JavaScript CTP File Example
A JavaScript ctp file could turn things like this:
{{{
$(button).click(function(){
<?php echo redirect(array('controller' => $Controller->name, 'action' => 'index')); ?>
});
}}}
into this:
{{{
$(button).click(function(){
window.location = '/base/posts/index';
});
}}}
As you can see, this example would leverage CakePHP's router system.
### JavaScript Controller Example
{{{
<?php
Class AppScriptController extends ScriptController {
$libraries = array('jquery', 'ui.core');
$components = array('Navigation');
function init(){
$this->set("controllerName", $this->name);
$this->set("flash", $this->Session->read('flash'));
}
}
?>
}}}
In this example we've included jQuery, jQuery UI core into the entire application. We've also set some variables to the view and loaded a component. In this case, our component could be a dynamic navigation script downloaded from the bakery.
{{{
<?php
Class PostsScriptController extends AppScriptController {
function view(){
$this->set('Posts', $this->Posts->find('all'));
}
}
?>
}}}
Here we've set all the posts into a Json object named Posts.
##Why do we need this?
Everyone structures their JavaScript includes different and everyone has the same problem. We all toss in variables into the top of our layout file that was generated from the server. Recognizing this is the first step towards creating a front-end architecture we can actually use.
###No one uses the Ajax helper
This isn't just because the helper doesn't support jQuery. It's current structure is not very useful.
###With this proposal you will bring PHP variables into your JavaScript. Not the other way around.
I don't want to write all my JavaScript with a server side language. I'd rather load up my scripts with PHP variables in them. This way I can still open up a JavaScript file and edit it without editing a string inside a PHP file.
**The most important things about handling JavaScript and CakePHP integration is that you can extend the JavaScript without diving into PHP files.**
_
##Other Considerations
###Caching
It is also important to have a good caching mechanism in place when managing dynamic JavaScript files. HTML is dynamic, and harder to cache. JavaScript should be straight-forward. Load up the files, stick them into one file and cache that sucker.
###Repeat Utilities across Actions
One thing I noticed in writing my JavaScript for CakePHP is that my controller action functions looked the same. For instance, posts edit JavaScript is the same as tags edit except for the model and field names. They all used the same utility methods.
So having some way of perpetuating JavaScript utilities across the app's controller actions would be nice. Possibly if you had an edit function in the AppScriptController it could load that in all the controller's edit functions across the app.
###Required?
Creating a script controller should never be required, it should be purely opt-in to assist your development. Cake should look for a controller for the script and then use it if it exists as an extension to the regular controller.
_
##Another Possible (simpler) Solution
To get the variables from the server, maybe we cold just place the data and variables in a header script that would set variables. That would eliminate mixing PHP with JavaScript but still provide dynamic variables.
<br />
## Notes from Jonathan Snook
I took a look at your recommendations and most of it is spot on.
Your particular example, with the redirect, isn't a strong selling point, though. All you really care about is the path. What may need to happen is an analysis of what the most common interactions are and figure out the best way to output that via PHP. For example, if you want to set up redirect paths, maybe there's a way to do something like:
`$this->set('redirect_path', $this->url(array(...)));`
and then in your javascript, it'll already be a namespaced JS variable:
`window.location = APPID.redirect_path;`
Basically, let CakePHP describe the state of your application and then let JS respond to that state. If a bunch of fields require validation, allow CakePHP to define that in a JSON format, and then use whatever library you want to act on that information. That'd work most naturally for me.
