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
7 months 2 недели назад multpix #

И конечно, всем привет!
Давно я вас не видел))

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

@multpix - с возвращением!
Пост на главной, но просьба добавить тегов и, по возможности, немного примеров из реальных кейсов.

ЗЫ - сам все больше смотрю в сторону ангуляро-реактов...

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

По примерам, весьма показательно - NASA, это ember и drupal.
nasa

0 Спасибо
nasa on drupal with ember
Аватар пользователя bumble
7 months 2 недели назад bumble #
multpix написал:
По примерам, весьма показательно - NASA, это ember и drupal.

:)) Я имел ввиду "разжевать", в общем, какие преимущества можно получить от интеграции Drupal с client-side фреймворками (опять же - по возможности, дабы придать информативной ценности посту).

0 Спасибо
Аватар пользователя mbaev
7 months 1 неделя назад mbaev #
bumble написал:
ЗЫ - сам все больше смотрю в сторону ангуляро-реактов...

Смотреть в сторону ангуляра не рекомендую.

0 Спасибо
Аватар пользователя gun_dose
7 months 1 неделя назад gun_dose #

Требую разъяснений для простых крестьян. Лично моё мнение таково, что все эти ноды, эмберы, ангулары и прочие реакты нужны только для того, чтобы верстальщик назывался гордым словом "фронтенд-девелопер". Плюс заговор телекоммуникационных компаний, которые получают дополнительный трафик от загрузки мегабайтов скриптов на каждой странице.

Что касается примера с сайтом НАСА - такой можно было бы сверстать на любой базовой теме, добавить пару скриптов для слайдеров и скроллбаров и всё. А так, что мы видим: страница грузится совсем не быстро, после загрузки страницы элементы какое-то время расставляются по местам. После полной загрузки создаётся впечатление, что скролл местами подтупливает. Кароч обычный красивый дизайн совершенно без оптимизации.

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

4 Спасибо
Аватар пользователя fairrandir
7 months 1 неделя назад fairrandir #

Действительно, показательный пример. Сайт NASA грузится 20с, при этом, на протяжении этого времени наблюдаю только белый экран. Дольше всего грузится как раз скрипт, который весит 3МБ (!). На протяжении загрузки ожидаешь увидеть ВАХ!, а видишь обычный в общем-то сайт.

gun_dose написал:
Требую разъяснений для простых крестьян.

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

1 Спасибо
Аватар пользователя tlito
7 months 1 неделя назад tlito #

nasa.gov медленно литается. тот же контакт (когда был под управлением павла дурова) листался в тыщу раз быстрее.

0 Спасибо
Аватар пользователя ХулиGUN
7 months 1 неделя назад ХулиGUN #
mbaev написал:
Смотреть в сторону ангуляра не рекомендую.

Аргументы?

gun_dose написал:
Лично моё мнение таково, что все эти ноды, эмберы, ангулары и прочие реакты нужны только для того, чтобы верстальщик назывался гордым словом "фронтенд-девелопер". Плюс заговор телекоммуникационных компаний, которые получают дополнительный трафик от загрузки мегабайтов скриптов на каждой странице.

А я наоборот - за чёткое разделения фронта и бэка. Хотя использование полноценной cms исключительно ради бэка считаю идиотизмом. Что касается "лишних" Мб, то друпал сам по себе кучу лишнего выплёвывает в шаблон, в частности в хедер, что и приводит к белой странице, пока весь этот шлак не загрузится. А если друпал заставить отдавать только json, то на фронте останутся только jQuery, emberjs, handlebarsjs и пользовательские скрипты, качество и количество которых зависит исключительно от скилла "фронтенд-девелопера". Ради примера табличка "лишних" Мб:

Framework               Net Size                 Size with required dependencies
---------------------------------------------------------------------------------
AngularJS 1.2.22        39.5kb                   39.5kb
Backbone.js 1.1.2       6.5kb                    43.5kb (jQuery + Underscore)
                                                 20.6kb (Zepto + Underscore)
