Ember.js и Drupal 8

Тип материала: 
Версия Drupal: 
Ключевые слова: 
Модули и темы: 
Ср, 12/10/2016 - 21:45


upd:
Эта статья кардинально отличается от своей первой редакции, добавлено демо приложения.
31.10.16
Прикрыл репозиторий с кодом в преддверии обновления,
но оставил открытой wiki - если кому интересно: https://bitbucket.org/multpix/ember2drupal/wiki/browse/.
Первая версия демо так и работает по адресу: http://multpix.bitbucket.io.сейчас этот пример устарел, но ревизия до рабочего состояния - не за горами)))

ember to drupal

Вопросы не новы:
Should we decouple Drupal with a client-side framework?
Selecting a client-side framework for Drupal
Can Drupal outdo native applications?

Таблица сравнения js-фреймворков:

(Лично мне приглянулся Ember.js - это замечательный фреймворк для клиента, который позволяет делать удивительные вещи.)

Смотрите доки на оф.сайте, а ниже линки на интересные видео с конф.

Decoupled Drupal and Ember

Amazing User Experiences with Drupal and Ember

Конкретизируя, Headless Drupal8 - эта та тема, которую я хочу обсудить с участниками сообщества drupal.ru.

Возможно несколько различных вариантов связок drupal-бэкенда с клиентом, как показано далее:
Should we decouple Drupal itself?

Я остановился на крайнем правом варианте - полностью отдельные бэкенд и фронтенд приложения.
Ember - это полное приложение (mvc), на стороне клиента;
на стороне сервера - Drupal хранит данные, предоставляя все прелести своей системы пользовательских ролей и прав, в связке со своей моделью данных (сущности - поля).
Обмен данными между клиентом и сервером происходит в формате JSON API - это замечательная спецификация json для организации api.

Принципиальной особенностью использования drupal в этой связке является следующее:
минимальное применение контриб-модулей от сторонних разработчиков.

Это одна из главных проблем большинства пользовательских инсталляций drupal-based сайтов.
Простых пользователей привлекают такие характеристики drupal, как: безопасность, универсальность...
но фактически - установив ядро и добавляя к нему контриб на каждый "чих"
- пользователь получает весьма ресурсо-прожорливую конструкцию, неимоверной степени сложности, сомнительную в плане безопасности.

В моем варианте, из контриб модулей я использовал только  jsonapi, библиотеку docson
(ну и  devel, известно зачем - в продакшн он уже не нужен).

Это простейший пример, как брать данные из drupal и скармливать их ember,
формат - api_json.

А теперь по порядку.

Установка и первоначальная настройка Drupal тривиальна:

drush dl drupal && mv drupal-8.2.1 drupalback && cd drupalback
mkdir libraries && cd libraries
git clone https://github.com/lbovet/docson.git && cd ../
drush dl devel jsonapi --destination='modules/contrib'
drush si minimal --db-url=sqlite://sites/default/files/.ht.sqlite
drush en seven toolbar field_ui  devel_generate jsonapi
drush config-set system.theme default seven
drush pm-uninstall stark

Настройка cors (для разработки)

chmod 0755 sites/default/
cp sites/default/default.services.yml sites/default/services.yml
chmod 0555 sites/default

vim sites/default/services.yml

# Enable CORS for develop in services.yml file:
cors.config:
  enabled: true
  allowedOrigins: ['*']

Сменить пароль да запустить:

drush upwd admin --password='12345'
drush rs

Далее, то что так подкупает в drupal - ui,
создаем нужные сущности и связи используя field_ui,
создаем необходимую систему ролей и прав пользователей,
дополнительно - возможно использовать views_ui для организации административных интерфейсов управления данными и пользователями.

Подмодуль jsonapi_docson из коробки jsonapi, предоставляет наглядный интерфейс для изучения структуры данных.

jsonapi doc
jsonapi docson

Вот и все с серверной частью, теперь фронт.

Что-бы Ember без проблем принимал api_json, который отдает drupal, нужно использовать и расширять дефолтные адаптер и сериализатор, соответственно: JSONAPIAdapter и JSONAPISerializer.
Несколько особенностей я опубликовал в примере кода здесь.

Для демонстрации простого приложения, сделано следующее:
для бэкенд - в pantheon.io развернут drupal 8,
для фронтенд - сборка ember выгружена на мою страницу bitbucket.org.

Приложение кране простое, не удивляйтесь некоторым его "приколам" - не все проработано до должного уровня,
это просто небольшая демонстрация возможностей :-)

