Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sulu CMS - An introduction to the world’s fines...

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.

Thomas Schedler

February 02, 2021
Tweet

More Decks by Thomas Schedler

Other Decks in Technology

Transcript

  1. 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 [email protected] https://github.com/chirimoya
  2. 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
  3. We take CMS seriously. For more than 20 years. 1997

    OCK 2002 iCubus 2008 ZOOLU 2013 Sulu 1.0 2019 Sulu 2.0
  4. 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
  5. Open Source – Open standards – Full transparency – High

    quality, reliable software – Strong security for content and administration – A vibrant user community including partners and customers
  6. Our worldwide community 22.777 Commits 1.519 GitHub stars 403.995 Package

    downloads 100 Contributors 1.178 Slack users 356 Releases
  7. 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
  8. 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
  9. 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
  10. Content Publication – Full content life cycle = create, edit,

    draft and publish content – Consistent & intuitive UI – Live preview – Versioning – Multiple platforms managed in 
 one place
  11. Webspaces – One single content-structure / page tree – The

    structure represents one or more websites – Multiple languages implemented as dimensions – Multiple webspaces support
  12. <!-- 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>
  13. 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, …)
  14. – 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
  15. <!-- 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"/>
  16. {# templates/pages/default.html.twig #} {% extends "base.html.twig" %} {% block content

    %} <h1>{{ content.title }}</h1> {{ content.article|raw }} {% endblock %}
  17. 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
  18. <!-- 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 %}
  19. Digital Marketing – Clever and comprehensive online marketing features ✓

    Analytics integrations ✓ Deep-seated SEO semantics ✓ Powerful page-URL management ✓ Custom URLs management ✓ Redirect / alias management
  20. 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
  21. Custom Business Logic – Business websites are evolving into rich

    software applications ✓ Comprehensive integration ✓ Customisable business logic ✓ Data management & headless capabilities
  22. / /services /blog Request Response Kernel Controller Router Request URI

    Controller & Action Front Controller indexAction() servicesAction() blogAction() Response Response Response Model View Services
  23. / /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
  24. // 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!
  25. / /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
  26. <!-- 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"/>
  27. // 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; } }
  28. 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 …
  29. 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
  30. // 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>
  31. 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
  32. 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.)
  33. 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
  34. Feinschmecker Facts & Figures – Special interest magazine – Product

    placement within editorial content – Headless eCommerce API – Sylius eCommerce API – Fulfillment https://www.feinschmecker.de
  35. 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