 So, hello again, my name is Vladimir and I'm going to talk about BEM. Maybe some of you were at Matterfresh and you already know something, but still I'm going to make a quick overview of what we have there. So BEM stands for block element and modifier and the main idea of it is to provide possibility to have your project built from the parts which are absolutely independent from each other and that's why they're very easy to reuse. Then I think all of you are at least a bit familiar with Twitter Bootstrap, yes? Yes. Then we can compare it to Bootstrap way and BEM way of development. So when you're trying to develop with Bootstrap, first thing you should do, you think about your project structure and that's the way you start just every new project. Then you should find all the HTML of the components you need to use in your project inside the Bootstrap library. Then you may find all the styles which there are in Bootstrap library or you may collect the pieces you need for your project. But in that case you should get back and take all the rest pieces when you're going to add new components. The same is with the scripts and when you want to customize something you just edit the code you get from the Bootstrap. Next, when you want to maybe reuse some of the components you should get back, find the proper part of the HTML, CSS and JavaScript. And maybe there are some parts which are not necessary in the new place where you're going to reuse that component. And the worst thing is when the Bootstrap is updated you are to check everything. In general you have three options. The first one, the easiest, is never to update. Maybe it's good for someone but all the projects should be developed and that's not our case. The next variant is to go and just compare all the commits from the previous version find what was changed and repeat these changes into your project in every place where they were again HTML, JavaScript, CSS, etc. And let's compare it to the BAM way. With the very beginning you get optimal file structure. Of course you can customize it the way you want but still you don't need to think about it every time. Then you edit the config file where you place links to the libraries you want to use and you never ever change any of the files from that libraries. All the changes are going into your project level. So in that case all the components are very easy to reuse. And also we do not put some technologies of the blocks into different folders. If we have one particular component all the things it uses are in the same folder. So layout, CSS, JavaScript, maybe markdown, images, documentation, everything what is about this block will be there. You can just take it and move everywhere you want. And the main greatest thing is when library updates you don't need to do just anything. It's as easy as just to reload the page and it will automatically get updates from the repositories where library is and your project will be rebuilt with that updates. I think it's absolutely great. And just a quick few things about BAM. It's not just a methodology of how you should place your files of your project but it's also a bunch of tools and the whole front-end platform. Also the tools are not about just compile your project. There are a lot of optimizers which are quite unique. For example, our CSS optimizer makes some structural optimizations too which is I think absolutely unique feature. And we have our own template engine. We were fans of XSLT processor and the few things was not good there. It's a very expressive language I think but it's not so easy to learn and it's not developing now and rather slow. So we have written our own template engine on top of JavaScript. It runs not just and it's the same powerful as XSLT and one more feature is block libraries. When you created some blocks you can place them into separate let's call it just folder form right now and link into various projects you're working on and all these projects will use that blocks and for example, absolutely different team can develop these libraries while you're working on a particular project. So it's a way to maybe split the teams or add more people to develop without any troubles to get all the code into the production at the end. And there are actually much more things but we will never have time to take everything even if we will stay here for a few days. Okay, as I have mentioned all blocks are independent and that's why reusable optimizers provide us the optimal runtime and that's why the whole BEM is kind of large thing but it is fractal anyway. So you may use just a few parts of it which are great just for your project. You don't need to use it as the whole. Well, you may but it's not absolutely required. Okay, I think it's code time now. For those of you who want to try it right now you may get some instructions and get tools but I will show everything just in console and the other information and the link also is at BEM.info website. Feel free to check it out. Okay, here we are. That's just an empty folder and I'm going to check out the project stuff for that. Let's go to github slash BEM slash project stuff and get the link. Here we are. So, git checkout. Here we need to install dependencies so npm i and while it will do that. Okay, it's not so big. Yeah, I'm just going to switch into sublime so it doesn't matter. Meetup project stuff. So here are the files we get with our project stuff. Here you can see package.json with just one dependency. It is BEM tools. Then some common blocks which I use just for desktop. For example, you may... It's not so big, I think. And is it possible to zoom into the left panel? Okay, is it visible for you? Okay, and the main file here is inside desktop bundles and you may think of it like pages folder. And here is index and index.bemjson.js. It's a declaration of the page. The syntax is kind of adjacent but some fields of it are predefined and a bit special. By the way, the page itself is also a block and it consists of other blocks. And here is declaration. I think all this stuff here is quite self-descriptive. Yeah? Let's look at this part. But to save some time, I will ask BEM tools to build everything for us and start BEM server. Then go to... It is going to get all the libraries from GitHub and make all the rest. While it's working, let's get a closer look here. So we have declaration of header and some content. The same for block called content and its own content then footer and some text. Then we may create new folder inside desktop.blocks and call it, for example, header. Then we're going to create the files of any technology this block will use. For example, let's be CSS file. We may say it should be the height of 200 and let it be background. Here goes the result of the building this particular declaration index BEMGIS on JS. You can see now it is just a very simple HTML page where all blocks are just divs with a special class and there is content inside. Then we just reload the page. I think we can ask BEM server not to check out the libraries each time. For now it will be a bit faster, a bit ugly. So the CSS was updated and looking into this declaration BEM build system knows that we should go into all the block levels we are using in our project and look into the folders with the same name and build all the technologies which we are going to build. All of them are here. You may add anything you want. Let's try the same thing with the template. We are going to use BEM HTML. So block header and for example we may make it, I don't know, maybe attack hello, why not. Now you can see it changed. We may change almost everything here and moreover we may add some content maybe this way. Do we never use BEM? No, no. We think that any block may appear on a page multiple times so with ID it is not possible and actually there are no any use of it so you just don't have any situation when you really need that ID. Sure, let's look what we have. So when that header.css was created BEM build understood that we need to import its CSS file into the page.css and the next step we get it just flattened so it doesn't matter thinking. It doesn't matter how many blocks will be there all of them will be flattened with Borshik and in production environment it will be optimized. Let's get back into template for a while. So here you can see that I created element of that header block and call it logo. Then I'm going to also show the content of the hello block itself so I use this CTX content and again I'm going to refresh the page. Now you see that that header logo element appears and the content is still here but we don't need to say anything about it in our declaration file but I'm not going to talk more about templates because it's another rather big topic. Let's go further. I think we can try to write just some basic JavaScript block and then we will try to get more complex one from a library. Well, I think we can create just some square declare that it will use some JavaScript. Also, let's add some CSS for it. I think it could be, for example, and that's it. Absolutely, all we need to do is they should be the same in declaration and in block folder so it also should be square anything and again the CSS file should be the same name. Here it is. I think it needs some background also. What was that? Can't remove active job. Okay, I think that will help. Where is it now? It's still square because I didn't change it in null. What the problem? Notice the problem? Maybe I didn't save it. Sorry. Yeah, they should be the same. Okay, let's create the JavaScript for it. To write JavaScript the same way as we used to with CSS we created some special block helper called IBM GS and the purpose of it is to provide us possibility to again redefine some properties or methods from the blocks get it from library on the level of our current project. The documentation is not quite good right now but there is a very, I think, descriptive JS doc. So bam, bam bl. Yeah, here it is. Until we will create some better piece of documentation you may refer into just its code to know about it. Okay, let's get back and write some JS. So we provide bam as a name space for all the blocks and JS blocks may be with or without DOM nodes connected to it. So for abstract blocks without any DOM node for some helpers we may declare such blocks with bam.decl but for blocks with DOM representation we use bam.dom.decl which inherits from abstract blocks and it is just an element of the same IBM block. Here it is. It provides us some additional methods to work with DOM. That's the name of our block. Then goes methods of each particular entity and here we may describe what should happen when block gets or loses some modifiers and the very first modifier each block will get is JS with value needed. It happens automatically when we describe the block with that JS true so we may say onSetMod.js we should fire the function which may do something. .js. Let's check it out. Here we can say hello and now this square anything also has modifier JS with the value needed and some special parameters inside onClick attribute. We use them to let JavaScript know some variables from the declaration for example. Something we can get it with these parameters. Let's try to ask this red square doing something, at least something. We may provide some event listening on it with this.1.2 method and here we need to say which event we're going to listen. I think it could click the function. I think we can just add some modifier to that block whenever user click it. This method is SetMod and it takes three parameters but the first one is optional and is used to set modifiers for elements of the block. We're going to set modifier just on block itself. I think active maybe state and then when we will click that block we may see that it gets modifier state with the value active. Then we may describe what to do when it gets this modifier. Let's move that square to the right maybe. This dot term LM it's just a link to jQuery object representing our block. We may also describe what to do when this modifier disappears. In that case we can change it not to just set that modifier but to toggle it. You can see that the block gets modifier state active and we click again. Modifier was removed and it fires that function. Each block may have a lot of special methods. It may be anything you want. It is a modifier and it has some values. For example value active. It can be any modifier. Absolutely any but just this one is predefined. It is fired automatically when that block is initiated with JavaScript. We also may look at how modifiers work with CSS. For example we can have modifier state with... Make it a bit easier and write CSS for modifier just in place. State active background. That's not a kind of magic but still it's the way to build projects which are easy to maintain in the future. All the users of your library who don't need that block with state active they just need some very abstract basic things. We will just not use that piece of code. What I intended to do is to create a separate file for that modifier. In that case that code won't even ever build into the project. But I think that's just something very... Do you mean if I put a separate file for that modifier? Actually it will. If declaration will be at the BAMGISON.js file. I can show you a few ways to add some entities into the result build. Let's just move it from here. So in the case when you add this modifier into declaration it will appear at the very beginning automatically. And it will move to the right side without any clicks. Oh yeah, that's because it should be fired when that modifier will be... Sorry my English is not so well. When that modifier appears in the runtime. Oh yeah it works. But for the situation when there is no need to make that state active from the very beginning we can remove it from declaration and in that case we need somehow to tell the build system that we need that CSS with the state active to build. And for that we use a special file with the depths.js extension. Shoot depths. And let me explain how the build works. The first and starting point of the build is index.BAMGISON.js. BAMTools parse all the entities here and then create BAMTecl.js file where all of them are in the list. And when we rebuild our page we see that there is no mention of that active ES modifier. So the next step is to look all over the levels we use on the project and find all the blocks, depths.js files and include all the entities which are mentioned there. And on that step we get a file called pageName.tabs.js and here you can see all the dependencies of our project. And the final step is to build all these technologies which are used in runtime from all the block levels according to that pageName.tabs.js file. And all of them are in some kind of imports. For CSS it's just at import itself. Then for JS we have special includes which works with Borsig and then all of them are flattened. If it is still clear we may go deeper and I want to show you one, maybe at least one person here. We'll be happy to know that we already have in our BAMBL library one special block. Just a moment I will find it. I think it's somewhere here. Okay, history, it should be. I was there. Oh, I think I know what's wrong. That was not that branch. So here it is. And this is a block called iLocation and it's written with BAM.tackle notation. And what it's doing is using another block which it depends on. It is also an element of iGquery block. Author is writing something I think right now. I was talking about we use special block iLocation which uses an element of the block iGquery history. And the author is Benjamin Locton and I think he's stopped writing right now. I couldn't see the answer. Okay, now I think you already know what's going on here. But what is interesting is the way we're using it. It's yet another BAM block written with the help of iBAM.js It calls some methods of iGquery element history. So you can see methods, actually quite a lot of them to work with history IP. As I promised, I'm going to show you how to use some external libraries. Actually, we're already using it but it is very clear that the bookstab will not be very easy and it's a process limitation. Technically it's not a limitation. I can still get what I want in the bookstab but it's a process limitation. So clearly here learning curve is a process limitation. I should really go convince all the developers to start using it. But what other process limitations do you have? Or is there any process limitation? Well, if I understood your question right, the first one is you need to use Node.js to build the project. Then, as you have said, learning curve is quite high for the whole bunch of BAM tools. But still you can start with some parts of it. And maybe it takes a bit more time to build your project because of a lot of things. The build system should check out to create that final runtime files. But it doesn't matter for production where your game gets just rendered files. It's the same as static site generator, for example. It may be dynamic but CSS, JavaScript and all that stuff will be regenerated for you. And as for not to edit files from libraries, I'm going to show you how you can work with it. The first thing we should do is to add the link to that library here. I'm going to add Carousel, which is also a GitHub repo. It's me. It's not a joke. So here I added one more link. Then I can just restart my server. And on the next reload of the page, that library will be checked out from the GitHub somewhere here, I think. I don't see it. Oh, yeah. Then BAM tools tried to install dependencies for each library. It says that there is no any package JSON, so there is no dependencies for that library. I think I will do it as it was. And now I also need to add that levels from this library into my project. And here's the folder of that library. And there is just one block level called blocks-desktop. And now I can just remove our red square. And that declaration of the Carousel should work. So as you can see, I don't care for CSS or JavaScript files to get this block working. All of them are here. And you may see that this block also has few elements. It is IMG element and control element with a modifier called theme with the value default. All these files were built for me with the help of this declaration. And the content of each item itself are described here again. Also, there is nothing about what HTML it should be rendered. And see that, for example, Carousel element IMG is IMG tag. But its name is MG2, so it's maybe not so descriptive. Okay, let's make the Carousel inner to be ul element and each item to be li. We won't edit any file inside Carousel library. But we're going to add the same block on our project level that its element called inner should be ul. And its element called item should be li. The library is as is, but everything changed. And it doesn't matter if the developers of library will get there and change some layout. Your changes will apply on top of it. And the same with CSS or JavaScript. The code from library will stay as it was and your code will just redefine what was on the bottom levels. And, moreover, you may have as many as you want such levels on your project. And for this particular one, we already have a few of them here. The very basic level is from BAMBL library and it's called common. Then goes desktop, then we just edit Carousel desktop level. Then this library contains code for our template engine and common blocks from current project and desktop blocks. We may add as many as we want. Well, we're going to talk more about JS. Let's try to do so. Again, BAM, Tone, Tackle. And let's check out what methods this block already has on. There is some initialization part. Then it has method cycle. Method 2 to switch to the particular slide pause. Next, press slide and get default params to apply some initial values. Let's decide what we can redefine or maybe we can just add something. Let's look how it could be. We can say onSetMode.js. For the very beginning, we can overwrite the code from the library. It is very easy. In this case, and this block won't work, but it will just say behind the console. Now nothing works because all the initialization from the library was overwritten by this console log. But we can use some kind of inheritance here and call the super method. That's this. And now it works. And also it has that console log working too. So the code from the library is merged with the code from our project without changing anything within the library code. We may add any methods here. Also, I think this way. So again, we added something and we don't need to in any way interfere with the source code of the library to add more methods or properties. Well, I think you should have some questions. Nope. Everything is clear here. Actually, no. You can just place them as the blocks and we decided to call them like an element of the ijquery block, but it doesn't matter. For example, tell any jQuery plugin you want. We can just add it here. Any name. You can see it here. It's just plain external file, but you may want to build it as well as all the project blocks files. And in that case, you can call this way. I don't know what it is, but... Okay, let's try this one. Maybe... Nope. Okay. I know. Please tell any jQuery plugin anyway. Nobody knows any jQuery plugin. Okay. And here you can see that the file inside is not changed. It is just as is, but when you include the declaration of it into your project, it will be built as just the same way as all the blocks are built all the way. Any other questions? I think just the same way. The only thing you need is just to provide the same class names. And for JavaScript, you also need to teach your template engine to generate. Just a moment, I'll show. These pieces inside onClick. And also we use Mix with the IBM block to let JavaScript know that it should be initialized on this particular DOM node. I think... So I guess... It is shown. And... How would you say that these new tools, like Component or Bower, and Component or Bower compete with the way you guys have done them? Well, we just use them too inside our projects. And these are great tools. And still they do not solve all the problems we face every day. And as for the whole bunch of BAM tools, it's not just one particular thing, for example, to get some libraries into a project or maybe to optimize scripts or so, something. But it is the methodology to name that files to... Even the designers who are creating PSD files for us, they tried to work with these tools for prototyping purposes. And they say it's much easier to work with that level of abstraction, where you don't need to think in terms of text, but in terms of the separate blocks providing some functionality. And when you're going to move one block from one place into another, you never think about if it will be broken in any way, because you are sure that everything is written in a form when it is encapsulated inside. And that's kind of maybe web components, but it works right now in any browser, and actually it's much more flexible than web components itself. But it seems like ComponentJS is still going to experience the issue of context, different contexts between different modules. And it seems like one area where BAM excels at, because everything has a consistent API about it. So there's a consistent way of doing things. When it's component, it actually depends on what the author wants to do. So like, of course, you know, the author can always do what they want, but at least this way it provides consistency, so there is a specific context. Like, all the modules will be able to work with each other. Component, that may not be the case. So it's pretty cool. Thanks. So there's a lot of problems for teams. List out a few advantages for individual development involved. Can you list out a few? Sure. For example, you're developing some similar projects, and for sure they will have something in common. For example, each of them will have some login screens, or maybe logotypes, links, all this stuff, which is the same from project to project. And I think you don't need to reinvent the wheel each time. You may put these common solutions you used to work with into a separate library or maybe a lot of libraries and yield them on the projects, just adding some particular features. That's the first point. And the second point is the idea of independent blocks will help you no matter if you work alone or it's a big team, because when your manager asks you to change something on a project, you will be able to do it very fast. And that layer of abstraction, when you start thinking of your project in terms of blocks, it's very helpful too. Because today, because of, for example, IE6, you need to create the layout with the help of tables. And you will think that, okay, my menu is a table with rows and cells, and there is maybe some divs inside of it to provide pardons or so. And the next day you get statistics that there is no any users with IE6. And today your project may be built with a more semantic layout. And at that point you don't need to think, okay, now I'm going to change a lot of text. You're going to that particular block with the menu and say that it is just a new layout and everything works. I'm sure there are a lot of other things that each one can find useful for him while developing. Actually I'm a designer and I can completely correlate what you have said like calling the simple methodology in Photoshop organizing layers and other moves because when I first started off, I used to find it really hard and difficult to read someone else's work. And they don't get organized and have like a whole stack of 100 to 200 layers. Though Photoshop has something called like auto-select where if you just take that option and you click on like a stack of layers, whatever is the problem, you will be able to select that particular layer. But still again, I have like 20 things overlapping on one thing to get some particular style. I need to go to the layers stack and then you can search. But with better way of organizing that I've always tried to group certain things but I haven't really thought like a methodology to something like a block element and modify it. But this is really kind of helpful for me to implement these concepts in my design work. Yeah. And we were already asked about how one can divide layout into the blocks and that will be the first answer from Varvara. She's going to answer the questions about the methodology and she will show it on the example. What's like the ideal in this case for Ben? Like what's the use case for how he's been for this VMA? We have one small site called Yandex.true and it's built with BAM. So why is the index the ideal use case? Okay, it will be kind of spoiler, I think, but I will show you. I need to get my VPN to get into our intranet to slow. Okay, it works. Here is the site of our internal block library and for example, here is the block of the headers and it is understood that when you have one firm style and a lot of services, they will have something in common but still they will be quite different one from another. And in this situation, you can notice that we have the same logo but different other parts of the header and inside of it there is a user block and it is absolutely the same. I was talking just about front-end and it's not quite so. With Node.js, we can write a server site in that same block element and modify terms and again, we can separate each thing into a separate folder and the block can know where it should go to find the username. For example, it may be the request into database or look up into cookies or something and then help to render itself. And here you can see just a small variety of the headers we have. They use blocks which are inside this library and all these blocks will be updated in just one moment. For example, when we decided that this drop-down should look in a different way, we won't start to rewrite a few hundreds of services. We just update our library and ask services to rebuild their projects and every pop-up or drop-down on this project will be changed. So for very big companies, it's a dramatically different process of development and I think also it's very great for maybe the companies who utilize agile methodology because you need to make a scratch, try to use some parts of it, go further, change something, move it and it should be very quickly. And with this approach, we have the possibility to give designers tools to create some sketches. Then we use the result of their work as the very basic level of blocks and can update or change anything on the next level. And the idea here is that it doesn't matter that designer could possibly write something not as good as the professional front-ender would, but we will redefine it and when that prototype will be back to designer to make some changes, the designer will continue working with the same terms he used to. He don't need to parse the project from the scratch and when that project will be changed and again the next time front-ender will work on it, it will be again the same code base, the same blocks that they all used to work and they will talk to each other naming the same entities the same way. And when that project will be placed into the production and back-end guy will work on some part of it, again they will work in the same terms and even designer and back-end guy will talk to each other with the same terms again. When we look at them as a methodology, I think it is rather good for just any case, but when you're trying to take the full stack, it is not easy, for example, for developers who used to work with Windows to switch into console, it has quite a high learning curve to make sites built on the full stack working with some dynamic data, we need Node.js on the server and these kind of things. She could take just naming convention and stop at that point and it will be enough for such small chain of websites. Because it seems like there is a... With a methodology like that's great, I agree, I think the tool is like that learning curve, which you did say, so I think there seems to be a tipping point when the learning curve would give enough value to justify it and try to figure out when that tipping point would be. So I think something like Ganadex, the learning curve definitely is small enough for the amount of value you get. So I think perhaps if I say small websites like company websites like high design, small static websites, that value you get would be smaller than them. I don't think you would use a strong... Well, if you don't have any particular questions about just what I have been showing, I think it's time to answer other questions about methodology.