Thank you Yeah, so I think most people in the last talk so you know who I am Victor take it away Yeah, so

Same thing so the talks we have and we currently at the extensibility one Yeah, so what will we cover so the idea of this talk is so the previous one was more or less What is full toe and what does it look like and what this more or less is the code base this one is more about If I want to use filter now in a website

What techniques should I use and how can he my bootstrap my own product? And I can how I can customize it to add some theming and added custom views and overriding other views and all that stuff so that's what we'll be showing and Yeah, so, you know how you grill at your own site, all right, it's like that will not take over yep, then we had

bolto and Not a long time ago bolto was thought also was as we created bolto It was not very thought to be a library. So We are in required a way an easy way to extend it

Then that's why we call for a g-sock meeting the Lesh here did and he will do a talk on that tomorrow and He will explain you how the old this Extensive extensible way of creating the boiler pre-required to use bolto as a libraries

Which we call it create create bolto app So the only thing that we have to do is do yarn global and install this Utility that will create that boilerplate and After we have installed in our system we can call it and

We will have all the our bolto app in in this In this location, right? It's very much the same. They create react app application if you ever use it, so it's an easy way to an easy entry to Create your own bolto app

So you only have to do these so CD to your recently created directory and then a yarn start And then you will have you bolto app Yeah after that we'll have a bunch of files Rob already show you the last during the last

talk Yeah, it looks very much like this Which will you will have some directories by default very much the same the volto ones But empty because they are really for you to add things. We will cover all them during the talk and all the voli pred required for

the volto app work, right So this will be the output of the create volto app Command So yeah, as I said, we'll have several of them So like the static resources one when we will put our favicon or robots tixi and so on

Then yeah, we also can yeah The most important thing that you want to do in our in our In our new app is to override components

So you will have by default all what bolto has and it will looks like exactly the same like bolto Then you can start overriding a couple of things a couple of our of artica of artifacts One of them are barely components like like the lower one here

or the the SVG that component that Accompanies the the logo the logo component and you do it like You will do it like in jbot if everybody is used to do that You only have to grab the original one the original file then place it in your customization folder, which is

Here also the customizations folder. You just will put it here Using exactly the same folder structure that bolto has so that way bolto knows what to customize and when so

having this kind of so these three of Folders which maps the same that the volatile one has then you will customize the logo SVG Component and you will have another Another the logo customize with your own logo and it's that easy

You only have to reboot the server and then you'll have it And the same for every for every component, right? So it will be the same so you will have to go to volto grab it and copy it here maintaining the exact structure that volto has

right so internationalization As I mentioned in the volto talk we're using This more or less the same machinery as we currently have in plan That is based on react intel That's a library created by Yahoo

The react intel is the react implementation of it But there's also an implementation for angular and for a few and for basically everything you can use the same machinery So what we did there was That we created the script

Called well, it can be called with join ai 18 n and what it does it It will extract all the message strings from all the sources So the same thing as you would expect from blown Which is actually not really common in the JavaScript world because in JavaScript you have to usually have to define your messages somewhere But we actually have like a nice extraction tool. So you don't you can't forget any of those

So what it does it it will extract all the translatable string from all your sources That will be generated into a JSON file the JSON file will then be Converted and synchronized with a POT file which we can actually use in our translation system The POT file is now synchronized as you would expect to a PO file

So all the new strings will show up or strings will be removed when they are removed and the final step here is that the PO files are generated back into JSON file which can be picked up by the front end again The change from Volto and from theming your own site is

basically, we are extracting all the strings which are in your own app and The last step here will combine all the translations from Volto itself Which are custom with your own translations and will merge them together into one big translation file Which can be used to do all the translations

So How can you make text translatable in your own view? There's a really simple component which is called formatted message It's a simple react component can be imported from a react Intel and what you do is you render a component as you can see

here and you provide an ID and you provide a default message and That's it. Then it will be translatable If you want to translate attributes or any other string which is not directly rendered into view there's some more steps to take there What you'll have to do there is you have to define the messages on top of your on top of your view

So you have a list of the messages you have to define with the same ID and default message Then you'll have a decorator for your class, which is inject Intel what this does is it will make It will add an internationalization property or object actually to your class which you can use to do some translations

And it has a matching prop type so you don't have to do the whole prop type validation and Then you can do you can translate it in attributes. For example, so if I want to Translate the title I can call the Intel which is was injected into it

There's a format message function and I will pass in the message I defined on top of my file Yes, tell me We just decided this morning who's gonna do what so we're having and we're looking which is who's doing what all right?

