SlideShare a Scribd company logo
1 of 83
Download to read offline
TYPO3 Phoenix
       The Current State
         Sebastian Kurfürst
         Christian Müller




Sonntag, 9. Oktober 11
Sebastian    Christian
                          Kurfürst     Müller




                     @skurfuerst     @daskitsunet




Sonntag, 9. Oktober 11
Changes since last year




                         Content   Plugin     User
                          Model    System   Interface




Sonntag, 9. Oktober 11
Content Model




Sonntag, 9. Oktober 11
typo3.org


                               en_EN              en_EN                       en_EN

                         homepage      section:main           maincontent
                                                          Lorem ipsum dolor sit amet


                                                  en_EN                       en_EN

                                       section:side            sidecontent
                                                          Lorem ipsum dolor sit amet


                                                  de_DE                        de_DE

                                       section:side            sidecontent
                                                          Lorem ipsum dolor sit amet




Sonntag, 9. Oktober 11
typo3.org


                               en_EN             en_EN                       en_EN

                         homepage      section:main          maincontent
                                                         Lorem ipsum dolor sit amet

    “live” workspace

         typo3.org


                               en_EN             en_EN                       en_EN

                         homepage      section:main          maincontent
                                                         Lorem ipsum dolor sit amet

    “user-christian” workspace


Sonntag, 9. Oktober 11
typo3.org


                               en_EN             en_EN                        en_EN

                         homepage      section:main          maincontent
                                                         Lorem ipsum dolor sit amet

    “live” workspace

         typo3.org


                               en_EN             en_EN                        en_EN

                         homepage      section:main          maincontent
                                                         Some real content text here

    “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
ss
                    re
       Plugin System

                  og
                Pr
           in
        • Every FLOW3 Package can be used as Phoenix
    k
 or



             Plugin
W




       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
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




                                  Progress
                                  very 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
Desktop-Style   Web-Style
                    Application    Application




Sonntag, 9. Oktober 11
Sonntag, 9. Oktober 11
Sonntag, 9. Oktober 11
Try out
    something
    new...




Sonntag, 9. Oktober 11
take the
                         bird-eye
                         view


    Try out
    something
    new...




Sonntag, 9. Oktober 11
Sonntag, 9. Oktober 11
Reliable
                         Editing




Sonntag, 9. Oktober 11
Reliable   Predictable
                         Editing    Behavior




Sonntag, 9. Oktober 11
Reliable        Predictable
                         Editing         Behavior




                         Immediate
                         User Feedback

Sonntag, 9. Oktober 11
Reliable         Predictable
                         Editing          Behavior




                         Immediate       Built With The Web -
                         User Feedback   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



           UI Component                    UI Component




                          Content (Data)




Sonntag, 9. Oktober 11
Sonntag, 9. Oktober 11
Sonntag, 9. Oktober 11
Data Binding Code Example



       onPreviewModeChange: function() {
        window.localStorage.previewMode =
        this.get('previewMode') ? 'true' : 'false';
       }.observes('previewMode')




Sonntag, 9. Oktober 11
Computed Properties




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




Sonntag, 9. Oktober 11
Handlebars Templates




Sonntag, 9. Oktober 11
How Handlebars Templates Look Like



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




Sonntag, 9. Oktober 11
Content Module
                           Architecture



Sonntag, 9. Oktober 11
Use the website for editing content

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



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




Sonntag, 9. Oktober 11
Use the website for editing content

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




Sonntag, 9. Oktober 11
Using FLOW3




Sonntag, 9. Oktober 11
Use the strengths of the foundation


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




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

More Related Content

Similar to The Current State of TYPO3 Phoenix -- T3CON11

W-Jax 2015: QS-Maßnahmen bei Continuous Delivery
W-Jax 2015: QS-Maßnahmen bei Continuous DeliveryW-Jax 2015: QS-Maßnahmen bei Continuous Delivery
W-Jax 2015: QS-Maßnahmen bei Continuous DeliveryStephan Kaps
 
FMK2016 - Arnold Kegebein - Recycling
FMK2016 - Arnold Kegebein - RecyclingFMK2016 - Arnold Kegebein - Recycling
FMK2016 - Arnold Kegebein - RecyclingVerein FM Konferenz
 
Testing TYPO3 Flow Applications with Behat
Testing TYPO3 Flow Applications with BehatTesting TYPO3 Flow Applications with Behat
Testing TYPO3 Flow Applications with BehatMarkus Goldbeck
 
Klein, aber oho - Continuous Delivery von Micro Applications mit Jenkins, Doc...
Klein, aber oho - Continuous Delivery von Micro Applications mit Jenkins, Doc...Klein, aber oho - Continuous Delivery von Micro Applications mit Jenkins, Doc...
Klein, aber oho - Continuous Delivery von Micro Applications mit Jenkins, Doc...B1 Systems GmbH
 
