Thank you, so we're gonna start the talk Anatomy of a Volto project by Piero Nicolì

Thank you. Thank you very much. Welcome everybody and Thanks for attending this talk about the Anatomy of a Volto project What do I mean with this title? Basically my goal here is to discuss how to

tackle the development of a new Volto theme So transforming what is a design Could be UI design especially Into a work plan, so I won't be showing any code here just in case

code is an easy detail in my opinion and So yeah, let's get to it So this is what I'm going to show here is a complete in-depth flow chart of What we usually do in order to complete the project

so we start from the design we go through development and then to deployment the great work from I mean It's a great work from my flowchart team, right? I know I know and

so What we're gonna focus on today is just the first two steps and more specifically The arrow between these two steps so because design is not my job and usually not my

What would I take I mean, I usually receive the design and the complete design and As I said earlier implementation and development is just a detail and it's just The step after you just

Look at the design and decide what you have to do. So most of the times We receive something like this. This is a completely random design on wireframe of a design and It looks something like this, which is of course the same site and same video that I showed yesterday

So I didn't have to record another one But you receive something like this, this is actually the site not the design but I'm a good guy so I mean it's the same and And you have to turn this into okay, so this is a I have a complex layout

several complex layouts the big site to develop so how do I approach that and this is the same if it's your first Volto theme if it's your tenth or whatever The reasoning is always the same. Of course you get used to it, but it's always the same

Of course everything that is going to be discussed here is how I do it and my suggestions But you're free to of course approach it. However, you want to but still so an overview Of how How I I prepare for it So, of course, you need to prepare the base theme for it

So basically this overview is Helps me to Prepare a skeleton of what I need to to prepare to do in order to achieve this analysis and in order to

Understand what I have to estimate later on when somebody needs to be paid for this project because that's of course ultimately what we want to do So we need to take into consideration we need to prepare a base theme we have a wonderful Volto site generator for that that can be used and

Of course we need to take into consideration base preparation so customization of variables And there are some things that are repeated throughout the whole site usually which are header and footer and maybe Other base elements. I don't know you want to have buttons that look all the same throughout the site

You take that into consideration and stuff like that If you develop all of this stuff you have a Volto basic Volto theme that looks somewhat like its design because you have an editor you have a footer and you have basic Volto content and blocks and stuff like that and

That's a good starting point On top of that usually most of the times You might have content types with their content type views and of course blocks and Which is the In my experience the the biggest part of the work

especially the development work So you start with base elements, so okay? What do I need to do to implement a header like this one for the site? And I'm not going into the details because that's depends on design

But I need to okay, so I need to have the logo I need to prepare the menu is it a drop-down menu is it not a drop-down menu How does the search button work since you don't have a search? Input here do I need the login? Link do I need is it multilingual site all of these decisions

need to be Need to be made need to all of these things need to be clarified in order to have To prepare the your work properly And the same goes for the for the site footer of course For example do I just write all this text in my time in my in my component file

Or do I need the control panel in order to for the client to? Edit this which is the biggest concern usually my experience, and then we come to the more

Site to the part that's usually different from site to site So we starting from content types sometimes we still need to use Custom content types additional content types for our work So usually what happens? I'm talking about views here because we're talking about a theme for Volto. I'm not talking about

Of course creating a content type especially Nowadays most of the times you can just create the content type and Add the blocks capability and if you need some additional data to it, and then you're done

But exactly what what what can happen with content types you you usually have Two possible scenarios it has a custom view which is Fixed and and the user has to just fill in the form and You see and then they get the view with the let's say old style view

With everything where you where you where the designer said it Or you might have a page like view With blocks that might have some different things. I don't know you might have Some fixed parts or it might have a default set of blocks, which is not just the title

Which is the page default? Of course you need to take into consideration things I mentioned earlier on which is you might need custom widgets Because you might have a few extra fields on your content type and you might have custom data

