https://varya.me/component---src-templates-post-js-content-file-pa…bemjson-index-en-md-87a57f580191242ba484.js

1"use strict";(self.webpackChunkvarya_me=self.webpackChunkvarya_me||[]).push([[9899],{3408:function(n,a,s){s.r(a),s.d(a,{default:function(){return f}});var t=s(8453),e=s(6540);function p(n){const a=Object.assign({p:"p",a:"a",span:"span"},(0,t.RP)(),n.components);return e.createElement(e.Fragment,null,e.createElement(a.p,null,"We usually start developing a web site prototyping the interface and then\nimplementing HTML/CSS and bacis JavaScript. In case\nof using the full BEM stack a tranformation from prototype to a functioning web\nsite goes smoothly. You can clone the project from\n",e.createElement(a.a,{href:"https://github.com/bem/project-stub"},"project-stub")," and create a static web page\nas it was ",e.createElement(a.a,{href:"http://bem.info/articles/start-with-project-stub/"},"described\nearlier"),"."),"\n",e.createElement("excerpt"),"\n",e.createElement(a.p,null,"Thanks to ",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">BEMHTML</code>'}})," templates, you do not need write all the HTML manually.\nDescribing page sructure in ",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">BEMJSON</code>'}})," rather than writing all the tags manually\nsaves time. But sometimes this is still a lot of work to do, especially for large\npages."),"\n",e.createElement(a.p,null,"Luckily BEMJSON can include JavaScript pieces to produce some blocks dymamically.\nI created an example of such usage:"),"\n",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token punctuation">(</span><span class="token punctuation">{</span>\n    <span class="token literal-property property">block</span><span class="token operator">:</span> <span class="token string">\'page\'</span><span class="token punctuation">,</span>\n    <span class="token operator">...</span>\n    <span class="token literal-property property">content</span><span class="token operator">:</span><span class="token punctuation">[</span>\n        <span class="token operator">...</span>\n        <span class="token punctuation">{</span>\n            <span class="token literal-property property">block</span><span class="token operator">:</span> <span class="token string">\'content\'</span><span class="token punctuation">,</span>\n            <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n                <span class="token keyword">var</span> res <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n                <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">10</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n                    res<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n                        <span class="token literal-property property">block</span><span class="token operator">:</span> <span class="token string">\'button\'</span><span class="token punctuation">,</span>\n                        <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">\'Button \'</span> <span class="token operator">+</span> <span class="token punctuation">(</span>i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span>

1\n                    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n                <span class="token punctuation">}</span>\n                <span class="token keyword">return</span> res<span class="token punctuation">;</span>\n            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span>\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\n        <span class="token operator">...</span>\n    <span class="token punctuation">]</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div>'}}),"\n",e.createElement(a.p,null,e.createElement(a.a,{href:"https://github.com/varya/dynamic-bemjson/blob/master/desktop.bundles/page1/page1.bemjson.js"},"full\ncode")),"\n",e.createElement(a.p,null,"This JavaScript creates 10 ",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">button</code>'}})," blocks when the page is being built with\n",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">bem-tools</code>'}}),".\nCheck the ",e.createElement(a.a,{href:"http://varya.me/dynamic-bemjson/desktop.bundles/page1/page1.html"},"result\npage"),"\nto see them."),"\n",e.createElement(a.p,null,"Another example is a ",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">menu</code>'}})," block. Such interface pieces usually consist of a\nlot of items with minor differences which cases a lot of copy-paste on a page.\nWith JavaScript in BEMJSON this can be easily reduced."),"\n",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token punctuation">(</span><span class="token punctuation">{</span>\n    <span class="token literal-property property">block</span><span class="token operator">:</span> <span class="token string">\'page\'</span><span class="token punctuation">,</span>\n    <span class="token operator">...</span>\n    <span class="token literal-property property">content</span><span class="token operator">:</span><span class="token punctuation">[</span>\n        <span class="token operator">...</span>\n        <span class="token punctuation">{</span>\n            <span class="token literal-property property">block</span><span class="token operator">:</span> <span class="token string">\'menu\'</span><span class="token punctuation">,</span>\n            <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n                <span class="token punctuation">{</span>\n                    <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'Index\'</span><span class="token punctuation">,</span>\n                    <span class="token literal-property property">isSelected</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n                <span class="token punctuation">}</span><span class="token punctuation">,</span>\n                <span class="token punctuation">{</span>\n                    <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'Products\'</span><span class="token punctuation">,</span>\n                    <span class="token literal-property property">isSelected</span><span class="token operator">:</span> <span class="token boolean">true</span>\n                <span class="token punctuation">}</span><span class="token punctuation">,</span>\n                <span class="token punctuation">{</span>\n                    <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">\'Contact\'</span><span class="token punctuation">,</span>

1\n                    <span class="token literal-property property">isSelected</span><span class="token operator">:</span> <span class="token boolean">false</span>\n                <span class="token punctuation">}</span>\n            <span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n                <span class="token keyword">var</span> block <span class="token operator">=</span> <span class="token punctuation">{</span>\n                    <span class="token literal-property property">block</span><span class="token operator">:</span> <span class="token string">\'menu\'</span><span class="token punctuation">,</span>\n                    <span class="token literal-property property">elem</span><span class="token operator">:</span> <span class="token string">\'item\'</span><span class="token punctuation">,</span>\n                    <span class="token literal-property property">content</span><span class="token operator">:</span> item<span class="token punctuation">.</span>title<span class="token punctuation">,</span>\n                    <span class="token literal-property property">mods</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n                        <span class="token literal-property property">selected</span><span class="token operator">:</span> item<span class="token punctuation">.</span>isSelected\n                    <span class="token punctuation">}</span>\n                <span class="token punctuation">}</span><span class="token punctuation">;</span>\n                <span class="token keyword">return</span> block<span class="token punctuation">;</span>\n            <span class="token punctuation">}</span><span class="token punctuation">)</span>\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\n        <span class="token operator">...</span>\n    <span class="token punctuation">]</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div>'}}),"\n",e.createElement(a.p,null,e.createElement(a.a,{href:"https://github.com/varya/dynamic-bemjson/blob/master/desktop.bundles/page2/page2.bemjson.js"},"full\ncode")),"\n",e.createElement(a.p,null,"This gives a ",e.createElement(a.a,{href:"http://varya.me/dynamic-bemjson/desktop.bundles/page2/page2.html"},"page with a menu of 3 items"),".\nThe bigger is the array of items, the more you save. Especially when the structure\nof every item changes while developing."),"\n",e.createElement(a.p,null,"Indeed, this feature is not needed when BEMJSON is a result of 1st layer templates\n(like BEMTREE, priv.js) you can produce as much BEMJSON as is necessary. But with\ninitial development of a static web page, the JavaScript tricks help to avoid\ncopy-paste."))}var o=function(n={}){const{wrapper:a}=Object.assign({},(0,t.RP)(),n.components);return a?e.createElement(a,n,e.createElement(p,n)):p(n)},l=s(5556),c=s.n(l),r=s(3433),i=s(9868),u=s(7037),k=s(3928),m=s(4449);const d={Box:r.a,Button:i.$,Text:u.E,Heading:k.DZ,Paragraph:k.fz,PatternJourney:k.Rl,PureHtml:k.Qi,Section:k.wn,Hero:k.lq,Widget:k.x0,PatternJourney:k.Rl,WidgetContainer:k.uM,Workshop:k.cR,ProjectRoles:k.JV,DsAspects:k.nD,Link:k.N_,Image:k._V,ImageBlock:k.Dq,Map:k.T5,YandexImage:k.zX,Instagram:k.pd},g=n=>({children:a})=>e.createElement(k.DZ,{level:n},a),h={h1:g(1),h2:g(2),h3:g(3),h4:g(4),h5:g(5),h6:g(6),p:({children:n})=>e.createElement(k.fz,{standout:!0},n),a:k.N_,ul:k.Ul,ol:k.Ol,div:({"data-excerpt":n,children:a,...s})=>n?e.createElement(k.fz,{as:"div",lead:!0},a):e.createElement("div",s,a)};h.h1.propTypes={children:c().node};const y=({data:{mdx:n,site:{siteMetadata:{siteUrl:a}}},children:s,pageContext:{next:p,prev:o,fileSourceUrl:l}})=>{const{readingTime:c,slug:i,disqusIdentifier:u}=n.fields,{date:g,title:y,subTitle:f,cover:b,tumblr:E}=n.frontmatter,v=n.frontmatter.tags&&n.frontmatter.tags.split(","),w=i.startsWith("blog/");return n?e.createElement(k.PE,null,e.createElement(k.I0,{imageUrl:b&&b.childImageSharp.gatsbyImageData.images.fallback.src,tags:v,date:g,readingTime:w&&parseInt(c.minutes)>0?`${Math.round(c.minutes).toFixed(1)} min read`:null,title:y,subTitle:f}),e.createElement(k.G$,{data:n}),e.createElement(r.a,{flex:"grow",width:"xlarge",margin:{horizontal:"auto"},pad:"medium",direction:"column"},e.createElement(t.xA,{components:{...h,...d}},s),e.createElement(r.a,{direction:"row",fill:"horizontal",justify:"center",margin:{bottom:"auto"},pad:{vertical:"medium"}},v&&v.length>0&&v.map(n=>e.createElement(k.vw,{key:n,name:n.trim(),slug:(0,m.fX)(n),margin:"xsmall"}))),w&&e.createElement(e.Fragment,null,e.createElement(k.WB,{flex:!1,prevSlug:o&&`/${o.fields.slug}`,nextSlug:p&&`/${p.fields.slug}`,prevTitle:o&&o.frontmatter.title,nextTitle:p&&p.frontmatter.title,pad:{vertical:"medium"}}),e.createElement(k.Sn,{link:l}),e.createElement(k.Hw,{slug:i,title:y,disqusIdentifier:u,tumblr:E,siteUrl:a})))):null};function f(n){return e.createElement(y,n,e.createElement(o,n))}},8453:function(n,a,s){s.d(a,{RP:function(){return p},xA:function(){return l}});var t=s(6540);const e=t.createContext({});function p(n){const a=t.useContext(e);return t.useMemo(()=>"function"==typeof n?n(a):{...a,...n},[a,n])}const o={};function l({components:n,children:a,disableParentContext:s}){let l;return l=s?"function"==typeof n?n({}):n||o:p(n),t.createElement(e.Provider,{value:l},a)}}}]);
2//# sourceMappingURL=component---src-templates-post-js-content-file-path-content-posts-javascript-in-bemjson-index-en-md-87a57f580191242ba484.js.map