creating an enterprise level editorial experience for ... · experience for drupal 8 using react ...
TRANSCRIPT
![Page 1: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/1.jpg)
Ruben Teijeiro - 1xINTERNET
Creating an enterprise level editorial experience for Drupal 8 using React
![Page 2: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/2.jpg)
<SPAM>
![Page 3: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/3.jpg)
Ruben Teijeiro
@rteijeiro
![Page 5: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/5.jpg)
drupal.surf
![Page 6: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/6.jpg)
1xinternet.de
![Page 7: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/7.jpg)
</SPAM>
![Page 8: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/8.jpg)
Decoupled is about Multichannel
![Page 9: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/9.jpg)
https://softloom.com
Distribute the content across different touchpoints
![Page 10: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/10.jpg)
Distribute the content across different devices
![Page 11: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/11.jpg)
Speed and consistency of the message across all channels
https://blog.magestore.com
![Page 12: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/12.jpg)
https://www.osudio.com
![Page 13: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/13.jpg)
How do we create a seamless visitor journey and get the content
where it needs to be?
![Page 14: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/14.jpg)
CMS needs to serve multiple channels, be easy to integrate,
scale quickly and be intuitive for the users
![Page 15: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/15.jpg)
Trying to redefine the very core of the company systems will cause
panic.
![Page 16: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/16.jpg)
Internal stakeholders are customers. Drive efficiency by
addressing them.
![Page 17: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/17.jpg)
Align with the company strategy, main stakeholders and editors
and…
![Page 18: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/18.jpg)
START SMALL
![Page 19: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/19.jpg)
Editors knows other editorial systems like Medium and Buzzfeed
![Page 20: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/20.jpg)
They expect the same from Drupal
![Page 21: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/21.jpg)
Paragraphs
![Page 22: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/22.jpg)
![Page 23: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/23.jpg)
Media Browser
![Page 24: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/24.jpg)
![Page 25: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/25.jpg)
Elementor Live Page Builder
![Page 26: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/26.jpg)
![Page 27: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/27.jpg)
Content Calendar
![Page 28: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/28.jpg)
![Page 29: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/29.jpg)
Drupal Guthenberg
![Page 30: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/30.jpg)
![Page 31: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/31.jpg)
DX8
![Page 32: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/32.jpg)
![Page 33: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/33.jpg)
OpenStory.io
![Page 34: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/34.jpg)
![Page 35: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/35.jpg)
Drupal HAX https://www.drupal.org/project/hax
![Page 36: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/36.jpg)
![Page 37: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/37.jpg)
Glazed Builder
![Page 38: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/38.jpg)
![Page 39: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/39.jpg)
Pain Points
![Page 40: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/40.jpg)
Page refreshes are common
![Page 41: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/41.jpg)
More time spent building, not creating content
![Page 42: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/42.jpg)
Happy editors mean better content
![Page 43: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/43.jpg)
Content is king!
![Page 44: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/44.jpg)
It doesn't matter if the technology is great under the hood and the platform is awesome or easy to
use if it's empty
![Page 45: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/45.jpg)
There are not pages in Decoupled but we need to have the ability to
get all the data needed to build our GUI pages in one single request
![Page 46: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/46.jpg)
Headless is an architecture that allows the physical decoupling of
Content Management
Content Delivery
Content Presentation
![Page 47: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/47.jpg)
Content Management
Content Delivery
Content Presentation
Traditional CMSPage-based system for
content authoring and
presentation
Content is stored mixed
with the presentation
Delivers pages and
content composed by the
user to a single channel
Headless CMS Content authoring Content delivery by API
No functionality,
presentation depends on other systems
Decoupled CMS Content authoringContent delivery through
a website or API
Presentation can be
rendered server side and by client applications
![Page 48: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/48.jpg)
DEMOS
![Page 49: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/49.jpg)
Under the hood
![Page 50: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/50.jpg)
+ =
Drupal DreactReact
Repal
![Page 51: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/51.jpg)
![Page 52: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/52.jpg)
Coming soon…
![Page 53: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/53.jpg)
![Page 54: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/54.jpg)
![Page 55: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/55.jpg)
Questions?
![Page 56: Creating an enterprise level editorial experience for ... · experience for Drupal 8 using React Ruben Teijeiro @rteijeiro. drupalhero.es. drupal.surf. 1xinternet.de](https://reader033.vdocument.in/reader033/viewer/2022060523/6052e615fa22125bf4537c13/html5/thumbnails/56.jpg)