Neos CMS - Das CMS der nächsten Generation - IPC 2015

Patrick Lobacher  
Vorstandsvorsitzender +Pluswerk AG
08.06.2015Neos CMS 
Next Generation CMS

Slides: www.lobacher.de/ipc15-neos

Responsive Webdesign verkaufen
(c) 2015 - Patrick Lobacher | Neos CMS - Next Generation CMS | www.pluswerk.ag | 08.06.2015
Neos CMS - Next Generation CMS
Patrick Lobacher 
Vorstandsvorsitzender +Pluswerk AG
• 44 Jahre, glücklich verheiratet, wohnhaft in
München
• Selbständig im Bereich Webentwicklung seit 1994
• Autor von 10 Fachbüchern und > 50 Fachartikeln
zum Thema TYPO3 und Webentwicklung
• Mitglied im TYPO3 Education Committee
• Speaker, Trainer, Consultant, Coach, Nerd
Veröffentlichungen:

Agentur für digitale Kommunikation 
 
+[ 10 ] Standorte in Deutschland
+[ 130 ] Mitarbeiter
+[ 999 ] realisierte Projekte mit Magento und TYPO3

TYPO3 Neos is the next-generation
open source content management
system made by the TYPO3
community. Neos is based on the
PHP framework TYPO3 Flow.

Die Geschichte von Neos CMS beginnt bei TYPO3 CMS
• TYPO3 CMS ist ein „Enterprise Open Source  
Content Management Framework“
• TYPO3 CMS existiert seit 1998
• Erfunden vom Dänen Kaspar Skårhøj
• ca. 500.000 Installationen weltweit / > 5 Mio Downloads
• Einsatz in DE z.B. bei > 50% aller DAX 500 Unternehmen, >
vielen Bundesliga-Vereinen, Discounter, Autovermieter,
Öffentliche Träger, …
• > 6.000 Extensions
• > 150.000 Entwickler weltweit
• > 2000 Agenturen weltweit
• Finanziert und unterstützt von der TYPO3 Association

Die Geschichte von TYPO3 Neos: TYPO3 Phoenix
• Rewrite im Jahr 2006 beschlossen
• Einige benötigte/gewünschten Features gab es damals in PHP
noch nicht und mussten komplett neu implementiert werden:
Content Repository (JSR-170), Aspect Oriented Programming,
Domain Driven Design, Dependency Injection, … => PHP
Framework TYPO3 Flow
• Am 20. Oktober 2011 wurde das Application Framework TYPO3
Flow (ehemals FLOW3) als Final veröffentlicht (Aktuell 3.0.0b3)
• TYPO3 Neos ist eine Applikation die auf TYPO3 Flow basiert
• Erste Version 1.0.0 von Neos am 10.12.2013
• Aktuell 2.0 beta 3 vom 05.06.2015

TYPO3 Neos: Positionierung 
• Es gab ab Dezember 2013 zwei unabhängige CMS aus dem Hause
TYPO3:
• TYPO3 CMS
• TYPO3 Neos
• Technologisch haben beide (fast) NICHTS miteinander zu tun
• Es gibt (zur Zeit) KEINE automatische Migrationsmöglichkeiten von
einem der beiden Systeme zum anderen
• TYPO3 Neos ist NICHT der Nachfolger von TYPO3 CMS,  
sondern ein eigenständiges CMS mit anderem Fokus

https://entwickler.de/online/php/neos-und-typo3-haben-sich-zu-unterschiedlichen-produkten-entwickelt-149682.html
https://entwickler.de/online/wir-stehen-am-anfang-eines-dialogs-der-hilft-diesen-split-gut-zu-machen-149664.html

Quelle: neos.typo3.org

Backend-Sprachen (zum Start ca. 10 Sprachen)
https://crowdin.com/project/typo3-neos

Event-Log (Änderungsverlauf)

SEO Package 
• Canonical
• Title-Override
• Robots-Meta
• Twitter-Cards
• (OpenGraph)
• Automatische  
Generierung von 
Links zu  
alternativen  
Sprachversionen
• XML-Sitemap

