Sulu 2.0 - bring your own business logic

In den meisten Content Management Systemen ist es sehr umständlich, eigene Business-Logik mit Content aus dem Redaktionssystem zu einer maßgeschneiderten Lösung zu kombinieren. Genau an diesem Punkt setzt die Symfony basierte Content Management Plattform Sulu an. Mit der Version 2.0 ist das Ganze noch einfacher geworden.

Transcript

1. View Slide

2. Hey, I’m Thomas
   – Co-founder & CEO of Sulu GmbH
   – More than 15 years of experience in
   web technologies & development
   – PHP, Symfony, React, SQL,
   Elasticsearch, …
   – Open source enthusiast
   – Loves cooking and mountains
   @chirimoya
   thomas@sulu.io
   https://github.com/chirimoya
   

   View Slide

3. Who knows Sulu?
   

   View Slide

4. Sulu CMS
   – Content Management Platform
   – Full-Stack Symfony
   – Made for businesses
   – Simple UI
   – High Performance
   – 100% Open Source
   

   View Slide

5. For business
   – Built with the needs of business and
   industry in mind
   – Enterprise features without ridiculous
   license fees
   – Supports multi-language, multi-portal
   and multi-channel
   – Easy to integrate data from external
   resources
   – Perfect for developing any type of
   business app
   

   View Slide

6. For editors
   – Really simple and very fast user
   interface
   – Web-based, no installation required
   – Edit forms that validate content &
   ensure correct semantics
   – Live preview content as you type it
   – Switch between different devices
   (Smartphone, Tablet or Desktop)
   

   View Slide

7. For developers
   – Full-Stack Symfony environment
   – Semantic configuration of templates
   – Easy transition from data to HTML
   – Build applications around content
   management
   – Add/Remove functionality with Symfony
   Bundles
   

   View Slide

8. Bicycles
   Everyone can ride them,
   many can repair it

   (WordPress etc.)
   Cars
   Many can ride them,
   some can repair it

   (Drupal, TYPO3 etc.)
   Supertanker
   Need highly specialized staff,
   expensive and very complex

   (Hybris, OpenText, Adobe Experience
   Manager etc.)
   Trucks
   Need a special license,
   must be configured to your
   needs (eZ Publish,
   Pimcore etc.)
   Where we see us …
   

   View Slide

9. When to use Sulu?
   – Complex brand and corporate presences
   – News and media platforms
   – Social and collaborative sites
   – E-Business projects
   – Handling external data resources
   – Where speed is a critical success
   factor
   

   View Slide

10. When not to use Sulu?
    – Sulu is not WordPress
    – We don’t recommend to use Sulu for:
    – Low budget marketing sites
    – Simple blogs
    – Hobby websites
    – Small business websites
    

    View Slide

11. Bring your own business logic
    What does that mean?
    

    View Slide

12. Bring your own business logic
    – Business websites are evolving into
    rich software applications,
    requiring ...
    – comprehensive integration
    – business logic
    – data management capabilities
    

    View Slide

13. View Slide

14. View Slide

15. View Slide

16. One User Interface for all data
    management tasks?
    Less switching between different applications.
    

    View Slide

17. Maybe the Sulu administration
    interface could be the ONE?
    We build beautiful UIs with a great UX.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. Single-Page Application
    – Fast and responsive UI
    – Improved user experience
    – Only data is transmitted
    – Caching capabilities
    – Clean separation
    – REST API
    

    View Slide

22. Single-Page Application
    – Don't break the internet
    – Deep linking might be hard
    – Keep an eye on security (XSS)
    – On-the-fly extensibility is difficult
    – back-end developer != front-end developer
    

    View Slide

23. “
    Navigating the hype-driven frontend
    development world without going insane.
    Kitze
    

    View Slide

24. Sulu 1.*
    Front-End Technologies
    

    View Slide

25. New major release ahead!
    Let's break some stuff ;-)
    

    View Slide

26. Sulu 2.0
    Front-End Technologies
    

    View Slide

27. Making the front-end as
    extensible as the back-end.
    Without the need to write JavaScript!
    

    View Slide

28. View Slide

29. Metadata for JavaScript
    views - List & Form
    – Determines all the available fields
    for lists and forms
    – Contains a data-type to know how to
    represent this field
    – Contains a title to display above
    fields
    – Form can contain more parameters to
    customize fields
    

    View Slide

30. We XML
    

    View Slide

31. I XML
    

    View Slide

32. 
    
    
    events
    
    
    App\Entity\EventTranslation
    App\Entity\Event.translations
    App\Entity\EventTranslation.locale = :locale
    
    
    ...
    
    
    id
    App\Entity\Event
    
    
    title
    App\Entity\EventTranslation
    
    
    

    View Slide

33. 
    
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://schemas.sulu.io/template/template http://schemas.sulu.io/template/
    form-1.0.xsd"
    >
    event_details
    
    
    
    sulu_admin.title
    
    
    
    
    app.location
    
    
    
    
    app.teaser
    
    

    View Slide

