Поиск по этому блогу

четверг, 24 марта 2016 г.

Создаем статическую страницу BEM (выполняем первый пример "hello" из документации Яндекса)

Слишком много новых названий. Потому решил, что надо попрактиковаться. Здесь загрузил пакет с примером с Github, залил на флешку, создал файлы, запустил сервер... и обнаружил прорву новых файлов в папках проекта. Этого не ожидал. В примере страничка формы, на которой после клика по кнопке должен показываться текст из поля ввода (имя пользователя), не работает... Тупо повторить пример не удалось... и вообще руководство написано так, что надо думать... Это грубая методическая ошибка... отпугивает...


Вебинары по БЭМ из библиотеки Яндекса


Собираем статическую страницу на БЭМ
Шпаргалка по пакетному менеджеру NPM
npm-update This command will update all the packages listed to the latest version (specified by the tag config), respecting semver.
Полный код BEMJSON-файла и репозиторий примера на GitHub

Создание страницы

F:\stradorusite>mkdir bem_yandex

F:\stradorusite>cd bem_yandex

F:\stradorusite\bem_yandex>git clone https://github.com/bem/project-stub.git --depth 1 --branch v1.3.1 s tart-project Cloning into 'start-project'... remote: Counting objects: 29, done. remote: Compressing objects: 100% (22/22), done. remote: Total 29 (delta 0), reused 18 (delta 0), pack-reused 0 Unpacking objects: 100% (29/29), done. Checking connectivity... done. Note: checking out 'f818aeae021df17adc1d37a3852965b08fc8bd14'.

You are in 'detached HEAD' state. You can look around, make experimental changes and commit them, and you can discard any commits you make in this state without impacting any branches by performing another checkout.

If you want to create a new branch to retain commits you create, you may do so (now or later) by using -b with the checkout command again. Example:

git checkout -b

In [ ]:
#1. Стартуем проект
F:\stradorusite\bem_yandex>cd start-project