Analytics Package 
 
 
Google 
Analytics

Media Verwaltung

Security 2.0 / Basis ACLs 
• Komplettes Ausblenden von Teilen des Node-Trees
• Schutz von beliebigen Methoden-Aufrufen
• Deﬁnition der Sichtbarkeit von beliebigen Elementen in
Abhängigkeit des authentiﬁzierten Benutzers
• Einschränkung der Anzeige von Backend Modulen
• Einschränkung, welche TYPO3CR Node Types erzeugt werden
dürfenx
• Einschränkung des Bearbeitens von Teilen des Node-Trees
• Einschränkung der Anzeige von Eigenschaften im Property
Inspektor
• Neue Abfragen : isDescendantNodeOf, nodeIsOfType,
hasDimensionValue

Was ist neu in Neos CMS 2.0?
• Überarbeitete Benutzerverwaltung
• Neues Resource-Management
• 400 Fehlerbehebungen alleine bei Neos (zahlreiche weitere bei Flow)
• Erhöhung der Performance
• Globale Cache Indentiﬁer
• Verbessertes Setup
• Weitere Fizzle Operatoren
• Reihenfolge der ChildNodes kann festgelegt werden
• eigene Doctrine-Types möglich
• HHVM Kompatibilität
• ab sofort wird PHP 5.5 vorausgesetzt

Ausblick auf Neos 2015
• Content Repository Improvements (Sorting, Filtering, Event Sourcing
CQRS, Undo, Redo, Soft Deletion)
• Verbesserung der Demo-Site (Neues Design, Mehr Beispiele, Blog
Integration)
• Multi Channel Support (Content Dimension Detection API, A/B Testing,
Content Publishing API)
• Redirects
• Multi-Site Support (Cross-Site Linking, Site Independent Conﬁguration)
• “Red Carpet” (Docker Setup, Dokumentation, No CLI, Shared Hosting
Support, Einfachere Installation)

Ausblick auf Neos 2015
• Developer Tools (Loggin Module, Command Module, TypoScript Browser/
Debugger, Node Type Creator)
• Structured Editing (Inline Validation, Inline Help Texts, Inline Editing of
Images)
• Publishing Workﬂow
• Verbesserung der User Experience
• Verbesserung der Content-Übersetzung (Split View, Review Workﬂow)
• Integration externer Services (External API, Flickr, Vimeo, OneDrive,
Dropbox, YouTube, Google Drive, …)
• Bessere Content-Vorschau
• Community Hub (für Dokumentation, Tipps, Snippets, Guides, Tutorials,
Roadmap, Blog, …)

Systemvoraussetzungen von TYPO3 Neos
• Webserver (Apache, Nginx)
• Datenbank (Doctrine-Unterstützung, am besten MySQL)
• PHP > 5.5 (CLI und Modul)
• Shell-Zugang

Installation von TYPO3 Neos - Composer
• Die Installation erfolgt über „Composer“  
(Dependency Manager für PHP)
• Dafür ist Zugang zur Konsole nötig 
 
$ cd /pfad/zum/webserver/ 
$ curl -sS https://getcomposer.org/installer | php 
 
$ composer create-project typo3/neos-base-
distribution myneos ~2.0  
$ cd myneos 
 
$ ./flow flow:core:setfilepermissions shelluser
wwwuser wwwgroup 
 
http://neos.demo/setup/

http://www.codecoon.com

https://launchr.com/typo3-neos

http://neos-master.demo.typo3.org/en/try-me.html

Die Architektur von TYPO3 Neos - Backend
 
Fluid 
Modern Templating Engine 
TYPO3CR 
Content Repository  
(JCR 170/ Sling) 
 
TypoScript 
TypoScript 2.0 
Form 
Form API & Form Builder 
 
Expose 
Extensible admin interface 
 
Eel 
Embedded Expression
Language 
FlowQuery

Die Architektur von TYPO3 Neos - Frontend
 
EmberJS 
JavaScript Web Application
Framework 
Create.js 
Web Editing Interface 
 
