Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

898 views

Published on

Опыт работы с React в качестве фронтенда для Drupal 8.

Published in: Software
  • Be the first to comment

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

  1. 1. React Drupal 8 Нарисовала Катя Маршалкина, 26 лет ко дню рождения друпала 8 🎉
  2. 2. Drupal 8
 как CMF Часть 1
  3. 3. CMS/CMFФреймворк Feature 1 Feature 2 Feature 3 ...
  4. 4. Feature 1 Feature 2 Feature 3 ... Выбор архитектуры
  5. 5. . Веб-разработка
  6. 6. Drupal 8 1. 2. 3.
  7. 7. Drupal 8 1. 2. 3. Symfony components
  8. 8. Symfony components
  9. 9. (DrupalKernel)
  10. 10. modules/example/example.routing.yml
  11. 11. modules/example/src/Controller/ExampleController.php
  12. 12. Drupal 8 1. 2. 3. Symfony componentsSymfony components Drupal traditions Symfony components Drupal traditions
  13. 13. Drupal Way 1. Build a tool 2. Wire it up Drupal 8: The Crash Course, Larry Garfield
  14. 14. > drupal config:export Всё что накликано — коммитабельно!
  15. 15. Drupal 8 1. 2. 3. Symfony componentsSymfony components Drupal traditions Symfony components Drupal traditions Community contributions
  16. 16. Drupal Commerce Фреймворк во фреймворке 😱
  17. 17. Тегированный (умный) кеш
  18. 18. И ещё • RESTful Web Services • Migrate • 100% multilingual • Twig • Schema.org • In-place Editing • Безопасность: уровень «Паранойя» • Кроме ядра, огромная база модулей
  19. 19. Почему ещё не на восьмёрке?
  20. 20. Ссылки 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/
  21. 21. Часть 2 API
  22. 22. 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 * мой выбор
  23. 23. http://drupal.local/node/1?_format=json
  24. 24. /api/node/article/?_format=api_json&fields[node--article]=nid,title
  25. 25. Ссылки 1. A roadmap for making Drupal more API-first, by Dries Buytaert 2. Тоже самое про семёрку: REST in Peace - API Development in Drupal, by Komelin & Marshalkina
  26. 26. Часть 3
  27. 27. Тренд Headless. Зачем? http://buytaert.net/how-should-you-decouple-drupal
  28. 28. сложно 😫
  29. 29. Какой фронтенд-фреймворк выбрать?
  30. 30. React
  31. 31. https://twitter.com/kojoru у Кости Якушева
  32. 32. http://blog.andrewray.me/reactjs-for-stupid-people/ http://blog.andrewray.me/flux-for-stupid-people/
  33. 33. React это только представление Заблуждение 1: Нет. Реакт — это философия, сообщество и потом уже библиотека от фейсбука.
  34. 34. React это модно Заблуждение 2: Нет. React — это мейнстрим, PHP от фронтенда. Модно — это Vue и Elm.
  35. 35. React это для сложных приложений Заблуждение 3: Нет. React — это будущее веба. В виде новой библиотеки, веб-компонентов W3C, или как-то ещё.
  36. 36. React нужно учить как обычно, в бою Заблуждение 4: Нет. Нужно понять идею, но подавляющее большинство статей и курсов — об инструментах, вебпаках и синтаксическом сахаре.
  37. 37. Две гениальные статьи 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.
  38. 38. А теперь можно в бой 💪 1. create-react-app — быстрый старт, потом можно сделать круто > npm install -g create-react-app > npm start > # Всё.
  39. 39. А теперь можно в бой 💪 2. react-redux-universal-hot-example — пример со всеми популярными библиотеками Redux, Universal, API, React Router, ES6/ES7, Webpack, sass-loader, mocha
  40. 40. 3. Каждый 
 веб-программист 
 желает 
 знать _ _ _ _.
  41. 41. А теперь можно в бой 💪 3. Скринкаст NODE.JS / Курс по Node.JS от Ильи Кантора промисы, обработка ошибок, безопасность, продакшн
  42. 42. 1. Drupal отдельно, фронтенд отдельно. Нет никакого «модуля». 2. Drupal классный на бекенде: CMS, CMF, API. 
 Не надо всё переписывать на Node — мы за безопасный бекенд. 3. На фронтенде то, что вам нравится. Итого
  43. 43. «Изучайте новое, чтобы не остаться на помойке»
 
 - @kalabro

×