Using eZ Platform as a Headless CMS (with Vue.js)
0 likes1,381 views
The document discusses using EZ Platform as a headless CMS, outlining its setup, benefits, and drawbacks. It includes a tutorial on converting a static site into a decoupled application using Vue.js and the EZ platform's API. Additionally, it touches on alternatives like GraphQL for API interactions, emphasizing that a hybrid approach may be the most effective for dynamic content management.
Using eZ Platform as a Headless CMS (with Vue.js)
- 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.