Aloha / Hallo 
HTML5 WYSIWYG Editor 
VIE = viejs.org 
Semantic Interaction
Framework 
 
RequireJS 
JavaScript ﬁle and module
loader

TYPO3 Flow - Web Application Framework
• OOP - Object-Oriented Programming
• TDD - Test Driven Development
• DDD - Domain Driven Design (Eric Evans)
• MVC - Model, View, Controller
• AOP - Aspect Oriented Programming  
(Separation of Concerns, Cross cutting
concerns)
• DI - Dependency Injection
• ORM - Object Relational Mapping  
(basierend auf Doctrine 2, eigenes ORM
möglich)
Achtung: 
Buzzword-
Bingo :-)

Node Structure
• TYPO3CR Node
• Node Name 
(dient der Identiﬁkation)
• Node Type 
(z.B. Document, Folder, AbstractNode, Content,  
ContentCollection...)
• Properties 
(Abhängig vom NodeType) 
• Einfach erweiterbar und leicht 
konﬁgurierbar
Page
Content Section
Content Element
Site root
Domain Model

Node Type
• Jede TYPO3CR Node hat einen  
sogenannten Node Type
• Node Types können in jedem Package
über YAML (YAML Ain't Markup Language)
definiert werden
• Jeder Node Type kann einen oder  
mehrere Eltern-Typen haben. Wenn  
diese spezifiziert sind, werden alle
Eigenschaften und Settings der Eltern  
Types vererbt
• Zusätzlich ist es möglich Child-Nodes zu
definieren, die automatisch erstellt
werden

Node Zugriff
• Der Zugriff auf Nodes erfolgt durch „NodePaths“
• Jede Seite ist ein Node, jedes Element auf einer Seite ebenfalls
/sites/typo3org/home/subpage/main/text1
content
section
pages
site root

Fluid
Objektorientierte Templating Engine (CMS, Flow, Neos)

TypoScript
• TypoScript ist eine hierarchische, objektorientierte und Prototypen-
basierte Verarbeitungssprache
• Wird von Neos verwendet, um den Content ﬂexibel zu rendern
• Objekte sind z.B. Array, Collection, Case, Menu, Page, Template, Plugin,
Value, ...
• Objekte haben Eigenschaften, die das Objekt „konﬁgurieren“
• TypoScript hat Zugriff auf den jeweiligen „Context“ (z.B. Seitenbaum im
Objekt „menu“ oder Seiteneigenschaften im Objekt „page“)
• Es gibt „Prozessoren“ die die Eigenschaftswerte verändern können
(ähnlich stdWrap-Funktionen in TYPO3 CMS)

Eel - Embedded Expression Language 
•Während TypoScript Zuweisungen und Prozessoren beinhaltet, kann man
mit Eel Ausdrücke der Art  
 
myObject.foo = ${…}  
 
formulieren
•Die Embedded Expression Language (Eel) ist ein Baustein um Domain
Speciﬁc Languages (DSL) zu erstellen.
•Eel stellt eine reichhaltige Syntax zur Verfügung um beliebige
Ausdrücke zu erstellen, damit sich der Autor der DSL auf die Semantik
konzentrieren kann
•Eel ist in Anlehnung an JavaScript (Subset) realisiert worden

Eel - Embedded Expression Language 
${String.substr("Hello world!", 6, 5)}
${String.toUpperCase(value)}
${Date.year(Date.now())}
 
${(value ? value + ' - ' : '') + 'TYPO3 Neos'} 
 
${'item' + (carouselItemsIteration.isFirst ? '
active' : '')} 
 
${'col-sm-' +
String.split(q(node).parent().property('layout'),
'-')[multiColumnIteration.index]}

FlowQuery 
• FlowQuery ist eine Art jQuery für das Content Repository
• FlowQuery stellt damit einen Weg dar, um Content (der ja eine TYPO3CR
Node in Neos ist) in Eel zu verarbeiten
• FlowQuery Operationen werden durch PHP-Klassen realisiert
• In FlowQuery gibt es Operationen (property, ﬁlter, children, parents,
count, …) und einen Kontext (Node, Site, DocumentNode, …)
• FlowQuery ist beliebig erweiterbar

Quelle: http://learn-neos.com/
FlowQuery
 
TypoScript: 
page = Template {
templatePath = 'Main.html'
node = ${node}
childNodes = ${q(node).find('main').children()}
} 
 
Template: 
<html>
<title>{node.properties.title}</title>
<body>
<h1>{node.properties.title}</h1>
<f:for each="{childNodes}" as="childNode">
<h2>{childNode.properties.title}</h2>
<p>{childNode.properties.text}</p>
</f:for>
</body>
</html>

FlowQuery 
TypoScript: 
prototype(TYPO3.Neos:BreadcrumbMenu) < prototype(TYPO3.Neos:Menu) {
templatePath = 'resource://TYPO3.Neos/Private/Templates/TypoScriptObjects/
BreadcrumbMenu.html'
itemCollection = ${q(node).add(q(node).parents('[instanceof
TYPO3.Neos:Document]')).get()}
attributes.class = 'breadcrumb'
} 
Template: 
{namespace neos=TYPO3NeosViewHelpers}
<f:if condition="{items}">
<ul{attributes -> f:format.raw()}>
<f:for each="{items}" as="item" reverse="TRUE">
<li{ts:render(path:'{item.state}.attributes') -> f:format.raw()}>
<f:if condition="{item.state} == 'current'"><f:then>{item.label}</f:then> 
<f:else><neos:link.node node="{item.node}">{item.label}</
neos:link.node></f:else>
</f:if> 
</li> 
</f:for> 
</ul>
</f:if>

Konzepte: Content-Dimension 
Sprache de en fr
Land DE US CH
Multi-Varianten A B C
Ziel-Gruppen Marketing Vertrieb GF
Personalisierung User1 User2 User3
Location based, Time-Zone, Channel, Device,…

Konzepte: Content Cache 
• Jedes TypoScript-Objekt 
kann seine eigene Cache 
Konﬁguration besitzen
• @cache { 
mode = 'cached' 
maximumLifetime = '86400' 
entryIdentifier { 
node = ${node} 
format = ${request.format} 
} 
entryTags { 
# Whenever the node changes the matched condition could change 
1 = ${'Node_' + documentNode.identifier} 
# Whenever one of the parent nodes changes the layout could change 
2 = ${'DescendantOf_' + documentNode.identifier} 
} 
}

Konzepte: Editing / Preview Modes

Showcases 
 
http://neos.typo3.org/show-cases.html

Das TYPO3 Neos Kompendium
Über 360 Seiten zu allen  
Aspekten von TYPO3 Neos
• Installation
• Konﬁguration
• Architektur
• FAQ
• Integration
• Entwicklung
www.lobacher.de/neoskompendium
de.slideshare.net/
plobacher/typo3-neos-das-
kompendium

Das TYPO3 Neos Buch
Fake 
Cover!
Verlag: O’Reilly 
Umfang: ca. 450
VÖ: Ende Juli / 2015

Quellen und Informationen
• TYPO3 Neos Website 
http://neos.io/ 
• TYPO3 Neos Download 
http://neos.typo3.org/download.html 
• TYPO3 Flow Website 
http://flow.typo3.org/ 
• TYPO3 Neos Dokumentation 
http://docs.typo3.org/neos/TYPO3NeosDocumentation/Index.html 
• TYPO3 Flow Dokumentation 
http://flow.typo3.org/documentation.html

• TYPO3 Neos & TYPO3 Flow Bugtracker 
https://jira.typo3.org 
• Cheatsheet für Fluid 
http://www.lobacher.de/files/cs/
FluidCheatSheet_3.02_pluswerk.pdf

• Learn Neos  
http://www.learn-neos.com
• TypoScript 2 Pocket Reference 
http://learn-neos.com/reference/pocket-reference-
typoscript2.html 
• GitHub Account von Lelesys (Pankaj Lele / http://www.lelesys.com/) 
https://github.com/lelesys 
• IRC Log vom Channel #typo3-neos bei Freenode 
http://riesvantwisk.com/cms/home/irc-logs/typo3-neos-irc-
log.html

Installations-Alternativen und Hilfen 
• TYPO3 Neos Vagrant Box 
https://github.com/tlayh/vagrant-typo3neos
• TYPO3 Neos Installation auf Mac OS X Snow Leopard und MAMP 
http://www.content-driven-ecommerce.de/typo3-neos-install/
• .git ignore File 
https://git.typo3.org/Neos/Distributions/Base.git/blob/
HEAD:/.gitignore
• Launchr (TYPO3 Neos Online testen) 
https://launchr.com/
• Mittwald Hosting - 30 Tage TYPO3 Neos Account 
https://www.mittwald.de/neos-testen/
• Manuelle Installation von jweiland.net 
http://jweiland.net/typo3/neos/neos-installation/manuelle-neos-
installation.html
• Installation auf einen Shared Hosting (Hostshare) 
https://wiki.hostsharing.net/index.php?title=TYPO3_Neos_installieren

TYPO3 Neos Schulungen 
 
Termine:
29.-30.06.2015 / Hamburg 
27.-28.07.2015 / München 
20.-21.08.2015 / Frankfurt 
10.-11.09.2015 / München
22.-23.10.2015 / Hamburg 
12.-13.11.2015 / München 
Infos: patrick.lobacher@pluswerk.ag / @PatrickLobacher 
http://www.plus-werk.com/typo3-neos-intensivschulung.html

Komme ins TYPO3 Neos Team
• Komme ins TYPO3 Neos und  
Flow Team! 
• Jeder wird gebraucht: Programmierer,  
Architekten, UX-Experten, Designer, 
Doku, Tester, JS-Spezialisten, ... 
• Meldet Euch bei robert [at] typo3.org

Kunden gesucht!
• Direkte Mitarbeit
• Gebe frühes Feedback zu neuen Funktionen, User Interfaces, ...
• Direkter Kontakt und Diskussion mit den Entwicklern
• Sofern sinnvoll, wird das Feedback unmittelbar umgesetzt
• Vorteile
• Gestalte das WCMS der Zukunft direkt mit
• Nimm Einﬂuss auf die Entwicklung
• Zugang zu Entwicklern, Architekten und UX‘lern
• Networking mit anderen Neos-Kunden 
• Kontakt
• rasmus [at] typo3.org
• TYPO3 Neos Agentur (pluswerk, techdivision, networkteam, …)

Fragen?
Slides: www.lobacher.de/ipc15-neos

Besten Dank für Eure
Aufmerksamkeit! 
 
pluswerk.ag

Kontakt
Klassisch: 
 
+Pluswerk AG 
Patrick Lobacher 
Solmstr. 6A 
60486 Frankfurt am Main 
 
Fon: +49 89 130 145 20 
 
Email: patrick.lobacher@pluswerk.ag 
Web: www.pluswerk.ag
 
 
 
Twitter:  
www.twitter.com/PatrickLobacher 
 
Facebook:  
www.facebook.com/pluswerk 
 
Blog:
blog.lobacher.de
 
Schulungen:
www.lobacher.de 
 
Google+: 
plus.google.com/105500420878314068694 
 
 
 
XING:  
www.xing.com/proﬁle/Patrick_Lobacher 
 
LinkedIn 
www.linkedin.com/pub/patrick-lobacher/
4/881/171 
 
Slideshare:  
www.slideshare.net/plobacher 
 
Amazon:  
www.amazon.de/Patrick-Lobacher/e/
B0045AQVEA

Referenzen (Auszug: +Pluswerk/net-o-graphic/typofaktum/typovision)

Neos CMS - Das CMS der nächsten Generation - IPC 2015

Weitere ähnliche Inhalte

Was ist angesagt? (19)

Andere mochten auch (20)

Mehr von die.agilen GmbH (20)

Neos CMS - Das CMS der nächsten Generation - IPC 2015