Tweet
Tweet

Slide 1

Slide 1 text

Friday, March 15, 13

Slide 2

Slide 2 text

Aske Ertmann TYPO3 Neos and Flow Core Team Member [email protected] Friday, March 15, 13

Slide 3

Slide 3 text

Friday, March 15, 13

Slide 4

Slide 4 text

νέος /néos/ new, fresh, revolutionary, uncommon Friday, March 15, 13

Slide 5

Slide 5 text

Demo Friday, March 15, 13

Slide 6

Slide 6 text

Flow Fluid Neos TYPO3CR Setup Form Eel FlowQuery TypoScript Expose Friday, March 15, 13

Slide 7

Slide 7 text

Flow Fluid Neos TYPO3CR Setup Form Eel FlowQuery TypoScript Expose Friday, March 15, 13

Slide 8

Slide 8 text

Neos RequireJS Ember.js Aloha VIE Create.js Hallo Frontend Editing Friday, March 15, 13

Slide 9

Slide 9 text

jQuery jQuery UI Twitter Bootstrap Plupload Ember.js Create.js Chosen Codemirror Dynatree Underscore.js Font Awesome jCrop Hallo jQuery popover jQuery Hotkeys spin.js VIE Aloha Backbone RequireJS Friday, March 15, 13

Slide 10

Slide 10 text

What You See Is What You Get Friday, March 15, 13

Slide 11

Slide 11 text

Friday, March 15, 13

Slide 12

Slide 12 text

Friday, March 15, 13

Slide 13

Slide 13 text

Content Repository TYPO3.TYPO3CR Friday, March 15, 13

Slide 14

Slide 14 text

Mål Gem, læs og opdater dybt strukturede indhold på en generel måde. Versioner, oversæt, synkroniser. Content Repository TYPO3.TYPO3CR Friday, March 15, 13

Slide 15

Slide 15 text

Mål Gem, læs og opdater dybt strukturede indhold på en generel måde. Versioner, oversæt, synkroniser. Content Repository TYPO3.TYPO3CR baseret på noder Friday, March 15, 13

Slide 16

Slide 16 text

Mål Gem, læs og opdater dybt strukturede indhold på en generel måde. Versioner, oversæt, synkroniser. Content Repository TYPO3.TYPO3CR baseret på noder hierarkisk struktur Friday, March 15, 13

Slide 17

Slide 17 text

Mål Gem, læs og opdater dybt strukturede indhold på en generel måde. Versioner, oversæt, synkroniser. Content Repository TYPO3.TYPO3CR baseret på noder hierarkisk struktur workspace support Friday, March 15, 13

Slide 18

Slide 18 text

Mål Gem, læs og opdater dybt strukturede indhold på en generel måde. Versioner, oversæt, synkroniser. Content Repository TYPO3.TYPO3CR baseret på noder hierarkisk struktur workspace support oversættelse support Friday, March 15, 13

Slide 19

Slide 19 text

first Text headline Title text main Section screen Image uri screenshot.jpg caption The Login of Neos homepage Page title Neos Demo Page Friday, March 15, 13

Slide 20

Slide 20 text

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 Friday, March 15, 13

Slide 21

Slide 21 text

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 Friday, March 15, 13

Slide 22

Slide 22 text

Node struktur site root page content section content element representation of domain models Friday, March 15, 13

Slide 23

Slide 23 text

/sites/typo3org/home/subpage/main/text1 site root pages section content Node stier Friday, March 15, 13

Slide 24

Slide 24 text

TYPO3CR Content Types TYPO3.Neos.ContentTypes/Configuration/NodeTypes.yaml 'TYPO3.Neos.ContentTypes:Text': superTypes: ['TYPO3.Neos.ContentTypes:ContentObject'] ui: label: 'Text' group: 'General' icon: light: 'Images/Icons/White/doc_lines_stright_icon-16.png' dark: 'Images/Icons/Black/doc_lines_stright_icon-16.png' properties: text: type: string defaultValue: '

Enter text here

' ui: inlineEditable: true Friday, March 15, 13

Slide 25

Slide 25 text

Brug af TYPO3CR // Setup $contentContext = new \TYPO3\TYPO3CR\Domain\Service\Context('live'); $nodeRepository->setContext($contentContext); $rootNode = $contentContext->getWorkspace()->getRootNode(); // Traversing the node tree $testNode = $rootNode->createNode('test'); $fooNode = $testNode->createNode('foo'); $fooNode->setProperty('title', 'Hello World'); $rootNode->getNode('test/foo'); // == $fooNode Friday, March 15, 13

Slide 26

Slide 26 text

Content Rendering Friday, March 15, 13

Slide 27

Slide 27 text

Content Rendering Friday, March 15, 13

Slide 28

Slide 28 text

