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

Sulu 2.0 - Workshop Symfony Live Berlin 2019

Sulu 2.0 - Workshop Symfony Live Berlin 2019

D6bc02afa30223e3acd9fdf512d82e2c?s=128

Thomas Schedler

September 25, 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 – 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. Getting Started The basic architecture and concepts of Sulu.

  12. PHPCR DOCTRINE MySQL, PostgreSQL, Jackrabbit, ... Framework Symfony Symfony CMF

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

    CMF Contact Media Content ... Sulu
  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. <!-- 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"/> </localizations> ... <portals> <portal> <name>example.com</name> <key>example</key> <environments> <environment type="prod"> <urls> <url>{host}/{localization}</url>
  17. Templates & Content Types – The structure of the page

    – How that structure is rendered – Each page template is defined by two files: – an XML file that contains the page structure – a Twig file that contains the HTML code – A page structure consists of properties, each of which has a content type
  18. <!-- 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"/>
  19. {# templates/pages/default.html.twig #} {% extends "base.html.twig" %} {% block content

    %} <h1>{{ content.title }}</h1> {{ content.article|raw }} {% endblock %}
  20. None
  21. Media management – Centralised repository for documents, images etc. –

    Independent management of folder hierarchies – Multi-language support for documents – Management of metadata – Asset versioning – Image cropping
  22. <!-- config/webspaces/example.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 %}
  23. Bring your own business logic Sulu is more than just

    a CMS.
  24. Sulu Administration Interface Single-Page Application – Fast and responsive UI

    – Improved user experience – Only data is transmitted back and forth – Caching capabilities – Clean separation – REST API
  25. Sulu Administration Interface 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
  26. Making the front-end as extensible as the back-end. Without the

    need to write JavaScript!
  27. Front-End Technologies

  28. Front-End Architecture

  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. <!-- 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>
  31. <!-- 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>
  32. 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
  33. // src/Controller/Admin/EventController.php class EventController extends RestController implements ClassResourceInterface { ...

    public function cgetAction(Request $request): Response { $locale = $request->query->get(‚locale'); $listRepresentation = $this->doctrineListRepresentationFactory ->createDoctrineListRepresentation( Event::RESOURCE_KEY, [], ['locale' => $locale] ); return $this->handleView($this->view($listRepresentation)); } public function getAction(int $id, Request $request): Response { $entity = $this->load($id, $request); if (!$entity) { throw new NotFoundHttpException(); }
  34. # 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
  35. 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
  36. // 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);
  37. // 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); } ...
  38. 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
  39. # 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
  40. Bring your own JavaScript. When you need more than Sulu

    standard views.
  41. 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
  42. None