Post on 21-Jan-2018
Advanced layouts and block
management Ivo Lukač @ PHPCE, Poland 2017
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
www.netgenlabs.com
We wanted to improve the process of building
complex web solutions and make it more efficient!
www.netgenlabs.com
We wanted to find the intersection of typical web
project phases and improve there
www.netgenlabs.com
So what is the common ground for backend,
frontend, site building and content?
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
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
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?
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
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
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
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
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
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
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
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
www.netgenlabs.com
Contentful bundle
- require “contentful/contentful-bundle”
- enable and configure Contentful bundle
Step 1a
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
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
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
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
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
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
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
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
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
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
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
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
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
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
www.netgenlabs.com
Cache all Contentful entries
- finalize sync script
- run sync script:phpbin/consolecontentful:sync
- show debug info
Step 10
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
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
Thank you
ivo@netgen.hrilukac.com/twitterilukac.com/linkedin
joind.in/talk/3c584