Okay, so hi everyone. I think that's like you are pretty excited after the pandemic. We are having like after two years like the float conference in person. And today I am going to talk about a deep dive into Internus of Volto. I think you are fresh because Timo only gave the presentation, not any technicals, but I am going okay and but today I am going

to teach you about the Internus of Volto, like how the magic stands, right? Timo only talked about the Volto, like the blocks, like how we made, but how the Volto generates it, right?

That's also the important ones. So if you want to extend something like the Volto, like how you can use it, you do not get only the components are doing with the Volto, right? You also have the settings and everything. And if you do not know the settings and the other objects we provide into the Volto, then you can't use it as a good way or in a nice way like what are the features

which Volto provides like in build. Like everything in Volto you can customize it, right? So let's get started with that. So first of thing like who am I? Like that's the only thing. So I am Alok Kumar, currently doing front-end developer at KeepConcept for more

than 2.5 years. I started as an intern and joined full-time after my degrees. I also created Gatsby theme clone because when I applied for GSoC, my mentor is Osoko, so he gave me like a project like hey we have that time Gatsby is famous, can you create that for the theme one?

So I created it and after that I did the GSoC onto the Gatsby source clone. It's still used, my code is still used in the University of Gisselabia in Finland. And then I also the collaborator of the task cluster CICD. So before the GSoC, I work for the,

I generally open source for the Mozilla organization. They have the CICD platforms where they use all their for the materials and everything. So I also contributed in that. So today we are going to decode the Volto by understanding the Volto config object. That's the most like we do not touch into the like most of the talk like what are the config object.

But if you see any like file into the Volto, you'll find this import config from clone Volto registry, right? And we do not know or we do not use like this config like what's in there, we just use like what we get like. If you want to customize, just get it and use it.

But today we are going to look into the details like what you can pass, what are the different things which provides you with the Volto inbuilt. So first of all, like if you go to the config object, the first thing like the object key which will be the setting objects. So we can going to talk about that. So what is the setting object? So setting object of the

configuration registry is a big registry of the miscellaneous setting. So if you see, if you go to the config.index.js file, you'll find this setting object and it contains lots of properties in it. Like you see, it's used to configure the Volto, like everything which you want to put in there, you can put it. You can also put your own

and you can use it as a props like directly using the config in your components or your own view or anything. So Volto already provides you the default setting which is used for showing the default views and the bare side. So if you go to our demo clone website,

we already see your website is running. So how it's running? Because for running a Volto or any clone instance, you know that you need an infrastructure configuration. So for that, we provide the default value for this setting so that we can see the running website or the

demo website which you can try and use it. So some examples of the settings which you have, like something like the public URL, like for developing, you might be developing on something certain ports which you do not want. We want to something others like the URL. So you can just provide like public URL, whatever you want, like HTTP local host,

5,000. At default, as the React developer, we told like 3,000, but you can do anything. Same as the port number, you can define it. Also, you can define the cookie expires, like how many seconds the cookie expires. By default, we make it six months. The symmetry

option, it is also important for your projects to have a symmetry option so that you can debug it into the life because you might get running a good local host website, but when you put into the production, you might run into some problem. So if you have symmetry configuration into the Volto, it already provides that. You just provide your symmetry option and it will directly

attach to your dashboard, right? So if you pass the symmetry option, you get that. Then we have the non-content routes. So as you know that Flown is all about content and the content creation because it's a CMS. But we also, for maintaining the CMS, we also need some other features like the control panels, what should be their language, what should be done

more, add-ons we can add, how we can add that. So how does Volto does that thing, right? So we have like different routes, like one is the content routes, like when you go to adding any content, we have like three modes, which use that only routes and then we have the non-content routes, which we can configure or you can provide all out of the box feature

which you want as a React website. So you can also do with the, what you can do with the Volto, you can make a additional website fully configurable within the Volto without using the Flown CMS if you just configure your non-content route. And you can use anything like

non-content rule, Hofstra, any CMS, do that request, do whatever you want with the React component and everything. So the question is like how I can extend the setting option or modify them. So you can extend as you use in your add-ons because I am mentioning this add-ons

