Embed Size (px)
DESCRIPTION
BEM for JavaScript Vladimir Grinenko at CampJS III, Melbourne, Australia Abstract Introducing BEM Block Libraries — a set of blocks build on top of same ideas that inspired Web Components creators but long long time ago. Being developed in 2008 by Yandex, Russian Search Engine, they are very helpful in building websites fast and flexible. Why so? Because of the years of experience put in them while working in large rapidly changing services. Unfortunately it is very well known only here in Russia and ex-Soviet countries, where, thanks to Harry Roberts and Nicolas Gallagher, so-called BEM CSS is spread far ahead in the rest of the world. With this talk we aim to share what we have in BEM Methodology to cover JS coding with and introduce Australian developers to a new chapter in BEM, partly not always easy to understand, open-sourced and handy for maintaining complexity of web development you could grow in. Speaker's biography Vladimir Grinenko is a web developer with more than 10 years of fronted experience and a deep expertise in HTML5, CSS3 and JavaScript. He works for Yandex, Russian Search engine, and leads a team that develops BEM technologies. He also evangelizes a lot both in Russian and English and gives live coding sessions as well as maintains and contributs to few opensource projects. His area of speaking experience includes such topics as BEM technologies, large scale web sites architecture, modular frontend applications development, etc.
Citation preview
1
BEM for JS
Vladimir Grinenko, Yandex
Melbourne Node.JS Meetup2
What I’m going to talk about• What’s BEM
• BEM methodology
• BEM VS Web Components
• BEM in different techs
• BEM for JS
• Yandex's implementation of BEM
5
What is BEM
6
What is it actually?!• a methodology of how to build web services
7
What is it actually?!• a methodology of how to build web services
• the same language for all
8
What is it actually?!• a methodology of how to build web services
• the same language for all
• scaling
9
What is it actually?!• a methodology of how to build web services
• the same language for all
• scaling
• full stack of techs and tools
10
What is it actually?!• a methodology of how to build web services
• the same language for all
• scaling
• full stack of techs and tools
• ready-made components
11
What is it actually?!• a methodology of how to build web services
• the same language for all
• scaling
• full stack of techs and tools
• ready-made components
• community
12
In shortB lock
Elem
Modifier
13
Naming conventionB lock__Element_Modifier
16
Naming conventionB lock__Element_Modifier_ModValue
17
Naming conventionB lock__Element_Modifier_ModValue
bem.info/tools/bem/bem-naming
18
File systemprj/
blocks/
header/
header.css
header.js
header.tmpl
header.svg
header.md 19
File systemprj/
blocks/
header/
_theme/
header_theme_simple.css
header_theme_full.css
__logo/
header__logo.css 20
BEM for CSS
21
BEM principles for CSS• Map document to BEM blocks — no tag or id selectors
• No CSS outside of blocks
• Independent blocks -> no global reset
• Avoid cascade
22
Old school<div width=120 height=200></div>
24
Old school<div width=120 height=200></div>
<div width=120 height=200></div>
<div width=120 height=200></div>
25
Old school<div width=120 height=200>
<div width=40 height=40>
<div width=34 height=34></div>
</div>
</div>
<div width=120 height=200></div>
26
Declarative CSS.block
{
width: 120px;
height: 200px;
}
27
Declarative CSS.block
{
width: 120px;
height: 200px;
}
.block
{
height: 220px;
background: red;
} 28
Old school<div class="block" onclick="doSomething()"></div>
29
Semi-declarative JS$('.block').doSomething();
30
Semi-declarative JS<div class="block"></div>
<div class="another-block"></div>
$('.block').doSomething();
$('.another-block').switchClass('not-a-block', 'block');
31
Truly declarative JS made BEM wayBEM.decl('block', { onSetMod: { modifier1: { value1: function() { this.onM1V1(); }, '': function() { this.onRemoveM1(); } } }});
32
Templatesvar ctx = { temperature: 42 };
<div class="weather"> <div class="weather__inner"> {{temperature}} </div></div>
<div class="weather"> <div class="weather__inner"> 42 </div></div>
33
BEM for templates
34
BEM templatesvar ctx = { temperature: 42 };var view = { block: "weather" };
block weather { tag: 'ul' content: { elem: 'inner', content: ctx.temperature } elem inner { tag: 'li' }} 35
Templates<ul class="weather"> <li class="weather__inner"> 42 </li></ul>
36
Web components
Web components<audio controls src="campjs.mp3"></audio>
• Semantic abstraction messed with non-semantic tags
• All techs together in same file
• Hidden inside with Shadow DOM which lacks browser support
38
BEM blocks{ block: 'audio', hasControls: true, src: 'campjs.mp3' }
• Semantic abstraction with BEMTREE
• All techs together in same folder
• Hidden by convention which is supported in any browser
• Bundled inside one file for each tech to avoid extra requests
39
One BEM to rule ‘em all
40
bem.info
YModules1. Asynchronous require for modules
2. Asynchronous provide for modules
3. Extending and redefining a module
Why not CommonJS?
See #1, #2 and #3 in the list of requirements
Why not AMD? 43
BEMBlock__Element_Modifier
groups/bem.info
@bem_en #b_
bem
44
