Contentful with Netgen Layouts workshop
-
Upload
ivo-lukac -
Category
Technology
-
view
174 -
download
0
Transcript of Contentful with Netgen Layouts workshop
![Page 1: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/1.jpg)
Advanced layouts and block
management Ivo Lukač @ PHPCE, Poland 2017
![Page 2: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/2.jpg)
www.netgenlabs.com
• Ivo Lukač, co-founder of Netgen, Croatia Also: developer, site builder, architect, consultant, project manager, evangelist, speaker, event organiser, business developer, …
• Netgen, web agency, Zagreb, Croatia, ~20 employees
• 15 years of experience building complex content-centric web solutions, using eZ Publish since 2004, Symfony since 2013.
• Clients and partners in Germany, Switzerland, Norway, etc.
About me
![Page 5: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/5.jpg)
www.netgenlabs.com
We wanted to improve the process of building
complex web solutions and make it more efficient!
![Page 6: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/6.jpg)
www.netgenlabs.com
We wanted to find the intersection of typical web
project phases and improve there
![Page 7: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/7.jpg)
www.netgenlabs.com
So what is the common ground for backend,
frontend, site building and content?
![Page 9: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/9.jpg)
www.netgenlabs.com
- backend developers implement features that need to be placed somewhere on the interface (layout), reuse when necessary
- frontend developers apply design on HTML markup which describes the layout
- editors place content in prepared blocks
- site builders manage the front interface with set of layouts and blocks
Layouts and blocks
![Page 10: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/10.jpg)
www.netgenlabs.com
- SaaS solutions like Webflow, Wix, etc
- not on enterprise level
- hard to extend
- prototyping/wireframing tools exporting to HTML/CSS
- what about backend?
- responsiveness still hard
- CMS specific tools
- usually focused on one page, one persona
Many ways to skin a cat
![Page 13: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/13.jpg)
www.netgenlabs.com
• Layout and Block Management System
• an independent view layer for content driven sites/applications
• suppose to control all markup in <body>
• no WYSIWYG, doesn’t mess with frontend (CSS/JS)
• highly extensible and customisable
What is it?
![Page 14: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/14.jpg)
www.netgenlabs.com
• Symfony full stack
• uses Symfony routing and Twig extending feature to inject Layouts
• Can be tightly coupled with Symfony full stack apps
• eZ Publish / eZ Platform
• PoC with Sylius eCommerce
• Could be loosely coupled with any other systems
• PoC with Contentful
Architecture
![Page 15: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/15.jpg)
www.netgenlabs.com
• Separation of front and backend layer
• Implementing front layer for headless backend(s)
• Deploying design systems
• Fast micro/additional site building
• 2-phase replacement of legacy systems
Use cases
![Page 17: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/17.jpg)
www.netgenlabs.com
• Layout - responsible to render the layout of a page consisting of Zones with Blocks
• Zone - a placeholder for Blocks. More Blocks can be added in a Zone, rendered one after other
• Shared Layout - a special layout which purpose is to hold Blocks in Zones that can be linked (reused) in other Layouts
Defining layouts
![Page 19: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/19.jpg)
www.netgenlabs.com
• Block - responsible for handling specific features. It renders a specified Block View template. Blocks can use Items from a specified Collection
• Collection:
• manual - items picked from the backend
• dynamic - Query fetches data from the backend.
Defining blocks
![Page 20: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/20.jpg)
www.netgenlabs.com
• Layout Resolver - decides what Layout will be used for which request. It traverses Layout mappings and picks the first one which fits the requested URL and matches additional conditions
Resolving layouts
![Page 21: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/21.jpg)
www.netgenlabs.com
• Layout mappings - a configuration that defines which Layout is applied to which Target URLs under what Conditions
• Target - an abstraction which defines one or more URLs in a generic or backend specific way (e.g. home or all article URLs)
• Condition - additional matchers, could be anything known in request context (e.g. type of content, GET parameter, time of the day, user group, …)
Layout mappings
![Page 23: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/23.jpg)
www.netgenlabs.com
- use Contentful as content storage
- create a Symfony app that shows content from Contentful and uses CMF routing
- use Layouts to manage typical pages
The task
![Page 24: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/24.jpg)
www.netgenlabs.com
- a headless cloud CMS
- features spaces and content types
- no content hierarchy
- provides REST API
- PHP SDK and Symfony bundle provide abstraction of the API with a service for each space - Client
Contentful
![Page 26: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/26.jpg)
www.netgenlabs.com
Contentful bundle
- require “contentful/contentful-bundle”
- enable and configure Contentful bundle
Step 1a
![Page 27: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/27.jpg)
www.netgenlabs.com
- create Contentful service
- show configuration:phpbin/consolecontentful:info
- add caching for spaces and content types
- run caching script:phpbin/consolecontentful:sync
Step 1b
![Page 28: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/28.jpg)
www.netgenlabs.com
Symfony CMF dynamic router
- require “symfony-cmf/routing-bundle”
- install needed database tables:phpbin/consoledoctrine:schema:update--force
- enable and configure Symfony CMF routing
Step 2a
![Page 29: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/29.jpg)
www.netgenlabs.com
- create Contentful entity, a local proxy for remote Contentful entry (caching and routing purposes)
- extend Contentful service to load the Contentful entity
- test loading of example Contentful entity
- verify new row in the database: mysqlphpce-uroot-p-e"select*fromorm_routes"
- try the route
Step 2b
![Page 30: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/30.jpg)
www.netgenlabs.com
View Controller
- create Contentful entity view controller action
- configure CMF dynamic router to use it
- add content enhancer so the View controller gets the Contentful entity
- try the route again
Step 3
![Page 31: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/31.jpg)
www.netgenlabs.com
Netgen Layouts
- set private composer repo:”repositories":[{"type":"composer","url":"https://packagist.netgen.biz"} ],
- require “netgen/block-manager”
- docs.netgen.io/projects/layouts/en/latest/reference/install_instructions.html
Step 4a
![Page 32: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/32.jpg)
www.netgenlabs.com
- install needed database tables:phpbin/consoledoctrine:migrations:migrate--configuration=vendor/netgen/block-manager/migrations/doctrine.yml
- install assets:phpbin/consoleassets:install--symlink--relative
- enable Layouts and configure routing
- configure admin access with basic auth
Step 4b
![Page 33: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/33.jpg)
www.netgenlabs.com
- inject Layouts Resolver in Twig templates
- create “Home” layout
- map that layout to home URL
- create shared layout for header and right column
Step 4c
![Page 34: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/34.jpg)
www.netgenlabs.com
Manual item selection with Content Browser
- integrate Contentful bundle with ContentBrowser
- docs.netgen.io/projects/cb/en/latest/cookbook/index.html
- docs.netgen.io/projects/layouts/en/latest/cookbook/custom_value_types.html
Step 5a
![Page 35: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/35.jpg)
www.netgenlabs.com
- add Layouts item type for Contentful entity
- add ContentBrowser item types for Contentful entity and client
- add ContentBrowser backend that browses Contentful entities
- add additional ContentBrowser columns for Contentful entity
Step 5b
![Page 36: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/36.jpg)
www.netgenlabs.com
- include bootstrap4 CSS
- select products for home grid
- add images:{%forimageinitem.object.getImage()%} <imgsrc="{{image.getFile().getUrl()}}?h=120&w=200"/> {%endfor%}
- check route table:mysqlphpce-uroot-p-e"select*fromorm_routes"
Step 5c
![Page 37: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/37.jpg)
www.netgenlabs.com
Collection query
- docs.netgen.io/projects/layouts/en/latest/cookbook/custom_query_types.html
- add Contentful collection query
- configure “latest posts” block
Step 6
![Page 38: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/38.jpg)
www.netgenlabs.com
Layouts Resolver target
- docs.netgen.io/projects/layouts/en/latest/cookbook/custom_target_types.html
- add 2 target types, for Contentful entity and space
- add Twig extension for target type templates
- create a “product” layout and map it
Step 7
![Page 39: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/39.jpg)
www.netgenlabs.com
Layouts Resolver condition
- docs.netgen.io/projects/layouts/en/latest/cookbook/custom_condition_types.html
- add Layouts Resolver condition type for Contentful content type
- use the condition for “product” layout
Step 8
![Page 40: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/40.jpg)
www.netgenlabs.com
Contentful field block
- docs.netgen.io/projects/layouts/en/latest/cookbook/custom_blocks.html
- add Contentful field block type
- create a “blog post” layout
Step 9
![Page 41: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/41.jpg)
www.netgenlabs.com
Cache all Contentful entries
- finalize sync script
- run sync script:phpbin/consolecontentful:sync
- show debug info
Step 10
![Page 43: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/43.jpg)
www.netgenlabs.com
- just released v0.9 with layout translation capabilities
- adding more features (like user policies, ad-hoc content etc.)
- launching projects based on Layouts and eZ since end of 2016
- first launches by early adopters (agencies from Germany, Italy) last month, several other starting
Currently
![Page 44: Contentful with Netgen Layouts workshop](https://reader031.fdocuments.in/reader031/viewer/2022021500/5a647a8f7f8b9a5d568b47dd/html5/thumbnails/44.jpg)
www.netgenlabs.com
- open source the core
- make it sustainable with commercial add-ons
- integrate tightly with other Symfony based systems
- make loose integrations with everything else easy via REST/SOAP, …
Future