Marcin Zajkowski PRO
Umbraco MVP x7 • The Busy Programmer • Senior Solution Architect / CTO / Country Manager @novicell • #umbraCoffee Co-Host • IT Consultant and Public Speaker.
Umbraco as a Headless CMS
Workshops @ Umbraco UK Festival 2019
zajkowskimarcin
mzajkowski
zajkowskimarcin
Marcin Zajkowski
Umbraco MVP, Trainer & Certified Master @ The Cogworks
CTO / CKO @ WOW School
Marcin @ umbraCoffee (Friday's 12:30 on YT)
Blogger @ udfnd.pl
zajkowskimarcin
mzajkowski
zajkowskimarcin
How will we work on this.Workshop()
- Introduction (ongoing) ~30min
-
Exercises / Coding ~120min (with 10min break?)
- I'm showing "HOW"
- You're implementing "WOW" :)
- Summary + Q&A ~30min
The goal:
Understand (better) the headless CMS approach and build multiple real-world .NET examples.
What is Headless CMS?!
From Wikipedia:
"A headless content management system, or headless CMS, is a back-end only content management system (CMS) built from the ground up as a content repository that makes content accessible via a RESTful API for display on any device.
The term “headless” comes from the concept of chopping the “head” (the front end, i.e. the website) off the “body” (the back end, i.e. the content repository)."
Content Hub
CaaS
Cloud-first (On-prem bleeee)
Content-first
Omni-channel
Content Delivery
Data-driven approach
- No references to "how" it will be rendered
- Simple data types
- Small document types
- Document != page
Display-driven approach
- "Preview" of the data representation
- Complex data types (to simplify content editing)
- Inline editing
- Document == Page
It depends.
Ways to build our solutions
-
Umbraco Headless™
- Cloud-first
- .NET (Standard) Client library
- Custom API endpoints (or maybe HeadRest?!)
-
Other
- #cebula (#poormansapproach) on Azure
- Search (Elastic, Azure Search, hmm 🤔)
- Overengineering? Why not!
- GraphQL (and why)
- Do (or WHY) we need Umbraco?
- AirTable
Umbraco Headless™
Infrastructure
- Umbraco Cloud site with extensions such as: API Browser, Webhooks and API Keys
- Managed API layer on top for Content Delivery + Content Management
- Cloudflare in front of the API (performance, CDN) - both for Content and Media
- Service for image manipulations via CDN
Docs
Content
Delivery
- Content Endpoints
- Media Endpoints
Content Management
- Content Endpoints
- Content Type Endpoints
- Media Endpoints
- Media Type Endpoints
- Language Endpoints
- Member Endpoints
- Member Group Endpoints
- Member Type Endpoints
- Relation Endpoints
- Relation Type Endpoints
Umbraco.Headless.Client.Net
Demo.
[ Headless + Client Lib ]
Custom API
a.k.a. Decoupled CMS
HeadRest
But client...
Demo.
[ HeadRest ]
Other ways
#cheap
1. Functions
2. Cloudflare
3. Data source*
#scalable = pricey
#hipster
#hackyandfunny
Break.
Code!
Q & A
Thank you!
@zajkowskimarcin / marcin.zajkowski@wearecogworks.com
Questions? Pre-party!
Resources
- https://github.com/mzajkowski/umbraco-headless-playground
- https://github.com/umbraco/UmbracoDocs/blob/headless-8-wip/Umbraco-Headless/API-Documentation/index.md
- https://dev.to/andrewbrown/tl-dr-headless-cms-85n
- https://azure.microsoft.com/sv-se/resources/videos/build-2019-build-scalable-apis-using-graphql-and-serverless/
- https://kontent.ai/blog
- https://www.coredna.com/blogs/headless-vs-decoupled-cms
- https://en.wikipedia.org/wiki/Headless_content_management_system
- https://docs.microsoft.com/en-us/azure/api-management/
Umbraco as a Headless CMS
By Marcin Zajkowski
Umbraco as a Headless CMS
Build .NET Core websites and Xamarin cross-platform mobile apps powered by Umbraco as a headless CMS (slides made for workshop with PoCs and more).
