Sulu CMS - An introduction to the world’s finest Symfony enterprise CMS

Today’s websites are increasingly complex. We’re seeing a trend towards web applications that the end user can interact with. But when does a website become a web application? The line is getting blurrier all the time, but one thing is clear: you need a system that can handle both. The Sulu content management platform may be right for you!

Sulu is built on the Symfony full-stack framework. Its strengths are:
- Focus on usability and design — both for frontend, designers and developers
- Out-of-the-box support for many enterprise website features
- The possibility to extend the core system with custom business logic
- Freedom to use whatever front-end stack you prefer
- Even operating in a headless fashion, making you well prepared for the future.

Transcript

1. Sulu CMS An introduction to the world’s finest Symfony enterprise CMS
2. Hi, I’m Thomas Schedler @chirimoya – Co-founder & CEO of Sulu GmbH – More than 15 years of experience in web technologies & development – PHP, Symfony, React, SQL, Redis, Elasticsearch, … – Open source enthusiast – Loves cooking and mountains thomas@sulu.io https://github.com/chirimoya
3. We are Sulu – Company founded in 2018 – Dedicated to solve content management challenges – Emerged from MASSIVE ART WebServices – Located in the center of Europe – Operating worldwide
4. We take CMS seriously. For more than 20 years. 1997 OCK 2002 iCubus 2008 ZOOLU 2013 Sulu 1.0 2019 Sulu 2.0
5. Sulu CMS is… – Enterprise Content Management 
 Platform – Built full-stack on the 
 Symfony framework – Made for businesses – Intuitive UI with great UX – High performance – 100% Open Source
6. Open Source – Open standards – Full transparency – High quality, reliable software – Strong security for content and administration – A vibrant user community including partners and customers
7. Our worldwide community 22.777 Commits 1.519 GitHub stars 403.995 Package downloads 100 Contributors 1.178 Slack users 356 Releases
8. Supertanker Need highly specialized staff, expensive and very complex. Trucks Need a special driving-
 license, must be configured 
 to your needs. Cars Many can ride them, some can repair it. Bicycles Everyone can ride them, many can repair it. Market position
9. When to use Sulu – Complex brand and corporate websites – News and media platforms – Social and collaborative sites – Custom eBusiness solutions – Handling external data resources – Headless data & content provider – Speed is a critical success factor
10. Building Blocks
11. Framework based – Don't reinvent the wheel – Built on top of a solid foundation – Re-using proven and widely tested software design patterns – Secure and long term maintained – Full-Stack Symfony Framework – More than 6 billion downloads
12. Building Blocks
13. Content Publication – Full content life cycle = create, edit, draft and publish content – Consistent & intuitive UI – Live preview – Versioning – Multiple platforms managed in 
 one place
14. Webspaces – One single content-structure / page tree – The structure represents one or more websites – Multiple languages implemented as dimensions – Multiple webspaces support
15. We XML
16. I XML
17. <!-- config/webspaces/example.xml —> <?xml version="1.0" encoding="utf-8"?> <webspace xmlns="http://schemas.sulu.io/webspace/webspace" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://schemas.sulu.io/webspace/webspace http://schemas.sulu.io/ webspace/webspace-1.1.xsd"> <name>example.com</name> <key>example</key> <localizations> <localization language="en" default="true"/> <localization language="de"/> <localization language="fr" country="ch"/> </localizations> <portals> <portal> <name>example.com</name> <key>example</key> <environments> <environment type="prod"> <urls> <url>example.com/{localization}</url>
18. Snippets & Articles – Additional concepts for 
 centralised content management ✓ Snippets for re-usable content fragments — across webspaces ✓ Article repository for centralised publisher oriented content management (blog- posts, news, …)