F:\stradorusite\bem_yandex\start-project>npm install
npm WARN deprecated enb-diverse-js@0.1.0: Use `enb-js` instead.
npm WARN deprecated lodash@2.2.1: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0.
loadDep:sigmund -> addNam | |##########################-----------------------------------------------|
In [ ]:
| | | `-- minimist@0.0.8
| | `-- path-is-absolute@1.0.0
| `-- stylus@0.54.2
|   +-- css-parse@1.7.0
|   +-- glob@3.2.11
|   | `-- minimatch@0.3.0
|   +-- mkdirp@0.5.1
|   | `-- minimist@0.0.8
|   +-- sax@0.5.8
|   `-- source-map@0.1.43
`-- ym@0.1.2
In [ ]:
#2. Запустите сервер с помощью ENB:
npm start
#3.Проверьте результат по ссылке http://localhost:8080/desktop.bundles/index/index.html.

Идем сначала в корень и обнаруживаем там интересную схему http://127.0.0.1:8080/ ... но рссматривать ее некогда. Сначала воспроизведем пример Собираем статическую страницу на БЭМ

Итак, сервер запущен. В приложении копипаст из консоли, а мы создаем новую папку

In [ ]:
F:\stradorusite\bem_yandex\start-project>mkdir hello

F:\stradorusite\bem_yandex\start-project>cd hello

F:\stradorusite\bem_yandex\start-project\hello>

Добавьте на своем проекте описание блока hello в файле desktop.bundles/hello/hello.bemjson.js. Блок hello – это сущность, которая содержит в себе все необходимые для проекта элементы.

In [ ]:
({
     block : 'page',
     title : 'hello',
     head : [
         { elem : 'css', url : 'hello.min.css' }
     ],
     scripts : [{ elem : 'js', url : 'hello.min.js' }],
     mods : { theme : 'islands' },
     content : [
         {
             block : 'hello'
         }
     ]
 })

Поместите элемент greeting с текстом приветствия пользователя (поле content) в блок hello.

In [ ]:
content : [
     {
         block : 'hello',
         content : [
             {
                 elem : 'greeting',
                 content : 'Привет, %пользователь%!'
             }
         ]
     }
 ]

Чтобы создать поле ввода и кнопку, возьмите готовые реализации блоков input и button из библиотеки bem-components и добавьте их в блок hello.

In [ ]:
 content : [
     {
         block : 'hello',
         content : [
             {
                 elem : 'greeting',
                 content : 'Привет, %пользователь%!'
             },
             {
                 block : 'input',
                 mods : { theme: 'islands', size : 'm' },
                 name : 'name',
                 placeholder : 'Имя пользователя'
             },
             {
                 block : 'button',
                 mods : { theme : 'islands', size : 'm', type : 'submit' },
                 text : 'Нажать'
             }
         ]
     }
 ]

Создадим зщдесь же hello.html

In [ ]:
<h1>start-project</h1>
<h2>Available pages</h2>
<ul>
<li><a href="desktop.bundles\index\index.html">desktop.bundles\index\index.html</a></li>
</ul>
<h2>Graph</h2>
<ul>
<li><img src="http://www.plantuml.com/plantuml/img/
hPTHae8m38RVFGKNg7i1nuk83riQLxHGfaLTPsVllXHA1QgJjEkR
7PEVBqdp3noK5A2pdG1pRbMpvfTQI31vMGlutcS_gzs6R_l3Mi8L
fDbyy6rU3x_tsQTvaPfFS_OJ5GxLoQXwVN9AXr82QxIwbXq7BlX8
NuWAAAGNTL6iLSpzHL9s6fqoCJ3RC9R2Aw0n7jOUS3oNWh2DKJYO
dynxv6RTytNQuKxcJ2Xp25iHOd0cMikeQk5L5gMEAyucO1st8Uyg
ZIWMLbOOLvXfx_92gAnBG5Xi18uoZd-wsSUsccssFPFMsINYwpm6
9l3PrC1pQ8Hzr0eF8IqVhLQwtdEJxP-oD5jx5nc_inQAOwpZBWI9
eufou9TNAi645wb4t3URShpiqqO7_OWtwracaPfgjscjJZTp_xnO
KvycKYT7y-N4svPg-bohcm7z3yiD133aC87UbN2ldPhd7ixiPEZe
PEGqwsaqp5zyAz1VWECDUGYQ2o9qC7PEqSfpWnahxcGQg0MhbBYG
LWi58q7vvdcWgdnyVt2bJN4ippZDa8KGkI2SAYJoBrrnIFYhrnY5G_LQlty0"></li>
</ul>
<h2>More info</h2>
<div><a href="https://github.com/enb-make/enb">ENB Readme</a></div>

Создание блока

hello.js – описывает динамическую функциональность страниц; ◦hello.bemhtml – шаблоны для генерации HTML-представления блока; ◦hello.css – изменяет внешний вид объектов на странице.

Приложение: Копипаст из консоли после запуска сервера и открытия предустановленных страниц.

In [ ]:
In [ ]:
F:\stradorusite\bem_yandex\start-project>npm start

> bem-project-stub@1.3.1 start F:\stradorusite\bem_yandex\start-project
> enb server

Server started at http://0.0.0.0:8080
20:08:21.894 - [rebuild] [desktop.bundles\index\index.bemjson.js] file-provider
20:08:25.103 - [rebuild] [desktop.bundles\index\index.levels] levels
20:08:25.135 - [rebuild] [desktop.bundles\index\index.bemdecl.js] bemjson-to-bemdecl
20:08:25.931 - [rebuild] [desktop.bundles\index\index.deps.js] deps
20:08:25.964 - [rebuild] [desktop.bundles\index\index.files] files
20:08:25.968 - [rebuild] [desktop.bundles\index\index.dirs] files
20:08:35.285 - [rebuild] [desktop.bundles\index\index.bemhtml.bemdecl.js] deps-by-tech-to-bemdecl
20:08:35.397 - [rebuild] [desktop.bundles\index\index.css] stylus
20:08:35.506 - [rebuild] [desktop.bundles\index\index.bemhtml.deps.js] deps
20:08:35.521 - [rebuild] [desktop.bundles\index\index.bemhtml.files] files
20:08:35.531 - [rebuild] [desktop.bundles\index\index.bemhtml.dirs] files
20:08:35.694 - [rebuild] [desktop.bundles\index\index.browser.js] browser-js
20:08:35.761 - [rebuild] [desktop.bundles\index\index.browser.bemhtml.js] bemhtml
20:08:35.939 - [rebuild] [desktop.bundles\index\index.pre.js] file-merge
20:08:36.175 - [rebuild] [desktop.bundles\index\index.js] prepend-modules
20:08:38.270 - [rebuild] [desktop.bundles\index\index.min.css] borschik
20:08:38.493 - [rebuild] [desktop.bundles\index\index.min.js] borschik
20:08:40.317 - [rebuild] [desktop.bundles\index\index.bemhtml.js] bemhtml
20:08:40.462 - [rebuild] [desktop.bundles\index\index.html] bemjson-to-html
20:13:50.888 - [rebuild] [desktop.bundles\index\index.html - \desktop.bundles\index\index.bemjson.js] fi
le-provider
20:13:50.908 - [isValid] [desktop.bundles\index\index.html - \desktop.bundles\index\index.bemdecl.js] be
mjson-to-bemdecl
20:13:50.946 - [rebuild] [desktop.bundles\index\index.html - \desktop.bundles\index\index.levels] levels

20:13:50.965 - [isValid] [desktop.bundles\index\index.html - \desktop.bundles\index\index.deps.js] deps
20:13:51.145 - [rebuild] [desktop.bundles\index\index.html - \desktop.bundles\index\index.files] files
20:13:51.149 - [rebuild] [desktop.bundles\index\index.html - \desktop.bundles\index\index.dirs] files
20:13:51.162 - [isValid] [desktop.bundles\index\index.html - \desktop.bundles\index\index.bemhtml.js] be
mhtml
20:13:51.177 - [isValid] [desktop.bundles\index\index.html - \desktop.bundles\index\index.html] bemjson-
to-html
----- \desktop.bundles\index\index.html 559ms
20:13:51.649 - [rebuild] [desktop.bundles\index\index.min.css - \desktop.bundles\index\index.bemjson.js]
 file-provider
20:13:51.661 - [isValid] [desktop.bundles\index\index.min.css - \desktop.bundles\index\index.bemdecl.js]
 bemjson-to-bemdecl
20:13:51.673 - [rebuild] [desktop.bundles\index\index.min.css - \desktop.bundles\index\index.levels] lev
els
20:13:51.696 - [isValid] [desktop.bundles\index\index.min.css - \desktop.bundles\index\index.deps.js] de
ps
20:13:51.739 - [rebuild] [desktop.bundles\index\index.min.css - \desktop.bundles\index\index.files] file
s
20:13:51.757 - [rebuild] [desktop.bundles\index\index.min.css - \desktop.bundles\index\index.dirs] files

20:13:51.779 - [isValid] [desktop.bundles\index\index.min.css - \desktop.bundles\index\index.css] stylus

20:13:51.795 - [isValid] [desktop.bundles\index\index.min.css - \desktop.bundles\index\index.min.css] bo
rschik
20:13:51.800 - [rebuild] [desktop.bundles\index\index.min.js - \desktop.bundles\index\index.bemjson.js]
file-provider
20:13:51.822 - [isValid] [desktop.bundles\index\index.min.js - \desktop.bundles\index\index.bemdecl.js]
bemjson-to-bemdecl
20:13:51.969 - [rebuild] [desktop.bundles\index\index.min.js - \desktop.bundles\index\index.levels] leve
ls
----- \desktop.bundles\index\index.min.css 464ms
20:13:52.008 - [isValid] [desktop.bundles\index\index.min.js - \desktop.bundles\index\index.deps.js] dep
s
20:13:52.085 - [rebuild] [desktop.bundles\index\index.min.js - \desktop.bundles\index\index.files] files

20:13:52.097 - [rebuild] [desktop.bundles\index\index.min.js - \desktop.bundles\index\index.dirs] files
20:13:52.125 - [isValid] [desktop.bundles\index\index.min.js - \desktop.bundles\index\index.bemhtml.bemd
ecl.js] deps-by-tech-to-bemdecl
20:13:52.227 - [isValid] [desktop.bundles\index\index.min.js - \desktop.bundles\index\index.browser.js]
browser-js
20:13:52.481 - [isValid] [desktop.bundles\index\index.min.js - \desktop.bundles\index\index.bemhtml.deps
.js] deps
20:13:52.519 - [rebuild] [desktop.bundles\index\index.min.js - \desktop.bundles\index\index.bemhtml.file
s] files
20:13:52.531 - [rebuild] [desktop.bundles\index\index.min.js - \desktop.bundles\index\index.bemhtml.dirs
] files
20:13:52.569 - [isValid] [desktop.bundles\index\index.min.js - \desktop.bundles\index\index.browser.bemh
tml.js] bemhtml
20:13:52.682 - [isValid] [desktop.bundles\index\index.min.js - \desktop.bundles\index\index.pre.js] file
-merge
20:13:52.779 - [isValid] [desktop.bundles\index\index.min.js - \desktop.bundles\index\index.js] prepend-
modules
20:13:52.812 - [isValid] [desktop.bundles\index\index.min.js - \desktop.bundles\index\index.min.js] bors
chik
----- \desktop.bundles\index\index.min.js 1841ms


Посты чуть ниже также могут вас заинтересовать
Автор: на
Ярлыки: ,

1 комментарий:

Sergey Borisovich комментирует...

Добавил в ссылки наверху :

Вебинары по БЭМ из библиотеки Яндекса

Вебинары прошли летом 2015 года, их надо поизучать...

27 мая 2016 г. в 10:57

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)