This document describes Netgen Layouts, a layout and block management system that is intended to control all markup in the <body> section of content-driven sites and applications. It discusses the main concepts of layouts, zones, blocks, collections, and how layouts are resolved. The document then provides a workshop example using Contentful as a headless CMS with the Symfony CMF routing bundle and Netgen Layouts to build a simple site.
2. 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
9. 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
10. 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
13. 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?
14. 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
15. 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
17. 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
19. 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
20. 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
21. 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
23. 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
24. 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
29. 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:
mysql phpce -uroot -p -e "select * from orm_routes"
- try the route
Step 2b
30. 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
33. 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
38. 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
39. 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
43. 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
44. 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