80 Million germans can't be wrong - but we rewrote their favourite CMS from scratch anyway

An introduction to TYPO3, it's history and claim to fame. And a look into TYPO3 Neos - the next generation CMS from the TYPO3 Community.

Together with Aske Ertmann at Drupalhagen 12

Transcript

2. Welcome
3. Aske Ertmann Christian Jul Jensen
4. 80 Million germans can’t be wrong
5. 1997 Kasper
6. 1997 2000
11. Image generation Multi-language Multi-site/domain Fine-grained rights system TypoScript Clever caching
12. 1997 2000
13. 2000 2002 1997
16. 2000 2002 1997
17. 2002 2005 2000
18. Workspaces Search engine Speaking urls Bizarrely flexible api
19. Community!
20. TYPO3 Association Mission statement First conference New CI · Logo + font
21. Big plans
22. Big plans
23. TYPO3 4.0 “Zap the gremlins” TYPO3 4.5 “Beauty pageant” TYPO3 5.0 “Phoenix”
24. 2002 2005 2000
25. 2005 2012 2002
26. Refactoring Rewriting
27. Test Driven Domain Driven Dependency Injection Aspect Oriented Object persistence Content Repository New architecture New Framework
29. The TYPO3 Project TYPO3 FLOW3 Fluid
31. A New CMS
33. νέος /néos/ new, fresh, revolutionary, uncommon
34. 1.0 alpha 1
35. Demo
36. Flow Fluid Neos TYPO3CR Setup Form Eel FlowQuery TypoScript Expose
37. Flow Fluid Neos TYPO3CR Setup Form Eel FlowQuery TypoScript Expose
38. Neos RequireJS EmberJS Aloha VIE Create.js Hallo Frontend Editing
39. jQuery jQuery UI Twitter Bootstrap plupload ember.js create.js Chosen Codemirror Dynatree Font Awesome Canvas Indicator jCrop
40. What You See Is What You Get
43. Goal Store, read and update deeply structured content in a uniform way. Stage it, translate it, synchronize it. Content Repository TYPO3.TYPO3CR Refe- rence based on nodes hierarchical structure workspace support translation support
44. first Text headline Title text main Section screen Image uri screenshot.jpg caption The Login of Neos homepage Page title Neos Demo Page
45. first Text headline Try Out Neos Today! text Fetch the Download and run it ... user-sebastian main Section screen Image uri screenshot.jpg caption The Login of Neos homepage Page title Neos Demo Page two TwoColumn user-sebastian
46. first Text headline Title text main Section screen Image uri screenshot.jpg caption The Login of Neos homepage Page title Neos Demo Page two TwoColumn
47. /sites/typo3org/home/subpage/main/text1 site root pages section content Node Paths
48. TYPO3CR Content Types TYPO3.Phoenix.ContentTypes/Configuration/Settings.yaml TYPO3: TYPO3CR: contentTypes: 'TYPO3.Phoenix.ContentTypes:Text': superTypes: ['TYPO3.Phoenix.ContentTypes:ContentObject'] group: 'General' label: 'Text' properties: text: label: string default: '<p>Enter text here</p>' 'TYPO3.Phoenix.ContentTypes:ContentObject': superTypes: ['TYPO3.Phoenix.ContentTypes:AbstractNode']
49. Content Rendering
50. Screenshot Demo- Website (TODO) Simplified for the examples
51. Routing NodeController TypoScript View /homepage.html TYPO3CR Node /sites/demo/homepage@live assign(NodeInterface $node) Content Rendering
52. Goal Is a declarative language for composing component-based views built both for planned and unplanned extensibility API not yet stable TypoScript 2 TYPO3.TypoScript Refe- rence
53. Acme.Demo/.../TypoScripts/Library/Root.ts2 // Includes TYPO3.Neos/Private/DefaultTypoScript/All.ts2 page = Page page.body { templatePath = 'resource://Acme.Demo/Private/Templates/Page.html' sectionName = 'body' } Rendering a Static Page
54. Acme.Demo/Resources/Private/Templates/Page.html <f:section name="body"> <h1>A freshly created template for your new site!</h1> </f:section> Rendering a Static Page
56. Rendering a Page Acme.Demo/.../TypoScripts/Library/Root.ts2 // Includes TYPO3.TYPO3/Private/DefaultTypoScript/All.ts2 page = Page // ... page.body { templatePath = 'resource://Acme.Demo/Private/Templates/Page.html' sectionName = 'body' parts { menu = Menu breadcrumb = Breadcrumb } sections { main = Section main.nodePath = 'main' } }
57. Acme.Demo/Resources/Private/Templates/Page.html {namespace ts=TYPO3\TypoScript\ViewHelpers} <f:section name="body"> <h1>A freshly created template for your new site!</h1> <nav class="menu"><ts:renderTypoScript path="parts/menu" /></nav> <nav class="breadcrumb"> <ts:renderTypoScript path="parts/breadcrumb" /> </nav> <div class="content"><ts:renderTypoScript path="sections/main" /></div> </f:section> Rendering a Page
58. TODO add image of Acme.Demo package (ugly) -> then add new image for Phoenix Demo Site
59. TYPO3.Phoenix.ContentTypes/Configuration/Settings.yaml Rendering this Hierarchical Content Structure prototype(TYPO3.TypoScript:Collection) { } prototype(TYPO3.Phoenix.ContentTypes:Section) < prototype(TYPO3.TypoScript:Collection) { ... } prototype(TYPO3.TypoScript:Case).default { @position = 'end' condition = ${true} type = ${q(node).property('_contentType.name')} } collection = ${q(node).children()} itemName = 'node' itemRenderer = TYPO3.TypoScript:Case
60. Refe- rence q(node).property("title") Goal Provide helper functions for working with TYPO3CR nodes in Eel like jQuery for JavaScript and the DOM. influenced by jQuery work with tree structures extensible operations FlowQuery TYPO3.Eel
61. Flow Query Examples node: context expression result "Home" q(node).property("title“) home Page title Home cms Page title CMS desc Conte... "Content ..." q(node) .children("[title=CMS]") .property("description") neos Page title Neos desc Flow... [home, cms, neos] q(node) .add(q(node).children())
62. Settings.yaml Creating Custom Content Types TYPO3: TYPO3CR: contentTypes: 'Acme.Demo:YouTube': superTypes: ['...ContentTypes:Headline'] icon: 'Images/Icons/youtube_icon.png' label: 'YouTube' properties: video: type: string label: 'YouTube embed id' group: 'video' groups: video: label: 'Video' TypoScript prototype(Acme.Demo:YouTube) < prototype(TYPO3.Phoenix.ContentTypes:Headline) { templatePath = '.../YouTube.html' video = ${q(node).property('video')} } YouTube.html YouTube.html {namespace t=TYPO3\TYPO3\ViewHelpers} <t:contentElement node="{context}"> <t:aloha.editable property="title" tag="header"> {title -> f:format.raw()} </t:aloha.editable> <figure class="video"> <iframe src="http://www.youtube.com/embed/ {video}?wmode=transparent" frameborder="0" allowfullscreen></iframe> </figure> </t:contentElement> there will be an editor
63. Backend Modules 4
65. TYPO3.TYPO3/Configuration/Settings.yaml Simple Backend Modules TYPO3: TYPO3: modules: administration: submodules: packages: label: 'Package Management' controller: '\TYPO3\TYPO3\Controller\Module\Administration\PackagesController' description: "The Package Management ..." icon: 'resource://TYPO3.TYPO3/Public/Images/Icons/Orange/box_icon-24.png' Controllers and Templates Simply Unmodified
66. Goal Provide a generic and extensible admin interface for all kinds of data. Expose Admin Interface TYPO3.Expose Refe- rence Listing and Editing support objects and nodes extensible through TypoScript
67. still un-styled!
68. still un-styled!
69. still un-styled!
70. 10 things we love
71. Clean architecture
72. CMS with a Framework with a CMS
73. Built for deployment & distribution & continous integration
74. Commandline native
75. PSR-0 / Composer
76. Automatic workspaces / TYPO3CR
77. Buzzword compliant DDD / AOP / DI
78. Multilevel cache prepared for Varnish (et al.)
79. Inline-editing
80. Migrations / Upgrade path
81. Roadmap New User Interface Design Finish TYPO3 Content Importer Multi-Language User Interface Domain Model Management Module User roles and Management Public API for Backend Modules Release version 1.0 spring 2013 2013
82. neos.typo3.org