Routing /homepage.html Content Rendering Friday, March 15, 13

Slide 29

Slide 29 text

Routing NodeController /homepage.html TYPO3CR Node /sites/demo/homepage@live Content Rendering Friday, March 15, 13

Slide 30

Slide 30 text

Routing NodeController TypoScript View /homepage.html TYPO3CR Node /sites/demo/homepage@live assign(NodeInterface $node) Content Rendering Friday, March 15, 13

Slide 31

Slide 31 text

TypoScript 2 TYPO3.TypoScript Friday, March 15, 13

Slide 32

Slide 32 text

TypoScript 2 TYPO3.TypoScript Friday, March 15, 13

Slide 33

Slide 33 text

Mål Et deklarativt sprog til komponent baserede visninger TypoScript 2 TYPO3.TypoScript Friday, March 15, 13

Slide 34

Slide 34 text

Acme.Demo/Resources/Private/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 af en statisk side Acme.Demo/Resources/Private/Templates/Page.html

A freshly created template for your new site!

Friday, March 15, 13

Slide 35

Slide 35 text

Friday, March 15, 13

Slide 36

Slide 36 text

Rendering af en side Acme.Demo/Resources/Private/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' } } Friday, March 15, 13

Slide 37

Slide 37 text

Acme.Demo/Resources/Private/Templates/Page.html {namespace ts=TYPO3\TypoScript\ViewHelpers}

A freshly created template for your new site!

Rendering af en side Friday, March 15, 13

Slide 38

Slide 38 text

TODO add image of Acme.Demo package (ugly) -> then add new image for Phoenix Demo Site Friday, March 15, 13

Slide 39

Slide 39 text

TYPO3.Neos.ContentTypes/Resources/Private/TypoScript/Root.ts2 Defination af en side Friday, March 15, 13

Slide 40

Slide 40 text

TYPO3.Neos.ContentTypes/Resources/Private/TypoScript/Root.ts2 Defination af en side # Page TS Object prototype(TYPO3.Neos.ContentTypes:Page) < prototype(TYPO3.TypoScript:Template) prototype(TYPO3.Neos.ContentTypes:Page) { templatePath = 'resource://TYPO3.Neos.ContentTypes/Private/Templates/TypoScriptObjects/ PageTemplate.html' body = TYPO3.TypoScript:Template body.title = ${q(node).property('title')} body.nodePath = ${q(node).property('_path')} headerData = TYPO3.TypoScript:Array backendHeader = TYPO3.TypoScript:Template backendHeader.templatePath = 'resource://TYPO3.Neos.ContentTypes/Private/Templates/ TypoScriptObjects/PageHead.html' htmlAttributes = '' } Friday, March 15, 13

Slide 41

Slide 41 text

Refe- rence FlowQuery TYPO3.Eel Friday, March 15, 13

Slide 42

Slide 42 text

Refe- rence q(node).property("title") FlowQuery TYPO3.Eel Friday, March 15, 13

Slide 43

Slide 43 text

Refe- rence q(node).property("title") Goal Provide helper functions for working with TYPO3CR nodes in Eel like jQuery for JavaScript and the DOM. FlowQuery TYPO3.Eel Friday, March 15, 13

Slide 44

Slide 44 text

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 FlowQuery TYPO3.Eel Friday, March 15, 13

Slide 45

Slide 45 text

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 FlowQuery TYPO3.Eel Friday, March 15, 13

Slide 46

Slide 46 text

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 Friday, March 15, 13

Slide 47

Slide 47 text

Flow Query Examples node: context expression result home Page title Home cms Page title CMS desc Conte... neos Page title Neos desc Flow... Friday, March 15, 13

Slide 48

Slide 48 text

