[t3con12ca] typo3 phoenix - the current state

TYPO3 PhoenixThe Current State

Christian Müller

Tuesday 26 June 12

Christian Müller

@daskitsunet

Tuesday 26 June 12

Content Model

Plugin System

Module System

What did we do?

UserInterface

TypoScript Foundations

Tuesday 26 June 12

Content Model

Tuesday 26 June 12

Node Treesite root

page

content section

content element

representation of domain models

and just anything you want them to be!

Tuesday 26 June 12

Node Paths

/sites/typo3org/home/subpage/main/text1

Tuesday 26 June 12

/sites/typo3org/home/subpage/main/text1

site root

Node Paths

Tuesday 26 June 12

/sites/typo3org/home/subpage/main/text1

site root

pages

Node Paths

Tuesday 26 June 12

/sites/typo3org/home/subpage/main/text1

site root

pages

section

Node Paths

Tuesday 26 June 12

/sites/typo3org/home/subpage/main/text1

site root

pages

section

content

Node Paths

Tuesday 26 June 12

Context

Tuesday 26 June 12

Context is

• an environment a node exists in

• for example a workspace or a language

Tuesday 26 June 12

Plugin System

Tuesday 26 June 12

Plugin System

• Every FLOW3 Package can be used as Phoenix Plugin

• Just needs a few lines of configuration

Tuesday 26 June 12

Module System

Tuesday 26 June 12

Single Page Modules

• Backend Modules!• Use the Javascript Framework you like• Style it to fit your needs• reuse our interface widgets

Tuesday 26 June 12

User Interface

Tuesday 26 June 12

Tuesday 26 June 12

Tuesday 26 June 12

Tuesday 26 June 12

Tuesday 26 June 12

Tuesday 26 June 12

Tuesday 26 June 12

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

Progressvery slow

Tuesday 26 June 12

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

Why... no progress?

Tuesday 26 June 12

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

Why... no progress?

• Difficult to build stable + extensible JS application

Tuesday 26 June 12

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

Why... no progress?

• Difficult to build stable + extensible JS application

• we could not use FLOW3 strenghts for Phoenix

Tuesday 26 June 12

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

Tuesday 26 June 12

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

Tuesday 26 June 12

The UX Concept from Last Year

Tuesday 26 June 12

The UX Concept from Last Year

Visionary!

Tuesday 26 June 12

Tuesday 26 June 12

Tuesday 26 June 12

Tuesday 26 June 12

Tuesday 26 June 12

Tuesday 26 June 12

Tuesday 26 June 12

Tuesday 26 June 12

Which kind of web applications

do I use?

Tuesday 26 June 12

Tuesday 26 June 12

Tuesday 26 June 12

Tuesday 26 June 12

Tuesday 26 June 12

Web-StyleApplication

Desktop-StyleApplication

Tuesday 26 June 12

Try outsomethingnew...

Tuesday 26 June 12

Try outsomethingnew...

take thebird-eyeview

Tuesday 26 June 12

Tuesday 26 June 12

ReliableEditing

Tuesday 26 June 12

ReliableEditing

PredictableBehavior

Tuesday 26 June 12

ReliableEditing

PredictableBehavior

ImmediateUser Feedback

Tuesday 26 June 12

ReliableEditing

PredictableBehavior

ImmediateUser Feedback

Built With The Web - For The Web

Tuesday 26 June 12

more pragmatic

Tuesday 26 June 12

Technical Foundations

• ExtJS where it makes sense

• good mixture of Server- and Client Side

• SproutCore 2

Tuesday 26 June 12

Wanna See It Live?

Tuesday 26 June 12

Really?

Tuesday 26 June 12

Demo!

Tuesday 26 June 12

UI Architecture

Tuesday 26 June 12

EmberJS

Tuesday 26 June 12

About EmberJS

• build on top of jQuery

• strong MVC concept

• MIT license

• mobile.me and iWork

Tuesday 26 June 12

Data Binding

Tuesday 26 June 12

Data Binding truly connects your UI and data

Content (Data)

UI ComponentUI Component

Tuesday 26 June 12

Tuesday 26 June 12

Tuesday 26 June 12

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

</div>

How Handlebars Templates Look Like

Tuesday 26 June 12

Content Module Architecture

Tuesday 26 June 12

DOM Manipulation allows us

• integration into the existing website

• no frames needed

• content editing wysiwyg

Tuesday 26 June 12

Using FLOW3

Tuesday 26 June 12

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

Use the strengths of the foundation

Tuesday 26 June 12

Productivity!

Tuesday 26 June 12

Tuesday 26 June 12

TypoScript 2

Tuesday 26 June 12

TypoScript 2 usage

• mainly dealing with nodes

• but not always involving a node

• nodes can be rendered multiple times

• flexibility needed

• hierarchical access to nodes

Tuesday 26 June 12

• TypoScript v4: extensibility, stdWrap

• Fluid: HTML Templating

• JavaScript: Prototype-based inheritance

• jQuery: selecting nodes, fluent interface

• CSS: set-based API; Selector Syntax

• XPath: Traversal Operations

Inspirations

Tuesday 26 June 12

Foundations

Tuesday 26 June 12

FLOW3 1.1

• Internationalisation

• Speed Improvements

• HTTP Foundations

Tuesday 26 June 12

Node Repository

• Polishing API

• Sorting Nodes

Tuesday 26 June 12

Installation Tool

• Almost ready

• Few simple steps to get your Phoenix installation running

Tuesday 26 June 12

The Future

Tuesday 26 June 12

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

Tuesday 26 June 12

Next Steps

• System / Reports Views

• fine-tune editing and module API

• Implement a proper design

• find a name

RELEASE!

Tuesday 26 June 12

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

Tuesday 26 June 12

Wrap-Up

Tuesday 26 June 12

Thank You!

Tuesday 26 June 12

Tuesday 26 June 12

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

Tuesday 26 June 12

Tuesday 26 June 12

inspiring people to share.

Tuesday 26 June 12