because what we are doing into the current, our own projects, we are not like, we are customizing the Volto, but we are customizing into the add-ons like which we do into the Flown. So if you are developing in the Flown, we are developing each and every project as separate add-ons, right? We name the infrastructure, the add-ons, like whatever project we are making

and then we do the customization and everything into the data. We are following the same convention in our recent projects. So if you have this Volto, FJJ, the site which Timoth told us, so does. So if you, we are developing it like at the Volto FJJ add-ons, we put everything into that add-ons

and if you want to use that, just use that and customize it to another project like which the feature which you want to consume from that. So if you see the architecture, so basically if you develop an add-on, you must have a index.js file which export a function which is like compulsory required. So you have a apply-config function which gets a config object

from the Volto and this is the same config which you are importing into your component. It just initiates and provides you that into your components during the build time. So for there you can see that where I am explaining the config settings. So I assume that

you all have the JavaScript experience because you all know that and then here you can override the parts using the ESX and also the whole thing you also add whatever settings you want and you can use it in your own code base and everything. After that the most important

things like I never saw no one talking about is the widget objects of Volto because if you see like what the clone made up of, it's made of the form because for the content type you need a form or a user to submit the form. We are also doing this extremely similar form thing into the Volto for each and everything, but we never talk about the widgets. So how we can

scale or make a form using the similar component writing do not writing like repetitive. So if you have any like file content type and you want to have a specific form regarding that, you do not write like the specific forms like only the four files. What about like you get another form

which is different than the file? So what we are doing into the Volto like whatever the things we need we just create a widget out of that. So whatever like if you want like I have a texture text input field we just created a text widget. If you have like text area field textbook field we created text area for uploading the files and everything we created the file widget type.

So if your client comes with something different like which is not unusual which is not presented into the Volto you can create your own widget and think of it like widget because once you created it you can use it in all the upcoming project which you want because every client is almost the same they just need some CSS changes and the modifications regarding them. What I can think because if you use the Volto they just want the

theme to be changed and everything. The first thing is like the widget objects hold the widget registry so we have a widget registry within the Volto and the config object has a widget key which contains this registry and using this widget registry used for rendering the forms

which I'm going to talk about this into later on like how we generate forms and how this widget maps with the schema which is coming from the Plone thingy. So let's see like how this widget country looks. So this is how a widget mappings or object look into the Volto inside.

So since I can only say the part it's long. So the first thing we have many like the widget mapping method. The first one is the id and its mappers the schema well like you

understand like better if when I do all the things but here just keep in the mind that it looks like something like this we have an object with the id and then this id define the schema and this schema widget is a react component which is assigned to it. So we have this id like widget with the help of id with the widget key with the vocabulary with the factory with the choice

if you go with the like in the config folder into the widget you'll find this thing. So here I'm just explaining the certain things like it's look like it so this is schema widget which you are seeing is simply a react component and if you want to use it like not into the form or if anywhere into a react component like you are developing something new you can do it by

simply accessing like config widget id schema and this component is present everywhere like wherever you want and the important thing is like since we have to take care of the all the things like what if user do not want to provide anything or what does Volto does not matches

then the Volto what is will do is like it will give you the default fallback like if you do not provide any widget or any type of matching indices with the widget mapping it will give you the text widget. So how you can add your own widget in your project so let's see like your client comes with like something different like or something important like which is not

present into the Volto you can develop your own widget like we are also developer develop more of them and you can just do it by the config widget inner line. So you if you remember this config this is you have to do it in your like here like you in your

apply config function which are providing using the clone you get access to this config object and in config object we have this widget registry so you just have to this this you just have to assign or create a new variable out of it and you just need to put your react component there.

So here you can see that this widget has this widget mapping and this widget is the key like if you this widget like here this this so we are accessing this one and adding a new properties called inner line and we are putting our align with it right I think it's might be present now in Volto also so we are going to look in details like

how the Volto widget mapping works and when we talk about how firm generation occurs in Volto so if you see the Volto you have you can see like forms everywhere whether it's the block view or into the blocks in sidebar everywhere you receive form and we do not write any code like

for each and particular view we just use widget to create this form out of it. Then the third thing is like view objects of the Volto so we have like since we have like I told you like the setting objects the widget we also have the view registry for that.

So in view registry you mainly configure your view so if you are any content type so since you have the content type right and if Volto only provides you a default one we just saw the blocks and everything but what if you have a news content type and you want to the date to be

