TYPO3 Neos - Next Generation CMS - DWX 2014

TYPO3 Neos 
Next Generation CMS 
 
Patrick Lobacher  
GF +Pluswerk GmbH
16.07.2014

Responsive Webdesign verkaufen
(c) 2014 - Patrick Lobacher | TYPO3 Neos - Next Generation CMS | www.plus-werk.com | 16.07.2014
TYPO3 Neos - Next Generation CMS ]
Patrick Lobacher 
Geschäftsführer +Pluswerk GmbH
• 43 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 
 
+[ 9 ] Standorte in Deutschland
+[ 110 ] Mitarbeiter
+[ 999 ] realisierte Projekte mit Magento und TYPO3

Agenda
• Was ist TYPO3 Neos?
• Features
• Konzepte
• Architektur & Internas
• Showcases
• Links
TYPO3 Neos - Next Generation CMS
Slides: www.lobacher.de/dwx14-neos

Die Geschichte von TYPO3 Neos 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, > 50% aller
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
!
• Auf den ersten T3DD (TYPO3 Developer Days) im Jahr 2006 wurde der
Entschluss gefasst, TYPO3 von Grund auf neu zu schreiben
• Codename: TYPO3 Phoenix (bzw. TYPO3 5.0)
• 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, ...
• Mit dem „Berlin Manifesto“ wurde 2008 der Rahmen und die Abgrenzung
zum TYPO3 CMS festgelegt 
http://typo3.org/roadmap/berlin-manifesto/

Die Geschichte von TYPO3 Neos: TYPO3 Flow und Neos
!
• Viele Grundfunktionen eines CMS sind nicht CMS-speziﬁsch (Session-
Handling, Datenbank-Handling, Templating, ...) => daher Trennung dieser
Funktionalitäten in ein eigenes Framework => TYPO3 Flow
• Durch die Einführung von Extbase im Jahr 2009 wurde es möglich, bereits
in TYPO3 CMS Extensions zu schreiben, die in TYPO3 Flow mit geringen
Änderungen lauffähig sind
• Am 20. Oktober 2011 wurde das Application Framework TYPO3 Flow
(ehemals FLOW3) als Final veröffentlicht (Aktuell 2.2.0)
• TYPO3 Neos ist eine Applikation die auf TYPO3 Flow basiert
• Erste Version 1.0.0 am 10.12.2013 / Aktuell 1.1.0 am 19.06.2014

Die TYPO3 Welt 
• Dachmarke TYPO3 
• TYPO3 CMS 
(hat kein eigenes Logos)
• TYPO3 Flow
• TYPO3 Neos

TYPO3 Neos: Positionierung 
• Es gibt ab Dezember 2013 zwei unabhängige CMS aus dem Hause TYPO3:
• TYPO3 CMS 6.x (4.7, 6.1, 6.2 LTS)
• TYPO3 Neos 1.x (1.1)
• Technologisch haben beide 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

Quelle: neos.typo3.org

Was fehlt bisher noch? 
• ACL (1.2)
• Backend-Übersetzung (momentan in englisch)
• Node-Restrictions (1.2)
• Gemeinsame Workspaces & Workﬂows
• Repository (Plugins, NodeTypes, ViewHelper)
• Mehrspachigkeit (Funktionalität vorhanden, UI in 1.2)
• Formbuilder (Verwendung von Forms möglich)
• SEO Build-In (Leicht nachzurüsten)
• Digital Asset Management (es gibt einen Media-Browser)
!

Konzepte: Content-Dimension 
Sprache de en fr
Land DE US CH
Multi-Varianten A B C
Ziel-Gruppen Marketing Vertrieb GF
CORE:!
UI:"
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} 
} 
}
CORE:!
UI:"

Konzepte: Editing / Preview Modes 
CORE:!
UI:!

