Облачная эпоха CMS. Пример реализации

    Продолжаем разговор о CMS, которая написана на Javascript, полностью работает в браузере и сохраняет в облако. Теория была в предыдущей статье, а теперь — практика. Cделаем самую простую систему для статических сайтов — всего три кнопки и сотня строк на JS.

    ТЗ:
    1. Хостинг сайта — облачное хранилище с возможностью привязки собственного домена к контейнеру. Нам подойдет любое, у которого есть HTTP API для управления файлами: Amazon S3, провайдеры Openstack Swift или халявный GitHub Pages. В моем случае — это будет облако Selectel, т.к. у меня уже есть там аккаунт.
    2. Визуальное «in-place» редактирование — это когда администратор может отредактировать любой элемент прямо на странице сайта. Части страницы, которые можно редактировать, мы будем помечать в специальным классом CSS («sv»).
    3. Режим правки исходного кода HTML-страницы — на случай, если WYSIWYG-редактор не справляется, или нужно поменять дизайн всей страницы.

    Интерфейс:


    Единственная проблема, которая стоит у нас на пути — это доступ к хранилищу Selectel из браузера через XmlHttpRequest в обход same-origin policy.
    Само хранилище Selectel поддерживает CORS, но вот точка авторизации auth.selcdn.ru этим похвастаться не может. Засада! Нужно проксировать запрос через какой-нибудь сервер. На помощь приходит гениальная и недооцененная поделка Yahoo Tables, которая позволяет делать несложные JSONP-сервисы на смеси XML-разметки и Javascript. Наша «таблица» будет отправлять запрос авторизации через сервер Yahoo и в случае успеха возвращать ключ к хранилищу.
    Выражаясь словами Yahoo Query Language (YQL), все элементарно:
    USE 'http://cms.svsite.com/auth.selectel.xml' AS auth; /* подключили таблицу */
    SELECT * FROM auth WHERE url='https://auth.selcdn.ru' AND user='пользователь' AND key='пароль';
    

    Трафик идет по https, поэтому сойдет за безопасную авторизацию. Я доверяю Мариссе и NSA.

    Код CMS может жить где угодно — например, в виде букмарклета или как расширение браузера. Я поселил его в том же Selectel. Теперь, чтобы «установить» CMS на сайт, достаточно загрузить на него html-страницу со ссылкой на наш 100-строчный Javascript. Чем не SaaS?

    Итак, подведем итоги.
    Наш технологический стек скушен до безобразия: HTML и jQuery на фронтэнде, хранилище Selectel и Yahoo Tables — бэкенд. Если auth.selcdn.ru начнет поддерживать CORS, то от последнего можно избавиться.
    Интерфейс: три кнопки главного меню и CKEditor. Жить можно.

    Код CMS доступен по адресу: cms.svsite.com/sv.js
    Демо: demo.svsite.com/admin.html 3341_democms/VdmXrmKpZe
    Важно! Кто последний сохранил — того и тапки. Обновления не всегда видно сразу (кеш CDN). В демо доступны все функции, поэтому будет работать пока кто-нибудь не сломает.

    PS.
    1. Это proof of concept.
    2. Код открыт — send a patch or shut up.
    3. Спасибо yuhenobi за рассказ про Selectel Storage.
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 14

      +1
      Failed to load source code. Cloud storage is unavaliable.

      Фундаментальный недостаток концепции или просто кто-то уже все сломал?
      • UFO just landed and posted this here
          0
          с 3й попытки заходит. Теперь не знаю как выйти…
            0
            зашел… LOL
              +1
              Может будет полезно github.com/chmouel/cors-swift-example
                0
                Это тонкий намек на то, что auth поддерживает CORS? :)
                0
                Почему не использовать какую-нибудь json db? зачем плодить сервисы?

                Для дальнейшего развития: как минимум сделать отложенную загрузку части функционала (require.js).
                  0
                  Не понял про размножение сервисов. Развернете мысль?

                  Что касается lazy loading, там пока особо нечего подгружать. Кода и так мало. С внедрением AMD согласен — это благо.
                    0
                    зачем использовать сторонние:
                    Нужно проксировать запрос через какой-нибудь сервер. На помощь приходит гениальная и недооцененная поделка Yahoo Tables, которая позволяет делать несложные JSONP-сервисы на смеси XML-разметки и Javascript.


                    Когда всё можно хранить в json базе данных в выбранном хранилище?
                      0
                      YQL используется не для хранения данных. Yahoo Tables — это не БД, а стандартизированное API для доступа к веб-сервисам. Можете почитать на сайте Яхи.
                  0
                  Попробуйте расширения к браузерам, никакого CORS или Same Origin (как угодно), там нет :)
                    0
                    Да, хочу попробовать. У расширения единственный минус — основные мобильные браузеры идут лесом. В Хроме вроде до сих пор не включили их поддержку.
                    0
                    Очень хорошая идея! Пару лет назад проектировал подобную CMS, но в какой-то момент руки ушли в другую сторону и к ней так и не вернулись. Если вдруг будете оформлять в виде полноценного Open Source проекта, может быть приму участие. Спасибо за статью!
                      0
                      Идея «обхода same origin policy» как бы намекает на то, что пост было бы уместно поместить в хаб ненормальное программирование.

                      Only users with full accounts can post comments. Log in, please.