Ember.js и Drupal 8

Аватар пользователя multpix


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/

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

Модули и темы:
Ключевые слова:
Тип материала:
Версия Drupal:
2 Спасибо

К материалу прикреплен опрос на тему «ИМХО: Drupal8 frontend»:

  • Существующая система темизации полностю покрывает мои потребности 0 голосов
  • Angular 0 голосов
  • Backbone 0 голосов
  • Ember 0 голосов
  • Другой client-side framework (какой из многих - озвучу в комментах) 0 голосов
  • Не понял вопроса 0 голосов
Log in or register to vote

Комментарии

Аватар пользователя Frantsuzzz
Frantsuzzz 11 месяцев назад
multpix написал:
Frantsuzzz написал:

Невнимательно читаете - я говорю: минимальном

Это значит - осознанно и аргументированно,

это значит не попадать в ситуацию когда:

"установил больше 100 модулей, они производят 100500 запросов в БД- что мне делать?",

"сделал на друпал 100 статичных страниц и блоков - как обслуживать?",

"деплой? -ХЗ, клепаю сразу на продакшн",

"7-ка/8-ка - вешает сервер...".
Нам тут нужны разделы по типу "best practices" и "tips & tricks",

чтоб пользователи не летали как мухи у гуано,

но росли как цветы в саду)))

да забудьте вы про такие разделы. Никаких Нам тут нужны разделы по типу "best practices" и "tips & tricks",

чтоб пользователи не летали как мухи у гуано,

но росли как цветы в саду)))

0 Спасибо
Аватар пользователя multpix
multpix 11 месяцев назад
Frantsuzzz написал:
да забудьте вы про такие разделы

сие не понятно мне, объясните подробнее, если не трудно.

0 Спасибо
Аватар пользователя Frantsuzzz
Frantsuzzz 11 месяцев назад

Наверное, я тупой, но я не понял вопроса в статье.
Все, вопрос понял. Отвечаю. У нас на форуме обычно две категории людей, или нам нужны инструкции как прочитать статьи в разделе "best practices" или как нам написать статью в раздел "best practices". Всё. Обычно, все остальные проходят мимо. Если не находят способа ее написать, то проходят мимо... Иногда останавливаются и грустно вздыхают..... Но потом уходят)))
От себя скажу: ни при каких условиях нельзя такое говорить на друпал форуме: минимальное применение контриб-модулей от сторонних разработчиков - это прям плохо.. очень плохо.. а Вы же хороший человек...

0 Спасибо
Аватар пользователя negociant
negociant 11 месяцев назад 1
Frantsuzzz написал:

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

Внимательно перечитайте всю статью заново и вдумайтесь, в каком контексте автор имел ввиду минимальное использование контриба. Каждая задача требует разных подходов и реализаций. Так вот задачи, суть которых изложены в этом материале практически не требуют для своей реализации контрибных модулей, так как все необходимое есть уже в ядре Drupal 8.

Аватар пользователя multpix
multpix 11 месяцев назад

Это же очень простой пример и очень простое демо,
в нем пока нет рендера на стороне сервера))

0 Спасибо
Аватар пользователя dashiwa
dashiwa 11 месяцев назад

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

0 Спасибо
Аватар пользователя multpix
multpix 11 месяцев назад

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

Язык и чужая программа на этом языке - это как букварь и сборник стихов.
Хотите быть грамотным?
Тогда нужно:
1. Читать.
2. Писать.

Ваше же высказывание обобщающее не обобщаемое - настолько голословно и ничем не подтверждено, что и расцениваю его не иначе, как неудачную шутку )))
Оно мне подход к науке статистике в СССР напомнило...

Мы видим на примере этого форума (да даже конкретно этой ветки форума), как использование только одной CMS порой сужает кругозор,
но это ведь не повод, чтоб на основе этой выборки строить обобщение: "90% использующих друпал [тут любой вывод]".

Учить языки и алгоритмы - надо; вникать в современные технологии и изучать открытые результаты труда - надо!
А обобщать и голословить надо поменьше))

0 Спасибо
Аватар пользователя negociant
negociant 11 месяцев назад 3
dashiwa написал:

90 процентов использующих фреймворки не вкурсе алгоритмов ,которые они реализуют..Поэтому подсев на один фреймворк не могут использовать второй..

99,99 процентов использующих CMS не вкурсе алгоритмов ,которые они реализуют..Поэтому подсев на одну CMS не могут использовать другую..

Фреймворки (и js, и php, python, ruby) как правило следуют одним и тем же паттернам, идеям и стандартам, поэтому изучив один, с легкостью поймешь другой, изучив документацию. А вот каждая CMS характерна индивидуальным набором спагетти-кода по принципу "Мы так сделали, потому что так посчитали нужным". И изучив одну CMS, вряд ли захочется прыгать в непролазные дебри другой. В этом плане Drupal 8 сделал огромный полушаг вперед (направление правильное, но реализация половинчатая).

