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

Sulu 2.0 - Workshop Symfony Live Berlin 2019

Sulu 2.0 - Workshop Symfony Live Berlin 2019

Thomas Schedler

September 25, 2019
Tweet

More Decks by Thomas Schedler

Other Decks in Programming

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
    [email protected]
    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
    – 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. Getting Started
    The basic architecture and concepts of Sulu.

    View Slide

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

    View Slide

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

    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. View Slide

  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

    View Slide



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

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

    View Slide

  20. View Slide

  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

    View Slide

  22. View Slide

  23. Bring your own business logic
    Sulu is more than just a CMS.

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  27. Front-End Technologies

    View Slide

  28. Front-End Architecture

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


    App\Entity\EventTranslation
    App\Entity\Event.translations
    App\Entity\EventTranslation.locale = :locale


    ...


    id
    App\Entity\Event


    title
    App\Entity\EventTranslation


    View Slide



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

  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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  40. Bring your own JavaScript.
    When you need more than Sulu standard views.

    View Slide

  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

    View Slide

  42. View Slide