Un-Framework - Delivering Dynamic Experiences with HTML over the Wire
0 likes143 views
The document discusses the use of Turbo, previously known as Turbolinks, in enhancing the performance of web applications by replacing traditional page loads with AJAX navigation while showing how to implement controllers and actions using Stimulus. It covers the integration of Turbo with various frameworks like Rails, Laravel, and Symfony, along with the challenges of adapting existing JavaScript-heavy sites. The talk emphasizes the advantages of decomposing pages into smaller components using Turbo Frames and Turbo Streams for more dynamic user experiences.
![<template>
<ul id="entries">
<li v-for="item in items">
{{ item }}
</li>
</ul>
<button @click="fetchNextPage">Next Page</button>
</template>
<script>
const items = ref([])
function fetchNextPage() {
fetch('/endpoint').then((res) => {
items.value = items.value.concat(res.body)
})
}
</script>](https://image.slidesharecdn.com/un-framework-230805233657-a7028c2d/85/Un-Framework-Delivering-Dynamic-Experiences-with-HTML-over-the-Wire-3-320.jpg)
![import { Controller } from "stimulus"
export default class extends Controller {
static targets = [ "name", "output" ]
greet() {
this.outputTarget.textContent =
`Hello, ${this.nameTarget.value}!`
}
}](https://image.slidesharecdn.com/un-framework-230805233657-a7028c2d/85/Un-Framework-Delivering-Dynamic-Experiences-with-HTML-over-the-Wire-18-320.jpg)
![import { Controller } from "stimulus"
export default class extends Controller {
static targets = [ "name", "output" ]
greet() {
this.outputTarget.textContent =
`Hello, ${this.nameTarget.value}!`
}
}](https://image.slidesharecdn.com/un-framework-230805233657-a7028c2d/85/Un-Framework-Delivering-Dynamic-Experiences-with-HTML-over-the-Wire-21-320.jpg)
![import { Controller } from "stimulus"
export default class extends Controller {
static targets = [ "name", "output" ]
greet() {
this.outputTarget.textContent =
`Hello, ${this.nameTarget.value}!`
}
}](https://image.slidesharecdn.com/un-framework-230805233657-a7028c2d/85/Un-Framework-Delivering-Dynamic-Experiences-with-HTML-over-the-Wire-24-320.jpg)
Un-Framework - Delivering Dynamic Experiences with HTML over the Wire
- 1. Un-Framework Delivering Dynamic Experiences with HTML over the Wire Andreas Nedbal / T3DD23
- 2. About Me Andreas Nedbal Senior Frontend Developer @ in2code TYPO3 Core Merger: Backend UX TYPO3camp Munich Organizer
- 3. <template> <ul id="entries"> <li v-for="item in items"> {{ item }} </li> </ul> <button @click="fetchNextPage">Next Page</button> </template> <script> const items = ref([]) function fetchNextPage() { fetch('/endpoint').then((res) => { items.value = items.value.concat(res.body) }) } </script>
- 4. function fetchNextPage() { fetch('/endpoint').then(res => { $('#entries').append(res.html); }) }
- 6. Frontend is hard Node Toolchains Which npm packages do I need? All those frameworks Vite Webpack Rollup React Vue Svelte Which are safe? Which Node version do I need? Switching versions for projects
- 10. Turbo Drive Previously known as “Turbolinks” in the Rails world. Turns a page into an “SPA” by replacing all regular page loads with AJAX. Previous pages are cached, so perceived performance is way faster.
- 11. Turbo Frames Turbo Frames allow pages to be decomposed into smaller components that capture form actions and navigation. Navigating inside a <turbo-frame id=”idName”> will check the target response for a matching <turbo-frame> tag and only replace it’s contents with the current tag present.
- 12. Turbo Streams Actually meant for streaming over websockets, you can also use this as responses from any web request. Turbo will listen to responses using the text/vnd.turbo-stream.html content-type and execute actions based on <turbo-stream> tags present.
- 13. Demonstration
- 14. Problems with the Turbo approach Porting an existing site using a lot of JS already is not recommended. Pages using Turbo don’t fire the load event anymore (or well, only once) since page navigation is happening over AJAX. This requires massive refactoring/rethinking of an application.
- 16. Controllers Classes that contain functionality for sites using actions, targets and values in HTML. Controllers don’t require event listeners to be initialized, this happens automatically as soon as a matching data-controller attribute is found on the page or even asynchronously loaded.
- 17. <div data-controller="hello"> <input data-hello-target="name" type="text"> <button data-action="click->hello#greet"> Greet </button> <span data-hello-target="output"> </span> </div>
- 18. import { Controller } from "stimulus" export default class extends Controller { static targets = [ "name", "output" ] greet() { this.outputTarget.textContent = `Hello, ${this.nameTarget.value}!` } }
- 19. Actions Allow to call controller methods from HTML using data-action attributes. Example: <button data-action=”click->example#action”> Would call the action() method on ExampleController on a button click. The default interaction of an element can also be omitted, so the above can be shortened to: <button data-action=”example#action”>
- 20. <div data-controller="hello"> <input data-hello-target="name" type="text"> <button data-action="click->hello#greet"> Greet </button> <span data-hello-target="output"> </span> </div>
- 21. import { Controller } from "stimulus" export default class extends Controller { static targets = [ "name", "output" ] greet() { this.outputTarget.textContent = `Hello, ${this.nameTarget.value}!` } }
- 22. Targets Allow to define targets via HTML that can be accessed inside controllers as an alternative to selecting them via queries. The names of targets need to be defined in a static array in the controller. Example: <div data-controller=”test” data-test-target=”root”> The element would be accessible as this.rootTarget in the controller class.
- 23. <div data-controller="hello"> <input data-hello-target="name" type="text"> <button data-action="click->hello#greet"> Greet </button> <span data-hello-target="output"> </span> </div>
- 24. import { Controller } from "stimulus" export default class extends Controller { static targets = [ "name", "output" ] greet() { this.outputTarget.textContent = `Hello, ${this.nameTarget.value}!` } }
- 25. Values Allow to specify values in HTML that can be used inside controllers using the specified value name. The names of values need to be defined in a static array in the controller. Example: <div data-controller=”test” data-test-example-value=”Hello World”> this.exampleValue would resolve to “Hello World” in TestController.
- 26. Demonstration
- 27. Who is using Hotwire?
- 28. Integrations
- 29. Rails Turbo Rails bundle install turbo-rails
- 30. Laravel Turbo Laravel composer require hotwired/turbo-laravel
- 31. Symfony Symfony UX Turbo composer require symfony/ux-turbo
- 32. TYPO3 TYPO3 Extension “Topwire” Find out more about it right at the next talk in Room IONOS Past, Present and Future of creating server side rendered interactive websites with TYPO3 by Helmut Hummel
- 33. Questions?
- 34. Thanks for listening! Hope you enjoyed this talk :) Feedback? Want to chat? Fediverse (Mastodon/…): @pixel@desu.social Twitter: @pixeldesu TYPO3 Slack: @pixeldesu