emphasized so what we will do you can't use the Volto ones you have to create new ones or whatever the clients needs so if you watch the Timo's presentation it has like a research project with the lead image banner it's a custom view which we have written for this especially the research content type so view registry gives you like four like four objects where you can

define your own views the first one is the layout views the second one is the content type the third which is the default one and the error view so so generally if for the layout reviews what is defined is in Volto we have this the folder content type or you can mention is there in that and it only shows you the content type view like if you have like lots of pages

and everything and you want to show it like this you can use the layout views and it gives you that so maybe I can show you because I also get this in morning because it's currently it presents in the folder but now it's like folder is not there into the Volto so I

take help from Victor to implement into the page content type so you can see like here we have like two contents like you see my second page my third page and you want to show this content into the view you do not want the default one I will show you also the default one so if you see this is the tablet view if you okay I have to go to the page

if you see I change the summary view now it's sent to something else we have this document view here you can see that whatever I write into the block view then it's generated there if you go to the album view it looks like something like this where it's a map your component into this this thing okay so that's the layout view then

we have the content type view I cannot show you the content type view because you based on your client need you do this thing the content type view but I show you like how

you can do that and the default view is the document view which I saw like whatever you write into the blocks is there and Volto also provides you the error view so what happens if you have the photo field 404 page right you're only saying like 404 returns in there but it does not look lines but if you if the GitHub is down you can see this unicorn image

right which shows us like it's down and something like that what about that like you can also do that into the Volto you can do anything into the Volto because it's react you can create a component and we provide the config object to do that so if you see like the config has this view object and in view object you can send all these configuration options for the each of the views like the layout views the content type views default viewed and

the error view I showed you the layout view you can also customize it right so what about the album you only have the image what about you also want the short description below it you can write something about that and you just map it and it will show you the somebody and everything so this is how you do that like the layout views like you layout views has some

certain like you you describe here what you want to choose and based on that you map your component so document view has a component for default view you find into the Volto GitHub repository same with the summary tabular listing and the album view they are all just a react

component map to it and based on the mapping we fetch the component from the config we do any like something we do all these sort of things like everywhere into the internals of Volto we fetch everything from the config then we have the similar for the content type like your for the similar content type like we have multiple content type and you want some

different type of views just put it into the content type views like news item file image event pass it that whatever your client's new window particular to emphasize or whatever he wants a static behavior based on your data or anything you would just do that write a react component map it with the your content type and Volto will show it for you then we have the error

view example for the flow in Volto so you want a nice fancy animation into the 404 phase where you can play a game like tic-tac-toe or something like that you can create that and map it and you can give it to the 404 key and if they have they can play the tic-tac-toe

because it's all the react right same with the 401 unauthorized 403 488 what if your backend is down it also like if you check Volto like if the backend is down it is just to show you that like there's something problem with the backend it's not something like with the FedEx request same with the course error like if you have the course error you can provide

the react component it will render so now we have a better understanding of the configuration like let's discuss about how Volto renders these views or how it uses these settings internally so in Volto we mainly have three types of code related to a particular content type since

clone is a cms we are going to talk about the content type and every content type has the three mode the first one is the add edit and the view mode right add and edit is almost the same view is like similar to the it is the same for the add and the edit but add and edit has some certain different features you can give like when you are creating

a new account in instagram or twitter you can or in gmail you can only choose a particular user you can't modify it after like once it created right if your client also wants something like that like hey we can't modify this this is only read only after the once it created

once the object is created it's only be a read only type so in that way you can put your schema in that way like in add a in add mode we only have this this thing in ito it we put the restriction and we implement the same thing and view mode like whatever you save whatever

your view component volto will render that with the data so here i've written the same thing like add and edit are almost the same the only difference based on the operation we may show or hide something from the view or some feature for the edit only so now let's

discuss volto edit to you and add mode in details because that's the only important ones into the volto once you understand like how volto's generate the forms how it simply implements a slate editor whatever's coming to where you can just you already know which part you have to take in just find it amend it and you are good to go so in add mode like

for any content type in volto in add mode you you see two types of view based on the settings of the content type so whenever you go create a content type into the flow you have to be asked like certain behaviors enabled by default or some behaviors you have to enable to get some