so overriding views as Victor said the Overriding the views is exactly the same as you would override like another resource. So As long as you match the exact folder structure which is there in Volto it'll work so if you want to override an SVG match the folder structure if you want to override a

View just match the same folder structure copy over the file make your changes to it and it'll work one thing we also added to the runner is it actually it'll actually check if So it will go through your customization folder and look for all the files Then it will look if any of the files exist in the Volto package itself

If it does it'll override it if it doesn't it will give you a warning. So it says, okay You passed in this view, but there's no matching view in Volto So you probably made misspelled something or so it actually it's nice to debug which usually have something that I really override it It's not working why it's not working. So it's actually a nice thing to have

Then we have something which are custom views, of course If we want to add another view which is not currently there What we could do is write it in our own in our team package So for example, the full view as I said is not a part of Volto yet

So if you want to add that what we do is we go to the components folder We add a folder called full view and we create our component there. So the full view just JSX is put on that location That's step one So what will that the Full view look like this is a lot of code

If you're not familiar with react and it's probably a lot to gasp at once, but I will go through it quickly So basically it's a react component which and there's a rendering of the the header It will loop over the items which are in my folder It will show the title. It will show the image if there's an image attached

It will show the description and it will show the text That's basically what this component does Then we We have to make sure that we add it to the index.js file so we can easily import it this is just your entry point and

The next thing is that we have to make Volto aware of that your view actually exists. So, how do we do that? We have a config.js file and by default it will Look the same as this except for this part. So what do we do here? We basically we define which views are available

We import all the default views from Volto itself and if we want to add some new views to it Well, we'll just expand Extend the property of the layout fuse in this case and we say okay the the key of the ID full view If the layout is specified like full view, we're going to be rendering the full view in there

And that's it So that means that if the back-end says okay when you have to render the full view we go to the full view components Which we created earlier. Yep. Same thing as the views are the semi stories for custom widgets

so let's say that we have a custom widget that we want to extend because we I don't know we have our own item product that requires a specific widget for rendering the form in Volto So the way of doing things is almost the same like in views

So we have our components and we will have our component which it there as well Which will live in this location and then we'll have the code for this rating widget and

Yeah, it's I Will do whatever I should do and then We have also the registration of that widget So we have to add it to our index dot JS the same thing as we did with the view

And then once we have this Declare we can in the customization is in the config.js we can Declare that we have a new widget and we have To do exactly the same as we did with with the view

So we have to import the default widgets from Volto and then add ours so the rating we have to add To map the rating key with our component and then that all we that will be so when when the backend says hey this widget should have

The rating component then Volto will know that he will have to use this component for rendering Not any other Of course this if there's any so the rating Id should come from clone because we already have declared that this widget should use the rating

component so clone will return with the clone recipe I that this widget should Matches the rating which it then Volto will map will know that he will have to render the render render the rating widget

Instead of any other and we also is nicking the passionate icon system yeah, because today is like every G SVG all the things and We We thought that it's a better approach

We needed a better approach that we have now in plan with all the font Icon system and In fact, there's a way of doing that and we implemented it in in Volto as well So the thing is that as if we have an SVG and we wanted to use it as an icon so we

can use directly the import from ES6 and then This will be taken over by webpack which will apply some nice things that SVG always is a packet an NPM package that

filters as VGS and like kind of clean them because the output of the SVG is directly from from the authoring systems like no like sketch or like I Was called the Yes, they are not very optimized so as video will will optimize this SVG on the fly

So you don't have to do anything Really? What package is doing for you? And then we have to use this icon component that we build and then use the SVG like like this In in your code so you declare the icon is going to be there and pass the name with the import that you

Just declare before and then you will have your your SVG there one of the things of the Good things that is having SVG inline SVG icons is that you can style them with CSS, which is

Already huge so we'll have we match this very much the same things that we have in font using a font icon systems font basic icon systems, but you you can also animate them so which is also

Yeah fancy thing. I don't know if it's We could find a good use for that, but you can do it and there's a lot of gist about SVGs today indicate in the JavaScript community and we can do a lot of things with that another thing that you get with inline SVGs is

accessibility so you can set Accessibility properties directly into the SVG and also in fact our custom component in our Icon sorry There's an arrow here, sorry It's a typo. In fact, it should be the same like the icon

So we call the icon component with these props one of the props should be the name I don't know why but it's passed over. Sorry about that and We can pass several props that will modify the behavior of our icon we can pass directly our color

So if we don't we want to set up the color of that Icon directly without using CSS we can do that and we can declare it in JavaScript like this We can set the title of our icon which could be static like this or could come from the internals internationalization

clone engine which happens a lot of times but for example for when you're rendering the toolbar and you're having lots of literals from that that you have to map to icons and Then you can set the size which by default is set to 36 PX Pixels. Yeah, and you but you can modify it

