45
React Drupal 8 Нарисовала Катя Маршалкина, 26 лет ко дню рождения друпала 8

Headless Drupal на примере Drupal 8 и React

Embed Size (px)

Citation preview

Page 1: Headless Drupal на примере Drupal 8 и React

React

Drupal 8

Нарисовала Катя Маршалкина, 26 лет ко дню рождения друпала 8 🎉

Page 2: Headless Drupal на примере Drupal 8 и React

Drupal 8как CMF

Часть 1

Page 3: Headless Drupal на примере Drupal 8 и React

CMS/CMFФреймворк

Feature 1 Feature 2

Feature 3

...

Page 4: Headless Drupal на примере Drupal 8 и React

Feature 1 Feature 2

Feature 3

...

Выбор архитектуры

Page 5: Headless Drupal на примере Drupal 8 и React

.

Веб-разработка

Page 6: Headless Drupal на примере Drupal 8 и React

Drupal 81.

2.

3.

Page 7: Headless Drupal на примере Drupal 8 и React

Drupal 81.

2.

3.

Symfony components

Page 8: Headless Drupal на примере Drupal 8 и React

Symfony components

Page 9: Headless Drupal на примере Drupal 8 и React

(DrupalKernel)

Page 10: Headless Drupal на примере Drupal 8 и React

modules/example/example.routing.yml

Page 11: Headless Drupal на примере Drupal 8 и React

modules/example/src/Controller/ExampleController.php

Page 12: Headless Drupal на примере Drupal 8 и React

Drupal 81.

2.

3.

Symfony componentsSymfony components

Drupal traditions

Symfony components

Drupal traditions

Page 13: Headless Drupal на примере Drupal 8 и React

Drupal Way1. Build a tool

2. Wire it upDrupal 8: The Crash Course, Larry Garfield

Page 14: Headless Drupal на примере Drupal 8 и React

>drupalconfig:export

Всё что накликано — коммитабельно!

Page 15: Headless Drupal на примере Drupal 8 и React

Drupal 81.

2.

3.

Symfony componentsSymfony components

Drupal traditions

Symfony components

Drupal traditions

Community contributions

Page 16: Headless Drupal на примере Drupal 8 и React

Drupal Commerce Фреймворк во фреймворке 😱

Page 17: Headless Drupal на примере Drupal 8 и React
Page 18: Headless Drupal на примере Drupal 8 и React

Тегированный (умный) кеш

Page 19: Headless Drupal на примере Drupal 8 и React

И ещё• RESTful Web Services

• Migrate

• 100% multilingual

• Twig

• Schema.org

• In-place Editing

• Безопасность: уровень «Паранойя»

• Кроме ядра, огромная база модулей

Page 20: Headless Drupal на примере Drupal 8 и React

Почему ещё не на восьмёрке?

Page 21: Headless Drupal на примере Drupal 8 и React

Ссылки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/

Page 22: Headless Drupal на примере Drupal 8 и React

Часть 2

API

Page 23: Headless Drupal на примере Drupal 8 и React

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

* мой выбор

Page 24: Headless Drupal на примере Drupal 8 и React

http://drupal.local/node/1?_format=json

Page 25: Headless Drupal на примере Drupal 8 и React

/api/node/article/?_format=api_json&fields[node--article]=nid,title

Page 26: Headless Drupal на примере Drupal 8 и React

Ссылки

1. A roadmap for making Drupal more API-first, by Dries Buytaert

2. Тоже самое про семёрку: REST in Peace - API Development in Drupal, by Komelin & Marshalkina

Page 27: Headless Drupal на примере Drupal 8 и React

Часть 3

Page 28: Headless Drupal на примере Drupal 8 и React

Тренд Headless. Зачем?

http://buytaert.net/how-should-you-decouple-drupal

Page 29: Headless Drupal на примере Drupal 8 и React

сложно 😫

Page 30: Headless Drupal на примере Drupal 8 и React

Какой фронтенд-фреймворк

выбрать?

Page 32: Headless Drupal на примере Drupal 8 и React

React

Page 33: Headless Drupal на примере Drupal 8 и React

https://twitter.com/kojoru

у Кости Якушева

Page 34: Headless Drupal на примере Drupal 8 и React

http://blog.andrewray.me/reactjs-for-stupid-people/ http://blog.andrewray.me/flux-for-stupid-people/

Page 35: Headless Drupal на примере Drupal 8 и React

React это только представлениеЗаблуждение 1:

Нет. Реакт — это философия, сообщество и потом уже библиотека от фейсбука.

Page 36: Headless Drupal на примере Drupal 8 и React

React это модноЗаблуждение 2:

Нет. React — это мейнстрим, PHP от фронтенда. Модно — это Vue и Elm.

Page 37: Headless Drupal на примере Drupal 8 и React

React это для сложных приложенийЗаблуждение 3:

Нет. React — это будущее веба. В виде новой библиотеки, веб-компонентов W3C, или как-то ещё.

Page 38: Headless Drupal на примере Drupal 8 и React

React нужно учить как обычно, в боюЗаблуждение 4:

Нет. Нужно понять идею, но подавляющее большинство статей и курсов — об инструментах, вебпаках и синтаксическом сахаре.

Page 39: Headless Drupal на примере Drupal 8 и React

Две гениальные статьи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.

Page 40: Headless Drupal на примере Drupal 8 и React

А теперь можно в бой 💪

1. create-react-app — быстрый старт, потом можно сделать круто

>npminstall-gcreate-react-app>npmstart>#Всё.

Page 41: Headless Drupal на примере Drupal 8 и React

А теперь можно в бой 💪

2. react-redux-universal-hot-example — пример со всеми популярными библиотеками

Redux, Universal, API, React Router, ES6/ES7, Webpack, sass-loader, mocha

Page 42: Headless Drupal на примере Drupal 8 и React

3. Каждый веб-программист

желает знать

_ _ _ _.

Page 43: Headless Drupal на примере Drupal 8 и React

А теперь можно в бой 💪

3. Скринкаст NODE.JS / Курс по Node.JS от Ильи Кантора

промисы, обработка ошибок, безопасность, продакшн

Page 44: Headless Drupal на примере Drupal 8 и React

1. Drupal отдельно, фронтенд отдельно. Нет никакого «модуля».

2. Drupal классный на бекенде: CMS, CMF, API. Не надо всё переписывать на Node — мы за безопасный бекенд.

3. На фронтенде то, что вам нравится.

Итого

Page 45: Headless Drupal на примере Drupal 8 и React

«Изучайте новое, чтобы не остаться

на помойке»

- @kalabro