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
Tweet

More Decks by Eduardo Bouças

Other Decks in Technology

Transcript

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

    View Slide

  2. Part I — Discovery

    View Slide

  3. View Slide

  4. Content
    Management
    System

    View Slide

  5. Content
    Digital asset
    Management
    System

    View Slide

  6. Content
    Digital asset
    User
    Management
    System

    View Slide

  7. Content
    Digital asset
    User
    Layout
    Management
    System

    View Slide

  8. View Slide

  9. Traditional (monolithic) CMS
    Core
    Database
    Admin UI
    Templates
    Example: WordPress
    MySQL PHP app
    /wp-admin
    WP theme

    View Slide

  10. Problem #1
    Long-term commitment to tech stack and CMS
    components/features

    View Slide

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

    View Slide

  12. Traditional (monolithic) CMS
    Core
    Database
    Admin UI
    Templates
    Example: WordPress
    MySQL PHP app
    /wp-admin
    WP theme

    View Slide

  13. Part II — Headless

    View Slide

  14. Headless CMS
    Core
    Database
    Admin UI
    Templates
    Web server
    Templates
    Native app
    API

    View Slide

  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

    View Slide

  16. ● Single instance of content
    ● Reduces editorial overhead
    ● Agnostic of implementation
    ● Future-proof
    Create Once, Publish Everywhere
    COPE

    View Slide

  17. View Slide

  18. Problem #1
    Web CMS still pivot of entire system.

    View Slide

  19. Problem #2
    Database, core and API still tightly coupled
    together. What happens if the publishing interface
    needs to change?

    View Slide

  20. Problem #3
    COPE as an afterthought.

    View Slide

  21. View Slide

  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

    View Slide

  23. Part III — Microservices

    View Slide

  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

    View Slide

  25. COPE by design
    API-first approach
    Modular components
    Built in Node.js
    Scalable
    Free and open source

    View Slide

  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

    View Slide

  27. The stack
    DADI API
    Database
    DADI Web Templates
    DADI CDN
    DADI Publish
    Media
    Storage
    Native app
    HTTP request

    View Slide

  28. DADI API
    DB shard
    iOS app
    DADI API
    DADI API
    Android app
    iOS app
    (CMS)
    DADI Web
    DADI Publish
    DADI CDN
    DADI CDN
    Scaling
    DB shard
    DB
    cluster

    View Slide

  29. ● Scalability
    ● Developer liberation
    ● Fast to market
    Key benefits

    View Slide

  30. Fast to market
    API
    iOS Android
    Web
    CMS
    CDN
    iOS CMS
    Team 1
    Team 2
    Team 3
    Team 4

    View Slide

  31. ● Content stored as documents,
    grouped in collections
    ● Business logic in JSON schema
    ● Relationships and validation
    ● Fully REST (data and metadata)
    API: collections

    View Slide

  32. API: managing data

    View Slide

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

    View Slide

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

    View Slide

  35. CDN: art direction

    srcset="https://example.com/berlin.jpg?width=400&height=600&resizeStyle=entropy">
    srcset="https://example.com/berlin.jpg?width=800&height=800&resizeStyle=entropy">


    Reuse a single asset in different aspect ratios (e.g.
    portrait vs. landscape)

    View Slide

  36. CDN: art direction
    Place your
    screenshot
    here

    View Slide

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

    View Slide