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