You can set the class name as well in case that you need as we said before to you need to add fancy CSS to that without having to inline installing it and You can also add a handler for what happens when for example when you click on that icon

all of them are Props that are optional and This will be the the most simplest one as I said where it says my customers which you should should say icon and then The name should be there as well. So my fault. Sorry about that

Yeah, yes, so As I said what you can also change our Some of the other settings which are defined there one of them is all the rich text editor settings so

By default the people saw the photo talk You have I can show you though We go to a specific news item and when we select some text we have the

What you see is what you get editor tool by there, so we'll have by default. We have to bolt italic One with the link item there with the and then we have the block styled items and like the header h1 h2 like the list unordered list

block code and call outs which are there but if you want to remove some of the styles if you don't want them there or if you want to Extend them you actually have one to have an extra one you can do that So how does that work work? So the first wing will be doing is For instance if we want to have underline which is not there by default

Maybe for good reasons, but if you do want to have that the underline then you can do so. So what you'll do is step one There's some helper methods which you can import one of which is the create inline style button That's part of the draft JS button package and that will help you to easily create a button

So you don't have to worry about what it should exactly generate And then we'll then we'll import the the icon Components which Victor already mentioned and we'll import the SVG So as Victor mentioned we have a lot of the SVG icons or actually all of the SVG icons

Which are part of pastinaga and there are a lot of them. I think they're I don't know in a couple of Two 250 I just heard so that's a lot of them So for most of the use cases there probably is an icon you can find and if not then we could add them later I guess

You can add your own as well, maybe we shouldn't let developers do that though, but Or just add Hello Kitty in there Yeah, so the first thing you do is you create the inline style button what you'll do there is I think

Missing yeah Yeah, so this is what the for example the

The bolt one will look like so what you do is you provide the styling you want and these are Currently defined in draft JS. So draft JS has a definition of all the available styles, which they have

If you want to so they have both for example italic as you can see here how to two out of three unordered list These styles can also be extended So if you want to have your own custom style Which is I don't know like a fancy call-out or a quote or whatever you can you can add your custom one there But by default like all the normal ones are available

So you do you specify which style you actually want to apply if you press the button and then you? specify What the What the button will actually look like so in this case will circuit children so the button what it will look like it will be an icon it will have a name and it will have a size and As Victor mentioned you can also add the title and all the other stuff to it if you want to

next step is to Also set the to add the button to the toolbar So what we do there is in the config.js again. We'll have a variable called settings The settings controls property called really long name though rich text at our in-line toolbar buttons. Yeah, that's a lot. Yeah

Definitely agree yeah, no definitely. I mean so Yes, that's that's definitely on the roadmap currently But for that to work we either have to see if the current settings we have for tiny MC if they match up

with the settings we have I guess with the With the button so it could very well be so would actually and we can actually read registry settings already So that's one thing we could definitely do So yeah, we could definitely work on that. Yeah, I guess yeah, and that's I mean if and then it's also

I think you can also define on your schema. You can also define custom Properties so you can actually say in this field Shoot like this rich text field should only have I don't know bolt and italic for example And I think definitely we could read those values as well. Yeah, so currently it doesn't work yet

Yeah, yeah, I know. Yeah, I've yeah, I remember from tiny MC how it worked. So yeah Yeah, so for now what you do is You have this property called rich text editor in our toolbar buttons which is a list of all the buttons which are available and what we do is

we add our button in there and We paste in the rest of the button. So it basically means we want to underline button to be the first button So if we want to have it like as a second or third, this is just a list so you can actually just split These values and put it as a second or third item, whichever you prefer

alright Then the last topic is the actions and reducers If you don't know what Redux is then this will probably go a bit over your head because it's a lot of stuff Which is added in there. So this is not easy to understand

but I'll try to Explain it anyway So just a short introduction of what redux is redux is the state machinery which we use on the front end it is a store which is More or less a store of data in there

Which is just one object a nested object with a lot of items in there So it will contain for instance all the navigation Properties which can be used in the in the front end. It can contain all the content Like the title and description etc Contain all the breadcrumbs data and all of that

So for the store to actually contain the data we can fire some actions so actions are things like Go get the breadcrumbs Get the content or add the content or Delete something or update something all those actions can be called

And they will eventually end up in the store. I say eventually because there are some steps in between The step called reducers so reducer is basically a function which takes in the current state of the store it looks at the action and Combines the two and returns a new state. So basically if you have an action saying

Get me some items. It will handle that and it will put in a new data in the store if the If the action needs some back-end calls We'll have we'll use something called middleware So middleware is something which is in between the action and a reducer and it can actually do some side effects

