Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Learning to COPE

Learning to COPE

A personal journey through various approaches to publishing content on the web. Covering monolithic CMSs, headless CMSs and a microservices architecture built around the principles of COPE.

Eduardo Bouças

March 24, 2017

More Decks by Eduardo Bouças

Other Decks in Technology


  1. DevExperience 2017 Learning to COPE Eduardo Bouças @eduardoboucas Iasi, Romania

  2. Part I — Discovery

  3. None
  4. Content Management System

  5. Content Digital asset Management System

  6. Content Digital asset User Management System

  7. Content Digital asset User Layout Management System

  8. None
  9. Traditional (monolithic) CMS Core Database Admin UI Templates Example: WordPress

    MySQL PHP app /wp-admin WP theme
  10. Problem #1 Long-term commitment to tech stack and CMS components/features

  11. Problem #2 How to integrate with external systems on different

    tech stacks?
  12. Traditional (monolithic) CMS Core Database Admin UI Templates Example: WordPress

    MySQL PHP app /wp-admin WP theme
  13. Part II — Headless

  14. Headless CMS Core Database Admin UI Templates Web server Templates

    Native app API
  15. • Separation of concerns: content and layout are decoupled •

    Any front-end can be plugged in — RESTful + everyone speaks JSON • A single editing interface can be used to publish to multiple devices Benefits
  16. • Single instance of content • Reduces editorial overhead •

    Agnostic of implementation • Future-proof Create Once, Publish Everywhere COPE
  17. None
  18. Problem #1 Web CMS still pivot of entire system.

  19. Problem #2 Database, core and API still tightly coupled together.

    What happens if the publishing interface needs to change?
  20. Problem #3 COPE as an afterthought.

  21. None
  22. • Data architecture and business logic agnostic of tech stack

    • Features as modular, interchangeable components • Universal language • Scalable on a micro-level A wish list
  23. Part III — Microservices

  24. «An approach to developing a single application as a suite

    of small services, each running in its own process and communicating with lightweight mechanisms, often an HTTP resource API.» Microservices Martin Fowler
  25. COPE by design API-first approach Modular components Built in Node.js

    Scalable Free and open source
  26. API A high-performance RESTful API layer designed in support of

    API-first development and the principles of COPE. Web A schemaless templating layer that can operate as a standalone platform or with API as a full stack web application. Publish A writer’s window to the world of content creation. Flexible interfaces designed to optimise editorial workflow. CDN A just-in-time asset manipulation and delivery layer designed as a modern, global content distribution solution. The suite
  27. The stack DADI API Database DADI Web Templates DADI CDN

    DADI Publish Media Storage Native app HTTP request

    Android app iOS app (CMS) DADI Web DADI Publish DADI CDN DADI CDN Scaling DB shard DB cluster
  29. • Scalability • Developer liberation • Fast to market Key

  30. Fast to market API iOS Android Web CMS CDN iOS

    CMS Team 1 Team 2 Team 3 Team 4
  31. • Content stored as documents, grouped in collections • Business

    logic in JSON schema • Relationships and validation • Fully REST (data and metadata) API: collections
  32. API: managing data

  33. CDN: images on-demand https://example.com/deer.jpg?width=700&height=700&saturate=-100&sharpen=50

  34. CDN: entropy-based cropping https://example.com/little-girl.jpg?width=600&height=600&resizeStyle=entropy

  35. CDN: art direction <picture> <source media="(max-width: 400px)" srcset="https://example.com/berlin.jpg?width=400&height=600&resizeStyle=entropy"> <source media="(max-width:

    800px)" srcset="https://example.com/berlin.jpg?width=800&height=800&resizeStyle=entropy"> <img src="https://example.com/berlin.jpg"> </picture> Reuse a single asset in different aspect ratios (e.g. portrait vs. landscape)
  36. CDN: art direction Place your screenshot here

  37. Thank you. dadi.tech github.com/dadi @eduardoboucas