using ez platform as a headless cms (with vue.js)

USING EZ PLATFORMAS A HEADLESS CMS

JANI TARVAINEN, EZ SYSTEMS

www.ez.nowww.ez.no

Using eZ Platform as a Headless CMS

๏ Web Summer Camp

๏ September 1st, 2016

๏ Jani Tarvainen, eZ Systems

www.ez.nowww.ez.no

What is a headless CMS setup?

๏ A CMS provides the content as a feed

๏ You have a client application that consumes this feed

๏ Web client application

๏ Web server application

๏ Mobile application

www.ez.nowww.ez.no

Some example use cases

๏ An enterprise content repository

๏ Give agencies access to the content feed to create campaign sites

๏ A static site generator to generate documentation shipped with a product

๏ Mobile application that as content such as documentation

www.ez.nowww.ez.no

History of headless content management

๏ From read only to read and write

๏ AJAX+RSS demo from 2005: http://www.nigelcrawley.co.uk/bbc/

๏ REST popularisation, JSON nowadays the most common format

www.ez.nowww.ez.no

State of the use of headless today

๏ The hype is over, now it's popping up where it's appropriate

๏ Plenty of mature options for consuming Content APIs with site generators, front end tools, content

๏(still) not the standard for new content driven sites

www.ez.nowww.ez.no

Pros for using headless for site creation

๏ You get complete freedom to use whatever tool for the experience

๏ Absolutely no limitations for front end application

๏ Reuse of content across different properties

www.ez.nowww.ez.no

Cons for using headless for site creation

๏ You loose a lot of what people expect from a CMS: Layout management,

๏ Navigation management, Banner management, Template helpers....

๏ Can lead to solving problems that have already been solved, for no particular good reason.

๏ Feedback forms and other interactive elements still need to be handled

www.ez.nowww.ez.no

What does eZ offer for headless?

๏ A solid, comprehensive and extensible REST API for the content repository

๏ A JavaScript Client library for the REST API

๏ Symfony and Public API for custom APIs

๏ Freedom to choose whatever JavaScript toolchain you want

www.ez.nowww.ez.no

Back end options

๏ Use the built in REST API and extend it

๏ Roll your own with Public API

๏ Public API + Symfony Options

www.ez.nowww.ez.no

Examples of headless eZ Platform

๏ The most common headless eZ application is the eZ Platform admin

๏ We'll take a a look at how to turn a static site into a simple decoupled interface for the bike ride demo

www.ez.nowww.ez.no

Time to get our hands dirty

๏ We'll convert the bike ride tutorial static template

๏ Using Vue.js 2.0 (RC3)

๏ Using eZ CAPI

www.ez.nowww.ez.no


๏ Six steps:

๏ 1. Ground zero, static HTML

๏ 2. Add Vue.js basics

๏ 3. Login to eZ

๏ 4. List content

๏ 5. Add simple form

๏ 6. Merge as hybrid

www.ez.nowww.ez.no


๏ First of all

๏ git pull

๏ ./installation/reset.sh

www.ez.nowww.ez.no

Step 1: Static HTML

๏ What we have:

๏ A static HTML version here: http://headless.websc/static/index.html

๏ A readily configured eZ installation: http://headless.websc/ez

๏ Completed: git checkout step-1

www.ez.nowww.ez.no

Step 2: Adding Vue.js basics

๏ Load library and app scripts

๏ Create app

๏ Define app container and template

๏ Help: http://vuejs.org/guide/


www.ez.nowww.ez.no

Step 3: Add CAPI and login

๏ Add CAPI script

๏ Add constructor

๏ Log in to eZ

๏ Help: https://doc.ez.no/display/DEVELOPER/Using+the+JavaScript+REST+API+Client


www.ez.nowww.ez.no

Step 4: Load content using CAPI and simplify values

๏ Do content query

๏ Manage complex output values to ensure appropriate display

๏ Help:

๏ https://github.com/ezsystems/ezpublish-kernel/tree/v6.5.0/eZ/Publish/Core/REST/Server/Input/Parser/Criterion

๏ http://ezsystems.github.io/javascript-rest-client/classes/ContentService.html

๏Completed: git checkout step-4

www.ez.nowww.ez.no

Step 5: Add a simple form to create new rides

๏ Add form and set action

๏ Add action to create content using CAPI

๏ Refresh view after creation

๏ Help: http://ezsystems.github.io/javascript-rest-client/classes/ContentService.html

๏Completed: git checkout step-5

www.ez.nowww.ez.no

Step 6: Merge into a hybrid

๏ Define layout matching for root

๏ Create Twig template

๏ Copy template and add some backend


www.ez.nowww.ez.no

Conclusion

๏ Going headless is no silver bullet

๏ The CAPI abstracts the default backend

๏ It's very generic and not the best for public facing reads

๏ Hybrid approach is probably the most practical

๏ Sites with dynamic snippets

๏ Apps, etc. using content via API

www.ez.nowww.ez.no

Bonus: An alternative API with GraphQL

๏ GraphQL is similar to what REST is

๏ A high level transport layer with basic query format

๏ It is more defined and exchangeable than different REST APIs

๏ Has methods for read and writes (mutations)

www.ez.nowww.ez.no

Bonus: An alternative API with GraphQL

๏ eZ Platform and Studio currently do not have support for GraphQL

๏ You can work with Symfony Bundles and the eZ Public API to create a GraphQL API without writing it all

๏ Leverages the awesome Youshido GraphQL Bundle

๏ GraphiQL Client: http://headless.websc/static/graphiql.html

๏ Example: git checkout step-7

www.ez.nowww.ez.no

The end

๏ Questions? No?

๏ Thank you.

using ez platform as a headless cms (with vue.js)

Technology