Which as I said requires some back-end work and of course you might need to Take that into consideration into your view in both situations you might need to take that into consideration because you might have

For example you might have a page with blocks in order for the user to enter custom content But still have some Fixed portions of the of the layout of the of the of your view Depending on the data or depending on the content for example and stuff like that

For example One of the simplest uses of of a custom content type that I can think of Also from the Site I still use the as an example the site I presented in my other talk yesterday, so this is the

This is not the site. This is the UI design as a screenshot. That's why it's in Italian. I wouldn't be that and Latin be that Mean to you So this is the first part of one of this

of this page, and this is Most of the rest of the page, so why am I showing you this one? This is a page that was designed to Show the end-user the a job offering that this company is

Posted on their website So it has a few custom data. It has the expiry date just below the title and It has Especially the blue button there is the button that you need to apply and there is a custom behavior when it's clicked

and So this small exercise is How do we proceed so what do we need to what is the list of the things we need for this content type? What's the difference between this view and the simple page?

So as I said, there's a There are a few additional information. We might need to have for example the date the expiry date of the of this job opening but also We can see actually that there is one thing one special thing which is the breadcrumbs are not above the blocks

so there's Something more to think about there's something else to do and Also, the title is in that gray block area. It's not below. It's not above

the titles inside that block Then there's some text. I skipped because it's regular blocks and Then there's these custom buttons that I mentioned which have a Behavior that I want to be part of I don't want the the client

the HR in the specific example to to decide the behavior of this that's part of the code and Then there's other blocks Because that's a simple listing block So there are a few things to keep into consideration So for this specific example we decided to go with

Removing the regular breadcrumbs creating a breadcrumbs block and The other thing is we decided to go with the custom Set of default blocks for this content type, which is actually

more useful that it sounds like Because it's it really helps the client understand and be faster in in in in Creating these items. Let me show you let me show you if I so I try to create a new item of this type and

This is how it looks like. So we remove the title block by default because we have a custom one we added a breadcrumbs block in there an empty text and Another custom block with the buttons. So these four blocks is our new array of

default blocks for this content type But this is something we decided and then Suggested to the client and discussed with them for this specific content type before hand then implementation is I mean, it's just the detail especially

Knowing there's this good feature involved by default and that's what you can and should do for each custom content type in my opinion and Then after the content types come the blocks So the specific parts of this content type and every page and everything else

So with the blocks options come Tons of possibilities because blocks can be anything you can literally do anything with blocks So, how do I approach a design that is filled with different options?

because most of the times you see you get a Whole lot of pages designed and you need to extract the blocks from there Or you can work with the designer when available to extract the blocks from there, but still you need to get the different building blocks

And all of this is needed Let me repeat that in order to make that list That you will need to transform into a price for somebody something and So what you need to do is in my opinion look at the blocks and Try to find common behaviors among those blocks, even if they look slightly different

try to find blocks that can be the same block and have just a different configuration try to find those that look similar but in how the designer intended them to work are actually different which is a

Not so uncommon pitfall and But those that are actually that behave similar can be similar can be just a single configurable block one suggestion that I that I can give you that I did I did this once because I read it in some

blog post from from a designer a few years ago, and this wasn't for a for a Standalone application, but works the same I Had all the designs printed on paper and then with my scissors

I cut all the different building blocks, and then I put them one on top of the other gave names organized and Yeah, that's basically once you do that you have

Visually in front of you everything you need to build and If if the project is big if the work Seems overwhelming that might help Because it's a visual separation of everything you need to build and then you can start writing numbers and ideas and all of those Don't do that every time save some paper when possible just in case

and Yeah, so There are two cases that I'm going to discuss later Understand with the designer or

When needed and possible with the client which blocks are regular teaser blocks and listing blocks and which are just custom functionality or a Bunch of text that needs to have a special layout which is usually the case