Ember.js 1.6.1          90kb                     136.2kb (jQuery + Handlebars)

Поэтому я больше склоняюсь к ангуляру)))

1 Спасибо
Аватар пользователя multpix
7 months 1 неделя назад multpix #

Как было сказано выше - хорош "Для админок и всяких сервисов",
да, для сервисов, живых и отзывчивых сервисов и для разделения монолита на микросервисы.

Показательными примерами работы Ember считаю:
https://cloud.digitalocean.com
https://dashboard.heroku.com

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

В приведенных примерах, drupal и не пахнет - увы, но единственная найденная мной связка em2dru - это наса,
как вы заметили - не лучший пример - согласен.

Об этом и топик - можно делать живые приложения используя все прелести client-side фреймворков,
а drupal довольно неплохо может быть использован в качестве бэкенд.

upd.
Салют - Денис!!
))

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

Знакомое чтиво - сам улыбался, когда читал)))
Выглядит страшно, но как только занырнул - уже не вынырнешь - не так страшен черт!

А вот в случае "двусторонней связки данных", как это у ng и ember - мы бы страницу эту не обновляли руками, а просто болтали)

0 Спасибо
Аватар пользователя sergeybelya
7 months 1 неделя назад sergeybelya #

ну чаты на веб-сайтах были еще задолго до появления js-"фреймворков".

0 Спасибо
Аватар пользователя xakd
7 months 1 неделя назад xakd #

Единственное что понравилось - "Надо просто знать, что функциональное программирование лучше, чем объектно-ориентированное программирование, и это то, что мы должны использовать в 2016 году."

Drupal7 рулит, drupal 8 отстой, это я о наболевшем. ))

0 Спасибо
Аватар пользователя multpix
7 months 1 неделя назад multpix #
xakd написал:
Drupal7 рулит, drupal 8 отстой, это я о наболевшем. ))

Аргументы?
Если не сложно)

0 Спасибо
Аватар пользователя ХулиGUN
7 months 1 неделя назад ХулиGUN #
multpix написал:
Салют - Денис!!

Привет, Сань)))

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

Мой выбор ember определило только то, что "рельсы жеж", яж рублюсь)))
Поэтому и ember - front, express -back мне как-то боле близки, это как рельсы и синатра - только js.
Да и к сахару привык)))

А тут недавно обнаружил, что у drupal все неплохо с подготовкой данных для фронтенда.
Все уже написано, и довольно стабильно - кроме cors и контриба не нужно.
Дальше - только полет фантазии.
Кстати - одна из веток этого моего изучения была с ng на фронте.

1 Спасибо
Аватар пользователя bumble
7 months 1 неделя назад bumble #
mbaev написал:
Смотреть в сторону ангуляра не рекомендую.

Всего в жизни нужно "хлебнуть"... ))

Ху**GUN написал:
Хотя использование полноценной cms исключительно ради бэка считаю идиотизмом.

Это же про-друпальный форум... Тут так можно ))
Надеюсь на полноценную реализацию MVC в Drupal следующих версий. Просто отключаешь модули фронтовые и вперед. Вот круть то будет!

sergeybelya написал:
Какой ангуляр с эмбером, вы что

Да-ну... Ничего там такого сверхъестественного, если не начитаться подобных пьес.
Пробуешь gulp - и ты в системе. Потом только в клиниках отвязаться сможешь:
- "Драсьте, меня зовут [USER], и я NPM'щик..."
- "При-иве-ет [USER]."

sergeybelya написал:
ну чаты на веб-сайтах были еще задолго до появления js-"фреймворков".

ВЕБСОКЕТЫ ))

0 Спасибо
Аватар пользователя sergeybelya
7 months 1 неделя назад sergeybelya #

С выходом ES6 JS стал более-менее полноценным языком программирования, думаю, в ближайшие годы он "переболеет" обилием фреймворков, как это происходит сейчас, останется несколько ходовых, поддерживаемых гугло-фейсбуком, и ситуация устаканится. А jQuery еще долго никуда не денется.