Facebook mit Rails und Facebooker
Facebook mit Rails und FacebookerFacebook mit Rails und Facebooker
Facebook mit Rails und Facebookerjan_mindmatters
 
FMK 2016 - Robert Kaiser - FileMaker iOS App SDK
FMK 2016 - Robert Kaiser - FileMaker iOS App SDKFMK 2016 - Robert Kaiser - FileMaker iOS App SDK
FMK 2016 - Robert Kaiser - FileMaker iOS App SDKVerein FM Konferenz
 
TYPO3Flow Usergroup Rhein-Main - Package Structure and Composer
TYPO3Flow Usergroup Rhein-Main - Package Structure and ComposerTYPO3Flow Usergroup Rhein-Main - Package Structure and Composer
TYPO3Flow Usergroup Rhein-Main - Package Structure and ComposerThomas Layh
 
Azure Notebooks
Azure NotebooksAzure Notebooks
Azure NotebooksTEitelberg
 
Eine Stunde was mit Api First!
Eine Stunde was mit Api First!Eine Stunde was mit Api First!
Eine Stunde was mit Api First!JanWeinschenker
 
Continuous Testing: Integration- und UI-Testing mit OpenShift-Build-Pipelines
Continuous Testing: Integration- und UI-Testing mit OpenShift-Build-PipelinesContinuous Testing: Integration- und UI-Testing mit OpenShift-Build-Pipelines
Continuous Testing: Integration- und UI-Testing mit OpenShift-Build-PipelinesTobias Schneck
 
Extbase & Fluid Einführung - MTUG - Patrick Lobacher
Extbase & Fluid Einführung - MTUG - Patrick LobacherExtbase & Fluid Einführung - MTUG - Patrick Lobacher
Extbase & Fluid Einführung - MTUG - Patrick Lobacherdie.agilen GmbH
 
Webtestsuite black berrydevcon
Webtestsuite black berrydevconWebtestsuite black berrydevcon
Webtestsuite black berrydevconwolframkriesing
 
Ionic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf SteroidenIonic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf SteroidenHendrik Lösch
 
PyLucene@PyCon DE 2011
PyLucene@PyCon DE 2011PyLucene@PyCon DE 2011
PyLucene@PyCon DE 2011Thomas Koch
 
Das Android Open Source Project
Das Android Open Source ProjectDas Android Open Source Project
Das Android Open Source Projectinovex GmbH
 
Entwicklung und Umsetzung von Geschäftsmodellen mit Rapid Modeler
Entwicklung und Umsetzung von Geschäftsmodellen mit Rapid ModelerEntwicklung und Umsetzung von Geschäftsmodellen mit Rapid Modeler
Entwicklung und Umsetzung von Geschäftsmodellen mit Rapid ModelerOrange Hills GmbH
 
Wpd2010 bonn keynote acsr 20100428 14-00
Wpd2010 bonn keynote acsr 20100428 14-00Wpd2010 bonn keynote acsr 20100428 14-00
Wpd2010 bonn keynote acsr 20100428 14-00acsr industrialdesign
 

Similar to The Current State of TYPO3 Phoenix -- T3CON11 (19)

W-Jax 2015: QS-Maßnahmen bei Continuous Delivery
W-Jax 2015: QS-Maßnahmen bei Continuous DeliveryW-Jax 2015: QS-Maßnahmen bei Continuous Delivery
W-Jax 2015: QS-Maßnahmen bei Continuous Delivery
 
FMK2016 - Arnold Kegebein - Recycling
FMK2016 - Arnold Kegebein - RecyclingFMK2016 - Arnold Kegebein - Recycling
FMK2016 - Arnold Kegebein - Recycling
 
Testing TYPO3 Flow Applications with Behat
Testing TYPO3 Flow Applications with BehatTesting TYPO3 Flow Applications with Behat
Testing TYPO3 Flow Applications with Behat
 
Ionic 3
Ionic 3Ionic 3
Ionic 3
 
Klein, aber oho - Continuous Delivery von Micro Applications mit Jenkins, Doc...
Klein, aber oho - Continuous Delivery von Micro Applications mit Jenkins, Doc...Klein, aber oho - Continuous Delivery von Micro Applications mit Jenkins, Doc...
Klein, aber oho - Continuous Delivery von Micro Applications mit Jenkins, Doc...
 
Facebook mit Rails und Facebooker
Facebook mit Rails und FacebookerFacebook mit Rails und Facebooker
Facebook mit Rails und Facebooker
 
FMK 2016 - Robert Kaiser - FileMaker iOS App SDK
FMK 2016 - Robert Kaiser - FileMaker iOS App SDKFMK 2016 - Robert Kaiser - FileMaker iOS App SDK
FMK 2016 - Robert Kaiser - FileMaker iOS App SDK
 
TYPO3Flow Usergroup Rhein-Main - Package Structure and Composer
TYPO3Flow Usergroup Rhein-Main - Package Structure and ComposerTYPO3Flow Usergroup Rhein-Main - Package Structure and Composer
TYPO3Flow Usergroup Rhein-Main - Package Structure and Composer
 