So in this case side effect is fetch me some data from the actuals back-end And if I get some data back then handle that and it will fire a new action with the data in there. I Hope this makes a bit sense. But as I said, it's quite complicated matter

All right, so if we want to So by default Volto has a lot of actions and reduces there already So for all the common stuff to fetch navigation to get your breadcrumbs to get well, basically everything is an action in Volto but first if for some reason you want to add your own actions and reduces, for example, if you're

building Your own form product or another add-on product and it has custom rest API calls Then you have to match the actions and reduces on the front end to cold those back ends The back end to call those back end endpoints, so we'll start for for example in this example We'll have a FAQ module and what we do is we get the FAQ items

So we'll start by creating an action type called FAQ Next we'll create an action. So an action will look like this an action is what it will it will return It's just a plain object. So in this case, it'll return an object with the type saying get FAQ

There's a request property in there, so that means that This will the middle web pick up everything which has a Request key in there and it will do something with it and in the request There's an operation so get can be also be post or patch or any of the other HTTP

Methods and There's a path in there so at this time there's a path saying okay want to do call the search endpoint and We want to look for the specific portal type FAQ So that means it won't you want to find all the FAQ items Of course we will add the actions and reduce to write next files again so we can easily import it and

Then the next step is to add our reducer So as I said, what does a reducer look like so reducer is a function which has Which takes a state By default is the initial state but later on it's the current state and it will have an action passed into it

and What it does is it'll process that action and depending on and then it will return the new state So for example if we do that get FAQ Call the middleware will send a couple of actions depending on the state of the current backend method

So it will first send out the pending method message, so it will say okay. This is pending message We're still fetching the data So what does our state at the beginning looks like there's no error We don't have any items yet because we didn't fetch any data It's not the loading loaded state is also false and it's also not loading at the beginning

So when we do pending call Well, we keep with current state whatever the values in there are in there We set the error to null because we don't have an error at this stage We are loading now because the pending call is fired. So we say true

We can use this value in our UI. For example, if the loading is there we can show a spinner for example, or any other method indicating that is loading And we say load it is false Next when we have the when the success comes in We get the current state what we have we say there's no error because we have a success message

The result is there in the action and the result contains the items which we fetched on the back end And we apply it to the items we say load it is true and we say loading is false So this is the success handler and then the last one is to fail So if a call for some reason failed then we'll say okay. We didn't have any items

we specify the error which comes from the back end so that might specify what our error is and We say we're not loading anymore and we're not loaded it as well if there's a so here we did a Type of action of type to see if we match any of the actions

Which we have if we have to do something with it if there's an unknown action Which we don't know anything about we just return the current state so we don't do anything with it yep, and then we have the

index file of the reducers so Reducers there can be multiple reducers, of course, so the older reducers are combined into one big structure In

Volto, we have a list of all the default reducers So those are all the reducers like as I mentioned earlier the breadcrumbs and navigation and a content and everything And if you have to add your own custom reducer, you can just add it to the list So we're now adding the FAQ reducer, which we just created also to the list

So now we created all the actions and the reducers and everything so how do we actually use them in a component So the first step is we Yeah, we're importing to get FAQ from the actions. So that's the action we created because we want to call it at some stage Next we are going to bind all the both the data which is in the store and

the actions to our component so as I said, we have the state which is our global states, which is the store and We have the FAQ which is the what the reducer reducer returns and that one contains a property called items

Which was empty at the beginning and will later on if we do any fetching of the data will could turn the contain the actual data Next what we do is we imported the action and we will bind it to the store So we can actually call the action on the store We'll have the rest of the view here, which is more or less the same as the summary view we saw earlier

And then we have the lifecycle methods So this method is more or less an event So this one will be called when this component is mounted or when it will mount This one will be fired. So what we do is just before this one will be mounted

We're actually calling the action and to make sure that we're fetching the icons from the back from the items from the back end So on in on our initial render Probably the items are not there But on the second and just a couple of seconds later or milliseconds later depending on fast You're back at this the items will show up there

In a render we have This the props that items which we mapped from the global global state and we can just map through them So in our second call when you actually items actually come in We can look through those items and we can render them and we render the title and the description is in this case

And that's what that looks like Yeah, so as I said, we will be sprinting on Volto on Saturday and Sunday People any level can join so we're trying to keep it as as open for everyone as possible. We have some really

Really good tasks to start with to get you up to speed to create a few for example And if people say okay I already have some experience with react and Volto and I did the training and then maybe already know some more stuff You can do definitely there's a lot of advanced tickets there as well

