An absolutely fabulous Plone
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 36 | |
| Author | ||
| License | CC Attribution 3.0 Germany: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/66324 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
Plone Conference 20232 / 36
1
2
6
7
11
14
16
26
34
36
00:00
Turtle graphicsFuzzy logicPlane (geometry)Front and back endsSoftware developerNuclear spaceMultiplication signSource codeComputer animationLecture/Conference
00:30
Software developerComputer animationLecture/Conference
00:47
Lecture/Conference
01:20
Web 2.0Interface (computing)Scripting languageObject (grammar)CodeUser interfaceRight angleMultiplication signBitComputer animation
01:49
Web 2.0Instance (computer science)Control flowFront and back endsChaos (cosmogony)Graphics tabletDebuggerInternetworkingPoint (geometry)Right angleMeeting/Interview
02:35
Game controllerRight angleBitComputer animationMeeting/Interview
02:55
ResultantDemo (music)Computer animation
03:25
CodeText editorWeb pageDemo (music)Software frameworkMeeting/Interview
04:07
Address spaceText editorConnectivity (graph theory)Message passingUniform resource locatorRight angleGoodness of fitComputer animation
04:34
Event horizonBlock (periodic table)Connectivity (graph theory)ResultantDemo (music)MathematicsKeyboard shortcutRight angleText editorMessage passingComputer animationMeeting/Interview
05:08
Event horizonMultiplication signInheritance (object-oriented programming)Electronic visual displayOnline chatInternetworkingDataflowStack (abstract data type)Computer animation
05:36
Boom (sailing)Embedded systemText editorCodeComputer animation
05:54
Multiplication signDrag (physics)Square numberVideo gameRight angleDemo (music)Computer animation
06:37
Computer animationMeeting/Interview
06:59
Software bugEvent horizonDemo (music)ChainComputer fileDeclarative programmingNumberRight angleBlock (periodic table)Computer animation
07:56
Demo (music)CASE <Informatik>Boss CorporationRight angleComputer-assisted translation2 (number)Web pageWeb 2.0Film editingMeeting/InterviewComputer animation
08:52
Message passingDemo (music)Presentation of a groupComputer-assisted translationConnectivity (graph theory)Cartesian coordinate systemText editorComplex (psychology)Meeting/InterviewJSONUML
09:32
Block (periodic table)Remote procedure callRight angleUniform resource locatorSynchronizationComputer-assisted translationBlock (periodic table)Web 2.0Connectivity (graph theory)Instance (computer science)Correspondence (mathematics)File systemMultilaterationLaptopFilm editingLibrary (computing)Medical imagingComputer animation
10:27
Component-based software engineeringSynchronizationPhysical systemBookmark (World Wide Web)Product (business)Integrated development environmentConnectivity (graph theory)Text editorComputer animation
10:49
Modul <Datentyp>Boom (sailing)Extension (kinesiology)Software frameworkEvent horizonScripting languageBitCodeData managementRight angle
11:23
Block (periodic table)Level (video gaming)Scripting languageInheritance (object-oriented programming)Web browserLocal ringPhysical systemType theorySource codeSoftware frameworkText editorComputer animation
12:12
Data storage deviceInheritance (object-oriented programming)Compilation albumVolumenvisualisierungEuclidean vectorText editorServer (computing)Web browserPlane (geometry)Object (grammar)CASE <Informatik>Data storage deviceRight angleBinary codeComputer animationMeeting/Interview
12:30
Inheritance (object-oriented programming)Data storage deviceVolumenvisualisierungEuclidean vectorText editorServer (computing)Compilation albumConnectivity (graph theory)Web 2.0WebsiteRevision controlFluid staticsBlock (periodic table)Web pageSource codeMeeting/InterviewComputer animation
13:03
Plane (geometry)Mobile appConnectivity (graph theory)Representational state transferText editorSource codeBlock (periodic table)Instance (computer science)Meeting/InterviewComputer animation
13:43
Game theoryComputer chessSquare numberDemo (music)Computer animationLecture/ConferenceMeeting/Interview
14:11
Text editorWritingLecture/Conference
14:32
Plane (geometry)Server (computing)Content (media)Data storage deviceWebsiteType theoryConnectivity (graph theory)Demo (music)InformationComputer-assisted translationData managementMobile appForm (programming)Goodness of fitProper mapComputer animationLecture/Conference
16:12
Determinism
16:28
DeterminismCASE <Informatik>Library (computing)Multiplication signComputer fileModule (mathematics)Different (Kate Ryan album)Arithmetic meanGraph (mathematics)Connectivity (graph theory)Content delivery networkLecture/Conference
17:32
Point (geometry)Context awarenessAuthenticationForm (programming)Web 2.0Connectivity (graph theory)CodeData managementSoftware developerSoftwareCanadian Mathematical SocietyRight angleComplex (psychology)Multiplication signVolumenvisualisierungFreewareValidity (statistics)
20:43
Graphical user interfacePlane (geometry)Presentation of a groupMereologyControl flowLine (geometry)Computer animationLecture/Conference
Transcript: English(auto-generated)
00:00
So yeah, my name is Eric. I'm a front-end developer at Nuclea. I'm super committed to open source. I love to use my free time to code stuff, put that on GitHub so people I don't know anything about can use it, and I make no money. So yeah, that's my thing. I've been contributing to Plone quite a lot.
00:23
I met several add-ons. I guess if you're using Volto, for example, you're certainly using Ms. Developer. Ms. Developer, I did it initially. I'm still maintaining it. So yeah, that's the kind of stuff I've been doing. So given that, you might think I'm a serious guy.
00:43
I'm not. So let's go with the talk, but before I start, there is this legal thing, legal warning I'm supposed to show you. It's the law. So yeah, and by the way, if there are any children or quality insurance engineers, they must leave now.
01:04
So that's okay? Okay, so let's go with the legal warning. Blah, blah, blah. Okay, seriously, seriously, what is AppFab?
01:22
AppFab is, well, you do remember through the web, right? At the time in the hope, you could, or in Plone, you could use, create an object, put some Python script in there through the web, so through the web interface. You can call the CDMI an interface,
01:41
as I is for interface, believe me. And yeah, you can create a small bit of code and it's live immediately. That's through the web. And it comes with many challenge and many problem, I mean, yeah. And you also know, I guess, how crazy is the front-end stack?
02:01
Front-end stack is like changing every day and you cannot rely on anything and you're gonna break something at some point, possibly the full internet, remember left pad, right? So AppFab is about merging the two craziness together. We move through the web to front-end or front-end to the web, I don't know in which sense,
02:22
but yeah, that's what it is, right? So it's about chaos, okay? AppFab, it will mess up with your Plone instance. I mean, that's a given. You're really not ready for this shit. It's something that will go out of control.
02:42
If you think you can keep it under control, you should think again, all right? It's like you could consider, okay, I can use a small bit of it, right? Sorry, micro-dosing AppFab, not a thing. It will not happen like this. It will be invasive, it will be toxic
03:00
and the result gonna be ugly no matter what, okay? It's by design that shit will hit the fan, okay? So I urge you, like officially, seriously, to not use AppFab in Plone, okay? Like, never, okay?
03:23
Now demo, demo of course. So let me switch to the demo. Let's take this sad page on Plone, all right? That's a typical one. I have here the AppFab editor.
03:43
So the AppFab editor is like this. You, well, it could look like the ZMI, why not? I mean, it's, it's, it allow you to edit small snippet of code. So this one is doing something very simple. It makes a button, you click on it, it increment. Okay, that's a typical example
04:01
you find for all the frameworks and whatever. Well, you can edit that live, right? You can change it to two, for example, and I save and now it goes about two or I can change the CSS or maybe the HTML or whatever and whenever I save, it works, okay?
04:20
That's your editor. So you edit something, you create a component like this, it's good and you get his address, right? His URL. So you take this path and you will just enter it into a Volto block, okay?
04:41
This is a Volto block, AppFab component block and you just passed here the corresponding path you got from your editor and you can reach the editor directly here, there is a shortcut and when you save it, you get this fantastic result, right? Oh, it's not up to date, sorry.
05:00
Now, by two and with the change. So it's live, it's on your website. So that's a simple demo, of course, you might not consider that useful but look, this other one. Yeah, that's cool, no? Because it displays the time. So it's super useful for users, right?
05:21
It's done with SVG, basic SVG. It's something I copy past, of course, because you can take any sheet from internet, from Stack Overflow or even from Charge GPT, ask Charge GPT, I want a SVG clock, it do something, you copy past, you don't read, right? And you put it on your editor, I did it.
05:42
I mean, where is it? It's by there, right? My clock is there. So I have no idea what the code is about. It's there, right? And same for the rest, it just work. And I put it here, it's live. So well, this demo, okay, you might consider now,
06:00
okay, this is kind of interesting, I can do SVG. Let's move to the next one, okay? That's a square. You might think it's a stupid square. Yeah, I'm sure you're thinking that but look, I can click it and move. I drag it to the left, drag it to the right,
06:23
and it rotates at the same time. If I let it go, it goes back to the middle. That's, so that, I mean, now you can, I know you're thinking it's useful, no? To be, I want your full attention, I'm gonna do it again. I click, and drag, and it rotate.
06:44
And now let it go. Right, no? You're not convinced. I feel like you're not convinced. Yeah, yeah, I mean, I have the final, final demonstration of what, how useful AppFab can be. Here we go.
07:00
It's empty, right? But I move my mouse to the corner. Oh, oh, so that's, I mean, right? That's useful, I mean, that's probably the best feature landed on Plum for decades. I haven't been around much those last years,
07:23
but I mean, this is huge. Look, I, look, I mean, it works, right? This deployment immediate, right? Imagine you have to do that with Volto. Just imagine the number of declaration you have to do.
07:41
The build, the different files you have to fill in, et cetera, declare the new Volto block, blah, blah, blah, and then build it, deploy, run all the chain of everything. I mean, if you know what you're doing, maybe by one hour you could have this done. And I'm generous, probably quite optimistic, right?
08:02
So one hour, imagine you go to your boss or your customer, depending on the case, and you say, yeah, I need one hour for the cat thing. They're gonna be mad at you. They're gonna say, what the fuck? One hour, one hour to deploy a cat on my page?
08:21
Don't you know that the full web stack is about putting cat on web pages? This should be instant, you moron. So yeah, get angry, and I would say, they would be right, they would be right. So, not sure, I mean, who loves to be called a moron
08:40
by their customers or boss? Not many people, yeah. Well, use AppFab, morons, I mean, that's the way to go. This, one second, and you get your cat, all right? So that was about the demo. Let's come back to the presentation. I'm gonna explain to you how it works.
09:03
So, you have this editor. The editor is made with AppFab itself. That's an AppFab component served by Biplone. So that's all AppFab stuff, but together. So you can see, it could be a kind of complex application more than just a cat. I mean, even though the cat is great,
09:21
I mean, it's a good one, but. Here there is no cat, but you can edit everything. You can delete, you can manage, you can restructure your stuff, et cetera. And it renders through a Volto block. The Volto block is super, super simple. It's just about taking this URL and rendering it
09:42
by calling the right corresponding web component. Because all of that is based, sorry, I will come back to that later. What you can do with AppFab is manage different assets. So, I don't know, images, stuff like this. You can import external dependencies.
10:02
I don't know if you need D3, for example, to do magical stuff with SVG, or if you need any kind of library, you can upload it to your AppFab instance. You can create reusable components. So you did the cat once, and you can have many cats. That's a cool thing.
10:21
And you can sync with the remote file system. So you can develop on your own laptop, manage that with Git and all your favorite IDE and whatever, and then push to production directly through HTTP, okay? And the way it works is you have this editor,
10:41
which is basically taking the Svelte component, because what I demo you, sorry, coming back to this, this is not just HTML. This is a better flavor of HTML. It uses a framework called Svelte, which is not really a framework. It's just an extension of HTML,
11:02
because when you look at it, it looks very much like HTML. You have script tag, you have all the HTML, of course. You can add style and all of that, and you see how it manages events. For example, it's a bit simpler. You can have persistence and just better coding, let's say, but you can do just basic JS as well and basic HTML, basic CSS.
11:21
It's gonna work the same way, right? It does not pollute. It does not impose a way to do stuff. If you're comfortable with Vania script, you can go that way, but Zelt is just adding a certain level of comfort, let's say. It's super easy to learn. It's like there is almost nothing to learn compared to React or stuff like this,
11:41
and this is compiled into the browser. When you're editing stuff on the editor, it will compile locally. You don't need npm deploy locally or whatever. It just compile into the browser, because it's super simple framework, so that works that way, and it will produce a JS, and all of that, the Svelte source and the JS,
12:01
are stored in Plone into a soup. You might have heard about super for Plone, which is a persistent system which is extra light. It does not require to create content types to store basic object. In my case, I just want to store text, right? JS, SVG, CSS, stuff like this,
12:21
or maybe some binaries like a small GIF or stuff like this. It works perfectly, and then this is gonna be served into Volto as a web component, so what the Volto block is doing is just taking the source, which is compiled as a web component,
12:41
so just instantiating the component. It means it will not interact at all with Volto. You can have whatever version of whatever you want in your Volto site. It could also be rendered elsewhere in WordPress, in a static HTML page, in Next.js, wherever you want. It's just a web component, so that's atomic.
13:02
Nothing will pollute it, no CSS, no external JS. It will just work the way it is. That's what it does, and to install it, you have two sides. Obviously, you have the Volto side, which is just declaring this block, just that, plus it contains the source of the editor,
13:23
which is not the Volto thing. It's implemented into itself and as a AppFab component, and the REST API side, which is instantiating the soup instance and the basic API, the REST API, you need to store and deliver source,
13:42
and that's about it. That was short. I told you. Thank you, Eric. Any question about AppFab? I'm sorry it was that short.
14:02
No, don't worry. Perhaps we can integrate some chess game there. Yeah, or I can do the square demo again, if you want. I have one half an hour, so yeah, I can do that. Can it persist data like Rapido could? Sorry?
14:21
Can you write data into Plone? Yes, you can store whatever, JSON. I mean, you can store anything, XML if you want, in JSON, it's just a text editor and you will store it. Then for now, I think it assumes that any, no, it will serve it with a proper MIME type, I think.
14:40
So yes. I guess what I'm saying is, could you create a form that then submits to the server and then saves data and then retrieves it again? No. No, I mean, we could fix that quite easily, but it's not meant to do that. My idea, I mean, I've been doing that mostly for fun. I'm using it to do quick demo like this.
15:03
I mean, the cat thing is enormous, but I also have demo for tomorrow about AI and search and everything. I did it with that because that's much, much quicker for me, rather than going into Volto and declaring stuff and having a proper package and all of that. It's just quicker. So it's good for demo,
15:20
but if you are considering using it, I told you not to use it, right? You had the legal warning, but if you are considering using it for real stuff, my idea was to store data into content types. So you could use a component, an app component to render information from a news item or whatever you want,
15:42
but yes, of course, if you want to store, I mean, there is no technical issue into storing data into the soup. The only problem right now is, as it's meant to be used by the site manager, only the site manager will be able to save the form. We could improve that.
16:00
Obviously, we can, right? We can check the permission depending on the type of content we are editing. That's a small thing to do. I mean, Rapido was like that. So yes. Any more?
16:23
Can you run Doom? Yeah, Doom, of course. There is a JavaScript you can download and there is half an hour you can try to run Doom. I could. No, yeah, probably it would work.
16:41
Something you should know about performances, though, is that we are using ES6 modules. This means we are not bundling anything. So when you depend on a library, you implement a small library yourself, it will be imported live when you run the component.
17:00
Of course, there is cache, so it minimizes the problem with performances. It could be sometimes if you are using, for example, D3, which comes with a lot of different stuff, it could slow down your stuff because the first time you accept a D3 graph, it will load each of the small D3.js file
17:23
before running the thing. So in that case, it's better to not use AppFab to store D3, but just refer to a CDN. But besides that, you can run anything. I mean, it's just HTML and JS, I mean, yeah.
17:41
It just works the normal way. It just bypass Volto. You don't go into Volto. You just use Volto to render a web component and the way you do the web components is your business. I like Volto already. I loved your demo, but for boring customers, can you give us an example of something really complex
18:03
you did with AppFab? No, I don't do complex or serious stuff. I mean, generally. And my customers, no, no, I'm from, as a living, I'm doing the Volto, but not through AppFab.
18:22
The purpose of AppFab is in a CMS context. That's the principle of hackability. If you want to be able to hack your CMS to display something because you need it and you're not a great developer or maybe you're a great developer, but you don't want to learn about Volto
18:41
and about Plone and all those stuff because it takes time. It's not that it's wrong. I mean, it makes sense, it makes time. But if you want to be able to just hack something, like you would be on WordPress and you're just an HTML guy, right, you should have a way. I think it free people.
19:02
It enables them, it empower people to be able to do that without learning too long. And that's the purpose of it. So I'm not working in a CMS context. I don't use it. I don't need AppFab. I do that mostly because I love AppFab, the TV show. That's my starting point for the full software.
19:20
So no, I don't use it. But yeah, it could be usable. Obviously, I mean, it's extremely simple. The amount of code to do that is small. So when it's simple, you might consider is not risky, I would say. But then, of course, you will end up into problems at some point.
19:40
Obviously, you might want to integrate with Volto stuff or you might want to play with the Plone API, which you can do, but then come some issue with authentication and so on. So yes, always possible. But when you reach a point where what you're doing with the easy thing is as complex as what you can do with the complex thing,
20:01
use the complex thing. Because then it's clear. Then it's manageable. That was basically, I would say, the trouble with Plomino or Rapido is to try to address very complex stuff on an easy way. There is no magic, unfortunately. So if you want to do very simple thing, like, yeah, typically you want a form with validation,
20:23
with some kind of animation, stuff like this, that's cool. And at the time, this form start opening subforms and accordions and whatever shit you might imagine. Not that much anymore. But as I say, invasive, toxic.
20:45
More? Thank you for the question because all of that was missing part of my presentation, I just realized. Cool. Okay, thank you then.
21:02
We will have now a break until five that we have the line in talks, okay? Big applause for Eric, please. Thank you.