19. – Powerful template engine – Each page template is defined by ✓ an XML file that contains the page structure ✓ a Twig file that contains the HTML representation – The page structure consists of properties, each of which has a content type Templating
20. <!-- config/templates/pages/default.xml --> <?xml version="1.0" ?> <template xmlns="http://schemas.sulu.io/template/template" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://schemas.sulu.io/template/template http://schemas.sulu.io/ template/template-1.0.xsd"> <key>default</key> <view>pages/default</view> <controller>Sulu\Bundle\WebsiteBundle\Controller\DefaultController::indexAction</controller> <cacheLifetime>604800</cacheLifetime> <meta> <title lang="en">Default</title> <title lang="de">Standard</title> </meta> <properties> <property name="title" type="text_line" mandatory="true"> <meta> <title lang="en">Title</title> <title lang="de">Titel</title> </meta> <params> <param name="headline" value="true"/>
21. {# templates/pages/default.html.twig #} {% extends "base.html.twig" %} {% block content %} <h1>{{ content.title }}</h1> {{ content.article|raw }} {% endblock %}
22. Media Management – Centralised repository for documents, images etc. – Independent management based 
 on folder hierarchies – Multi-language support for document meta-data – Document versioning – Automated image re-sizing 
 & optimisation
23. <!-- config/image-formats.xml —> <?xml version="1.0" encoding="UTF-8"?> <formats xmlns="http://schemas.sulu.io/media/formats" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://schemas.sulu.io/media/formats http://schemas.sulu.io/media/ formats-1.1.xsd"> <format key="300x"> <meta> <title lang="en">Example Image</title> <title lang="de">Beispielbild</title> </meta> <scale x="300"/> </format> </formats> {# templates/pages/default.html.twig #} {% extends "base.html.twig" %} {% block content %} <img src="{{ image.thumbnails['300x'] }}" alt="{{ image.title }}" title="{{ image.description|default(image.title) }}"> {% endblock %}
24. Building Blocks
25. Digital Marketing – Clever and comprehensive online marketing features ✓ Analytics integrations ✓ Deep-seated SEO semantics ✓ Powerful page-URL management ✓ Custom URLs management ✓ Redirect / alias management
26. Building Blocks
27. Personalisation – Create personalised digital experiences – Real-time target-group evaluation – User matching based on behaviour and environment (region, browser etc.) – Automated display of matching content for any target-group – Fully customisable to any marketing- and content strategy
28. Building Blocks
29. Custom Business Logic – Business websites are evolving into rich software applications ✓ Comprehensive integration ✓ Customisable business logic ✓ Data management & headless capabilities
30. Router The main entry point to your 
 Symfony application.
31. / /services /blog Request Response Kernel Controller Router Request URI Controller & Action Front Controller indexAction() servicesAction() blogAction() Response Response Response Model View Services
32. / /services /blog Request Response Kernel Controller Request URI Controller & Action Front Controller indexAction() servicesAction() blogAction() Response Response Response Model View Services Router Chain Router Dynamic Router Router
33. // src/Controller/Website/HelloWorldController.php namespace App\Controller\Website; use Symfony\Bundle\FrameworkBundle\Controller\AbstractController; use Symfony\Component\Routing\Annotation\Route; class HelloWorldController extends AbstractController { /** * @Route("/hello-world") */ public function helloWorld() { return $this->render('hello-world.html.twig'); } } // templates/hello-world.html.twig Hallo World!
34. Controller Add your custom logic within your own content controller.
35. / /services /blog Request Response Kernel Controller Request URI Controller & Action Front Controller indexAction() servicesAction() blogAction() Response Response Response Model View Services Router Chain Router Dynamic Router Default Controller
36. <!-- config/templates/pages/default.xml --> <?xml version="1.0" ?> <template xmlns="http://schemas.sulu.io/template/template" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://schemas.sulu.io/template/template http://schemas.sulu.io/ template/template-1.0.xsd"> <key>default</key> <view>pages/default</view> <controller>App\Controller\Website\CustomController::indexAction</controller> <cacheLifetime>604800</cacheLifetime> <meta> <title lang="en">Default</title> <title lang="de">Standard</title> </meta> <properties> <property name="title" type="text_line" mandatory="true"> <meta> <title lang="en">Title</title> <title lang="de">Titel</title> </meta> <params> <param name="headline" value="true"/>
37. // src/Controller/Website/CustomController.php
 namespace App\Controller\Website; use Sulu\Bundle\WebsiteBundle\Controller\WebsiteController; use Sulu\Component\Content\Compat\StructureInterface; class CustomController extends WebsiteController { public function indexAction(StructureInterface $structure, $preview = false, $partial = false) { $response = $this->renderStructure( $structure, [ // here you can add some custom data for your template 'myData' => $this->get('my_custom_service')->getMyData(),
 ], $preview, $partial ); return $response; } }
38. Event Dispatcher Handle additional business logic within your 
 Event Subscriber.
39. Symfony Events Kernel Events – kernel.request – kernel.response – kernel.controller – kernel.view – kernel.terminate … Doctrine Events Lifecycle Events – [pre|post]Remove – [pre|post]Persist – [pre|post]Update – [pre|on|post]Flush – onClear …
40. Sulu Document Manager Events +----------------------+ | Events | +----------------------+ | persist | | hydrate | | remove | | refresh | | copy | | move | | create | | clear | | find | | reorder | | publish | | unpublish | | remove_draft | | flush | | query.create | | query.create_builder | | query.execute | | configure_options | | metadata_load | | restore | +----------------------+ bin/adminconsole sulu:document:subscriber:debug
41. // src/Document/Subscriber/MailSubscriber.php
 
 namespace App\Document\Subscriber;
 
 use Sulu\Component\DocumentManager\Event\PublishEvent;
 use Sulu\Component\DocumentManager\Events;
 use Symfony\Component\EventDispatcher\EventSubscriberInterface;
 
 class MailSubscriber implements EventSubscriberInterface
 {
 ...
 
 /**
 * {@inheritdoc}
 */
 public static function getSubscribedEvents()
 {
 return [
 Events::PUBLISH => ['sendNotification', -1000],
 ];
 }
 
 public function sendNotification(PublishEvent $event)
 {
 $message = new \Swift_Message('Page Published', 'URL: ' . $event->getDocument()->getResourceSegment());
 
 $this->mailer->send($message);
 }
 } <service id="app.document_subscriber.email" class="App\Document\Subscriber\MailSubscriber"> <argument type="service" id="mailer" /> <tag name="sulu_document_manager.event_subscriber"/> </service>
42. Service Container The control center for your application.
43. Service Container – Foundation for extensibility & customizability – Sulu heavily uses service definitions – Add new functionality (Modulnavigation, Content-Type, ...) – Extend existing Content-Types
 (Smart-Content, Teaser, ...) – Overwrite services
44. Building Blocks
45. Content Delivery – Native — Powerful HTML Rendering engine included – Partial — Render only HTML fragments which you need – Headless — Consume content as JSON or XML from a solid REST API – Format agnostic – Supports any response type (HTML, XML, JSON etc.)
46. System architecture
47. PHPCR DOCTRINE MySQL, PostgreSQL, Jackrabbit, ... Framework Symfony Symfony CMF Contact Media Content ... Sulu
48. REST API Single-Page Application Your Application Website Admin Symfony Symfony CMF Contact Media Content ... Sulu
49. References
50. Facts & Figures – Open-Air Cinema – More than 30 years in business – Tickets sold: 100.000 – Peak sale: 15.000 in 4h API – Film, Access & Power BI Allianz Cinema https://allianzcinema.ch
51. Feinschmecker Facts & Figures – Special interest magazine – Product placement within editorial content – Headless eCommerce API – Sylius eCommerce API – Fulfillment https://www.feinschmecker.de
52. Facts & Figures – GU recipe portal – Visits: ~6,8 m – PIs: ~14,4 m – Recipes: ~40.000 API – GU Recipes Küchengötter https://www.kuechengoetter.de
53. sulu.io Thank you!