The Current State of TYPO3 Phoenix -- T3CON11

TYPO3 PhoenixThe Current StateSebastian KurfürstChristian Müller

Sonntag, 9. Oktober 11

SebastianKurfürst

ChristianMüller

@skurfuerst @daskitsunet


Changes since last year

Content Model

Plugin System

User Interface


Content Model


typo3.org

homepage section:main

section:side

section:side

en_EN

en_ENen_EN

de_DE

maincontenten_EN

sidecontenten_EN

sidecontentde_DE

Lorem ipsum dolor sit amet




typo3.org

homepage section:mainen_ENen_EN

maincontenten_EN

typo3.org


maincontenten_EN



“live” workspace

“user-christian” workspace


typo3.org


maincontenten_EN

typo3.org


maincontenten_EN


Some real content text here

“live” workspace

“user-christian” workspace


Plugin System


Plugin System

• Every FLOW3 Package can be used as Phoenix Plugin


Plugin System


TYPO3: TYPO3CR: contentTypes: 'TYPO3.Conference:Plugin': superTypes: ['TYPO3.TYPO3:Plugin'] label: 'TYPO3 Conference Plugin' properties: package: default: 'TYPO3.Conference' controller: default: 'Conference' action: default: 'index'


Plugin System


TYPO3: TYPO3CR: contentTypes: 'TYPO3.Conference:Plugin': superTypes: ['TYPO3.TYPO3:Plugin'] label: 'TYPO3 Conference Plugin' properties: package: default: 'TYPO3.Conference' controller: default: 'Conference' action: default: 'index'

Wor

k in P

rogre

ss


User Interface








http://www.sxc.hu/photo/1281342

Progressvery slow



Why... no progress?



Why... no progress?

• Difficult to build stable + extensible JS application



Why... no progress?


• we could not use FLOW3 strenghts for Phoenix



Why... no progress?



• styling and adjusting ExtJS very complex



Why... no progress?



• styling and adjusting ExtJS very complex

• un-agile development process


The UX Concept from Last Year


The UX Concept from Last Year

Visionary!









Which kind of web applications

do I use?






Web-StyleApplication

Desktop-StyleApplication




Try outsomethingnew...


Try outsomethingnew...

take thebird-eyeview



ReliableEditing


ReliableEditing

PredictableBehavior


ReliableEditing

PredictableBehavior

ImmediateUser Feedback


ReliableEditing

PredictableBehavior

ImmediateUser Feedback

Built With The Web - For The Web


more pragmatic


Technical Foundations

• ExtJS where it makes sense

• good mixture of Server- and Client Side

• SproutCore 2


Wanna See It Live?


Really?


Demo!


UI Architecture


Sproutcore 2


About Sproutcore

• build on top of jQuery

• strong MVC concept

• MIT license

• mobile.me and iWork


Data Binding


Data Binding truly connects your UI and data

Content (Data)

UI ComponentUI Component




onPreviewModeChange: function() {window.localStorage.previewMode = ⏎

this.get('previewMode') ? 'true' : 'false';}.observes('previewMode')

Data Binding Code Example


__publishable: function() {! return (this.get('__workspacename') !== 'live');}.property('__workspacename').cacheable(),

Computed Properties


Handlebars Templates


<div class="t3-inspect">{{view T3.Content.UI.InspectButton pressedBinding="T3.Content.Controller.Inspect.inspectMode" label="Inspect"}}

</div>

How Handlebars Templates Look Like


Content Module Architecture


<div id=”t3-backend”>...</div>

<html><body><div id=”myWebsiteCode”></div></body></html>

Use the website for editing content


<html><body><div id=”t3-backend”>...</div><div id=”myWebsiteCode”></div></body></html>

Use the website for editing content


Using FLOW3


•use Fluid templates•request pre-made elements from server•separate modules•security

Use the strengths of the foundation


Productivity!



The Future



Code Sprints bild


Next Steps

• Management / System / Reports View

• fine-tune editing and plugin API

• re-think rendering process (TypoScript vs Fluid)


Running Phoenix Yourself

• Follow http://wwwision.de/githelper/#TYPO3v5/Distributions/Base.git for checking out from Git

• Follow http://flow3.typo3.org/fileadmin/manual/nightly/Quickstart/Index.html#setting-file-permissions for setting permissions

• create database, adjust /Configuration/Settings.yaml

• ./flow3 doctrine:migrate

• ./flow3 site:import --packageKey TYPO3.PhoenixDemoTypo3Org

• Point your Firefox or Chrome browser to your local installation

TODO: Check Phoenix in a *SUB-DIRECTORY* of the web root


http://wwwision.de/githelper/#TYPO3v5/Distributions/Base.git

http://wwwision.de/githelper/#TYPO3v5/Distributions/Base.git

http://flow3.typo3.org/fileadmin/manual/nightly/Quickstart/Index.html#setting-file-permissions

http://flow3.typo3.org/fileadmin/manual/nightly/Quickstart/Index.html#setting-file-permissions

Wrap-Up




Thank You!



?????????????



inspiring people to share.


The Current State of TYPO3 Phoenix -- T3CON11

Technology

The Current State of TYPO3 Phoenix -- T3CON11