Аватар пользователя multpix
multpix 11 месяцев назад

Путь начинается с одного шага.

0 Спасибо
Аватар пользователя gun_dose
gun_dose 11 месяцев назад

Есть у такого подхода один минус - нагрузка на клиентскую машину. Когда у тебя проц порядка 1 ГГц, открыто 15 вкладок в хроме и в фоне работает крон с кучей сложных процедур, то проверить почту в стандартном интерфейсе уже как-то немного напряжно.

0 Спасибо
Аватар пользователя multpix
multpix 11 месяцев назад
gun_dose написал:
Есть у такого подхода один минус - нагрузка на клиентскую машину.

Это особенность а не минус или плюс.
Особенность client-side фреймворков.
И вот самый простой пример, когда это плюс: "снижение нагрузки на сервер".

А по поводу открытых вкладок и слабого проца, сразу напрашивается метафора:
"мопед, груженный металлом".

0 Спасибо
Аватар пользователя gun_dose
gun_dose 11 месяцев назад

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

А что касается старого проца - 1 - 1,2ГГц - это стандартная частота любого современного ультрабука, в том числе самого тонкого макбук эйр, интересно было бы посмотреть, как он будет отрисовывать гугл карту к примеру)) Правда у меня не ультрабук, просто когда-то сэкономил в трудные времена.

0 Спасибо
Аватар пользователя dashiwa
dashiwa 11 месяцев назад

Голословно или не голословно. По тому же друпалу. Кто вникает в задачи
Нужно сделать модалку..Значит ситулс...
А как работает модалка? не знаю не хочу знать...
И так далее..
А сделать на css? тоже не хочу..
Выпадающее меню - модуль...
И это общая проблема

0 Спасибо
Аватар пользователя dashiwa
dashiwa 11 месяцев назад

По поводу вникания.
Мало кто вникает..

0 Спасибо
Аватар пользователя multpix
multpix 11 месяцев назад

Это именно то, что я вам пытался донести:
мало вникать - это больше проблема готовых CMS, но не фреймворков.

0 Спасибо
Аватар пользователя Studio VIZA
Studio VIZA 11 месяцев назад

Учил материаловедение, в далёком1980 году, не понимал, для чего это нужно. Но ох как пригодилось в спорах с ненормальными заказчиками, которые всё оспаривали, и пытались вникнуть в суть процесса.
Знание хотя бы трёх cms позволяет видеть процесс "со стороны". Без идиотской "религии" и прочих штучек.

0 Спасибо
Аватар пользователя multpix
multpix 11 месяцев назад

А это избитая максима:
"все познается в сравнении".

0 Спасибо
Аватар пользователя Studio VIZA
Studio VIZA 11 месяцев назад
Ху ли GUN написал:
этот некст передавать либо гет параметром в экшн формы, либо скрытым инпутом и альтерим сабмит относительно нашего next_page.

Вапще всё ясно ))

Ху ли GUN написал:
Вроде тоже не сложно, но как это объяснять местным кликерам?

Вапще нисложна.
---------------------------------
Оторвись от консоли уже, послушай, понимают ли тебя люди после первой сказанной фразы. Сыпать англоязычным слэнгом, неэтично. Это может вызвать уважение, граничащее с благоговением, но никак не понимание.
Общаюсь с клиентами и очень часто приходится спусткатся на 8 ступенек ниже. 80% людей не знают что такое доменное имя, а ты...« скрытым инпутом и альтерим».

0 Спасибо
Аватар пользователя multpix
multpix 11 месяцев назад 3
Studio VIZA написал:
80% людей не знают что такое доменное имя

Таким сразу давай инфу пр whois..
Ликвидируй девственность, как половую безграмотность!

Сорри за оффтоп, не удержался))))

Аватар пользователя xakd
xakd 11 месяцев назад

Эта ветка походу вечной будет ))

0 Спасибо
Аватар пользователя multpix
multpix 9 месяцев назад

Жир)

0 Спасибо
Аватар пользователя negociant
negociant 9 месяцев назад

И кстати разработчики lamborghini.com почему то (даже не знаю почему) не стали использовать panels, ds и даже bootstrap. Слабаки)

0 Спасибо
Аватар пользователя multpix
multpix 9 месяцев назад 1

Атсчипенцы)
Неучи)

Аватар пользователя gun_dose
gun_dose 9 месяцев назад

Это потому что в восьмёрке у панелей сильно порезан функционал. Настолько, что весь смысл теряется. Бутстрап не юзали, т.к. судя по наличию ангуляра, не стоял вопрос об удешевлении разработки. Дс я вообще не понимаю зачем.