extra features right in volto we also provide a block behaviors right in if you are using the volto ones so using this behavior you get two view into the for any content type if it's enabled it's got the block view if it's not enabled you get the form view so what is the block view

so in block we mainly we saw the setting related to the content type into the sidebar portal of the on the right side portal of the same content type on left side we give you the slate editor with the nice user experience where you can write all the rich text thing which you want for a particular uh a page and also you provide you the add the blocks and make

your site look good and nice and second will be the form view so when block view is off like when you do not provide the behaviors like clone behaviors of the block behavior then we do not provide you the slate editor which is and you and if you do not have this behavior you can't

the blocks you get the normal what the employees provide you a simple form where you can add the titles description titles and everything save it based on your view what you configure you get what you get but if you have this block behavior you can add additional data additional

to the what your forms has so example of a form view here i have taken a file content type and here you can see that it does not have the this slate editor or the blocks like we talk about the volto it is simple like a flown form structure like it has the title description

and the files and here you can see that this title has this news on the right side you can see that this is the input field this is nothing but a text widget which we have developed same with the description since it's a text area field video we made a text area widget for the file you can see that we have like it's this nice little widget like with so

based on your interaction and everything it changes the uh on the content like the draw file here to upload a new file if you drag it change to something else when you drop it it turns to something else and it shows you the preview and everything so let's see like how this form generates into the volto so if you see that like volto is the front end we call it as the

volto is the front end of the flow it does not talk directly to the flow so how it talks to the flow is talk to the clone by clone rest api so what does clone rest api provides us the flown stpi provides the schema for the content type in forms of the javascript object we call

that as a json object like these object contains several key but most important ones are fields and a property so whenever volto tries to do something something in its to show user it always talks to the clone with using the clone rest api blown rest api gives lots of

objects whatever is there there are lots of them you can see it into the network tab but for us like for the volto the two are the most important one the field sets and the properties so every field set has a field key that contains fields of the given field set i'm going to see you like what this means by this line like where is the field set where is the field these fields are describing the properties object so generally every field set has some

fields like it's like object which gives you like a like what fields you want in a particular fields object right then this whole fields object must be described like which widget it's one to use and based on that we render the form and then there is additional thing like

each filter field set are shown as tab into the content view so if you remember the files view where you can see that like we have this thing you see like we have this default and default only has this three field and then we have the tabs like categorizers and date owners

so each of this tab name is the field set is the field sets and whatever the fields are there they are the fields for that particular field set into the add content item these field sets are represented as tab into the volto but if you developing the block these field sets are converted into accordion into the sideward okay so now i'm going to show you like how this

schema looks like from the prone rest api this is like a small one so this is can you see it

i guess so right so i remove all the additional fields which is presented to the which comes from the prone rest api for the file content type but this is what you get like an object like just an object and these are the field set like you see the field set is an array because you saw like those multiple tabs and each field set has a field key and each fields have the

description like title and description and each field set must have this id thing and the title so the if the title is default that's what you saw into the tab thingy right and this is id i do not know what this is used for but it's there and then i do not know particularly the

use but maybe of something like use internally then we also have for the title like if you see that the categorization thing onto the slides and then the for categorization we have this three field like subject language related items then what happens is this whatever this field is described here it must be present into the fields because we do not know like

what this means like subject language or what do you mean by the related items so if you go to the properties field you will find that if you these days like if you see this setting tab it says the field called allow discussion right the same key must be present in the

properties so sometimes you miss that thing like going to the sidebar most probably and here we have to describe what this allow discussion should be into the object type so here you can see that we have these choices where it is true or false we have description enums factory multiple things but whatever you define into the fields

array it must be present in the properties same happens is like i can show you different of them like if you see these contributors right they must be present somewhere into the fields that contribute as you see here in the ownership in that way we know that like what this contributors is and based on that we can choose the widget i can

show you we can widget mapping can be done can be done with the multiple things like id widget and also the types vocabulary and i can show you one of them like you see here the type is string it must be array somewhere it's not like if you go there

like here the type is the array so based on that we shows you the array widget here is also the array but i am going to show this thing widget is the text area and that's mapping you see we do not have this type if you get that widget thingy we replace with the text

