Eric Bréhault: AbFab! Come back to easy frontend development

My talk from last year, presented on a T-shirt, was about second-guessing the SPA pattern, or Single Page App. After this year's introduction with T-shirts, I come again with a T-shirt thing, showing: AbFab: Absolutely Fabulous. It refers to the comic show from the nineties. British humor was always an inspiration for the Plone community. Or is it Spanish? Ab fab, away from the factory.

In the zeroes, the question was: why do I use 5 different jQuery versions on my page?
In the tens: why 5 different JS frameworks?
In the twenties it is just: WHYYYYY?
If you don't have the most recent problem, you are a big loser.

What if I want something simpler? Back in the nineties you had good British TV shows, and easy web development. HTML is still fabulous. HTML contains content.

Components are contents too, which is good. JS frameworks use this a lot. Idea of AbFab: push this to the backend.

Use a tree of components and subcomponents, like a filesystem with folders.

You request /polls/poll1.
You get HTML, json, a few components.
You then request /polls/poll2.
You have the HTML already, so you just needs the json, and we already have most components, so we only need for example one extra.
Updated component: serve a new version, and all pages will use it.

You have no bundles. You just serve separate components, which are dynamically loaded as dependencies.
Your browser can do that.

Low code.
I use Svelte for this. In the basis, you simply write HTML. <h1>Hello world!</h1> is a valid Svelte component. In React or Angular it is harder. In Svelte, if you need css, use a <style> tag. Need javascript? Use a <script> tag. To use another component:

<script>
import Hello from `./hello.svelte`;
</script>
<Hello></Hello>

So what is AbFab doing?
A component is stored in Guillotina, together with a compiled version.
Data in Guillotina is linked to a component.
Ask for the data, you get the needed components.
It will be tons of requests, but they will be small, and via HTTP/2 this goes quite fast.
We are using Guillotina at its finest, good for storing lots of small things in a hierarchy.

Low deployment.
My way to make it simple: Docker.

Low build.
I don't want npm installed, or webpack. At some point you do need it. I know this guy who edits CSS on GitHub, then has to wait 30 minutes for it to deploy, because it is too painful to build on his laptop. How to do this? Through The Web. Yes, it is naughtly, maybe forbidden, but I like it: the ability to change yourself.
I am 47 and have to accept who I am.
I am Eric.
I like Through-The-Web-shit.

The core of AbFab is about 200 lines. The editor is bigger.

Using an IDE is fine too. You can sync with the database. I make sure that the code I do is consistent with the documentation I am writing.

What is it good at? Small applications, like we would have done with Plomino previously. To be honest, for now I just made this for fun, so I don't care what it is good at.

Is it totally stupid? I made some disputable choices there. But it is about 200 lines frontend, 300 backend, so it can't be that bad.