For a long time I am looking for a practical (reusable, clear, updateable,...) solution to the following:
- I developed own PHP framework which uses 'widgets' - reusable parts of UI. Widgets can be updated via ajax requests.
- every widget is a simple PHP class with method called Content() which generates the HTML output.
- almost all widgets contain JavaScript. It is used for handling events in that particular widget.
Although everything works fine I am not satisfied with the way the JS is used. Here are some major issues:
- when refreshing a widget using Ajax all the widget data (HTML) is transferred to the client (OK) together with all the Javascript (BAD) (however the JS is not changed in 99% cases)
- final HTML markup is mixed with javascript calls and event handlers.
- it is difficult to manage all the embedded JS
- JS cannot be cached by the browser this way
What I would like to ask you is your opinion/advice on using Javascript in larger php frameworks.
Recently I was thinking about writing a separate method in the widget class (let's say function Script()) where I'll put all the JS code and then walk through all the widgets, take all the JS code and put it in one .js file which will be used until there is a change made in one of the widgets. What do you think about this approach?
Thanks!
Source: Tips4all, CCNA FINAL EXAM
I would put javascript files used by different widgets in different maps and load them statically (has got to be faster, plus the automatic browser caching if you have the right settings).
ReplyDeleteThen, dependently on how dynamic your framework is, I would make some kind of loader-javascript that automatically fetches and loads only those JS files that are needed for the widgets that are currently loaded on the page. All you would have to print in the script is perhaps some kind of require_js_file function, which will tell the loader which javascript does this widget use, and the loader would fetch it, but only if it has not already been loaded (for example if this is not the first run of the widget).
What you are trying to accomplish is the same thing I faced while back with Agile Toolkit.
ReplyDeletehttp://agiletoolkit.org/intro/javascript - scroll down to the example which loads form / grid through AJAX request. It does exactly what you are trying to do - loads a widget together with JavaScript and executes only what's necessary.
The difficulties I have faced were:
- loading and executing javascript. I had to write my own handler which i use. It's build on top of $.ajax. Things like session expirations, multiple user clicks, slow loads are handled in this layer.
- Framework needs to take control of the JavaScript. For that I am using jQuery Chains. It basically creates an object which can be attached to any Widget (or view in our lingo) and would only be exposed in output if the Widget is also rendering. When you are doing partial reloads you should only show the relevant JS.
So your Script method is exactly same as the js() function I have:
https://github.com/atk4/atk4/blob/master/lib/AbstractView.php#L250
My opinion of course is that abstracting views in this way and separating JavaScript is a great way to go. I have seen so many AJAX glitches on rich websites, for example in Amazon EC console, in Github etc etc, and none of those happen in the software we build in Agile Toolkit. Even in development all the javascript behaves very reasonably and predictable.
We went to the extent to building a online full accounting software completely in AJAX. People are using it for hours without a single page refresh. Many jQuery plugins had to be converted to WidgetFactory to properly destruct themselves. And developing software like that is simply amazing.