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

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

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



October 27, 2012

More Decks by christianjul

Other Decks in Technology


  1. None
  2. Welcome

  3. Aske Ertmann Christian Jul Jensen

  4. 80 Million germans can’t be wrong

  5. 1997 Kasper

  6. 1997 2000

  7. None
  8. None
  9. None
  10. None
  11. Image generation Multi-language Multi-site/domain Fine-grained rights system TypoScript Clever caching

  12. 1997 2000

  13. 2000 2002 1997

  14. None
  15. None
  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
  28. None
  29. The TYPO3 Project TYPO3 FLOW3 Fluid

  30. None
  31. A New CMS

  32. None
  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

  41. None
  42. None
  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
  55. None
  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

  64. None
  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

  83. None