
JavaScript фреймворк, позволяющий быстро и просто создавать модульные изоморфные приложения.



Особенности
Изоморфность
Вы пишете код приложения на одном языке, как на сервере, так и на клиенте.
Вы пишете код практически не задумываясь о том, в какой среде он исполняется(браузер или сервер) в рамках одного приложения.
Специфичный код для браузера вы пишете в строго отведённом для этого месте. Всю остальную работу делает за вас фреймворк.
Single Page App + SEO
Вы создаёте одностраничное приложение.
Каждое состояние(страница) приложения описывается конкретным URL.
На стороне сервера состояние приложения восстанавливается из URL и генерируется соответствующая HTML-страница.
Поисковые роботы получают готовую для индексации страницу в конкретном состоянии.
Модульность + БЭМ
Стройте свой UI из независимых переиспользуемых модулей.
Модуль - это стандартный CommonJS-модуль в рамках платформы NodeJS.
Фреймворк по умолчанию поддерживает БЭМ-методологию. Модуль - это блок в терминах БЭМ.
Сборка на gulp из коробки
Для сборки проектов по умолчанию используется потоковый сборщик Gulp.
Собираете и запускаете проект одной командой.
Автоматическая пересборка проекта при изменении кода.
Всё что вам нужно - дописать к сборке особенности своего приложения.
Работает вместе с модулем MakeUp
В комплект входит специальный инструмент для изолированной разработки модулей MakeUp.
##Установка
Установите глобально gulp и slot:
$ npm install -g gulp
$ npm install -g slot
Создайте и перейдите в пустую папку:
$ mkdir myApp
$ cd myApp
Разверните в папке базовую структуру приложения:
$ slot init
Установите зависимости:
$ npm install
Соберите приложение:
$ gulp dev
Документация
Вся документация находится в папке docs
.
FAQ
У вас написано что вы используете БЭМ-методологию. Это обязательно? Что делать если я не хочу её использовать?
Мы не используем БЭМ-методологию. Вы можете использовать любую вёрстку, написанную по любым соглашениям, или вообще без них.
При этом у нас есть:
-
Встроенная поддержка нейминга по БЭМ.
У каждого элемента модуля есть необязательное поле selector
. Туда может быть записан любой селектор, по которому будет произведён поиск внутри текущего модуля. Если этого поля нет, фреймворк примет значение селектора равное block__elementName
, где block
- имя модуля, либо поле block
модуля; elementName
- имя элемента.
-
Встроенная поддержка модификаторов.
Метод slot.mod
выставляет модификатор на корневой дом-элемент текущего модуля в BEViS нотации.
-
Встроенный модуль makeup для вёрстки и регрессии вёрстки.
Makeup предполагает вёрстку абсолютно независимыми блоками. Это означает, что, для корректной проверки вёрстки, стили любого модуля не должны зависить от его расположения в теле документа. Методология БЭМ этому условию удовлетворяет, но есть много других методологий и подходов, удовлетворяющих этому условию.
Итого: вы можете верстать как угодно. Если вы хотите использовать Makeup, лучше верстать независимыми блоками. Если вы не хотите писать поле selector
, и хотите в полной мере пользоваться методом slot.mod
, лучше использовать БЭМ в BEViS нотации.