This is where the new Fiber concept really shines. It takes all the routing and state management back to the server. Whatever can be prepared in PHP will be prepared in PHP, and our Vue application is mainly responsible for displaying the Panel afterwards and adding the interactive bits and pieces. If you've ever heard of Turbolink, Pjax or similar approaches, you already know mostly what Fiber does.
When you visit the Panel for the first time, a regular HTTP request is sent to the server. The server will render the Panel HTML document, which looks like this (simplified):
The JS fiber object is populated with data from PHP. The server injects all the data that the Panel needs for that particular view that way.
Now Vue.js kicks in and only renders that view with the data in the
When you now click on a link in the Panel, the event is intercepted and a JS fetch request is sent to the server. This fetch request will no longer return the entire Panel document, but only the updated Fiber object for the new view.
Fiber now does two things:
- It updates the URL in the browser
- It refreshes the Vue app with the new state from the new Fiber object
Whenever you reload the same URL afterwards, you go back to the beginning and the server will return the full document again with the same state.
- Routing is done in PHP with our good old Kirby router.
- We can exactly control what data needs to be sent for each view.
- State can be handled on the server with good old sessions.
- The API is not affected by any of this and can be a lot less specific.
- The bundle size does not blow up with new routes or new requirements for state management.
- Less logic in JS and a lot less complicated Vue components. You throw in state via props and that's it.
- Every view is super easy to test on the backend with PHPUnit.
We've taken this concept and extended it to more parts of the Panel. Dialogs are now also handled with a similar approach and we are already working on search, dropdowns and more.
With this approach, we already managed to cut a huge 100kb+ chunk out of our Vue.js application. It's massive and it's so much fun.
Fiber is mainly inspired by Inertia.js. But the more we dug into the concept, the more ways we found how we can adjust and improve the principles of Inertia for our own needs. First, we implemented our own client implementation of Inertia. Then we started changing lots of parts on the backend. In the end, the basic request concept is still the same, but the implementation is very different. It felt confusing to use the same name. You cannot lookup things in the Inertia.js docs when you work with the Panel. Dialogs and other ideas for future Fiber Panel features don't exist in Inertia. Fiber seemed like an appropriate alternative term.