bevis-ui / docs Goto Github PK

Документация к BEViS

docs's Introduction

Быстрый старт

git clone [email protected]:bevis-ui/bevis-stub.git your-project
cd your-project
make

Откройте в браузере localhost:8080 и скажите: «Привет, Бивис!»

BEViS?

Это javascript фреймворк для создания веб-сайтов. Не нужно знать ни одного серверного языка программирования, чтобы сверстать настоящий коммерческий большой сайт. Достаточно лишь небольших знаний о HTML, CSS, Javascript. Вот это и есть BEViS. Заинтересовались? :)

Мы подготовили для вас весёлые учебники, от которых (мы смеем надеяться) вы не сможете оторваться и ещё готовим практические занятия, на которых вместе с вами создадим проект и пощупаем все технологии.

А для тех из вас, кто не хочет читать, а хочет только глазком заглянуть в референс, скоро напишем пишем серьёзные справочные руководства, в которых нет даже намёка на шутливость.

Выбирайте, что вам по душе, и добро пожаловать :)

Весёлые учебники

«Про сложные темы невозможно говорить серьёзно.»

Андрей Кармацкий

Наши дети в школах страдают от недостатка интересной учебной литературы, а мы страдаем от этого же на работе, когда руководитель даёт нам задание срочно освоить что-то новое.

К сожалению, хорошие учебники для взрослых можно пересчитать по пальцам. Я знаю про Git Magic и про Why's Poignant Guide To Ruby. Я осмелюсь заявить, что наши весёлые учебники можно поставить с ними на одну полку — они нескучные, написаны простым русским языком, с аналогиями и понятными метафорами.

Их два. Один расчитан на специалистов самого широкого профиля, то есть даже вообще неспециалистов, а второй написан для тех, кто уже понюхал в жизни пороху и знает, что такое MVC, шаблоны представления и какие сервера кроме Apache бывают на свете. Выбирайте по вкусу :)

Между делом заведите себе гиковский блог на Бивис-движке. Это займёт не больше двух минут, включая публикацию блога на бесплатный хостинг. Пишите статьи в маркдауне, забудьте о вордпрессе ;)

Или посмотрите на одностраничное приложение, реализующее функциональность TODO MVC.

А ещё лучше, посетите наш практикум. Он не скучный, быстрый, понятный.

Практикум

На вопросы, отмеченные звёздочкой, мы либо ещё не ответили, либо ответили не полностью.

Справочные руководства

#####«Краткость — сестра таланта.» Антон Павлович Чехов

Решение типовых задач

На вопросы, отмеченные звёздочкой, мы либо ещё не ответили, либо ответили не полностью.

В этих документах мы кратко пересказываем то, что описано в соответствующих уроках практикума. Только суть без подробных объяснений.

О технологиях

Отвечаем на частые вопросы

docs's People

Contributors

Stargazers

Watchers

Forkers

alt-j celt178 vladis1avlozhkin pahaz kix jt3k rgordeev mckarty seyar sigorilla vadimev a1ip bryant1410 alyona- vaivaivai

docs's Issues

Можно ли указать, какие шаблоны блоков нужно тянуть на front-end а какие оставить?

Сейчас все шаблоны склеиваются в один js файл вместе с логикой блоков что делает его достаточно тяжелым для загрузки на клиента.
Зачастую на клиенте не нужны все шаблоны блоков.
Нужны только те которые будут рендерится на нем.
Есть ли возможность как-то управлять тем какие шаблоны тянуть на front-end а какие нет?

Неточности в примерах yblock.md

Давайте отредактируем pages/test-page/test-page.page.js, чтобы у вас получилось как у меня:

module.exports = function (pages) {
    pages.declare('test-page', function (params) {
        var options = params.options;
        return {
            block: 'page',
            title: 'test page',
            styles: [
                {url: options.assetsPath + '.css'}
            ],
            scripts: [
                {url: options.assetsPath + '.js'}
            ],
            body: [
                {
                    block: 'form'
                }
            ]
        };
    });
};

По-моему нужно:

{url: options.assetsPath + '.' + params.lang + '.js'}

=) И ещё, если в input.bt.js оставить так:

bt.setDefaultView('input', 'normal');

То стили не сработают, т.к. мы не прописывали для normal стили =)

а вот, если заменить на

bt.setDefaultView('input', 'large');

то работает! :)
Ну или создать отдельный стиль для normal =-)
И почему-то блюр помимо снятия фокуса ещё и удаляет инпут вообще.

this._greetingInput.blur();

И не срабатывает последовательное disable, а потом enable. =)
Спасибо за труды! Очень круто =)

Как добавить новый блок на уже созданную и работающую страницу?

