Since version 1.5 Joomla made huge step to split HTML and PHP Logic, but JavaScript still in "younger brother" role, and very hard coded.

Here is a try to split PHP and JavaScript.

You ask: How that possible?
Very simple: Write PHP in PHP file, and JavaScript in JS file
You ask: Then how to connect them?
Well, using JSON, maybe it not the best solution but also not the worst. 👽

So

This pull request introduce Joomla Behavior API for client side.
It:

• allow write custom Behaviors in JavaScript,
• provide way to interaction between different Behaviors,
• provide additional way to override each existing behavior, from client side.

Also introduce JDocument::setScriptOptions() that is important gear in connection betwen PHP Logic and client side.
Each Behavior could be called only if server provide the options for that Behavior, or always.

How it work.

Each Behavior it just a collection of callbacks that called when corresponding event happen.
All behavior could be stored in js files, and splitted by group: behavior-bootstrap.js, behavior-form.js so on.

Register custom behavior:

Joomla.Behavior.add('behaviorname', 'ready update', function(event){
	console.log(event.name, event.target);
}, true);

This will be called only if Server provide options for this behavior $doc->addScriptOptions('behaviorname', array(/*some options*/)), and when happened next events: ready, update

Register custom behavior that will be always called:

Joomla.Behavior.add('behaviorname', 'ready update', function(event){
	console.log(event.name, event.target);
});

You asked: wtf is update event?
update - is a custom event that allow to call one Behavior from another "on fly", also this event must be called if you replace part of DOM, so other Behaviors will know about changes.
There also remove custom event, that could be used to ask Behaviors for clean up in 'container', unbind events and so on.
This events we could rename of course to something more clear, if need 😄
And, of course, anyone could use any custom event that need for his/her needs.

Example:

// Call all behaviors when you change part of DOM
Joomla.Behavior.call('update', changedContainer);
// Call specific behavior by name when you change part of DOM
Joomla.Behavior.call('update.behaviorname', changedContainer);
// Call specific behavior by name when you change part of DOM, and with custom options
Joomla.Behavior.call('update.behaviorname', changedContainer, options);

// Request other Behaviors to "clean up in" container
Joomla.Behavior.call('remove', container);

How it work on Live you can look in repeatable field in repeatable.js (see diff)

How to override existing Behavior.
Very simple, just register own behavior with same name, and it will override any existing:

Joomla.Behavior.add('behaviorname', 'ready update', function(event){
	console.log('I am override');
});

or you could override only specific event callback if need:

Joomla.Behavior.add('behaviorname', 'update', function(event){
	console.log('I am override for Update event');
});

B/C
I tried make it for keep b/c, with count that it could be in the core since ~~3.~~5.0
So you should not see any difference after apply this patch.

Conclusion
Split PHP logic and JavaScript is a small step to big improve 😋
Next step could be dependency management using Requirejs or anything else.

Well to much text, I hope here understandable at least couple words

ping @phproberto @DGT41 @okonomiyaki3000 @anibalsanchez I need your brains 👻

ps. couple word about jquery 😋