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.

Transcript

1. DevExperience 2017 Learning to COPE Eduardo Bouças @eduardoboucas Iasi, Romania
2. Part I — Discovery
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
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
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.
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
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
29. • Scalability • Developer liberation • Fast to market Key benefits
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