In this workshop in the Web Summer Camp 2016 in Rovinj, Croatia we discuss how to use the eZ Platform as a Headless CMS. What are the challenges and opportunities and finally how to implement one using the Vue.js JavaScript library.

1. USING EZ PLATFORM
AS A HEADLESS CMS
JANI TARVAINEN, EZ SYSTEMS

2. www.ez.nowww.ez.no
Using eZ Platform as a Headless CMS
๏ Web Summer Camp
๏ September 1st, 2016
๏ Jani Tarvainen, eZ Systems

3. 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

4. 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

5. 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

6. 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

7. 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

8. 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

9. 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

10. 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

11. 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

12. 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

13. www.ez.nowww.ez.no
Time to get our hands dirty
๏ 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

14. www.ez.nowww.ez.no
Time to get our hands dirty
๏ First of all
๏ git pull
๏ ./installation/reset.sh

15. 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

16. 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/
๏ Completed: git checkout step-2

17. 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
๏ Completed: git checkout step-3

18. 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

19. 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

20. 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
๏ Completed: git checkout step-6

21. 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

22. 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)

23. 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

24. www.ez.nowww.ez.no
The end
๏ Questions? No?
๏ Thank you.