Because that's the first level of Separation I don't know for the lack of a better way to say that among blocks So I have a few examples here because this Particular website this particular use case had a lot of this

so this is Yeah, some of the blocks the designer Gave us I Mean, this is pretty straightforward Of course that it's the same with several configurations and we had like 10 of these of these pages with

Separate configurations, but also this one This is kind of small the text is not needed for you to read but it's how we received it Which is actually useful because they also they realized they had the same

Blocks with slightly different configurations and they Prepared the configurations for us, but still it's the same with slightly different configuration. Even the small blue corner is a configuration is a checkbox and also this one and I could go on with other 10 or 20 of these and

Yes, so even even by dividing those into these slides. It's easier to analyze and decide how to proceed So how what are the kinds of blocks that usually?

Is interesting to keep into into consideration? so there are as I said teaser blocks and listing blocks are a special case usually and then then can be There can be any kind of custom blocks for any kind of need So teaser blocks are simply

Blocks a teaser block is a block that shows information from a specific item. You have to pick it's the most simple implementation of a teaser block and Yeah, it's usually very straightforward and easy to understand and to use and I wanted to specifically mention this

Repeat this later on Because most of the times We try to and also designers actually, especially if they don't know the CMS most of the times they try to build something that is incredibly good-looking for the end user and

sometimes we forget that there is somebody who has to actually enter the content on the website So this is something I try to take into consideration in this while preparing this and should be taken into consideration All the times so this one is the teaser block is usually very straightforward and easy to understand and to use

for the people that have to enter the content, I believe I mean and They can have several variations. You can have several type of Aspects of look and feel for a teaser block and you can have that in your in your site even if it's not

In Core Volto yet. I know it will be and I know everybody builds one or reuses one every time and one of the Reasons why this is not in the core yet is that it can have performance issues

So take this into consideration as well when you think on how do I how to build the theme? while on the other hand There are listing blocks which show content from a query string search This is also pretty straightforward for all of us to understand

We also we always had collections and then listing block is has been here like for a couple years three years I believe so this this block also usually needs more than one variation in a website because

Oftentimes you have the latest news the next events and stuff like that and This is very powerful because query string criteria allowed a lot of filter combinations so I personally like to solve a lot of a lot of my problems with listing blocks and

Yeah, because most of the times there are those kinds of situations so latest news is the is my favorite for example and I Like the listing blocks so much There's most sometimes I find tricks in order to make it work because categorization and subjects are not only always

Needed for the end-user the designer doesn't always include them. So There in my still in my toolbox So why not having a highlight? Category and and use that to put some specific news in the my homepage and

Save some calls to the backend to rest API save some back and forth because it can I believe it's to probably too bold less performance issues, but It can be more performant than using multiple teaser blocks. It can be and depends on a lot of factors

Examples of listing blocks are This all come from the design so you can have a listing of services offered by the company you can have latest news with all sort of custom

templates Also this one I still call them templates, but it's variations. Sorry Victor and Yeah, so it's All of these Usually requires just the development of the variation because the listing block is there

And if you need extra indexes extra metadata, it's just back and work. So I didn't do their job I like to keep them Awake with some stuff to do from time to time because otherwise, you know Walter, right?

And So, yeah Okay, don't so one one one One thing that I like to That I'd like to say here is also There are usually

Regarding other custom blocks. So anything that is not a teaser in a listing block You might receive any weird and complex stuff from designers, but if we need to make it happen Don't be afraid to propose your your solution Which if it's slightly different if it solves

the same use case if and still looks good because sometimes you need to Work with the other stakeholders and make it happen, right? But with custom blocks, there is no limit to imagination. Of course, and that's why and that's why I said that and

And and most of the times the limits is easier More easily reached with the budget than with the imagination of a good designer. So yeah For example, I have a few custom blocks from this site here Which we found interesting

some easier some less easy, but still it's usually just a few widgets and and HTML and CSS so these are some other some more Just to show that Really designers can think of anything and it's good and I don't want to be of any

