Where to place javascript and how to handle events

Question

For a long time I have been looking for a practical (reusable, clear, updated, ...) solution for the following:

• I developed my own PHP framework that uses widget elements - reusable user interface elements. Widgets can be updated using ajax requests.
• each widget is a simple PHP class with the Content () method, which generates HTML output.
• almost all widgets contain JavaScript. It is used to handle events in this particular widget.

Although everything works fine, I am not satisfied with how JS is used. Here are some basic issues:

• when updating a widget using Ajax, all widget data (HTML) is transmitted to the client (OK) along with all Javascript (BAD) (however, JS does not change in 99% of cases)
• the final HTML markup is mixed with javascript calls and event handlers.
• difficult to manage all embedded js
• JS cannot be cached by the browser in this way

What I would like to ask you is your opinion / advice on using Javascript in larger php infrastructures.

Recently, I was thinking of writing a separate method in a widget class (say, the Script () function), where I put all the JS code and then go through all the widgets, take all the JS code and put this in one .js file to be used until a change is made to one of the widgets. What do you think of this approach?

Thanks!

Answer 1

I would put the javascript files used by different widgets on different cards and load them statically (should be faster, plus automatic browser caching if you have the correct settings).

Then, depending on how dynamic your infrastructure is, I would make some kind of loader-javascript that automatically extracts and downloads only those JS files that are needed for widgets that are currently loaded on the page. All you would have to type in the script, maybe some kind of require_js_file function that tells the loader that uses this javascript and the loader will retrieve it, but only if it has not already been loaded (for example, if it's not the first widget launch).

Answer 2

What you are trying to accomplish is the same thing that I came across with the Agile Toolkit.

http://agiletoolkit.org/intro/javascript - scroll down to an example that loads a form / grid through an AJAX request. It does exactly what you are trying to do - it loads the widget along with JavaScript and does just what it needs.

The difficulties I encountered were: - loading and executing javascript. I had to write my own handler that I use. It is built on top of $ .ajax. This layer handles things like session expiration, multiple user clicks, slow loads. - Framework should take control of JavaScript. For this I use jQuery Chains. It basically creates an object that can be attached to any widget (or view in our lingui) and will only be displayed on output if the widget also renders. When you perform a partial reboot, you should only show the appropriate JS.

So your Script method is exactly the same as the js () function: 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. I have seen so many AJAX crashes on rich websites like Amazon EC console, Github etc. Etc., And not one of them happens in the software that we create in the Agile Toolkit. Even in development, all javascript behaves very intelligently and predictably.

We have come to the point of fully creating complete accounting software in AJAX. People use it for hours without updating one page. Many jQuery plugins had to be converted to a WidgetFactory to properly destroy themselves. And the development of such software is simply amazing.