Точка входа в приложение: http://multpix.bitbucket.org/
Обратите внимание, что при переходе по ссылкам приложения, перезагрузки страниц не происходит.
Посмотрите на эффект перехода между articles <-->users, это работает liquid-fire.
Сама верстка - foundation 6.

Я считаю, что потенциал у подобного стека - огромный :-)

Краткое описание Ember.js:

Ember.js это JavaScript фреймворк для создания динамичных web приложений. Реализует MVC шаблон, предназначен для упрощения создания масштабируемых одностраничных веб-приложений.

Основные особенности:

  • Толстые объектные модели
  • Вычисляемые свойства
  • Декларативная двусторонняя привязка данных
  • Автоматически обновляемые шаблоны с Handlebars.js
  • Маршрутизатор для управления состоянием приложения
  • Включение зависимостей

Принципы

Изначально Ember проектировался с учетом нескольких ключевых идей:

Фокусировка на амбициозных web приложениях
Ember нацелен на полное решение всех задач приложений на стороне клиента, в отличии от многих JavaScript фреймворков, которые реализуют составляющую V в MVC (т.е., Представление из шаблона Модель-Представление-Контроллер).

Больше продуктивности из коробки
Ember является одним из компонентов целого комплекса инструментов для полного стека разработки. Цель этих инструментов - немедленно повысить продуктивность разработки. Например, Ember CLI (интерфейс командной строки) обеспечивает возможности автоматического создания стандартной структуры приложения, генерацию типового кода, инструменты тестирования, проксирование на внутренний сервер, живую перезагрузку браузера при редактировании кода. Он также обладает расширяемой архитектурой и обширным списком дополнений.

Стабильность без простоев
Это идея о том, что обратная совместимость имеет важное значение и может быть сохранена в процессе усовершенствования и эволюции фрэймворка.

Предвидение будущих web стандартов
Ember один из первых внедрял много новшеств в сфере Web и JavaScript, таких как промисы, web компоненты, ES6 синтакс. Иегуда Катц, один из основателей Ember, участник группы TC39, ответственной за будущее развитие языка Javascript.

Ember, подобно Ruby on Rails, следует принципам Convention over Configuration (CoC) - Соглашение превыше Конфигурации, и Don't Repeat Yourself (DRY) - Не повторяйся. Он описывается как высоко опциональный, гибкий фреймворк

Примеры работы Ember:
https://cloud.digitalocean.com
https://dashboard.heroku.com

http://discuss.emberjs.com/
https://forum.ionicframework.com/
http://help.apple.com/watch/

Вот и все.
У кого какие вопросы или замечания - в комменты :-)

2 Спасибо
Attached poll"ИМХО: Drupal8 frontend".
Register or login to poll
Результаты
Существующая система темизации полностю покрывает мои потребности: 0 голосов
Angular: 0 голосов
Backbone: 0 голосов
Ember: 0 голосов
Другой client-side framework (какой из многих - озвучу в комментах): 0 голосов
Не понял вопроса: 0 голосов

Комментарии

Аватар пользователя multpix
2 months 5 дней назад multpix #

да
ток в первом случае - список статей, а во втором просмотр статьи

щас глянул, у битбакета пейдж отвалился
но пантеон еще работает))

попробуй эти клиенты:
https://chrome.google.com/webstore/detail/rested/eelcnbccaccipfolokglfhhmapdchbfg
https://addons.mozilla.org/ru/firefox/addon/rested/

ими можешь пощупать пример апи:
http://dev-headless-d8.pantheonsite.io/api/node/article?_format=api_json
http://dev-headless-d8.pantheonsite.io/api/user/user?_format=api_json

0 Спасибо
Аватар пользователя multpix
2 months 5 дней назад multpix #

просто сравните эту спецификацию с голым джейсоном
http://jsonapi.org/

1 Спасибо
Аватар пользователя mbaev
2 months 5 дней назад mbaev #

Спасибо за ссылочку. Отличное субботнее чтиво.

0 Спасибо
Аватар пользователя negociant
1 month 3 недели назад negociant #
gun_dose написал:
@multpix я недавно стал более глубоко изучать данный вопрос и стало интересно, почему ты использовал json_api вместо имеющихся в ядре rest и hal?

Дрис же писал, что JSON API и Simple OAuth будут включены в ядро, предварительно попав в экспериментальные модули ядра и объяснял почему - http://buytaert.net/improving-drupal-8-api-first-json-api-oauth2
Или друпал разработчики не читают блог http://buytaert.net, раз возникают подобные вопросы?

0 Спасибо

Страницы