А вообще дай бог кому-нибудь с этого форума добраться до проектов, стоимостью хотя бы 1/10 от подобного.

0 Спасибо
Аватар пользователя sergeybelya
sergeybelya 9 месяцев назад

бутстрап не удешевляет разработку)

0 Спасибо
Аватар пользователя gun_dose
gun_dose 9 месяцев назад

Если не умеешь им пользоваться, то, несомненно, да.

0 Спасибо
Аватар пользователя negociant
negociant 9 месяцев назад
gun_dose написал:
Это потому что в восьмёрке у панелей сильно порезан функционал. Настолько, что весь смысл теряется.

Не знаю, что конкретно не хватает в восьмерочной версии, но тот же page manager вполне применяют - пример в типах материалов сайта http://www.rainforest-alliance.org/

0 Спасибо
Аватар пользователя Studio VIZA
Studio VIZA 9 месяцев назад

lamborghini.com
Registration Date: 1996-09-16 2 decades 3 months 4 days ago

0 Спасибо
Аватар пользователя BatKor
BatKor 9 месяцев назад 1

С Новым Годом! Решил написать свои комменты в эту темы, с бутылкой пива, после бурных обсуждений. Я вот, что то не понял или "тупой" совсем. Уже лет как 15 Разработчики html, js, css. ведут к тому что все надо разделять html отдельно js отдельно css отдельно и все такое, но черт возьми web приложение MVC где html + "непойми что" все в одном, да при том к этому es6 наверно с babel и с не понимание заработает ли все это на мобильных устройствах, а если нету js? то поступить как компания APPLE отказатьзя от 3.5 и все пусть блютуз гарнитура? да еще и показуха к примеру ангуляр вводишь ты данные в какой либо инпут и вот те на вывод сразу же в какото тег, вроде "красиво" но зачем это? Зачем? ну отправил ты данные кудато или проверяешь ну типа валидации вводимых данных, да и все равно зачем? Перейдем к друпал 8 с его twig и подключение к ниму ember, ангуляр или еще что там, и что вы мне предлагаете? (Я еще не занимался сильно с Друпал 8 и twig) но писать потом в twig шаблоне ({}) для вывода и еще сверху script какой нибудь еще потом все обромлять {% verbatim %} Да зачем мне это надо? Вот решил разобраться я ember.js чисто для понимания работы, так они мне пытаются "втюхать", node.js в консоли писать какие либо команды и вирт машине работать с emberom, а мне вот не нужна вирт машина я делаю сразу на VDS, на вирт машине конечно все уже настроено но как мне vds настроить, (Это я ember изучаю второй день)? ладно обращаюсь к ember на прямую подключаю все файлы с их сервака, и вот тебе на все работает модель представления, но вот решил я подключить базу, что мне делать? (Походу пива уже много), Ладно Отдыхайте Музики!!!

Аватар пользователя gun_dose
gun_dose 7 месяцев назад

@multpix я недавно стал более глубоко изучать данный вопрос и стало интересно, почему ты использовал json_api вместо имеющихся в ядре rest и hal?

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

Были прощупаны все варианты.

Вернулся к json_api, ибо это действительно почти "orm по http")

Аватар пользователя mbaev
mbaev 7 месяцев назад

JSON - модно, современно, удобно.
SOAP - прошлое, хотя мне он больше симпатизирует и окружение, для работы с ним, есть в Drupal'е.

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

Отдача джейсона на восьмёрке рулится за 5 сек раскидыванием нескольких галок совершенно без контриба.

0 Спасибо
Аватар пользователя mbaev
mbaev 7 месяцев назад

Говоря SOAP имею ввиду xmlrpc, а Вы?

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

А я, говоря JSON, имею в виду REST

0 Спасибо
Аватар пользователя mbaev
mbaev 7 месяцев назад

REST имеет мало отношения к JSON.
REST - это архитектура приложения (больше его роутинговая часть)
JSON - это формат общения.

Из SOAPа не сделать JSON, сделать REST с использованием RPC, теоретически, можно.

Но все это совершенно не важно, т.к. я заметил, что мы говорим о 8-ке и тут мой интерес заканчивается. Простите.

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

можно и так поабстрактничать:

rest, json, json_api
архитектура, транспорт, тип транспорта

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

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

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

погляди редакции топика,
вот в этой редакции - ядреный джейсон:
http://drupal.ru/node/130426/revisions/197848/view

просто сравни какой ответ отдает апи на нем и апи с использованием спецификации json_api

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

Типа это ядро:
сщку

А это жсонапи?
4

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

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

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

попробуй эти клиенты:
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
multpix 7 месяцев назад 1

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

Аватар пользователя mbaev
mbaev 7 месяцев назад

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

0 Спасибо
Аватар пользователя negociant
negociant 6 месяцев назад
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 Спасибо