0 Спасибо
Аватар пользователя multpix
7 months 1 неделя назад multpix #
sergeybelya написал:
С выходом ES6 JS стал более-менее полноценным языком программирования, думаю, в ближайшие годы он "переболеет" обилием фреймворков, как это происходит сейчас, останется несколько ходовых, поддерживаемых гугло-фейсбуком

А что мешает писать на ES6 сейчас?
Это, кстати, был один из моих аргументов в пользу ember, спс за напоминание))))
Не ng от гугла или react от фб, но ember))

0 Спасибо
Аватар пользователя sergeybelya
7 months 1 неделя назад sergeybelya #

babel

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

Тут как-раз через babel es6 и есть...
Чеб бабел то не угодил?
babel

0 Спасибо
Аватар пользователя ХулиGUN
7 months 1 неделя назад ХулиGUN #

О, стилус))))

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

да, и Emblem для шаблонов,
а от вот coffee тут отказался в пользу ES6.

Жизнь, понимаешь-ли такая пошла - без сахарка вообще никак))))

0 Спасибо
Аватар пользователя sergeybelya
7 months 1 неделя назад sergeybelya #

Вообще тема не нова и даже имеет название Headless Drupal

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

Далеко не нова, и уже подробно разжевана на всех языках мира, особенно на рус))))

И именно поэтому, я добавил в начало поста линки на статьи Дриса,
линк на видос ef4, где он использует  jsonapi,

а дальше по тексту - показал свой пример, где и jsonapi (не все так гладко с ним) не нужен - хватает ядра.

upd.

sergeybelya написал:
даже имеет название Headless Drupal

именно по этому, так и величается drupal бэкенд приложение в репе:
Drupal RESTful
Simple JSON from Headless Drupal8

0 Спасибо
Аватар пользователя sergeybelya
7 months 1 неделя назад sergeybelya #
multpix написал:
Чеб бабел то не угодил?

самим своим наличием как свидетельство незрелости es6 и неполной поддержки браузерами.

0 Спасибо
Аватар пользователя bumble
7 months 1 неделя назад bumble #

А LESS, SASS, Stylus - свидетельство незрелости CSS как стандарта. ))

0 Спасибо
Аватар пользователя sergeybelya
7 months 1 неделя назад sergeybelya #

less вы можете использовать в процессе разработки, но его не нужно подключать в исходник страницы.

0 Спасибо
Аватар пользователя bumble
7 months 1 неделя назад bumble #

Как и Babel.

1 Спасибо
Аватар пользователя sergeybelya
7 months 1 неделя назад sergeybelya #

Пример с лессом - так можно делать, но необязательно, а использование современного js-фреймворка тянет за собой необходимость подключать в проект еще кучу всего, я про это.

0 Спасибо
Аватар пользователя bumble
7 months 1 неделя назад bumble #
sergeybelya написал:
я про это

На самом деле не с этого началось, ну да ладно...

sergeybelya написал:
использование современного js-фреймворка тянет за собой необходимость подключать в проект еще кучу всего

Но это не ненормально.
Тот же D8 сейчас использует composer, а это ничто иное как NPM для PHP. Тот же Drush - это частично NPM.
Тот же D8 сейчас использует Symfony (читать фреймворк) у которого тоже есть свои компоненты.
И это все воспринимается на ура сейчас.

Использование, а вначале изучение, множества библиотек/компонентов это плата за универсальность и удобство. Это ведь лучше чем из проекта в проект переносить пачками код и все руками писать.

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

Хочу поинтересоваться по поводу less. Вариант, когда less обрабатывается на стороне php. Генерируются css файлы и они отдаются в браузер пользователя. Пока кеш не сбросишь, идет в вывод css. Чем это подход плох? Сайт после сдачи остается на поддержке. Вы пробовали вносить изменения в css, сгенерированные компиляторами? Не проще в less внести правки и сбросить кеш? Речь не о своем отдельном модуле, а о текущей теме сайта. При использовании bootstrap, например, это вполне оправдано, как я считаю. Жду аргументов и интересных мнений...