Допустим нажимаю на кнопку и появляется какой-нибудь блок.

Не получается создать тестовый проект

➜  work  git clone [email protected]:bevis-ui/bevis-stub.git your-project
Cloning into 'your-project'...
Warning: Permanently added the RSA host key for IP address '192.30.252.131' to the list of known hosts.
Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

UPD

с HTTP-ссылкой заработало

➜  work  git clone https://github.com/bevis-ui/bevis-stub.git bevis-project
Cloning into 'bevis-project'...
remote: Counting objects: 252, done.
remote: Total 252 (delta 0), reused 0 (delta 0), pack-reused 252
Receiving objects: 100% (252/252), 71.17 KiB | 101.00 KiB/s, done.
Resolving deltas: 100% (79/79), done.
Checking connectivity... done.

Может неочевидный переход?

От

var clear = this._findElement('clear');
var control = this._findElement('control');

this._clear = this._findElement('clear');
this._control = this._findElement('control');

Объяснить =)

В чем причина, что doctype неверно рендерится?

ctx.getParam('doctype') || '<!DOCTYPE html>',

&lt;!DOCTYPE html&gt;

Я полагаю для любой строки будет происходить этот replace.
Зачем это сделано?

Как жить без миксин?

Допустим у меня есть блок кнопка, она замечательная, красивая, с богатым внутренним миром.
И я хочу вставить в страницу две такие кнопки но они будут выполнять совершенно разные задачи.
Будут ли эти кнопки одним и тем-же блоком?
Или это разные блоки с разными именами?

В БЭМ можно создать блок и примиксовать к нему другой и все стили и поведения от этого блока будут у текущего.
Но при этом блок также имеет свой внутренний мир и свое имя.

Как в bevis создавать новые, похожие блоки не копируя css и часть js от уже существующих похожих блоков?

Битые ссылки в документации

Сначала ещё раз спасибо =) Очень большое за то, что могу учиться по вашим урокам.

Теперь немного того, что полетело в процессе вёрстки.
Битые ссылки:
Здесь: https://github.com/bevis-ui/docs/blob/master/how-to-make/css.md в конце.

Вот, что должно было у вас получиться.

https://github.com/bevis-ui/bevis-stub/tree/input-with-styles/blocks/input

И здесь: https://github.com/bevis-ui/docs/blob/master/how-to-make/yblock.md

унаследован от YBlock, а тот в свою очередь унаследовал его от класса EventEmitter. Документацию к этому классу и к его методам для работы с событиями можно прочитать здесь.

https://github%20.com/bevis-ui/bevis-stub/blob/master/core/event-emitter/event-emitter.js

Вопросы: =)
1

_bindTo
Первый параметр — элемент или блок, на котором слушаем событие.

Никак не получается передать чистый блок, можно узнать каким образом это сделать? :)

2
Есть 3 одинаковых блока input. Допускает ли BEViS возможно по наведению на один из блоков, раскрасить все другие? Как ни стараюсь никак не могу понять, как это сделать.

this._bindTo(this._control, 'mouseover', this.hover);
this._bindTo(this._control, 'mouseout', this.nothover);

hover: function () {
                this._setState('hover');
                *МАГИЯ*
                this.emit('hover-success');
            },

            nothover: function () {
                this._removeState('hover');

Со вторым вопросом разобрался:

hover: function () {
          $('.' + ClassName.getBlockName()).addClass('_hover');
},

nothover: function () {
          $('.' + ClassName.getBlockName()).removeClass('_hover');
},

Ура! Разобрался с первым))), покопавшись в JSDoc'е =)

@example
         * var View = inherit(YBlock, {
         *     __constructor: function (model) {
         *         this.__base();
         *
         *         var hide = this._findElement('hide');
         *         this._bindTo(hide, 'click', this._onHideClick);
         *
         *         this._bindTo(model, 'change-attr', this._onAttrChange);
         *     }
         * });

Надо в конструктор передавать перменную =)

А практикум мы обязательно допишем ;)

Как написать js-поведение для блока? [*]
Как настроить локализацию? [*]

Расскажите про статус проекта?

Что если input помимо размера может иметь еще и разный цвет ?

допустим по 7 цветов для каждого размера

Есть ли (будет?) возможность быстрой компиляции проекта в статику?

Есть ли (будет?) возможность быстрой компиляции проекта в статику?
Чтобы получить html-ки c правильными путями до js-ок и css-ок в удобном для выкладки виде.

Есть ли возможность создать блок со stylus библиотекой mixin и подключать его к другим блокам через deps?

