Headless Drupal на примере Drupal 8 и React
Transcript of Headless Drupal на примере Drupal 8 и React
React
Drupal 8
Нарисовала Катя Маршалкина, 26 лет ко дню рождения друпала 8 🎉
Drupal 8как CMF
Часть 1
CMS/CMFФреймворк
Feature 1 Feature 2
Feature 3
...
Feature 1 Feature 2
Feature 3
...
Выбор архитектуры
.
Веб-разработка
Drupal 81.
2.
3.
Drupal 81.
2.
3.
Symfony components
Symfony components
(DrupalKernel)
modules/example/example.routing.yml
modules/example/src/Controller/ExampleController.php
Drupal 81.
2.
3.
Symfony componentsSymfony components
Drupal traditions
Symfony components
Drupal traditions
Drupal Way1. Build a tool
2. Wire it upDrupal 8: The Crash Course, Larry Garfield
>drupalconfig:export
Всё что накликано — коммитабельно!
Drupal 81.
2.
3.
Symfony componentsSymfony components
Drupal traditions
Symfony components
Drupal traditions
Community contributions
Drupal Commerce Фреймворк во фреймворке 😱
Тегированный (умный) кеш
И ещё• RESTful Web Services
• Migrate
• 100% multilingual
• Twig
• Schema.org
• In-place Editing
• Безопасность: уровень «Паранойя»
• Кроме ядра, огромная база модулей
Почему ещё не на восьмёрке?
Ссылки1. https://api.drupal.org/api/drupal/8.1.x 💪
2. Поставить Drupal, Drush, Drupal Console: https://github.com/drupal-composer/drupal-project
3. Читать тесты и https://www.drupal.org/project/examples
4. Смотреть видео (скринкасты, конференции)
5. Читать дайджест на Хабре (проект заморожен 🙀)
6. То же самое про семёрку: http://kalabro.github.io/DrupalCMF-2014/
Часть 2
API
REST в ядре JSONAPI* GraphQL Services RELAXed
просто работает
по стандарту, планы слить в
ядро
не рест, планы слить в ядро Drupal Way
для сложных контентных проектов
https://www.drupal.or
g/project/jsonapi
https://www.drupal.or
g/project/graphql
https://www.drupal.or
g/project/services
https://www.drupal.or
g/project/relaxed
* мой выбор
http://drupal.local/node/1?_format=json
/api/node/article/?_format=api_json&fields[node--article]=nid,title
Ссылки
1. A roadmap for making Drupal more API-first, by Dries Buytaert
2. Тоже самое про семёрку: REST in Peace - API Development in Drupal, by Komelin & Marshalkina
Часть 3
Тренд Headless. Зачем?
http://buytaert.net/how-should-you-decouple-drupal
сложно 😫
Какой фронтенд-фреймворк
выбрать?
React
http://blog.andrewray.me/reactjs-for-stupid-people/ http://blog.andrewray.me/flux-for-stupid-people/
React это только представлениеЗаблуждение 1:
Нет. Реакт — это философия, сообщество и потом уже библиотека от фейсбука.
React это модноЗаблуждение 2:
Нет. React — это мейнстрим, PHP от фронтенда. Модно — это Vue и Elm.
React это для сложных приложенийЗаблуждение 3:
Нет. React — это будущее веба. В виде новой библиотеки, веб-компонентов W3C, или как-то ещё.
React нужно учить как обычно, в боюЗаблуждение 4:
Нет. Нужно понять идею, но подавляющее большинство статей и курсов — об инструментах, вебпаках и синтаксическом сахаре.
Две гениальные статьи1. Removing User Interface Complexity, or Why
React is Awesome, May 13, 2014
Что значит «реактивность» и почему за этим подходом будущее.
2. A Comprehensive Guide to Test-First Development with Redux, React, and Immutable, Sep 10, 2015
Что такое Application State Tree и в чём крутость Redux.
А теперь можно в бой 💪
1. create-react-app — быстрый старт, потом можно сделать круто
>npminstall-gcreate-react-app>npmstart>#Всё.
А теперь можно в бой 💪
2. react-redux-universal-hot-example — пример со всеми популярными библиотеками
Redux, Universal, API, React Router, ES6/ES7, Webpack, sass-loader, mocha
3. Каждый веб-программист
желает знать
_ _ _ _.
А теперь можно в бой 💪
3. Скринкаст NODE.JS / Курс по Node.JS от Ильи Кантора
промисы, обработка ошибок, безопасность, продакшн
1. Drupal отдельно, фронтенд отдельно. Нет никакого «модуля».
2. Drupal классный на бекенде: CMS, CMF, API. Не надо всё переписывать на Node — мы за безопасный бекенд.
3. На фронтенде то, что вам нравится.
Итого
«Изучайте новое, чтобы не остаться
на помойке»
- @kalabro