34. REST API
    – The way data is transferred between
    backend and frontend
    – Identified by a resourceKey to combine
    list and detail requests
    – API has to follow a standard
    – Helper for list representations
    

    View Slide

35. // src/Admin/DoctrineListRepresentationFactory.php
    class DoctrineListRepresentationFactory
    {
    ...
    public function createDoctrineListRepresentation(
    string $resourceKey,
    array $filters = [],
    array $parameters = []
    ): PaginatedRepresentation {
    $fieldDescriptors = $this->fieldDescriptorFactory->getFieldDescriptors($resourceKey);
    $listBuilder = $this->listBuilderFactory->create($fieldDescriptors['id']->getEntityName());
    $this->restHelper->initializeListBuilder($listBuilder, $fieldDescriptors);
    ...
    return new PaginatedRepresentation(
    $list,
    $resourceKey,
    (int) $listBuilder->getCurrentPage(),
    (int) $listBuilder->getLimit(),
    (int) $listBuilder->count()
    );
    }
    

    View Slide

36. # config/packages/sulu_admin.yaml
    sulu_admin:
    email: "%env(SULU_ADMIN_EMAIL)%"
    forms:
    directories:
    - "%kernel.project_dir%/config/forms"
    lists:
    directories:
    - "%kernel.project_dir%/config/lists"
    resources:
    events:
    routes:
    list: app.get_events
    detail: app.get_event
    field_type_options:
    selection:
    event_selection:
    default_type: list_overlay
    resource_key: events
    types:
    list_overlay:
    adapter: table
    list_key: events
    

    View Slide

37. Sulu Admin Class
    – Tagged Symfony service to extend the
    admin application of Sulu
    – Allows configuration of views and
    navigation items
    – Introduces security contexts
    – Add settings to configuration request
    

    View Slide

38. // src/Admin/EventAdmin.php
    class EventAdmin extends Admin
    {
    ...
    public function configureViews(ViewCollection $viewCollection): void
    {
    $locales = $this->webspaceManager->getAllLocales();
    $listToolbarActions = [
    new ToolbarAction('sulu_admin.add'),
    new ToolbarAction('sulu_admin.delete')
    ];
    $listView = $this->viewBuilderFactory
    ->createListViewBuilder(self::EVENT_LIST_VIEW, '/events/:locale')
    ->setResourceKey(Event::RESOURCE_KEY)
    ->setListKey(self::EVENT_LIST_KEY)
    ->setTitle('app.events')
    ->addListAdapters(['table'])
    ->addLocales($locales)
    ->setDefaultLocale($locales[0])
    ->setAddView(static::EVENT_ADD_FORM_VIEW)
    ->setEditView(static::EVENT_EDIT_FORM_VIEW)
    ->addToolbarActions($listToolbarActions);
    $viewCollection->add($listView);
    

    View Slide

39. // src/Admin/EventAdmin.php
    class EventAdmin extends Admin
    {
    ...
    public function configureNavigationItems(NavigationItemCollection $navigationItemCollection): void
    {
    // Configure a NavigationItem without a Route
    $module = new NavigationItem('app.events');
    $module->setPosition(40);
    $module->setIcon('fa-calendar');
    // Configure a NavigationItem with a Route
    $events = new NavigationItem('app.events');
    $events->setPosition(10);
    $events->setMainRoute(static::EVENT_LIST_ROUTE);
    $module->addChild($events);
    $navigationItemCollection->add($module);
    }
    ...
    

    View Slide

40. Abstract field types
    – Almost every entity should have a
    selection for form assignments
    – Sulu includes an abstract `selection`
    and `single_selection` field type
    – This abstract field type can be
    configured by options such as
    resourceKey
    

    View Slide

41. # config/packages/sulu_admin.yaml
    sulu_admin:
    email: "%env(SULU_ADMIN_EMAIL)%"
    forms:
    directories:
    - "%kernel.project_dir%/config/forms"
    lists:
    directories:
    - "%kernel.project_dir%/config/lists"
    resources:
    events:
    routes:
    list: app.get_events
    detail: app.get_event
    field_type_options:
    selection:
    event_selection:
    default_type: list_overlay
    resource_key: events
    types:
    list_overlay:
    adapter: table
    list_key: events
    

    View Slide

42. View Slide

43. View Slide

44. Bring your own JavaScript.
    When you need more than Sulu provides out of the box.
    

    View Slide

45. Registries … FTW!
    – Lot of registries to hook into
    different places
    – Includes e.g. separate views, toolbar
    actions, form fields, …
    – React and JavaScript knowledge
    required to write them
    

    View Slide

46. Sulu 2.0
    Facts and Figures
    

    View Slide

47. Sulu 2.0
    Facts and Figures
    – Release date: 02.10.2019
    – 2,5 years - 7.600+ hours
    – ~720 pull requests
    – ~268.000 lines of code added
    – ~396.000 lines of code removed
    

    View Slide

48. Sulu is more than just a CMS
    Give it a try.
    

    View Slide

49. View Slide