HTML OVER THE WIRE
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9972146/pasted-from-clipboard.png)
"The speed of a single-page web application without having to write any JavaScript."
Tubo Drive
Tubo Frame
Tubo Stream
Drive
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9972313/pasted-from-clipboard.png)
Drive
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9984239/webpage.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9984249/data-server.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9984239/webpage.png)
Drive
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9984239/webpage.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9984249/data-server.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/3930239/Unofficial_JavaScript_logo_2.svg.png)
Drive
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/3930239/Unofficial_JavaScript_logo_2.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9984365/html-5.png)
Drive
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9984365/html-5.png)
<a href="/" data-turbo-action="replace"></a>
Evite d'ajouter l'url dans l'historique
<a href="/" data-turbo-method="delete"></a>
Modifie le verbe HTTP
<a href="/" data-turbo="false"></a>
Désactive Turbo sur le lien (et ses enfants)
<a href="/" data-turbo-preload=""></a>
Preload dans le cache la page
Drive
Turbo.visit("/", { action: "replace" })
Evite d'ajouter l'url dans l'historique
Turbo.visit("/", { method: "delete" })
Modifie le verbe HTTP
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/3930239/Unofficial_JavaScript_logo_2.svg.png)
turbo:before-visit
turbo:before-render
turbo:before-fetch-request
...
https://turbo.hotwired.dev/reference/events
Drive
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/3930239/Unofficial_JavaScript_logo_2.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9984471/carbon__24_.png)
Drive
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9984530/form.gif)
Drive
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9984555/pasted-from-clipboard.png)
Frame
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9988478/pasted-from-clipboard.png)
Frame
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9988488/carbon__26_.png)
Frame
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9988525/carbon__27_.png)
Frame
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9988525/carbon__27_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9988527/carbon__28_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9988529/carbon__29_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9984249/data-server.png)
Frame
_top
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9988579/carbon__31_.png)
Frame
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9988589/signe-davertissement.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9988594/carbon__32_.png)
Frame
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9988872/sablier.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9988881/carbon__33_.png)
Stream
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9990858/pasted-from-clipboard.png)
Stream
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9990889/carbon__35_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9991008/carbon__36_.png)
Stream
Turbo Action | Action |
---|---|
append | insert a la fin de la cible |
prepend | insert au début de la cible |
replace | remplace la cible |
update | remplace le contenu de la cible |
remove | retire la cible du DOM |
before | ajoute dans le DOM avant la cible |
after | ajoute dans le DOM après la cible |
Stream
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9991082/carbon__38_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9991086/carbon__39_.png)
Stream
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9991043/carbon__37_.png)
Stream
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9991115/carbon__41_.png)
Stream
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9991115/carbon__41_.png)
Stream
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9999789/carbon__43_.png)
Stream
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9999795/carbon__44_.png)
"A modest JavaScript framework for the HTML you already have."
Controller
Actions
Targets
Values
data-attributes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9999889/carbon__47_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9999888/carbon__48_.png)
Controller
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9999912/carbon__49_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9999920/carbon__50_.png)
Actions
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/10000013/giphy__8_.gif)
Targets
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9999939/carbon__51_.png)
Targets
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/9999941/carbon__52_.png)
Targets
Kind | Name | Value |
---|---|---|
Singular | this.[name]Target | The first matching target in scope |
Plural | this.[name]Targets | An array of all matching targets in scope |
Existential | this.has[Name]Target | A boolean indicating whether there is a matching target in scope |
Values
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/10000000/carbon__54_.png)
Values
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/10000002/carbon__55_.png)
Method | Invoked by Stimulus… |
---|---|
initialize() | Once, when the controller is first instantiated |
[name]TargetConnected(target: Element) | Anytime a target is connected to the DOM |
connect() | Anytime the controller is connected to the DOM |
[name]TargetDisconnected(target: Element) | Anytime a target is disconnected from the DOM |
disconnect() | Anytime the controller is disconnected from the DOM |
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659294/images/10000023/giphy__9_.gif)
Hotwire
By foret_a
Hotwire
- 81