К примеру есть у меня вот такая библиотека.
Создаю блок grid с технологией stylus куда её и пихаю.
Хочу подключить её к блоку example. Для этого в example.deps.yaml прописываю зависимость к блоку grid.
И вуаля, в стилях блока могу использовать mixin из библиотеки.
И мне не нужно создавать отдельный блок в технологии bt.js реализующий сетку, просто использую нужный mixin из grid к блоку example и его элементам.

К сожалению моя задумка не удалась, т.к. по всей видимости компиляция stylus происходит до того как стили склеиваются в один файл.
Думаю надо сделать наоборот :)

Что вы думаете на этот счет? Не противоречит ли это общей концепции BEViS?

Slack?

Бивисный слэк, он существует :)?
https://bevis.slack.com уже существует...

Обновить FAQ

Я только разбираюсь в BEM/BEViS и ваш FAQ проявил действительно много деталей для меня. Но на сколько я понимаю он немного устарел, т.к. BEM не стоял на месте.
Было бы здорово увидеть свежий взгляд на сравнение BEM vs BEViS

Название input__control

После паузы, не сразу смог понять почему control =)

А в терминах BEViS поле формы представлено элементом блока, и имя этому элементу — control.
Перепишем методы:
getValue: function() {
    var control = this._findElement('control');
    return control.val();
},
setValue: function(value) {
    var control = this._findElement('control');
    control.val(value);
}

Возможно, text-field или что-то попроще? :)

Уточнить про шаблоны в "Три способа генерации блока"

Оказалось, что непонятно описал эту главу. @mckarty понял слова так, что не нужны никакие шаблоны, чтобы сгенерился HTML - мол только декларацию опиши в теле страницы и успех.

Дописать, что шаблоны-то нужны, что речь именно о механизмах генерации блока, а не о том, какие технологии нужны. Подумать, как описать без двойных толкований.

Нашёл небольшую нестыковку

К имени блока вместо конкретного вью добавьте маску *:

Было:

module.exports = function (bt) {
bt.match('input_large', function (ctx) {
// ...
});
};
Стало:

module.exports = function (bt) {
bt.match('input*', function (ctx) {
// ...
});
};
Но при этом надо добавить маску ещё и к:

bt.match('input*__control', function (ctx) {
// ...
});
Без этого не подтягиваются стили =) И интересный баг с крестиком происходит :)

Пример в "Учебнике для новичков"

В "Учебнике для новичков" есть такой пример http://prntscr.com/7sipd0
Если я правильно понял, на картинке в лого должен быть класс header__image ?

Описать, как Form.render рендерит блок на странице

Хотелось бы больше услышать о функции _render() вот здесь:

А теперь мы налету будем генерить input!
Открываем blocks/form/form.js и пишем:

Мы удалили метод render(). Он не нужен.

Слишком быстро добавили и убрали :)
И ещё понравился правильный способ создания элементов: _createElement =)

Рассказать про соответствие зависимостей в modules.define

dracowf [18:14] 
Ух ты! Не знал, что порядок в modules.define так важен!

makishvili [18:14] 
порядок чего именно?

dracowf [18:15] 
Так, сейчас. Объявления блоков, от которых зависят.

makishvili [18:16] 
Ты про массив во втором аргументе define и параметры анонимной функции в третьем аргументе?

makishvili [18:16]
что они должны соответствовать друг другу?

makishvili [18:16]
Или о чём-то ином?

dracowf [18:16] 
Их порядок да

dracowf [18:17]
Хм, похоже я поспешил с выводом, сейчас ещё раз проверю

dracowf [18:18]
А нет, всё правильно

dracowf [18:18]
Порядок важен

makishvili [18:19] 
важен-важен. Бывало не в том порядке объявишь параметры в функции, и всё ломается :simple_smile:

makishvili [18:20]
Из документации этот нюанс понятен или нет? Нужно отдельно на нём заострить внимание?

dracowf [18:20] 
modules.define(
    'flight-timetable-row',
    ['inherit',
        'block',
        '1',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '9',
        '10'
    ],
    function (provide,
              inherit,
              YBlock,
              10,
              9,
              8,
              7,
              6,
              5,
              4,
              3,
              2,
              1,) {

Будет всё наоборот)

makishvili [18:21] 
да, у тебя всё сломается )

dracowf [18:21] 
Аха :smiley: Ну оно было не совсем сломано, но когда глянул на названия всё перемешалось было забавно)))

dracowf [18:21]
Ладно, чего умничать, я думаю стоит рассказать в доке об этом :simple_smile: (edited)

makishvili [18:22] 
не сломалось, потому что твои 10 модулей почти одинаковы. А  когда они все — разные классы, тогда все быстрее ломается :))

Перевести концептуальную документацию на английский

Было бы здорово также иметь английский вариант документации описывающей суть bevis подхода. Это также будет полезно для агитации этого подхода среди англоговорящих команд.