Save 37% off PRO during our Black Friday Sale! »

Sulu 2.0 - bring your own business logic

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.

D6bc02afa30223e3acd9fdf512d82e2c?s=128

Thomas Schedler

September 26, 2019
Tweet

Transcript

  1. None
  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
  3. Who knows Sulu?

  4. Sulu CMS – Content Management Platform – Full-Stack Symfony –

    Made for businesses – Simple UI – High Performance – 100% Open Source
  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
  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)
  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
  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 …
  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
  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
  11. Bring your own business logic What does that mean?

  12. Bring your own business logic – Business websites are evolving

    into rich software applications, requiring ... – comprehensive integration – business logic – data management capabilities
  13. None
  14. None
  15. None
  16. One User Interface for all data management tasks? Less switching

    between different applications.
  17. Maybe the Sulu administration interface could be the ONE? We

    build beautiful UIs with a great UX.
  18. PHPCR DOCTRINE MySQL, PostgreSQL, Jackrabbit, ... Framework Symfony Symfony CMF

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

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

    CMF Contact Media Content ... Sulu
  21. Single-Page Application – Fast and responsive UI – Improved user

    experience – Only data is transmitted – Caching capabilities – Clean separation – REST API
  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
  23. “ Navigating the hype-driven frontend development world without going insane.

    Kitze
  24. Sulu 1.* Front-End Technologies

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

  26. Sulu 2.0 Front-End Technologies

  27. Making the front-end as extensible as the back-end. Without the

    need to write JavaScript!
  28. None
  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
  30. We XML

  31. I XML

  32. <!-- config/lists/events.xml --> <?xml version="1.0" ?> <list xmlns="http://schemas.sulu.io/list-builder/list"> <key>events</key> <joins

    name="translation"> <join> <entity-name>App\Entity\EventTranslation</entity-name> <field-name>App\Entity\Event.translations</field-name> <condition>App\Entity\EventTranslation.locale = :locale</condition> </join> </joins> ... <properties> <property name="id" visibility="no" translation="sulu_admin.id"> <field-name>id</field-name> <entity-name>App\Entity\Event</entity-name> </property> <property name="title" visibility="always" searchability="yes" translation="sulu_admin.title"> <field-name>title</field-name> <entity-name>App\Entity\EventTranslation</entity-name> <joins ref="translation"/> </property>
  33. <!-- config/form/event_detail.xml --> <?xml version="1.0" ?> <form 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/ form-1.0.xsd" > <key>event_details</key> <properties> <property name="title" type="text_line" mandatory="true" colspan="9"> <meta> <title>sulu_admin.title</title> </meta> </property> <property name="location" type="text_line" colspan="3"> <meta> <title>app.location</title> </meta> </property> <property name="teaser" type="text_area"> <meta> <title>app.teaser</title> </meta>
  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
  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() ); }
  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
  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
  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);
  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); } ...
  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
  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
  42. None
  43. None
  44. Bring your own JavaScript. When you need more than Sulu

    provides out of the box.
  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
  46. Sulu 2.0 Facts and Figures

  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
  48. Sulu is more than just a CMS Give it a

    try.
  49. None