BaasCMS – бэкенд не нужен

BaasCMS — это JavaScript CMS, использующая в качестве бэкенда популярных провайдеров BaaS ^[1]. На данный момент поддерживается только Parse.com ^[2].

Исходный код BaasCMS ^[3] доступен на GitHub.

BaasCMS Demo на GitHub Pages ^[4]
Тоже самое BaasCMS Demo на Tumblr ^[5]

Можно посмотреть Админ-панель ^[6] для этого демо (изменения/добавление запрещены). В соответвующую форму на главной странице админки нужно вставить следующие ключи:

• Application ID: nM7P7NnFA95CK1WrqWOf9wa3mskctaTOdk9vYflj
• Javascript Key: 0zHfA9FG8L1xR699qmFXjxkZ1pDxgml0MWZMpqJG

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

Для начала работы с BaasCMS нужно пройти следующие шаги:

1. Зарегистрируйтесь на Parse.com ^[7].
2. Создайте новое приложение ^[8].
3. Скопируйте Application ID и Javascript Key вашего нового приложения и вставьте их в соответствующую форму на главной странице Админ-панели BaasCMS ^[9].

После сохранения ключей можно начать работать с админкой.

В BaasCMS вводятся сущности категория, паттерн и айтем. Каждой категории можно присвоить заранее созданный паттерн. Если категория имеет паттерн, то в рамках этой категории можно создавать айтемы с полями, которые определенны в паттерне.

Например, вы можете создать паттерн под названием Article с полями name типа text, photo типа google drive image и body типа textarea, а затем создать категорию под названием Блог и в соответвующем select выбрать паттерн Article. Теперь в эту категорию можно добавлять айтемы с полями name, photo и body.

Для начала кастомизации фронтфейса вашего приложения воспользуйтесь болванкой baascms.parse.html ^[10]:

1. Сохраните файл себе на компьютер и откройте на редактирование.
2. Найдите 19 строчку с Parse.initialize('YOUR-APPLICATION-ID-HERE', 'YOUR-JAVASCRIPT-KEY-HERE'); и впишите туда свои ключи.
3. Залейте файл на хостинг ^[11] и смотрите что получилось. Сразу предупреждаю, в болванке нет никаких стилей, так что не пугайтесь.

Если у вас нету своего хостинга ^[11], то можно воспользоваться GitHub Pages ^[12] или Tumblr ^[13] или любым другим сервисом, где позволяют заливать свой html и не режут скрипты.

Tumblr в качестве хостинга ^[11]:

1. Зарегистрируйтесь на Tumblr ^[14] или просто создайте новый блог ^[15], если уже есть аккаунт.
2. Перейдите в dashboard ^[13] и кликните на ссылку «Настроить» в правой части.
3. Затем кликните по ссылке «Редактировать HTML» в левой части.
4. В появившемся сайдбаре удалите весь html и вставьте содержимое вашей болванки.
5. Сохраните изменения и перейдите в ваш блог по ссылке {ИМЯ-ВАШЕГО-БЛОГА}.tumblr.com и смотрите, что получилось.

Шаблоны

HTML-шаблоны в BaasCMS выглядят примерно так:

    <script id="template-baascms-categories-wrap" type="text/template">
        <ul>
            <%= htmlElements %>
        </ul>
    </script>

В качестве шаблонизатора используется Underscore.js-функция template ^[16].

Правила, по которым именуются id шаблонов, покажу на примере. Для категорий по умолчанию используются шаблоны со следующими id:

• template-baascms-categories-element — для вывода одного элемента из списка многих категорий.
• template-baascms-categories-wrap — для вывода html окружающего элементы.
• template-baascms-category — для вывода подробного описания категории.

Для айтемов по умолчанию используются id:

• template-baascms-items-element — для вывода одного элемента.
• template-baascms-items-wrap — для вывода html окружающего элементы.
• template-baascms-item — для вывода подробного описания.

Если вам нужно создать особенные шаблоны для айтемов определенного паттерна, например Article, то создайте шаблоны со следующими ниже id и CMS автоматом их подхватит:

• template-baascms-article-items-element
• template-baascms-article-items-wrap
• template-baascms-article-item

Виджеты

Для доступа к данным и рендеринга используются виджеты. Существует шесть виджетов на данный момент:

• Category
• Categories
• Item
• Items
• Breadcrumbs
• Main

Все виджеты, кроме Main, наследуют от класса BaasCMS.Widget, у которого есть следующие опции:

    {
        elementSelector: '', // jquery селектор для контейнера куда рендерить
        template: '', // шаблон для одиночных элементов, например "template-baascms-items-element" или "template-baascms-item"
        templateWrap: '', // шаблон для окружающего элементы html, например "template-baascms-items-wrap"
        autoLoad: true, // если true, то автоматически делает ajax-запрос и рендерит в контейнер
        cache: 'yes', // кешировать запрос к серверу или нет соответсвенно
        select: null, // массив с полями, которые нужно запросить
        where: {}, // условия запроса
        beforeQuery: function() {}, // соответствующие коллбэки
        afterQuery: function() {},
        beforeRender: function() {},
        afterRender: function() {}
    }

Например, нам нужно вывести все айтемы паттерна Product, у которых поле sale равно yes:

    <div id="sale"></div>
    <script>
        new BaasCMS.widgets.Items({
            elementSelector: '#sale',
            template: 'template-product-sale-element',
            templateWrap: 'template-product-sale-wrap',
            patternName: 'Product',
            cache: 'yes',
            select: ['name', 'category_id', 'cost', 'preview'],
            where: {
                sale: 'yes'
            }
        });
    </script>

Виджет Main выводит данные в зависимости от hash URL, используя библиотеку PathJS ^[17]. В виджет вшиты два роута: '#/baascms/category/:cid(/page/:page)(/sort/:sort)' и '#/baascms/category/:cid/item/:iid'. Первый для подробного вывода одной категории или списка айтемов, второй для подробного вывода айтема. В зависимости от роута, виджет Main подключает соответствующий виджет из списка выше.

В исходном коде BaasCMS Demo ^[18] можно посмотреть примеры использования виджетов.

Так же исходный код js-приложения Админ-панели ^[19] может послужить хорошим примером, как работать с виджетами и не мешать js-код с html.

Адаптеры

Адаптер — это класс-прослойка для работы с провайдером BaaS. Все запросы к серверу происходят опосредовано через инстанс этого класса (исходный код адаптера для Parse.com ^[20]). Таким образом можно написать адаптер для любого сервиса или даже для своего бэкенда. Название адаптера передается в параметрах инициализации CMS:

    BaasCMS.init({
        baas: 'Parse'
    });

Заключение

Еще предстоит написать тесты и толковую документацию, но уже сейчас можно посмотреть что да как, оценить перспективы. Если вас заинтересовал проект, можете поучавствовать в его развитии на GitHub ^[3]. Баги и вопросы можно отправлять на baascms@gmail.com.

Автор: Artod

Источник ^[21]