But anyone can join and if you just want to help out on another topic, let's say you want to Change or edit the training material or documentation or anything is always welcome to help out with Volto To make it as accessible for everybody as possible

Yeah, I went to a mini kudos section Improvising yeah because Davie Lima helped us a lot during the last Vitomena sprint on the extensibility So I wanted to remember him and also of course again to Oliver Casado for all these

Amazing set of icons that we already know He's there all the amazing set of icons that he made for us and we will for sure use in our applications. Thanks again

All the other people that help out make Volto true Let's wait for the mic check Could you go back to the slide where there were the various case statements?

Yeah, this one yeah, yeah, so There seems to be some magic going on there so my assumption here is that The user has submitted a request. Yes, right. Yes that request

At the instant that request is sent. Mm-hmm. The pending state is returned to the user Yes, so actually so yeah what you're looking at now is not magic because this is just really simple But the magic you're referring to is actually the middleware. I should show you what it looks like

Although I might confuse you more than it'll solve So this is the middleware, all right, I'll go through it quickly so

What it does is So middleware is in between the actions and the reducers so we had the actions which is fired Then we have middleware which can do something with the actions Then we have to reduce us which actually just handle actions and at the end we have the store which saves that data so in this case, we created an API middleware, which actually

Looks for something specific in your action in this case. It'll look for It will get the action and it will fetch a variable called request which we added and If it's not present, then it will do not do anything So we'll just call the next reducer with the current action if the request is there

So if if I actually want to do a back-end call it will immediately send out a new action So it will fire a new action with the same type as we receiving but adding the pending state to it And this is the state actually which you saw in reducer next up it will

So you can also have multiple requests in the same item So if it checks if it's a list and if it is then it'll fire multiple events if it's just one it will do the request itself and then when the Request is done We have to the handler it will have to result and it will fire the same type with a success handler

and it will pass in the data and we have the error so if the The back-end call doesn't return something valid it will call It will call the error type with the type and a type fail so that's what we're checking for there

Thank you. That's so it looks really complex. But maybe that's all without even changing the URL or refreshing the page or Yeah, yeah definitely yeah, so it's all Ajax calls. Yeah. Yeah. Yeah

I'm sorry. This is probably a bit. I'm not that up with react but so the server-side stuff, right? So we do a lot of stuff with UK government and they have this GDS standard and part of that is progressive enhancement Which means that things have to work in some reduced form without JavaScript now, obviously like what you're talking about

There's a lot to do with the editing UI and I'm not talking about the editing UI but like the server-side rendering like What happens if JavaScript is turned off on the you know, the static pages the pages of the website not the editing UI So if I'm just a normal user

Sorry, no, I think it'll work if it's you if the

This is setting work So, okay, so this is the I actually have to build a production one because that will include the static JS but

If I so the CSS is not here because this is the developer build But if I run the production build then it will include the static CSS and then this part will work But as you can see I can just press all the items without JavaScript and it will still

render everything So the exact same code which is used on the front end is also used on the back end I didn't do any benchmarks, but I think so. Yeah, I have to admit that I don't like the

j-bot way of overriding and my question is

Don't you think it's a better idea to? Extend the components and only override the parts that you really want to override and maybe to split the JSX parts of rendering because I saw Big trees JSX and

They're in the render functions. There are several things to say about that It is Although you see a class there in JavaScript when it's transpiled. It's not a class because ES6 Ex5 doesn't support classes. So that's a bunch of overhead there. So the whole

React community Themselves, I don't know if you know the news, but they are moving out of classes as base Elements for components. So they even now announced a new way of doing state in a non class component

I mean in a function component and The way that we were used to do Extension like in Python like yeah, I got this class and then I extend it or or I Do a narrative and I inherit from this class and they have all the class

Doesn't work in the same way than that The Python world say so something that will seems to us so obvious to do. It's not that obvious in in JavaScript and We have to keep thinking that we are not talking about Python unless we see classes there

Extends and things like that So and also the fact that the react community is moving away from classes is something that we don't have also to have used from and To add to your point of splitting up the JSX part with the other part. That's definitely something we could do. So

Some react projects use a special controller class and a few class basically So the view class is really stupid So it only knows has some properties and will render and the controller cost us all the logic So in in cases where you actually want to override stuff we could split it up and also if we

Split up more components into smaller components, then I guess it's also easier because then you don't have to override the whole specific class But just like a really small part of it and then it's more or less the same as you would do But yeah, as Victor said, it's like JavaScript and Python are different environments. So we have to Deal with how it works. But yeah, just just definitely steps we can make

That it will become easier We have time for two more questions

Okay, thanks very much, thanks Rob, thanks Victor