The new way of managing layouts and blocks
0 likes101 views
The document discusses a new approach to managing layouts and blocks in web development through a system developed by Netgen, led by Ivo Lukač and Edi Modrić. This system aims to improve the efficiency of building complex content-centric web solutions by allowing backend and frontend developers, as well as UX designers and editors, to collaborate seamlessly. Key concepts include layouts, zones, blocks, and a layout resolver that optimizes the design and development process while offering future development plans like open sourcing the core and integrating with other systems.
The new way of managing layouts and blocks
- 1. The new way of managing layouts and blocks on Sylius Ivo Lukač @ Sylius Croatia, Zagreb 2017
- 2. www.netgenlabs.com • Ivo Lukač, co-founder of Netgen, Croatia I am also: developer, site builder, architect, consultant, project manager, evangelist, speaker, event organiser, business developer, … • Edi Modrić, senior eZ/Symfony/PHP developer and tech lead • 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
- 4. www.netgenlabs.com HOW IT ALL STARTED
- 5. www.netgenlabs.com We wanted to improve the process of building complex web solutions and make it more efficient!
- 6. www.netgenlabs.com We wanted to find the intersection of typical web project phases and improve there
- 7. www.netgenlabs.com So what is the common ground for backend, frontend, UX design and content?
- 8. www.netgenlabs.com We figured its about layouts and blocks :)
- 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 - UX designer define the 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
- 12. www.netgenlabs.com • Symfony full stack application • uses Symfony routing and Twig extending feature to inject Layouts • Can be tightly coupled with any other Symfony full stack app • we already doing this with eZ Publish/ eZ Platform • PoC with Sylius • Could be loosely coupled with any other systems • Possible project to do PoC with Contentful Architecture
- 13. www.netgenlabs.com MAIN CONCEPTS OF OUR LAYOUT AND BLOCK MANAGEMENT
- 14. www.netgenlabs.com • Layout - responsible to render the layout of a page with all Blocks added to it. It is instantiated from a Layout Type from which it gets the template and list of Zones in which Blocks can be placed • Zone - a placeholder for Blocks which are added to a Layout. There could be more Zones in a Layout. More Blocks can be added in one Zone, they are rendered one after other. • Shared Layout - a special layout that can’t be applied to any page directly, its purpose is to hold Blocks in Zones that can be reused in regular Layouts Defining layouts
- 16. www.netgenlabs.com • Block - responsible for handling specific features. It renders the content using a defined Block View. Certain blocks have Block Items which are filled from Collections • Collection - used to fill the list of Block Items. Collection can be manual or dynamic. In the case of manual collection the items are picked from a backend system by the editor. In the case of dynamic collection a Query can be chosen and given parameters to fetch the data from the backend. • Container (Column, 2 columns, etc) - is a special kind of Block which purpose is to hold other Blocks and render them. Defining blocks
- 17. www.netgenlabs.com • Layout Resolver - a module that is deciding what Layout will be used for which request. It traverses Layout mappings and picks the first one which fits the conditions. It works on top of Symfony routing • Layout mappings - a configuration that defines which Layout is applied to which Targets under what Conditions • Targets - abstraction which defines one or more URLs in a generic way or backend specific way • Conditions - additional conditions which need to match for Layout to be chosen. Could be anything known in request context Resolving & mapping
- 18. www.netgenlabs.com - makes web design & development process more agile - reduces the time needed to design and develop a site - produces less waste - makes site maintenance easier - gives quicker time to market - provides head to headless - gives a single collaboration point for UX designers, developers and editors Benefits
- 19. www.netgenlabs.com - adding more features (like caching, user policies, translations etc.) - finished several projects using Layouts on eZ, starting few more - preparing a second release for selected partners and their pilot projects (Germany, Italy, Spain) Currently
- 20. 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