Flow Query Examples node: context expression result q(node).property("title“) home Page title Home cms Page title CMS desc Conte... neos Page title Neos desc Flow... Friday, March 15, 13

Slide 49

Slide 49 text

Flow Query Examples node: context expression result "Home" q(node).property("title“) home Page title Home cms Page title CMS desc Conte... neos Page title Neos desc Flow... Friday, March 15, 13

Slide 50

Slide 50 text

Flow Query Examples node: context expression result "Home" q(node).property("title“) home Page title Home cms Page title CMS desc Conte... q(node) .children("[title=CMS]") .property("description") neos Page title Neos desc Flow... Friday, March 15, 13

Slide 51

Slide 51 text

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... Friday, March 15, 13

Slide 52

Slide 52 text

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... q(node) .add(q(node).children()) Friday, March 15, 13

Slide 53

Slide 53 text

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()) Friday, March 15, 13

Slide 54

Slide 54 text

TYPO3.Neos.ContentTypes/Resources/Private/TypoScript/Root.ts2 Brug af FlowQuery Friday, March 15, 13

Slide 55

Slide 55 text

TYPO3.Neos.ContentTypes/Resources/Private/TypoScript/Root.ts2 Brug af FlowQuery # Basic implementation of a flexible MultiColumn element, not exposed directly but inherited by all specific MultiColumn content elements prototype(TYPO3.Neos.ContentTypes:MultiColumn) < prototype(TYPO3.TypoScript:Template) prototype(TYPO3.Neos.ContentTypes:MultiColumn) { templatePath = 'resource://TYPO3.Neos.ContentTypes/Private/Templates/TypoScriptObjects/ MultiColumn.html' layout = ${q(node).property('layout')} columns = TYPO3.TypoScript:Collection columns { collection = ${q(node).children('[instanceof TYPO3.Neos.ContentTypes:Section]')} itemRenderer = TYPO3.Neos.ContentTypes:MultiColumnItem } } Friday, March 15, 13

Slide 56

Slide 56 text

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' Friday, March 15, 13

Slide 57

Slide 57 text

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')} } Friday, March 15, 13

Slide 58

Slide 58 text

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} {title -> f:format.raw()} <figure class="video"> Friday, March 15, 13

Slide 59

Slide 59 text

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} {title -> f:format.raw()} <figure class="video"> there will be an editor Friday, March 15, 13

Slide 60

Slide 60 text

Backend Modules 4 Friday, March 15, 13

Slide 61

Slide 61 text

Friday, March 15, 13

Slide 62

Slide 62 text

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' Friday, March 15, 13

Slide 63

Slide 63 text

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 Friday, March 15, 13

Slide 64

Slide 64 text

Expose Admin Interface TYPO3.Expose Refe- rence Friday, March 15, 13

Slide 65

Slide 65 text

Goal Provide a generic and extensible admin interface for all kinds of data. Expose Admin Interface TYPO3.Expose Refe- rence Friday, March 15, 13

Slide 66

Slide 66 text

Goal Provide a generic and extensible admin interface for all kinds of data. Expose Admin Interface TYPO3.Expose Refe- rence Listing and Editing Friday, March 15, 13

Slide 67

Slide 67 text

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 Friday, March 15, 13

Slide 68

Slide 68 text

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 Friday, March 15, 13

Slide 69

Slide 69 text

still un-styled! Friday, March 15, 13

Slide 70

Slide 70 text

still un-styled! Friday, March 15, 13

Slide 71

Slide 71 text

still un-styled! Friday, March 15, 13

Slide 72

Slide 72 text

Fede ting i Neos Friday, March 15, 13

Slide 73

Slide 73 text

Inline-editing Friday, March 15, 13

Slide 74

Slide 74 text

Wireframe mode Friday, March 15, 13

Slide 75

Slide 75 text

CMS with a Framework with a CMS Friday, March 15, 13

Slide 76

Slide 76 text

Automatic workspaces / TYPO3CR Friday, March 15, 13

Slide 77

Slide 77 text

Fluid Friday, March 15, 13

Slide 78

Slide 78 text

TypoScript 2 Friday, March 15, 13

Slide 79

Slide 79 text

+ alt det fede fra Flow Friday, March 15, 13

Slide 80

Slide 80 text

Built for deployment & distribution & continuous integration Friday, March 15, 13

Slide 81

Slide 81 text

Web service Friday, March 15, 13

Slide 82

Slide 82 text

Form framework Friday, March 15, 13

Slide 83

Slide 83 text

Command-line native Friday, March 15, 13

Slide 84

Slide 84 text

Clean architecture Friday, March 15, 13

Slide 85

Slide 85 text

Authentication integration Friday, March 15, 13

Slide 86

Slide 86 text

Doctrine Friday, March 15, 13

Slide 87

Slide 87 text

Composer Friday, March 15, 13

Slide 88

Slide 88 text

Buzzword compliant DDD / AOP / DI Friday, March 15, 13

Slide 89

Slide 89 text

Multilevel cache prepared for Varnish (et al.) Friday, March 15, 13

Slide 90

Slide 90 text

Migrations / Upgrade path Friday, March 15, 13

Slide 91

Slide 91 text

Browser support Oversættelse Listemodul Publicerings workflow Søgning Rettighedsstyring Neos i dit næste projekt? Friday, March 15, 13

Slide 92

Slide 92 text

Roadmap Media browser Link browser User Interface Design TYPO3 CMS til Neos migrering Oversat User Interface Domain Model Management Module Bruger roller og håndtering Multi-sprog håndtering Søgning 2013 Friday, March 15, 13

Slide 93

Slide 93 text

Start i dag! neos.typo3.org Friday, March 15, 13

Slide 94

Slide 94 text

Join the effort Friday, March 15, 13

Slide 95

Slide 95 text

Friday, March 15, 13