Azure Notebooks
Azure NotebooksAzure Notebooks
Azure Notebooks
 
Eine Stunde was mit Api First!
Eine Stunde was mit Api First!Eine Stunde was mit Api First!
Eine Stunde was mit Api First!
 
Continuous Testing: Integration- und UI-Testing mit OpenShift-Build-Pipelines
Continuous Testing: Integration- und UI-Testing mit OpenShift-Build-PipelinesContinuous Testing: Integration- und UI-Testing mit OpenShift-Build-Pipelines
Continuous Testing: Integration- und UI-Testing mit OpenShift-Build-Pipelines
 
Maven Intro
Maven IntroMaven Intro
Maven Intro
 
Extbase & Fluid Einführung - MTUG - Patrick Lobacher
Extbase & Fluid Einführung - MTUG - Patrick LobacherExtbase & Fluid Einführung - MTUG - Patrick Lobacher
Extbase & Fluid Einführung - MTUG - Patrick Lobacher
 
Webtestsuite black berrydevcon
Webtestsuite black berrydevconWebtestsuite black berrydevcon
Webtestsuite black berrydevcon
 
Ionic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf SteroidenIonic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf Steroiden
 
PyLucene@PyCon DE 2011
PyLucene@PyCon DE 2011PyLucene@PyCon DE 2011
PyLucene@PyCon DE 2011
 
Das Android Open Source Project
Das Android Open Source ProjectDas Android Open Source Project
Das Android Open Source Project
 
Entwicklung und Umsetzung von Geschäftsmodellen mit Rapid Modeler
Entwicklung und Umsetzung von Geschäftsmodellen mit Rapid ModelerEntwicklung und Umsetzung von Geschäftsmodellen mit Rapid Modeler
Entwicklung und Umsetzung von Geschäftsmodellen mit Rapid Modeler
 
Wpd2010 bonn keynote acsr 20100428 14-00
Wpd2010 bonn keynote acsr 20100428 14-00Wpd2010 bonn keynote acsr 20100428 14-00
Wpd2010 bonn keynote acsr 20100428 14-00
 

More from Sebastian Kurfürst

Workshop Extension-Entwicklung mit Extbase und Fluid
Workshop Extension-Entwicklung mit Extbase und FluidWorkshop Extension-Entwicklung mit Extbase und Fluid
Workshop Extension-Entwicklung mit Extbase und FluidSebastian Kurfürst
 
Fluid - Templating for professionals - T3CON09
Fluid - Templating for professionals - T3CON09Fluid - Templating for professionals - T3CON09
Fluid - Templating for professionals - T3CON09Sebastian Kurfürst
 
FLOW3 - der aktuelle Stand. TYPO3 Usergroup Dresden
FLOW3 - der aktuelle Stand. TYPO3 Usergroup DresdenFLOW3 - der aktuelle Stand. TYPO3 Usergroup Dresden
FLOW3 - der aktuelle Stand. TYPO3 Usergroup DresdenSebastian Kurfürst
 
Continuous Integration at T3CON08
Continuous Integration at T3CON08Continuous Integration at T3CON08
Continuous Integration at T3CON08Sebastian Kurfürst
 

More from Sebastian Kurfürst (9)

FLOW3 Goes Semantic
FLOW3 Goes SemanticFLOW3 Goes Semantic
FLOW3 Goes Semantic
 
Advanced Fluid
Advanced FluidAdvanced Fluid
Advanced Fluid
 
Fluid for Designers
Fluid for DesignersFluid for Designers
Fluid for Designers
 
Workshop Extension-Entwicklung mit Extbase und Fluid
Workshop Extension-Entwicklung mit Extbase und FluidWorkshop Extension-Entwicklung mit Extbase und Fluid
Workshop Extension-Entwicklung mit Extbase und Fluid
 
Schulung Fluid Templating
Schulung Fluid TemplatingSchulung Fluid Templating
Schulung Fluid Templating
 
Fluid - Templating for professionals - T3CON09
Fluid - Templating for professionals - T3CON09Fluid - Templating for professionals - T3CON09
Fluid - Templating for professionals - T3CON09
 
MVC for TYPO3 4.3 with extbase
MVC for TYPO3 4.3 with extbaseMVC for TYPO3 4.3 with extbase
MVC for TYPO3 4.3 with extbase
 
FLOW3 - der aktuelle Stand. TYPO3 Usergroup Dresden
FLOW3 - der aktuelle Stand. TYPO3 Usergroup DresdenFLOW3 - der aktuelle Stand. TYPO3 Usergroup Dresden
FLOW3 - der aktuelle Stand. TYPO3 Usergroup Dresden
 
Continuous Integration at T3CON08
Continuous Integration at T3CON08Continuous Integration at T3CON08
Continuous Integration at T3CON08
 

The Current State of TYPO3 Phoenix -- T3CON11