I don't want to be a limitation for them. I want If needed just the budget to be a limitation for them, but I don't want to be one Also this one with the coordinates inside tabs inside the block inside. I don't know which this this happened even if this is designed this happened and

So Yeah and this is as I said before oftentimes you don't have a design so On how to Add or edit the blocks. You just have it for the view and with custom blocks. This is especially a

problem from time to time because It's easy to have a lot of boxes with text and the background image and but how does the Your client feel all those content in Keep that into into consideration For two reasons one is you have to to deliver a good product

the second one you want to get paid for that work as well and not just to build the HTML and CSS that the final user will Will see So Yeah, don't forget your client is also a user because your clients user is the end user, but you have two kinds at least

and And keep the UX of Both users. Well, especially the one who the ones who have to edit in mind and So with all of these

taken into consideration Try to reuse existing widgets It's basic Economy, right? So you have a lot of core widgets, but I want to mention once again, it's not the first time for example Volto react table widget, but there's a lot of add-ons

Provided for Volto which you can find in the awesome awesome Volto Repository so Yeah, this is This is my overview on how in my opinion

Project should be approached. So how what I do when I receive a design and They need to turn that into several things because at the end In the end you need to turn a design into numbers meaning hours you need to to build that you need to turn a design into

Definition of what needs to be done and of when the project is ready for for deployment and And that's the tough part implementation is just it's just a detail. Thank you any questions

You mentioned as first of all Thanks a lot for that very interesting talk and I saw lots of similarities between how we handle things that concept than you folks

Obviously one thing that I was wondering about it I'm not sure if you can share that most likely not in any detail, but how you do the financial Calculation do you run them on top of blocks or on the entire project? Did you ever try to like really keep that separated and do you have a like classification there?

okay, yeah, so All of the All of the of the parts that I that I analyzed here So blocks and content types and all the basic preparation and all those separate parts Added to usually to a spreadsheet or stuff like that and then for all of those

numbers are put separately and then it's a matter of our commercial people talking to To the to the client of course on how it's what's the best way to to present those numbers But yeah, also all those numbers are separate in our calculation usually even for a single block because it's also helps us

Organizing the work. So yeah Yeah, thanks for really great introductory talk there Have you ever encountered a client requirement for block where you said? Okay, these this block really looks nice

When it's in the design, but these are 12 separate text fields and 15 select boxes Let's not do this And how do you approach that? How do you communicate that? so

That that's me Thinking this that's the question if I get the question correctly and having to say that to the client I'm not sure if I actually had that But for sure what I would try to do is try to propose a simple solution or a solution that involves you involves using

More blocks because actually adjacent blocks can and work and look the same for the end-user and it depends on the on the kind of block and Yeah, it depends also sometimes I ask when it looks like a lot of text a lot of items

I ask do you want an object list widget? I mean, I don't say that but I think of that and I ask do you want to insert any number of text items? And then it's much easier for me to implement Something like that depends, of course so one of the screenshots had this the very small text in two different colors on the right bottom and

Different text on the left different sizes and my mind was going this one. No, no very much earlier Whether like yeah this one to the left. Oh, yeah that that yeah me I thought maybe maybe not

Okay, this was actually Easier to implement because This The bottom part of that is Luckily for us and that's the first thing that that we wanted to to clarify with the customer with the client is What is that? Where does those information?

what does all of that information come from and Only asking only by asking that I I came I they told me oh no Yeah, that's information you get from embedding our widget from an external info. Okay, then it's fine but those actually that's actually not one block and

I didn't want to implement The same block that we have in the first and third case, but with an extra embed That's just an embed block that you add after the block So that's the the smart thing to do in my opinion So I didn't implement an extra an additional embed block with text and buttons and stuff

Just remove the margin between the blocks Okay, no questions. Thank you. Thank you