TYPO3 Backstage Development

TYPO3 Backstage Development Oliver Hader 05/2016

BackstageDevelopment

May 7th, 2016


• living in Hof (Bavaria, Germany)

• is Freelance Software Engineer

• TYPO3 Core Developer since 2007

• studying at University of Applied Sciences Hof

• in the past release manage & core team leader

whois oliver.hader


• Backend Apps ~integration & user experience

• Messaging & Job Queue ~system & development

• Event Sourcing ~system & development

Overview


• for editors

• dealing with News, Events, Products

• focus on a single task at a time

• for developers & integrators

• boilerplate code in backend modules

• configuration over implementation

Backend Apps ~scope


• research & development in 2015

• master thesis by Andreas Steiger

• analyzing user actions & tasks

• analyzing other products & solutions

• defining components & concepts

Backend Apps ~history


• reusable

• tree components

• filter components

• toolbar components

• results & preview

• custom components

Backend Apps ~components

Source: Andreas Steiger, Master Thesis


• DRY & NIH phenomenon

• configuration over implementation

• defined & extensible vocabulary

• YAML, JSON, XML, PHP, …

• compare it to TCA… somehow

Backend Apps ~configuration


• components as in Web Components?

• which technology to choose?

• native HTML5 Web Components

• Angular2 ~2.0.0-RC1 in May 2016

• Polymer ~1.4.0 in March 2016

Backend Apps ~technology


• Templates

• Imports

• Custom Elements

• Shadow DOM

Web Components ~overview

Source: http://webcomponents.org

http://webcomponents.org


<head>… <link rel="import" href="my-‐component.html">… </head><body> <my-‐component text="Some text..." class="css-‐class"></my-‐…> </body>

Web Components ~markup

<template> <div> <h1>{{text}}</h1>…<hr>… </div></template><script> var MyComponent = document.registerElement('my-‐component'); </script>

index.html

my-component.html


• thesis

• http://t3app.steiger.webseiten.cc/Masterarbeit_Andreas_Steiger.pdf

• prototype

• http://t3app.steiger.webseiten.cc/start_app.html

• further discussion

• https://wiki.typo3.org/Blueprints/ContentModule

Backend Apps ~resources

http://t3app.steiger.webseiten.cc/Masterarbeit_Andreas_Steiger.pdf

http://t3app.steiger.webseiten.cc/start_app.html

https://wiki.typo3.org/Blueprints/ContentModule


• defer actions that take ”longer”

• split tasks into smaller chunks

• trigger immediate actions

• related to commands in general

• distribute, delegate, transport

Job Queue ~scope


• Producer & Consumer

• different phases

• single & direct queue

• publish & subscribe pattern

• remote procedure call

• AMQP, MQTT, RabbitMQ, …

Job Queue ~technology

Source: https://www.rabbitmq.com/getstarted.html

https://www.rabbitmq.com/getstarted.html


• one task is split into chunks

• one chunk has sub-chunks

• chunks can be nested

• future / promise pattern in PHP

• asynchronous processing

• non-blocking processing

Job Queue ~chunking

Task #3

Chunk A

Chunk B

Chunk B.1 Chunk B.2

Chunk C


• newsletter delivery

• execute upgrade wizards

• cloning elements & pages

• generate many thumbnails

• perform data encryption

• apply event sourcing application state

Job Queue ~use cases


• master thesis by Dustin Kinney

• analyzing protocols & solutions

• prototype focussed on jobs & tasks

• ad-hoc & CLI workers

• concept for sophisticated messaging

• daemons & distributed workers

Job Queue ~next:2016


• replace protocol and history in TYPO3

• record reliable events

• apply and replay series of events

• application state for any time

• evaluate, measure & define

• overcome overlaying flaws

Event Sourcing ~scope


Event Sourcing ~current

uid pid sorting sys_lang l18n_parent t3ver_wsid t3ver_state t3ver_oid header296 88 256 0 0 0 0 0 Regular Element #0297 89 256 0 0 0 0 0 Regular Element #1298 89 512 0 0 0 0 0 Regular Element #2299 89 768 0 0 0 0 0 Regular Element #3

300 89 1024 1 299 0 0 0[Translate to Dansk:] Regular Element #3

302 89 640 1 298 1 1 0[Translate to Dansk:] Regular Element #2

303 -1 640 1 298 1 -1 302[Translate to Dansk:] Regular Element #2

301 -1 512 0 0 2 2 298 Regular Element #2

• translation of available content in workspace


Event Sourcing ~current

123

Workspaceversion?

136

149

Localizationto fr_FR?

MovePlaceholder?

135

Workspaceversion?

152

151 MovePlaceholder?

155

Localizationto fr_CA?

164Languagefallback?

Workspaceversion…

one (1!)record

LiveRecord


• design pattern by Martin Fowler

• currently final application state only

• no information on how to get there

• only persist events that happened

• apply events to create application state

• … any time, on any target system

Event Sourcing ~technology


Event Sourcing ~technology

Source: http://martinfowler.com/eaaDev/EventSourcing.html

http://martinfowler.com/eaaDev/EventSourcing.html


• Command Query Response Segregation

• design pattern by Greg Young

• separate domain logic

• read data (response)

• write data (command)

• introduces more complexity

Event Sourcing ~CQRS


Event Sourcing ~CQRS

Source: http://martinfowler.com/bliki/CQRS.html

http://martinfowler.com/bliki/CQRS.html


Event Sourcing ~exampleRevision Event Status

1 created “tt_content uid: 12

2 hidden “tt_content:123 uid: 123 hidden:

3 updated “tt_content:123”{ “title”: “Some record” }

uid: 123 hidden: 1 title: “Some record

4 moved “tt_content:123”{ “to”: “top” }

uid: 123 hidden: 1 sorting: 0 title: “Some record


Revision Event Status

5 forked “tt_content:123”{ “workspace”: 1 }

uid: 123 t3ver_wsid: 1 hidden: 1 sorting: 0 title: “Some record

6 updated “tt_content:123”{ “workspace”: 1, “title”: “Changed” }

uid: 123 t3ver_wsid: 1 hidden: 1 sorting: 0 title: “Changed

7 unhidden “tt_content:123 uid: 123 hidden: 0 sorting: 0 title: “Some record

8 merged “tt_content:123”{ “workspace”: 1 }

uid: 123 hidden: 0 sorting: 0 title: “Changed


Event Sourcing ~projections


• master thesis by Oliver Hader

• analyzing patterns & solutions

• define events and types for TYPO3 context

• introduce event sourcing & logging

• introduce application state behavior

• concept about ”TYPO3 Time Machine”

Event Sourcing ~next:2016


Thank you!

ohader

@ohader

Oliver_Hader

follow me

https://twitter.com/@ohader






https://www.xing.com/profile/Oliver_Hader






https://github.com/ohader






http://www.apple.com/de/



TYPO3 Backstage Development

Technology

Transcript of TYPO3 Backstage Development