area and if text area is they are mapped so it give you that so this is how the schema look likes which come from the prone rest api so now i have drawn some pictures like

for explaining like how all those things are get generated using the internals so i have drawn like in excel draw by the taking the example of the file content type like in add mode so what happens when you click or go to the clone and you choose the content type file and you press the add button like how it's all generated okay i think that you are able to read it right

so whenever you click into the file content type or any content type the whatever it goes in volto we first goes to the add component we have a add component into the volto it goes to there

is the add component has a library called qs parse and what it does is that it parses the url which we are currently have and in volto if you see carefully like whenever you want to add any content type we generally pass our content type as a params into the top so this library

just fetches us the params like which for content type you are trying to add we just get and using uh the plonest api after the rebranding of the add component we make a request to the plonest api in component did mount life cycle event once it gets hits we get the data from

the plonest api redox save it right we get this uh schema as a props in our add component then we pass this schema to the form component so this add component then we have this form component this form component consume this schema right we also get from the plonest api

whether this block behavior is enabled or not based on that we make two decisions either we are going to show the volto slate editor or not so if block property is not present there since it is a file content type we know that it's not present so we are going to work through the diagram of that like this thing the nose one so what we'll do is like once this form

consume this schema what we'll do is like we you see that this fieldset has an added we map over this fieldset and we pass this each schema fields to the fields uh component we also have

a fields component which matches the widget one which matches the widget mapping and it contains lots of matter which i'm going to show you so fields component is the responsible for selecting the widget and rendering them so you can see there like i think it's visible like this uh widget has like this amount of method like with get widget by field id get widget by

values get with it by name get with it by choices like these have all these methods right and so you and you see that it's a it's all or operator so if it does not found if one method does not return you anything we call another one we call another one until we get a

widget so if you see there this is how it's all like if i am going to explain you so this is the simple schema i i taken from the sidebar because block or in the sidebar also has this schema type and based on that we generate the form so i just take an example here you can see

that we have this field set a single one it has the id default and title you can see that it has the fields like url title and the line based on that we define the properties of those fields like if it is url what should be the title and then based on title we have this widget name like which widget we want to use so if you are generating the forms or writing

anything you have to go through this way and based on that we can generate the form after this thing like after getting this schema this fields property will use this method and based on the widget mapping object like this object which contains everything will show you like it will give you the widget you are there so if i can show you

this is how it's look and you see like this uh type of the widget we have like you i saw your the url thing this is the url widget and if you go to the url widget it's view or something like that it's defined

like how it's gone it must be okay so this is the url maybe i can show you like title it's view i guess okay so this is how this is how it's mapped and based on that the react components renders

after that widget renders we see this beautiful form generation into the volto then the second part is like what's if it has the block properties on then what's happened is this this

form component gives you uh gives renders another core component called block form components right this block form component is the handling on the left side and we use a react feature called portal based on this portal we transfer all our setting tag from the content to the

right sidebar which you see there so this is the portal sidebar this is the block form component and using that the block form component gives you the volto select editor and using the react portal we are transferring all the settings to the right side where you can write the same thing the same data which you want for the particular content type

right so uh details for the block form component like block form component is nothing but a drag and drop available area so you can see that in our slate editor you can just drag and drop each and every block you do not have to move out anything so

it is just a draggable and droppable area by default we showed you the title like the title and the text select editor text widget but it's happening the same like if you add any other block we are not doing anything complex we are just uh uh pulling out the edit view of the text and putting the edit view of that block like you know that like for every block we have

to define two component edit and the view so we are just putting it on that side and that and that's how the all volto block renders so after that i already told you like edit and add is almost the same it's nothing different only the features is matter like what you want

to be read only in modification otherwise it's almost the same so view mode so basically for the view mode for the block you write a view react component for the content type you write a view and you map and we put it into the like the content type views into the config

and it will render it so after the content type we also have lots of feature in plume how are those implemented like example like different control panel configuration so content type is one thing what about the login log out the different control panels into the configuration

so they are nothing but the non-content route which i told you earlier also like showing react component design to the specific ui so whatever you see other than the content it is similar like a react component like you are developing any react project like and whatever the designer gives you design that specific ui

get the data from the clone rest api and show it to user so we are and after that like we are also using the redox for restoring the current state of the app and middleware for the making request so if you have like uh attended the volto effective training

