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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

4. We take CMS seriously.
   For more than 20 years.
   1997
   OCK
   2002
   iCubus
   2008
   ZOOLU
   2013
   Sulu 1.0
   2019
   Sulu 2.0
   

   View Slide

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
   

   View Slide

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
   

   View Slide

7. Our worldwide community
   22.777
   Commits
   1.519
   GitHub stars
   403.995
   Package downloads
   100
   Contributors
   1.178
   Slack users
   356
   Releases
   

   View Slide

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
   

   View Slide

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
   

   View Slide

10. Building Blocks
    

    View Slide

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
    

    View Slide

12. Building Blocks
    

    View Slide

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
    

    View Slide

14. Webspaces
    – One single content-structure /
    page tree
    – The structure represents one or
    more websites
    – Multiple languages implemented
    as dimensions
    – Multiple webspaces support
    

    View Slide

15. We XML
    

    View Slide

16. I XML
    

    View Slide

17. View Slide

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, …)
    

    View Slide

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
    

    View Slide

20. 
    
    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">
    default
    pages/default
    Sulu\Bundle\WebsiteBundle\Controller\DefaultController::indexAction
    604800
    
    Default
    Standard
    
    
    
    
    Title
    Titel
    
    
    
    

    View Slide

21. {# templates/pages/default.html.twig #}
    {% extends "base.html.twig" %}
    {% block content %}
    {{ content.title }}
    {{ content.article|raw }}
    {% endblock %}
    

    View Slide

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
    

    View Slide

23. View Slide

24. Building Blocks
    

    View Slide

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
    

    View Slide

26. Building Blocks
    

    View Slide

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
    

    View Slide

28. Building Blocks
    

    View Slide

29. Custom Business Logic
    – Business websites are evolving into rich
    software applications
    ✓ Comprehensive integration
    ✓ Customisable business logic
    ✓ Data management & headless
    capabilities
    

    View Slide

30. Router
    The main entry point to your 

    Symfony application.
    

    View Slide

31. /
    /services
    /blog
    Request
    Response
    Kernel Controller
    Router
    Request URI Controller & Action
    Front Controller
    indexAction()
    servicesAction()
    blogAction()
    Response
    Response
    Response
    Model
    View
    Services
    

    View Slide

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
    

    View Slide

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!
    

    View Slide

34. Controller
    Add your custom logic within your own
    content controller.
    

    View Slide

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
    

    View Slide

36. 
    
    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">
    default
    pages/default
    App\Controller\Website\CustomController::indexAction
    604800
    
    Default
    Standard
    
    
    
    
    Title
    Titel
    
    
    
    

    View Slide

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;
    }
    }
    

    View Slide

38. Event Dispatcher
    Handle additional business logic within your 

    Event Subscriber.
    

    View Slide

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
    …
    

    View Slide

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
    

    View Slide

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);

    }

    }
    
    
    
    
    

    View Slide

42. Service Container
    The control center for your application.
    

    View Slide

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
    

    View Slide

44. Building Blocks
    

    View Slide

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.)
    

    View Slide

46. System architecture
    

    View Slide

47. PHPCR DOCTRINE
    MySQL, PostgreSQL, Jackrabbit, ...
    Framework
    Symfony Symfony CMF
    Contact
    Media
    Content ...
    Sulu
    

    View Slide

48. REST API
    Single-Page
    Application
    Your Application
    Website Admin
    Symfony Symfony CMF
    Contact
    Media
    Content ...
    Sulu
    

    View Slide

49. References
    

    View Slide

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
    

    View Slide

51. Feinschmecker
    Facts & Figures
    – Special interest magazine
    – Product placement within
    editorial content
    – Headless eCommerce
    API
    – Sylius eCommerce API
    – Fulfillment
    https://www.feinschmecker.de
    

    View Slide

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
    

    View Slide

53. sulu.io
    Thank you!
    

    View Slide