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

TYPO3 Template Engine Integration Explained

TYPO3 Template Engine Integration Explained

When it comes to rendering content, TYPO3 is extremely flexible. You have to search a long time for a system that offers something comparable. With TypoScript and Fluid, we have endless possibilities to render the content exactly as we need it.

We take a closer look at what is normally taken for granted. How does TYPO3 render content and what possibilities do we have to customize it? This talk is not about how to write especially nice fluid templates. You will learn how the Fluid-Template Engine is integrated into TYPO3 and how to integrate your own Template Engine into TYPO3. We will integrate Twig because we can.

Benjamin Kott

August 01, 2019
Tweet

More Decks by Benjamin Kott

Other Decks in Programming

Transcript

  1. TEMPLATE
    ENGINE
    INTEGRATION
    TYPO3
    [email protected]
    @typo3
    August 1st, 2019
    Karlsruhe, Germany

    View full-size slide

  2. BENJAMIN
    KOTT
     Developer Advocate
     Consultant
     UI/UX Lead
    @benjaminkott
    [email protected]

    View full-size slide

  3. WARNING:
    THERE WILL BE CODE!
    I WILL SPEAK FAST!
    IT WILL BE RECORDED!
    QUESTIONS AT THE END!

    View full-size slide

  4. 1. Engine Definition
    2. Examples
    3. Portability
    4. Integration
    5. Twig in TYPO3
    6. Summary
    7. Q&A

    View full-size slide

  5. DEFINITION
    A template engine is software designed to combine templates with
    a data model to produce result documents. The language that the
    templates are written in is known as a template language
    or templating language.
    A template engine is ordinarily included as a part of a web template
    system or application framework and may be used also as
    a preprocessor or filter.
    - Wikipedia - https://en.wikipedia.org/wiki/Template_processor

    View full-size slide

  6. Blade
    Laravel
    Twig
    Symfony
    Fluid
    TYPO3

    View full-size slide

  7. IMAGINE TYPO3
    WOULD USE TWIG…

    View full-size slide

  8. IMAGINE YOU COULD
    NOW SHARE TEMPLATES
    BETWEEN YOUR
    PATTERNLAB, SYMFONY,
    DRUPAL AND TYPO3!

    View full-size slide

  9. YOUR FAVORITE
    TEMPLATE ENGINE IS
    NOT AS PORTABLE AS
    YOU MAY THINK.

    View full-size slide

  10. FLAVORED ENGINES
    SYSTEM SPECIFIC
    FUNCTIONS

    View full-size slide

  11. TWIG
    Tags
    apply
    autoescape
    block
    deprecated
    do
    embed
    extends
    flush
    for
    from
    if
    import
    include
    macro
    sandbox
    set
    use
    verbatim
    With
    Filters
    abs
    batch
    capitalize
    column
    convert_encoding
    date
    date_modify
    default
    escape
    filter
    first
    format
    inky
    inline_css
    join
    json_encode
    keys
    last
    length
    lower
    map
    markdown
    merge
    nl2br
    number_format
    raw
    reduce
    replace
    reverse
    round
    slice
    sort
    spaceless
    split
    striptags
    title
    trim
    upper
    url_encode
    Functions
    attribute
    block
    constant
    cycle
    date
    dump
    include
    max
    min
    parent
    random
    range
    source
    template_from_string
    Tests
    constant
    defined
    divisibleby
    empty
    even
    iterable
    null
    odd
    sameas

    View full-size slide

  12. TWIG – SYMFONY
    Tags
    form_theme
    stopwatch
    trans
    trans_default_domain
    Transchoice
    Filters
    abbr_class
    abbr_method
    file_excerpt
    file_link
    file_relative
    format_args
    format_args_as_text
    format_file
    format_file_from_text
    humanize
    trans
    transchoice
    yaml_dump
    yaml_encode
    Functions
    absolute_url
    asset
    asset_version
    controller
    csrf_token
    expression
    form
    form_end
    form_errors
    form_help
    form_label
    form_rest
    form_row
    form_start
    form_widget
    is_granted
    logout_path
    logout_url
    path
    relative_path
    render
    render_esi
    url
    Tests
    rootform
    selectedchoice

    View full-size slide

  13. TWIG – DRUPAL
    Filter
    t
    trans
    placeholder
    drupal_escape
    safe_join
    without
    clean_class
    clean_id
    render
    format_date
    Functions
    render_var
    url
    path
    link
    file_url
    attach_library
    active_theme_path
    active_theme
    create_attribute

    View full-size slide

  14. SYMFONY TWIG
    !=
    DRUPAL TWIG

    View full-size slide

  15. YOU CAN NOT REUSE YOUR
    TEMPLATES OUTSIDE THE
    SYSTEM THEY HAVE BEEN
    BUILT FOR. FLAVOR AND
    NECESSARY EXTENSIONS
    ARE DESTROYING
    PORTABILITY.

    View full-size slide

  16. WHAT WOULD BREAK?
     Text formatting
     Date strings
     Forms
     Links
     Images
     Media
    … anything that is flavored.

    View full-size slide

  17. TYPO3
    RENDERING

    View full-size slide

  18. FLUIDTEMPLATE
    IS A TYPOSCRIPT
    EXTENSION

    View full-size slide

  19. JUST RETURN
    A STRING

    View full-size slide

  20. EXTBASE DEFAULT VIEWS
     TYPO3\CMS\Extbase\Mvc\View\EmptyView
     TYPO3\CMS\Extbase\Mvc\View\JsonView
     TYPO3\CMS\Extbase\Mvc\View\NotFoundView
    Extbase does not ship a FluidView

    View full-size slide

  21. YOU CANNOT CHANGE
    THE DEFAULT VIEW FOR
    EVERYTHING.
    THAT’S A GOOD THING!

    View full-size slide

  22. YOU CAN CHANGE IT FOR
    YOUR OWN EXTENSIONS TO
    ANY VIEW YOU WANT, AS
    LONG IT IS IMPLEMENTING
    THE VIEWINTERFACE.

    View full-size slide

  23. EVERYONE ELSE
    IS ON ITS OWN.
    JUST RETURN
    A STRING.

    View full-size slide

  24. LET´S ADD
    TWIG TO
    THE STACK.

    View full-size slide

  25. ADDING TWIG
    1. Register new cObject
    2. Build a new StandaloneView
    3. Build a new ExtbaseView
    4. Implement Twig
    5. Rebuild Page
    6. Rebuild Content Elements
    7. Rebuild all the Flavor

    View full-size slide

  26. CACHE
    USING THE TYPO3 CACHING FRAMEWORK

    View full-size slide

  27. LOADER
    TEMPLATES, PARTIALS, LAYOUTS AND MORE

    View full-size slide

  28. ONLY THE TWIG
    FILESYSTEM-LOADER
    HAS SUPPORT FOR
    NAMESPACES

    View full-size slide

  29. CONNECTING
    EVERYTHING

    View full-size slide

  30. 120 FILES AND
    5,600 LINES OF
    CODE LATER

    View full-size slide

  31. LEARNINGS
     Any Template Engine possible
     Multiple Template Engines at once
     Easy to implement it yourself

    View full-size slide

  32. QUESTIONS?
    BENJAMIN
    KOTT
    @benjaminkott
    [email protected]

    View full-size slide