victor and tibirio showed you the middleware which we are using for facing the request and everything into the volto so now you know how volto is made but there is still one question like everybody i think knows that like how customization work in volto like how we are able

to provide this it's everywhere now like every like every like new library is giving you that so we are not doing anything complex we are just using the webpack alias property which allows us to resolve the path so basically what we are doing at like we are importing components from everywhere right webpack has this alias property what we are doing is like

during the build time during the build time we just replace us uh the customization part customization part with the original ones and we get that that's uh that's why we are in volto we told us like please follow the direct free structure which is mentioned to the world that's the only reason if you put to miss something we do not get the same part then

we we do not get like we we are not able to replace your component with that so uh that's it from my talk hope you enjoyed it learn something or something like that so yeah that's it so do you have any questions regarding it then no i have one question from

the discord okay let me just read it through the question is how do you configure volto

settings to return raw api content if application slash g's and adders are passed in the request this is a standard in classic clone if you visit classic site with a browser you'll get web view

if you pass the application slash g's and header you'll get raw api results for that thing i do not think i know the answer for correct ones like how we can figure this thing maybe victor or tb who can help you or maybe he can answer even to the discord chat

because i really do not know like how if you open this application you get the data okay thanks okay i think i hope we have time but thank you if you want i can walk you through the code like all the code so i think if you are interested otherwise that's it like

do you want to just go through the code like how we does the thing we have like almost like 15 minutes i guess right so let's let's just see like how it goes so if you see like in routes if you go through the routes of the volto you see that we have this like this kind

of route like everywhere like this is how the volto goes to particular component like this is structure you can see that how many routes we have into the volto we have this default routes the site map search and everything and if you go below we see this type of thing you see

this this star wildcard this is how like when you go to a certain content type it's using this type of wildcard and it's found if it's in with the content it just you gives you the content view or the content react component same with the add thingy let me find like where it is

the add it must be there this thing you see so whenever we have this file content type you press the add thingy you get this add component and if the if you go to the add component like since we need to know this thing regex and everything like the redux thingy

you see that like we are using the parsing this thing qs pass location url and everything right this is how we this the we get the content type from the url right and if you see the component did mount request here you see that we have a specific action regarding that

schema like this dot prof dot get schema we get the type we get the base url we make the request and after getting the request we save the schema into redux and redux provides the schema now after getting the schema what we are doing is that if you see is this the form component

this whole like react like our volto is like you see this is not this is just a single component is taking all care of this take care of all the form generation for the content type and the block

form and everything so if you see that in form component we are passing this schema thingy this props dot schema if you go to the form dot jsx i did some some decoding to get everything so if you see there this dot prof dot visual this is the if you see like this is what i

if you see this conditional it is what is checking the block behaviors if it if the content has the block behaviors and if the client is loaded because volto is a server signed rendered also and some of the library do not comply with the server side rendering so we

put the check to remove that like we do not want to render and break our website so we have this whole thing so we have the block toolbar which you see but here it is the thing like if you see this block form this is what gives you the uh slate editor because this is the draggable and your droppable component which i am talking about

and then we have this portal thingy where you get the right sidebar so if you are interested just go through it you'll find it and then here you can see that we have this field component and in field component we are passing each and each properties of the field and we are

mapping over it passing it to the form component and form component it to what is taking and mapping the widget thing if it's not there because it's the colon and it's ternary operator if the

block behavior is not there we are directly showing the forms into the tab into the tab view and this is the field which we are taking or talking about like it is the one which generates the mapping and everything so if you go with the fields thing here you can see that we have

this get widget by field id get widget by tag value everything and here are the one-liner for each and every method so these methods are not something like a bigger function or anything they are just one-liner because we have a registry and we are just checking it right true or false and based on that we are just returning the that particular widget from the config

and this is how the form generation work basically this is how the volto made so if you go through only this thing like form field blocks form component and if you just go through it and master it like if you know like how this whole things build up i think that

you can develop anything from the volto or you at least know the all the internals like how because these are the only three component which are bigger in size which we do not get outside like or make a into another component this is also our bottleneck so yeah that's it

from this talk so thank you now we have a 20 minutes break so we'll come back at four