 He will be fine pretty soon. Okay, let's go. We will talk about decoupling today Decoupling, yeah nice because how to decouple your front end from the back end and why and so I Can't do this my own actually the biggest problem will be in tomorrow pronounce your last name, but okay so who we are so next to me there is Anton and We are on Bruce This is a Tesla from wondrous as well. We are working in buzzerland Switzerland, and we will talk about front end today Okay, let me to make a brief overview of our talk today First of all, we will make a short introduction when we will talk about Drupal and fractal style guide we will talk closely about Fractal theme for making style guide is related from Drupal and when we will talk about Drupal site After that, we will see a real demo project with complete setup of Drupal and fractal working together and we will make some conclusion notes To summer all them up Let's go Decoupling the standard way of decoupling things is to separate front end stuff and back end via API interface this allows to isolate front-end development and Front end system from back end system and to communicate between them via API interface But the bad thing about it systems are decoupled, but people are not because front end developers Still requires to understand the back end of Drupal still requires to know it's a female engine Because you know it's pretty hard to write a big template without knowledge what's behind it and what's data What's data will be in input to this big template? So we will talk about the complete story about decoupling on the back-end side Let's think of back-end as two layers First layer is back-end logic where is our data is stored and managed and another layer on the back-end side Is a presentation layer which is delegated to tweak so Let's consider that our back-end is also Split it into independent parts first is a logic and second is presentation thing Why should we Think in such way Because it will simplify the whole implementation process of our projects during design during prototyping development and so on because we can work on Presentation logic independently from business logic on our back-end side and And here leaving style guide will help us because it will allow us to work on design independently from Drupal First of all, let me to remember Key thing behind all of this. This is atomic design thing about Comparantization and splitting the big interfaces in the smaller parts But putting things together can be really hard like on this real-life example of assembling a car vehicle We have a car body and we have other car parts and All of them are produced separately on different factories probably and Sometimes it could be really hard to assemble a whole thing together But we will try to do Okay, let's now make a brief introduction of fractal component library What is it how we can use it and later we will talk about how we can integrate this thing inside Drupal projects First of all a few words about fractal itself fractal library is tool running and node gs server Which is completely independent from Drupal and only requires no gs environment It can hold All your styles components and patterns inside it can help you to document these things and to build page prototypes independently from Drupal so your front-end developer can just use the single environment without any PHP knowledge and to create a complete Website interface Why to use fractal? Because fractal tool is can gives you a complete freedom from templating language. It's a template language agnostic, so internally it's just knows about components and where interfaces and you can use any templated language actually which will render these components the key thing is a The knowledge of components and where interfaces Then you can integrate this component library inside any website actually doesn't matter Drupal or another system the thing is to separate your style gate from your website engine completely and then integrate it back component-based design Of course driven by atomic design We have components we can create and maintain them separately and when we can compose them inside system The important thing here how to preview our components because Component itself is just style and template probably baked with some JavaScript logic But to be shown correctly it requires some input some data to be Inside it here we can hard code some Example data or we can use the faker to generate the data automatically Accord in accordance with components interface or we can even implement our own API calls, which will provide a real life data to our component library And of course the good thing about fractal it can be run locally on static server without any php backend and complex web server setup And Finally, we can customize its default theme so it will look like our Targeting brand look and feel And it's created by company not by individual that means that it's have a great support and maintenance and We can make sure we can use it and rely on it in our production projects Okay, enough from introduction words. Let's see. What is what is it in the real life? Here is an example on official fractal website 24 ways which showing On one side This is a public website where you can see the application of this component library and on other side Very special section and with the website showing you all the components registered in the system You can easily navigate through them. You can Show each of them separately and to give it some context also The cool thing about fractal each component has Several features you can show its markup. You can Give it a context You could also give it a try on different resolutions right inside with interface without any special tools here Here is a one of examples Of complex component and layout inside this component library You can see how it's easy and Seamless to work and play with components. It can be used when By developers by front-end developers by content managers by designers. This is a real living style gate which can be Maintained and accessed by the whole team This is another example of the same components not the same about the fractal This is a component library for a different client You can see that this is different set of components and different theme giving you a unique user experience and look and feel But it's the same internally is the same system. It's a just a collection of components registered in the system And completely independent from Drupal Until this point We don't have Drupal in any way. We don't have php. It's all written and serving in Node.js server A friendly environment for front-end developer, right? And here is some internal stuff how to sit up components inside the system You can read more about the fractal components on the official website But the cool thing since this system is completely template language agnostic We can provide a tweak adapter to it. So we can use this system for managing components Written and tweak that's cool because later we can use them in Drupal as this Here is a one of example of a block quote component and some internal setup you can See it later our talk is more about conceptual things and demo and setup is the next step if you When you start working with it And this is an example of a more complex component which consists of various styles data and layouts And you can see example folder structure here How it can be stored inside you can see css file with styles at victim plate with markup config json which will hold a component interface and Some files on Drupal site Here on the left you can see a configuration Which describes the component interface. It's required to let system know about your component How to interact with it how to provide data to it And how to render it Okay With a short Summary of fractal system. What is it? What is it can be used for? But Shortly, it's a component library totally independent from any backend language Totally independent from Drupal which will make it easier to maintain to adopt and to learn for your front end developers Now let's look Inside Drupal and how we will use it in our Drupal site Okay Thank you So just going back We just wanted to point out that you can also dynamically add content with a note library called faker and that's quite nice And yeah, so why do we use need to use Drupal in this case anyhow because Yeah, we kind of need to deliver content at some point and we also need to store content at some point as well Of course server side business logic. Um, all this can be done with frameworks like react, et cetera But for us Drupal is important so But what what we are not using Drupal for or trying to not use in the future is actually theming sorry but For me working in this field for like the two last years trying to to decouple everything I really highly recommend to Look at the Drupal theming layer because all that has been done there is quite important and I still search for better Examples and so in terms of accessibility as well as in building blocks Um, it really gives me again all the time a very good feeling So A really short note about this stuff is that Drupal 8 make a significant step forward In this area because in Drupal 7 the markup and styles were encapsulated in Drupal And it was really hard to separate them But for starting from Drupal 8 it's separated from the ground and now we can completely forget about styling and theming in Drupal we can delegate the content management function to it and Move our styling and theming process outside of Drupal. That's now possible and that's pretty easy to do with Drupal 8 You're completely right on this point. So Let's see how to integrate it in the end. Uh, the little teaser on the bottom if you can spot it already So first of all, we need the component library and Drupal 8 Which is a very nice module that allows you to put your themes somewhere else then into the theme Uh, theme folder theme Theme template folder. Sorry. That's the right word. So, uh, in Drupal you have the add my theme Shortage or allies the same you have with your modules and so on with other theme and to Broaden this you can use the component library. Next there is the tweak field of value library module which We will see later why we need to use this because handing over values is kind of problematic in Drupal or it is problematic in Drupal due to a very important reason caching and Yeah, and then we just need to tell fractal Instead of handlebars instead of nunchucks instead of whatever templating language. I like I like pug actually um Please use twig and we wrote a little adapter for a Drupal flavored twig thing so that you can use Certain things but not important at this point. So and if you want to install it, it's down below so The basic idea of this is called the host template pattern Which is not ideal, but it works. So in the end, we have my theme in the themes custom folder We have our normal templates folder and there we have a page or A node whatsoever and this node should incorporate a certain component In this case the box twig template Inside the my theme info dot yaml to actually enable The new folder to discover the new folder that's called components and yeah, it's components components components all over You can rename it as you like In the Box twig file you actually just set up what you want to have sort of basic example would be having a link It's very basic. I know but the link consists of two variables having a url as well as the actual content And then the actual template in this case the page html twig file Would include from this components alias box box twig with the given variables content field link you on content field link text Please I want a note more about this about this hosting plate pattern From one point of view this is a drawback because it requires you to write these include Sentence each new time when you want to use a component from your stylegate library But on the other side this can be advantage because you can reuse the same Component from your stylegate into different component for drupal So you can have two systems one is the components for your stylegate style components And which is served for it by fractal completely and another one is Drupal components which is served by drupal and using this simple includes You can make kind of bridge between them. So We couldn't be completely different set of components on drupal and on fractal And you can do everything you want like here For drupal this is a page component with its own template But for style this is a box Component which is different, but we can use it right here And as I just said it's the host template pattern We just called it that way because it's like grabbing It's not ideal, but it helps to be quick stable and again Let's have a look You really have to decide how you go with your css files with your javascript files So in this case we use a scss file that's going to be magically included somehow and don't ask and Yeah, but the the example I gave before was a little bit different and to be a little bit more realistic We actually have to look at the handing over the values with the phone Field for example the emails field and there I put the field value pipe field value That's a filter. I believe the right term would be instead of using for example handing over the the name as label Brackets items and get string this kind of makes a difference So I'm just slowly Fastly going into this because if you would kind the values then so the first one So kind name items get string would directly give you the string. What's the problem about this? The problem would be that there's no caching attached. So we need actually this pipe field value to Initialize the render and the rendering And if you really really really need to do this you actually need to trigger the render for this very field in In this situation, it's not the problem of the name or a single string field. It's more the problem of having Related entities if those entities change in the cache And in this very particular situation the cache would not change And would not be invalidated So this module is quite nice and it gives you the a nice warning I just gave you there. So you have to do this tweak image Pipe render on your field if you're doing something like that Rather not so um and now I wanted to go over with you a demo project we developed so far It's not the whole deal of course, but it shows nicely where to go And so we have this Nice website that is so fantastically designed has a homepage has a view on the very very homepage showing Three different news items in the view mode teaser And of course it has a very important forms because the web is all about interaction and so we can see All the form items that are kind of possible We've got a 404 which kind of says no And of course we have our news overview page that gives you a list of news items and if we click on a certain item We have a very well designed Header image as well as an awesome gallery and we could put in some text here. Sorry for not doing the text What would this look like in the style guide? The thing is I just showed you the website. So you have an idea what's the final product and uh doing A living style guide actually Puts me always in awkward position. I start with the small things. I start with the items and I was saying, oh, that's a nice button and your client's gonna not gonna be impressed by little buttons and by a nice Breadcrumb or whatsoever. They want to see the whole page and that's the reason I tend to show a living style guide backwards And for this it's not the whole thing but for example, if we go for A simple page that consists of text having a text image Paragraph as well as a news stripe. We could think of having like this composition This could also make the whole page And you could also go and have a look at the whole page independently and see what it what it looks like and As well as the form Which in this case looks a little bit different, but It does not matter because the form needs to be adjusted to whatever container it lives in lives in and Yes, and then the actually the most important thing for us is to start with typography and here we Stied all the important things that are actually items smaller components so to speak And this is something you could actually show the client saying, okay, I put a nice Mood area ahead above it and I put also the breadcrumb as well as the main navigation above it Put slap the footer below and boom We have a website and So the client slowly understands I can do like this Block quote and I can show do lists and I can Situate images and I have a table and of course different levels of headlines and So if we start the other way around saying, okay, we need to define the colors of the project so we Just link show them We need to at least show the icons of the project and So we slowly start over with having all the paragraphs and the lists and the links and somewhere should be the buttons Yes, the default button. Yeah, that's So impressive. That's the reason why I showed you the other way around And but these are all small items and actually those items you don't actually reuse You just use because what is a button in this situation a button is only a class to a link or a button tag And So again, there's also the next problem of having grids So I could have rows and I can also have certain columns They are not very impressive Um doing this is like just colors. Yes, that's the reason we actually need to separate the very big things from the very small things And at some point we realized the in-between are the things we are actually Interested in so I could have a news teaser that only consists of the name of the author and as well as a title and maybe I can also have a Drupal speak view mode being a full news teaser and as you realize this full news teaser is as with as the The current the current window And as well as an image item It's only an image forms. We will skip And then we can slowly go a little bit bigger saying that we have a news wall Which then would consist of a grid We already seen that a grid of Certain news items we've seen that the grid then holds the news items in its width And we can reuse this whole thing and if we have a look down below We can also see that we just iterate over the Pattern of the news item View mode full news teaser and again naming is the biggest challenge here and Yeah, what's more important is if we start off with having some JavaScript in there. So as we seen in the other other demo, which was going through There was like a navigation pulling off and so so JavaScript having in there is also very important. So if I would have a image gallery If this would work load, I think the fourth did work Yeah, interesting. Yeah, there it comes. It takes some time Um, I can actually I think this was with full screen No Okay, not You would need to have a JavaScript being independently run there in there as well and working in there as well and And something like breadcrumbs Makes you startle a little bit and I will explain in a short second why so just have a look at the actual code that is going on there So a little bit repeatedly Repeated as we just saw We name it that way. So it does not need to be like this. So we but we came up with the idea Just slamming everything inside one folder Does not do the trick because as I just said, we've got the perceptual patterns. So lock road buttons colors and all that stuff colors just needs to be a Description in fractals saying, okay, that are my colors Uh, ideally you would add in there a CSS file saying That are my colors and please reuse them buttons can be a little bit more complex because we can use mixins to change colors And then finally incorporate them But again buttons is just a small tweak template And um, yeah, so that are actually the things that are we could reuse in every project So every company probably will have their own perceptual patterns and if if you're good and Verbalize no, that's another word you put variables on all of this Um, you would be able to reuse in the project and just style it as you like So layout pattern again, that's something we reuse and we like to use one kind of grid And so we reuse this grid But in the end we end up with maybe the same classes saying no in this situation Not saying in rose columns, for example, if you tend to follow the The way of of foundation But here it gets interesting so the functional patterns as I just said that are the actual reusable elements We we came up with and we named them bricks departments floors and footer because we have a quite Eloquent colleague he came up with this idea and yeah, why not from constructions and it kind of kind of works fast So uh once again, we had the teaser as you remember the teaser is just plain css and the teaser news may look the very same in the code itself And it uses a modifier in this case to have a big or it uses the teaser view modifier to show a small Or a simple or a full view You can do this with two different tweak templates. You can put this inside one template. This will change how You would try to reuse it There are certain ways of doing this. This is this is exactly what we are trying to achieve. This is this template has been initially Start inside drupal folder, right? And now we are going to separate such logic such presentation logic to the separate system to the style guide And then in drupal we can just include this thing without Knowledge of its internal presentation And if you go a little bit bigger we saw the uh list of Uh, I saw the news wall and inside the news wall We saw the include and that's that's the fun thing at this point So this include actually is able to work in fractal as well as in drupal so, um just Think away the wall template concatenation back in there. That's not important. So you just have one, um One route To your template file. This route is relative, but it works relatively in Fractal as well as in drupal and that's the reason why you can reuse the elements And if you are able to actually iterate over those elements, you actually can reuse those elements in both of them And uh, yeah, the most important thing. Um, I did not do this slider is, um How to actually put all the the assets in there? Um, so that's also something we Will discuss later But the most important thing is of course we need to have JavaScript in there and Having actually the drupal behavior Style actually works out for us. So, um in this Fractal Style guide, we actually only include the drupal js Which nothing else does nothing else than iterate over the drupal behaviors object and then just Fires every function that's there at the attach function. That's there Shoot me if I'm saying something wrong and this can be done in fractal as well or in whatever JavaScript thing so we can actually have the uh JavaScript running inside the fractal Stygard as well as in drupal and reuse the JavaScript Hey And yeah, and so the rest is actually at this point, um It would be nice and you can do this We have we have done this in the other project Is lots of mocking and that's the reason you would normally try to reuse your components and to mock this Components that you can actually reuse those components and don't copy over the whole html fine The going back So the real life challenges we face face so far and that's really real life challenges. Okay um, of course, there are problems and those problems can be solved and You just need to address them a sort of thing. I am trying to do at the moment So, uh We said we want to be decoupled, but what's the real life real life is that the backend actually is defined So when your company goes for drupal it goes for May I say a bad word type of three and um It rarely changes, but of course there are situations. Uh, we are not only uh fully Going for drupal but other components javascript libraries and so on we can use this there as well So and of course we have to organize ourselves in the local domain and this highly depends on the team So we came we came up with the idea of bricks departments and floors Not to the fact that we are so eloquent and fancy, but we realized for example, we took heavy use of paragraphs Talking with a front ender about paragraphs and that we want to have a paragraph there and this paragraph should have an image No, it's a paragraph. It should have like Something else or is it just text a normal text is like a block quote rate and a block quote paragraph You have a block quote paragraph. So you're mixing up words all that all the way. It is Very important that you know what you're talking about and and that point you actually need to find your own language As well as drupal has of course complex modules like views red crumbs and navigation and we ha ha Need to mock them. So as I just showed you actually Mocking breadcrumbs or incorporating breadcrumbs is quite complex It's just a list, you know, so it's more easy to just copy and paste the the list into your template files instead of Using faker trying to iterate over an object to to randomize the The items and to randomize the contents and then see that your actual Rapper is has the right class and so on and all that stuff. So navigation. We actually mock at this point For fractal, but you could also use an api doing this, but then this api needs to be there So we came up with the three extremes. I was mentioning before so we actually have our reusable content components which Live in more or less the middle of the thing. So we have the elements that are for your site Too small As I was saying so actual paragraphs actual block quotes actual blocks and so on you don't Reuse you don't incorporate those as tweak templates. You just use them give them a class and use this class And on the other hand, you have got these two big complex things like for example views and Going More more bigger Those you probably mock and those are more Important to decline than to you in the end because if you have a whole picture of the website That's this where you go. You can think about it a little bit The other way so going for a css framework that kind of defines you what your look your links and your blocks look like And on the other hand you have your documentation of the whole project and see what's the demo page So if you're paid to do a demo page even before launch It's fine to do that in there and you can mix in text. That's totally random and the client would realize. Hey I thought our real text life example would not work, but now it does Okay So we are still searching for the right solution, but for there is ui patterns and I highly recommend to check this out Because the next step is to actually get rid of this host template pattern So what we wanted to show you today was the actually users usage of Fractal as well using it in Drupal and Drupal being a content delivery Thing me Yes So and the the actual idea is to make it the compound folder So fractal calls this folder as compounds and it's sometimes good to have different names for that As independent as possible and as self explaining as possible So think about dependency management. This needs to be there for those compounds as well But it needs to be there for Drupal to understand. So it needs to be there that I can Target the javascript file. I can target the the svg file in there This also needs to be a solution for that as well as a css file when I need it and Only then And of course, there's more so when you're thinking about front-end and you At some point have to make a decision between http2 and http1 short form h2 h1 Which gives you also a performance Inside to this thing and I just learned that http1 can be also a very good performance thing as well And as I just mentioned how to include your css It can be also good to have your Compound so your component to actually inline your css with a link statement just above the component and not let Drupal do all that stuff versus a I put everything together And compile it and just serve this one and of course javascript inclusion It may be Framework agnostic. So it would be nice to not only use Drupal behaviors there, but something else There is probably a solution for that. But yeah, and so why should we use it? Why to use living style gate? It can simplify real life while building the project during the whole stages Because you can work on design Independently from Drupal you can create various pages like tassel show us recently So we can build almost the whole website actually without any Drupal We can show with the client we can get feedback early We can make several iterations before we go to Drupal It will save us a time resources and it will give us more flexibility Because it's completely independent and it doesn't require any additional technologies. It's only no gs server and that's it as a result This leads to better communication with clients because we can identify the problems in design early We can identify problems in content relation probably as well earlier and To react early as well. So The whole communication between Us and client during the development process will be more smooth and clear and you will be more fun because You know, you can even make small changes in the design right in fractal, right in Near the client sitting near with you for example Of course with Would be more hard to do with Drupal because It's a more complex system and it requires more knowledge And as we already said earlier It can be used not only for frontend development and for communication with clients It also can be used for by desires as a Style guide as a content managers So we can see what we can do and how we can Layout where content from page to page So it's kind of a visual language between the whole team and between team and client And one important thing about this separation It simplifies the way how we can test and maintain maintain our responsive design because Just imagine if you have a complex Drupal setup with a bunch of templates and CSS and JavaScript and so on and You can just save a lot of time for Changes and for preview of these changes to the design because When you change in the templates when you change into the JavaScript or styles You're actually doesn't change don't change any content in Drupal. So Drupal Uh Represents a component library in some way. So the separation between content storage system and Style guide system Is great and it help us to maintain responsive design and to save time to verify our changes in the real life Of course, we can use with while prototyping and during the development process as well And on ongoing maintenance of active project, of course That leads us to the next sentence that It's it's it's a false meaning that we can design the whole project once and when Reuse the existing design until production. It just doesn't work because We should be flexible enough. This should be agile Especially when we are designing Page website with various templates and layouts and we need to be able to apply changes quickly Not just to code but to design because Sometimes when it's came to real life, we can see that our design just doesn't work in this case and we should reconsider it again I hope you can yeah the point and the point is Yeah, we showed how to use it in Drupal, but in the end If we would like to have another component so say for example, we put another angular component on the website that needs to look alike Something we have in the website there as well We can put it in there and we can reuse the components there just as we have seen with the Novata's website. Actually, this is a so-called living style guide for Up to Drupal seven eight a type of three language as well as a completely independent Framework they reuse and so you can build something that is totally framework agnostic and this would be this is also a very good Take away And of course you can take it for your next project as I said you Start building your components to be reusable in the next project So our personal lessons learned and decoupling is first of all the cms still demands Some difference from the front end So actually in Drupal, I really like and it's important to me to get to the content So the quick edit or the other packing functionalities need to be addressed nevertheless and you have to face them as well And sometimes there needs to be additional container But right now Drupal is very very flexible in the seeming thing as well as accessibility topics Most are mostly addressed by the content management system and brings the front end that are back to earth and Yeah, so that's also something we really need to focus on and Yeah, the cms structures from front end code. So It is very important to have an Common understanding of in this case Drupal speak. I just mentioned the example of Paragraphs, which is a module name but kind of differentiates to normal front end or html structure, but Having a block having a view understanding what a node is to be something coming up Again and again That's something that really is a good content structure coming from Drupal And not everybody needs to understand it right away. So think about that and view modes, of course is also a very very Important thing for front enders to understand that they need to limit their cell themselves for the content and to imagine that content may reoccur And yeah, and as I just said front end is never as independent as implied So always keep in mind the application layer and of course maintenance will mess up things That's the reason we actually change to fractal Having something like kss. So where you Document your actual styling inside the CSS code scss code is kind of cumbersome and Yeah, probably you will no that's not you will and this will get outdated So make yourself an outsourced documentation saying in the end saying okay if we use a Building system with grids for example stick to the naming conventions of block and rows for example, you can Think of buttons always been buttons, but not call them btn in one in one project and call them button or whatever in the other And yeah, try to minimize minimize the additional information around the component make it self explaining and of course keep discipline That's yeah, and I learned this for my last project Doing this alone is really sucks. It is not worth it. So it's a teamwork flaw If we really try to do this alone, don't do it You're so much faster You're so much more structured and you would understand Your project as well and everybody else will understand your project much more faster than doing this with a living star guide So it's too complex and it's not a whole low-hanging fruit for us. It takes more than I don't know at the moment like five projects to slowly adapt and realize what quirks are there and yeah, so It really is so going further means that you all are interested in of course UI patterns in this talk is today and and there's also in lots of other topics Regarding the coupling Drupal and those slides are at slides.com And of course you need to contribute to our sprints And please help us to get better and better If i'm to jump you on on stage, please tell me so And thank you very much. We are happy to have you and We're now open for questions