Systemvoraussetzungen von TYPO3 Neos
!
• Webserver (empfohlen ist Apache 2.x mit aktiviertem mod_rewrite Modul)
• PHP 5.3.7 - 5.4.x (minimal wäre PHP 5.3.2 - dort kann es zu Problemen kommen)
• Folgende Funktionen müssen in PHP aktiviert sein: system, shell_exec,
escapeshellcmd, escapeshellarg, proc_open und exec()
• php.ini: memory_limit = 512M oder höher (empfohlen 1014M)
• php.ini: xdebug.max_nesting_level = 500 (sofern xdebug verwendet wird)
• php.ini: Fügen sie die folgende Optionen ans Ende hinzu: detect_unicode = Off
• php.ini: Zudem muss Magic_Quotes ausgeschaltet werden: magic_quotes_gpc = Off
• php.ini: Die Kommandozeile von Flow benötigt ferner noch eine Zeitzoneneinstellung:
date.timezone= „Europe/Berlin“
• 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 
 
$ php /path/to/composer.phar create-project --no-
dev typo3/neos-base-distribution TYPO3-Neos-1.1 
$ cd TYPO3-Neos-1.1 
 
$ ./flow flow:core:setfilepermissions shelluser
wwwuser wwwgroup 
 
 
http://neos.demo/setup/

Die Architektur von TYPO3 Neos - Backend
!
 
Fluid 
Modern Templating Engine 
TYPO3CR 
Content Repository  
(JCR 170/ Sling) 
 
TypoScript 
TypoScript 2.0 - next Generation 
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 - Basis Design
!
• 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 (Yet Another 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 = ${q(node).property('bar')}  
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)}
 
${q(node).property('title')}
 
${String.split("Hello world!", ' ')[1]}
!
${q(node).context({'invisibleContentShown': true})} 
 
output = ${Array.join(['Hello', 'world!'], ' ')} 
 
output = ${'<title>' + node.properties.title + '</
title>'}

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
• In FlowQuery gibt es Operationen:
• property 
Zugriff auf alle Eigenschaften einer Node
• ﬁlter 
Filterausdrücke in „Fizzle“
• children 
Gibt alle Kinder der TYPO3CR Node zurück
• parents 
Gibt alle Eltern der TYPO3CR Node zurück
• Weitere Operationen: add, count, ﬁrst, get, is, last, ...

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}
{namespace ts=TYPO3TypoScriptViewHelpers}
<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>

Showcases 
 
https://notes.typo3.org/p/TYPO3NeosReferences

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

Quellen und Informationen
!
• TYPO3 Neos Website 
http://neos.typo3.org/ 
• 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 Projekt bei forge 
http://forge.typo3.org/projects/typo3neos 
• TYPO3 Flow Projekt bei forge 
http://forge.typo3.org/projects/flow3 
• Cheatsheet für Fluid (und demnächst für Flow) 
http://www.lobacher.de/files/cs/FluidCheatSheet_3.01_Lobacher.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

Fragen?
Oder komplett verwirrt?
Slides: www.lobacher.de/dwx14-neos

Kontakt
Klassisch: 
 
+Pluswerk GmbH 
Patrick Lobacher 
Solmstr. 6A 
60486 Frankfurt am Main 
 
Fon: +49 89 130 145 20 
 
Email: lobacher@plus-werk.com 
Web: www.plus-werk.com
!
 
 
 
Twitter:  
www.twitter.com/PatrickLobacher 
 
Facebook:  
www.facebook.com/patrick.lobacher 
 
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
Proﬁl: Full Service Agentur für digitale Kommunikation 
Schwerpunkt: Open Source Technologie
Kunden: Enterprise & KMU

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

Besten Dank für Eure
Aufmerksamkeit!

TYPO3 Neos - Next Generation CMS - DWX 2014

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Similaire à TYPO3 Neos - Next Generation CMS - DWX 2014

Similaire à TYPO3 Neos - Next Generation CMS - DWX 2014 (20)

Plus de die.agilen GmbH

Plus de die.agilen GmbH (20)

TYPO3 Neos - Next Generation CMS - DWX 2014