Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
USING EZ PLATFORM

AS 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 th...
www.ez.nowww.ez.no
Some example use cases
๏ An enterprise content repository
๏ Give agencies access to the content feed to...
www.ez.nowww.ez.no
History of headless content management
๏ From read only to read and write
๏ AJAX+RSS demo from 2005: ht...
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
๏ Ple...
www.ez.nowww.ez.no
Pros for using headless for site creation
๏ You get complete freedom to use whatever tool for the exper...
www.ez.nowww.ez.no
Cons for using headless for site creation
๏ You loose a lot of what people expect from a CMS: Layout ma...
www.ez.nowww.ez.no
What does eZ offer for headless?
๏ A solid, comprehensive and extensible REST API for the content repos...
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...
www.ez.nowww.ez.no
Examples of headless eZ Platform
๏ The most common headless eZ application is the eZ Platform admin
๏ W...
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 (...
www.ez.nowww.ez.no
Time to get our hands dirty
๏ Six steps:
๏ 1. Ground zero, static HTML
๏ 2. Add Vue.js basics
๏ 3. Logi...
www.ez.nowww.ez.no
Time to get our hands dirty
๏ 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.ht...
www.ez.nowww.ez.no
Step 2: Adding Vue.js basics
๏ Load library and app scripts
๏ Create app
๏ Define app container and tem...
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...
www.ez.nowww.ez.no
Step 4: Load content using CAPI and simplify values
๏ Do content query
๏ Manage complex output values t...
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 ...
www.ez.nowww.ez.no
Step 6: Merge into a hybrid
๏ Define layout matching for root
๏ Create Twig template
๏ Copy template an...
www.ez.nowww.ez.no
Conclusion
๏ Going headless is no silver bullet
๏ The CAPI abstracts the default backend
๏ It's very ge...
www.ez.nowww.ez.no
Bonus: An alternative API with GraphQL
๏ GraphQL is similar to what REST is
๏ A high level transport la...
www.ez.nowww.ez.no
Bonus: An alternative API with GraphQL
๏ eZ Platform and Studio currently do not have support for Graph...
www.ez.nowww.ez.no
The end
๏ Questions? No?
๏ Thank you.
Upcoming SlideShare
Loading in …5
×

Using eZ Platform as a Headless CMS (with Vue.js)

703 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Using eZ Platform as a Headless CMS (with Vue.js)

  1. 1. USING EZ PLATFORM
 AS A HEADLESS CMS JANI TARVAINEN, EZ SYSTEMS
  2. 2. www.ez.nowww.ez.no Using eZ Platform as a Headless CMS ๏ Web Summer Camp ๏ September 1st, 2016 ๏ Jani Tarvainen, eZ Systems
  3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 14. www.ez.nowww.ez.no Time to get our hands dirty ๏ First of all ๏ git pull ๏ ./installation/reset.sh
  15. 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. 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. 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. 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. 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. 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. 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. 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. 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. 24. www.ez.nowww.ez.no The end ๏ Questions? No? ๏ Thank you.

×