Upload
sebastian-kurfuerst
View
2.551
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Presentation of the current state of TYPO3 Phoenix at T3CON11. We present our transition from ExtJS to SproutCore, and explain how we were able to greatly speed up User Interface development.
Citation preview
TYPO3 PhoenixThe Current StateSebastian KurfürstChristian Müller
Sonntag, 9. Oktober 11
SebastianKurfürst
ChristianMüller
@skurfuerst @daskitsunet
Sonntag, 9. Oktober 11
Changes since last year
Content Model
Plugin System
User Interface
Sonntag, 9. Oktober 11
Content Model
Sonntag, 9. Oktober 11
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
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Sonntag, 9. Oktober 11
typo3.org
homepage section:mainen_ENen_EN
maincontenten_EN
typo3.org
homepage section:mainen_ENen_EN
maincontenten_EN
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
“live” workspace
“user-christian” workspace
Sonntag, 9. Oktober 11
typo3.org
homepage section:mainen_ENen_EN
maincontenten_EN
typo3.org
homepage section:mainen_ENen_EN
maincontenten_EN
Lorem ipsum dolor sit amet
Some real content text here
“live” workspace
“user-christian” workspace
Sonntag, 9. Oktober 11
Plugin System
Sonntag, 9. Oktober 11
Plugin System
• Every FLOW3 Package can be used as Phoenix Plugin
Sonntag, 9. Oktober 11
Plugin System
• Every FLOW3 Package can be used as Phoenix Plugin
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'
Sonntag, 9. Oktober 11
Plugin System
• Every FLOW3 Package can be used as Phoenix Plugin
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
Sonntag, 9. Oktober 11
User Interface
Sonntag, 9. Oktober 11
Sonntag, 9. Oktober 11
Sonntag, 9. Oktober 11
Sonntag, 9. Oktober 11
Sonntag, 9. Oktober 11
Sonntag, 9. Oktober 11
Sonntag, 9. Oktober 11
http://www.sxc.hu/photo/1281342
Progressvery slow
Sonntag, 9. Oktober 11
http://www.sxc.hu/photo/1281342
Why... no progress?
Sonntag, 9. Oktober 11
http://www.sxc.hu/photo/1281342
Why... no progress?
• Difficult to build stable + extensible JS application
Sonntag, 9. Oktober 11
http://www.sxc.hu/photo/1281342
Why... no progress?
• Difficult to build stable + extensible JS application
• we could not use FLOW3 strenghts for Phoenix
Sonntag, 9. Oktober 11
http://www.sxc.hu/photo/1281342
Why... no progress?
• Difficult to build stable + extensible JS application
• we could not use FLOW3 strenghts for Phoenix
• styling and adjusting ExtJS very complex
Sonntag, 9. Oktober 11
http://www.sxc.hu/photo/1281342
Why... no progress?
• Difficult to build stable + extensible JS application
• we could not use FLOW3 strenghts for Phoenix
• styling and adjusting ExtJS very complex
• un-agile development process
Sonntag, 9. Oktober 11
The UX Concept from Last Year
Sonntag, 9. Oktober 11
The UX Concept from Last Year
Visionary!
Sonntag, 9. Oktober 11
Sonntag, 9. Oktober 11
Sonntag, 9. Oktober 11
Sonntag, 9. Oktober 11
Sonntag, 9. Oktober 11
Sonntag, 9. Oktober 11
Sonntag, 9. Oktober 11
Sonntag, 9. Oktober 11
Which kind of web applications
do I use?
Sonntag, 9. Oktober 11
Sonntag, 9. Oktober 11
Sonntag, 9. Oktober 11
Sonntag, 9. Oktober 11
Sonntag, 9. Oktober 11
Web-StyleApplication
Desktop-StyleApplication
Sonntag, 9. Oktober 11
Sonntag, 9. Oktober 11
Sonntag, 9. Oktober 11
Try outsomethingnew...
Sonntag, 9. Oktober 11
Try outsomethingnew...
take thebird-eyeview
Sonntag, 9. Oktober 11
Sonntag, 9. Oktober 11
ReliableEditing
Sonntag, 9. Oktober 11
ReliableEditing
PredictableBehavior
Sonntag, 9. Oktober 11
ReliableEditing
PredictableBehavior
ImmediateUser Feedback
Sonntag, 9. Oktober 11
ReliableEditing
PredictableBehavior
ImmediateUser Feedback
Built With The Web - For The Web
Sonntag, 9. Oktober 11
more pragmatic
Sonntag, 9. Oktober 11
Technical Foundations
• ExtJS where it makes sense
• good mixture of Server- and Client Side
• SproutCore 2
Sonntag, 9. Oktober 11
Wanna See It Live?
Sonntag, 9. Oktober 11
Really?
Sonntag, 9. Oktober 11
Demo!
Sonntag, 9. Oktober 11
UI Architecture
Sonntag, 9. Oktober 11
Sproutcore 2
Sonntag, 9. Oktober 11
About Sproutcore
• build on top of jQuery
• strong MVC concept
• MIT license
• mobile.me and iWork
Sonntag, 9. Oktober 11
Data Binding
Sonntag, 9. Oktober 11
Data Binding truly connects your UI and data
Content (Data)
UI ComponentUI Component
Sonntag, 9. Oktober 11
Sonntag, 9. Oktober 11
Sonntag, 9. Oktober 11
onPreviewModeChange: function() {window.localStorage.previewMode = ⏎
this.get('previewMode') ? 'true' : 'false';}.observes('previewMode')
Data Binding Code Example
Sonntag, 9. Oktober 11
__publishable: function() {! return (this.get('__workspacename') !== 'live');}.property('__workspacename').cacheable(),
Computed Properties
Sonntag, 9. Oktober 11
Handlebars Templates
Sonntag, 9. Oktober 11
<div class="t3-inspect">{{view T3.Content.UI.InspectButton pressedBinding="T3.Content.Controller.Inspect.inspectMode" label="Inspect"}}
</div>
How Handlebars Templates Look Like
Sonntag, 9. Oktober 11
Content Module Architecture
Sonntag, 9. Oktober 11
<div id=”t3-backend”>...</div>
<html><body><div id=”myWebsiteCode”></div></body></html>
Use the website for editing content
Sonntag, 9. Oktober 11
<html><body><div id=”t3-backend”>...</div><div id=”myWebsiteCode”></div></body></html>
Use the website for editing content
Sonntag, 9. Oktober 11
Using FLOW3
Sonntag, 9. Oktober 11
•use Fluid templates•request pre-made elements from server•separate modules•security
Use the strengths of the foundation
Sonntag, 9. Oktober 11
Productivity!
Sonntag, 9. Oktober 11
Sonntag, 9. Oktober 11
The Future
Sonntag, 9. Oktober 11
http://www.sxc.hu/photo/107023
Code Sprints bild
Sonntag, 9. Oktober 11
Next Steps
• Management / System / Reports View
• fine-tune editing and plugin API
• re-think rendering process (TypoScript vs Fluid)
Sonntag, 9. Oktober 11
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
Sonntag, 9. Oktober 11
Wrap-Up
Sonntag, 9. Oktober 11
Sonntag, 9. Oktober 11
Sonntag, 9. Oktober 11
Thank You!
Sonntag, 9. Oktober 11
Sonntag, 9. Oktober 11
?????????????
Sonntag, 9. Oktober 11
Sonntag, 9. Oktober 11
inspiring people to share.
Sonntag, 9. Oktober 11