0 Спасибо
Аватар пользователя multpix
7 months 1 неделя назад multpix #
sergeybelya написал:
как свидетельство незрелости es6 и неполной поддержки браузерами

Вот прямо в точку!!!

Ждать, когда ES6 начнет поддерживаться всеми браузерами?
Пока кто-то ждет - люди уже пишут, вникают, учатся и уже используют все плюсы.

Это работает один из основных принципов уголька - "Предвидение будущих web стандартов")))

0 Спасибо
Аватар пользователя sergeybelya
7 months 1 неделя назад sergeybelya #

Ну у js-ров не остается другого выбора, кроме как учить все это и использовать уже сегодня, у друпалеров несколько другие задачи и забивать всем этим голову смысла особого не вижу, пока jquery справляется с большинством задач. Если вы так называемый фуллстэк-разработчик, то тоже понятно, хотя мне больше нравится старый термин "веб-мастер".

0 Спасибо
Аватар пользователя multpix
7 months 1 неделя назад multpix #
sergeybelya написал:
у друпалеров несколько другие задачи

Боюсь даже спрашивать какие))))

Скажу свое мнение:
самое адовое, что может произойти с человеком, который разрабатывает для веб,
это то, что он станет "Друпалером"
(или вэпэшником, или битриксоводом, или джумлорастом, да даже джангистом, энждистом или рельсорубом etc.) только.
Это ситуация, когда ограничивают себя чем-то знакомым, в ущерб изучению нового.
"Остановился, прекратил искать, учить" - читай как: "назад покатился".

У JS разработчиков сейчас праздник - такое бурное развитие, js догоняет ruby, python!
А исполняется в браузере.

имхо: быстее ES6 пролучит полную поддержку браузеров, нежели тот-же руби или пайтон
отсюда простой вывод - разработчику нужен и этот скилл)))

0 Спасибо
Аватар пользователя multpix
7 months 1 неделя назад multpix #
sergeybelya написал:
js-фреймворка тянет за собой необходимость подключать в проект еще кучу всего, я про это.

а у дру не так? монолит?
ls vendor в корне проекта)))
composer, bower, npm, gem ... о чем это мы... ))))

Да и подключаем то не руками)))

0 Спасибо
Аватар пользователя sergeybelya
7 months 1 неделя назад sergeybelya #

В друпал все уже "сделано до нас". Это готовый к использованию инструмент.

0 Спасибо
Аватар пользователя sergeybelya
7 months 1 неделя назад sergeybelya #
multpix написал:
У JS разработчиков сейчас праздник - такое бурное развитие, js догоняет ruby, python!

я это и имел в виду. Но это поутихнет, как было в java и том же пхп, устаканится.

0 Спасибо
Аватар пользователя multpix
7 months 1 неделя назад multpix #
sergeybelya написал:
В друпал все уже "сделано до нас". Это готовый к использованию инструмент.

С этим сложно не спорить, пребывая на этом форуме боле 7ми лет,
там настолько ВСЕ сделано, и он так ГОТОВ К ИСПОЛЬЗОВАНИЮ,
что все семь лет моих здесь, тут люди только об этом и твердят -
открываем трекер и любуемся радостными отзывами о безотказной работе)))

Эх, два утверждения, и два моих к ним уточнения:
В друпал все уже "сделано до нас"
что значит все, прямо таки ВСЕ-ВСЕ-ВСЕ???
сделано КЕМ? инопланетянами?

Это готовый к использованию инструмент.
Вот реально - друпал это ядро,
чего не хватало - в силу своей модульной структуры - сообщество пишет контриб,
Что вы называете готовым у использованию инструментом?
И че, своего дописать нельзя? )))))))))))
Контриб тоже инопланетяне пишут, им можно?

Я вот хоть ты тресни, в упор не понимаю, чем вас пугает вариант интеграции dru со сторонними фреймворками,
и что вы видите в этом плохого?

Друпал - хорошая система, но такое уж чрезмерное only dru не здраво)))

0 Спасибо

Страницы