TYPO3 Phoenix       The Current State        Christian MüllerTuesday 26 June 12
Christian Müller                     @daskitsunetTuesday 26 June 12
What did we do?                     Content      Plugin        Module                      Model       System        Syste...
Content ModelTuesday 26 June 12
Node Tree                     site root                             page                                 content section  ...
Node Paths                     /sites/typo3org/home/subpage/main/text1Tuesday 26 June 12
Node Paths                     /sites/typo3org/home/subpage/main/text1                          site rootTuesday 26 June 12
Node Paths                     /sites/typo3org/home/subpage/main/text1                          site root                 ...
Node Paths                     /sites/typo3org/home/subpage/main/text1                          site root             sect...
Node Paths                     /sites/typo3org/home/subpage/main/text1                          site root             sect...
ContextTuesday 26 June 12
Context is                     •   an environment a node exists in                     •   for example a workspace or a la...
Plugin SystemTuesday 26 June 12
Plugin System       • Every FLOW3 Package can be used as Phoenix Plugin       • Just needs a few lines of configurationTues...
Module SystemTuesday 26 June 12
Single Page Modules       • Backend Modules!       • Use the Javascript Framework you like       • Style it to fit your nee...
User InterfaceTuesday 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                                  Progress                                  very slowTuesda...
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 applica...
http://www.sxc.hu/photo/1281342           Why... no progress?           • Difficult to build stable + extensible JS applica...
http://www.sxc.hu/photo/1281342           Why... no progress?           • Difficult to build stable + extensible JS applica...
http://www.sxc.hu/photo/1281342           Why... no progress?           • Difficult to build stable + extensible JS applica...
The UX Concept from Last YearTuesday 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
Desktop-Style   Web-Style                  Application    ApplicationTuesday 26 June 12
Try out    something    new...Tuesday 26 June 12
take the                     bird-eye                     view    Try out    something    new...Tuesday 26 June 12
Tuesday 26 June 12
Reliable                     EditingTuesday 26 June 12
Reliable   Predictable                     Editing    BehaviorTuesday 26 June 12
Reliable        Predictable                     Editing         Behavior                     Immediate                    ...
Reliable         Predictable                     Editing          Behavior                     Immediate       Built With ...
more pragmaticTuesday 26 June 12
Technical Foundations       • ExtJS where it makes sense       • good mixture of Server- and Client Side       • SproutCor...
Wanna See It Live?Tuesday 26 June 12
Really?Tuesday 26 June 12
Demo!Tuesday 26 June 12
UI ArchitectureTuesday 26 June 12
EmberJSTuesday 26 June 12
About EmberJS       • build on top of jQuery       • strong MVC concept       • MIT license       • mobile.me and iWorkTue...
Data BindingTuesday 26 June 12
Data Binding truly connects your UI and data           UI Component                    UI Component                       ...
Tuesday 26 June 12
Tuesday 26 June 12
How Handlebars Templates Look Like       <div class="t3-inspect">         {{view T3.Content.UI.InspectButton         press...
Content Module                       ArchitectureTuesday 26 June 12
DOM Manipulation allows us       • integration into the existing website       • no frames needed       • content editing ...
Using FLOW3Tuesday 26 June 12
Use the strengths of the foundation       •use Fluid templates       •request pre-made elements from server       •separat...
Productivity!Tuesday 26 June 12
Tuesday 26 June 12
TypoScript 2Tuesday 26 June 12
TypoScript 2 usage                     • mainly dealing with nodes                     • but not always involving a node  ...
Inspirations                     • TypoScript v4: extensibility, stdWrap                     • Fluid: HTML Templating     ...
FoundationsTuesday 26 June 12
FLOW3 1.1       • Internationalisation       • Speed Improvements       • HTTP FoundationsTuesday 26 June 12
Node Repository       • Polishing API       • Sorting NodesTuesday 26 June 12
Installation Tool       • Almost ready       • Few simple steps to get your Phoenix installation            runningTuesday...
The FutureTuesday 26 June 12
http://www.sxc.hu/photo/107023Tuesday 26 June 12
Next Steps       •    System / Reports Views       •    fine-tune editing and module API       •    Implement a proper desi...
Running Phoenix Yourself       • Follow http://wwwision.de/githelper/#TYPO3v5/Distributions/Base.git for checking out from...
Wrap-UpTuesday 26 June 12
Thank You!Tuesday 26 June 12
Tuesday 26 June 12
????                        ??                        ??                         ?                      ??                ...
Tuesday 26 June 12
inspiring people to share.Tuesday 26 June 12
Upcoming SlideShare
Loading in …5
×

[T3CON12CA] TYPO3 Phoenix - The Current State

1,357 views

Published on

Held at the T3CON12CA in Québec, Canada on 15th of June 2012.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,357
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

[T3CON12CA] TYPO3 Phoenix - The Current State

  1. 1. TYPO3 Phoenix The Current State Christian MüllerTuesday 26 June 12
  2. 2. Christian Müller @daskitsunetTuesday 26 June 12
  3. 3. What did we do? Content Plugin Module Model System System User TypoScript Foundations InterfaceTuesday 26 June 12
  4. 4. Content ModelTuesday 26 June 12
  5. 5. Node Tree site root page content section content element representation of domain modelsTuesday 26 June 12
  6. 6. Node Paths /sites/typo3org/home/subpage/main/text1Tuesday 26 June 12
  7. 7. Node Paths /sites/typo3org/home/subpage/main/text1 site rootTuesday 26 June 12
  8. 8. Node Paths /sites/typo3org/home/subpage/main/text1 site root pagesTuesday 26 June 12
  9. 9. Node Paths /sites/typo3org/home/subpage/main/text1 site root section pagesTuesday 26 June 12
  10. 10. Node Paths /sites/typo3org/home/subpage/main/text1 site root section pages contentTuesday 26 June 12
  11. 11. ContextTuesday 26 June 12
  12. 12. Context is • an environment a node exists in • for example a workspace or a languageTuesday 26 June 12
  13. 13. Plugin SystemTuesday 26 June 12
  14. 14. Plugin System • Every FLOW3 Package can be used as Phoenix Plugin • Just needs a few lines of configurationTuesday 26 June 12
  15. 15. Module SystemTuesday 26 June 12
  16. 16. Single Page Modules • Backend Modules! • Use the Javascript Framework you like • Style it to fit your needs • reuse our interface widgetsTuesday 26 June 12
  17. 17. User InterfaceTuesday 26 June 12
  18. 18. Tuesday 26 June 12
  19. 19. Tuesday 26 June 12
  20. 20. Tuesday 26 June 12
  21. 21. Tuesday 26 June 12
  22. 22. Tuesday 26 June 12
  23. 23. Tuesday 26 June 12
  24. 24. http://www.sxc.hu/photo/1281342 Progress very slowTuesday 26 June 12
  25. 25. http://www.sxc.hu/photo/1281342 Why... no progress?Tuesday 26 June 12
  26. 26. http://www.sxc.hu/photo/1281342 Why... no progress? • Difficult to build stable + extensible JS applicationTuesday 26 June 12
  27. 27. http://www.sxc.hu/photo/1281342 Why... no progress? • Difficult to build stable + extensible JS application • we could not use FLOW3 strenghts for PhoenixTuesday 26 June 12
  28. 28. 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 complexTuesday 26 June 12
  29. 29. 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 processTuesday 26 June 12
  30. 30. The UX Concept from Last YearTuesday 26 June 12
  31. 31. The UX Concept from Last Year Visionary!Tuesday 26 June 12
  32. 32. Tuesday 26 June 12
  33. 33. Tuesday 26 June 12
  34. 34. Tuesday 26 June 12
  35. 35. Tuesday 26 June 12
  36. 36. Tuesday 26 June 12
  37. 37. Tuesday 26 June 12
  38. 38. Tuesday 26 June 12
  39. 39. Which kind of web applications do I use?Tuesday 26 June 12
  40. 40. Tuesday 26 June 12
  41. 41. Tuesday 26 June 12
  42. 42. Tuesday 26 June 12
  43. 43. Tuesday 26 June 12
  44. 44. Desktop-Style Web-Style Application ApplicationTuesday 26 June 12
  45. 45. Try out something new...Tuesday 26 June 12
  46. 46. take the bird-eye view Try out something new...Tuesday 26 June 12
  47. 47. Tuesday 26 June 12
  48. 48. Reliable EditingTuesday 26 June 12
  49. 49. Reliable Predictable Editing BehaviorTuesday 26 June 12
  50. 50. Reliable Predictable Editing Behavior Immediate User FeedbackTuesday 26 June 12
  51. 51. Reliable Predictable Editing Behavior Immediate Built With The Web - User Feedback For The WebTuesday 26 June 12
  52. 52. more pragmaticTuesday 26 June 12
  53. 53. Technical Foundations • ExtJS where it makes sense • good mixture of Server- and Client Side • SproutCore 2Tuesday 26 June 12
  54. 54. Wanna See It Live?Tuesday 26 June 12
  55. 55. Really?Tuesday 26 June 12
  56. 56. Demo!Tuesday 26 June 12
  57. 57. UI ArchitectureTuesday 26 June 12
  58. 58. EmberJSTuesday 26 June 12
  59. 59. About EmberJS • build on top of jQuery • strong MVC concept • MIT license • mobile.me and iWorkTuesday 26 June 12
  60. 60. Data BindingTuesday 26 June 12
  61. 61. Data Binding truly connects your UI and data UI Component UI Component Content (Data)Tuesday 26 June 12
  62. 62. Tuesday 26 June 12
  63. 63. Tuesday 26 June 12
  64. 64. How Handlebars Templates Look Like <div class="t3-inspect"> {{view T3.Content.UI.InspectButton pressedBinding="T3.Content.Controller.Inspect.inspectMode" label="Inspect"}} </div>Tuesday 26 June 12
  65. 65. Content Module ArchitectureTuesday 26 June 12
  66. 66. DOM Manipulation allows us • integration into the existing website • no frames needed • content editing wysiwygTuesday 26 June 12
  67. 67. Using FLOW3Tuesday 26 June 12
  68. 68. Use the strengths of the foundation •use Fluid templates •request pre-made elements from server •separate modules •securityTuesday 26 June 12
  69. 69. Productivity!Tuesday 26 June 12
  70. 70. Tuesday 26 June 12
  71. 71. TypoScript 2Tuesday 26 June 12
  72. 72. TypoScript 2 usage • mainly dealing with nodes • but not always involving a node • nodes can be rendered multiple times • flexibility needed • hierarchical access to nodesTuesday 26 June 12
  73. 73. Inspirations • TypoScript v4: extensibility, stdWrap • Fluid: HTML Templating • JavaScript: Prototype-based inheritance • jQuery: selecting nodes, fluent interface • CSS: set-based API; Selector Syntax • XPath: Traversal OperationsTuesday 26 June 12
  74. 74. FoundationsTuesday 26 June 12
  75. 75. FLOW3 1.1 • Internationalisation • Speed Improvements • HTTP FoundationsTuesday 26 June 12
  76. 76. Node Repository • Polishing API • Sorting NodesTuesday 26 June 12
  77. 77. Installation Tool • Almost ready • Few simple steps to get your Phoenix installation runningTuesday 26 June 12
  78. 78. The FutureTuesday 26 June 12
  79. 79. http://www.sxc.hu/photo/107023Tuesday 26 June 12
  80. 80. Next Steps • System / Reports Views • fine-tune editing and module API • Implement a proper design • find a name RELEASE!Tuesday 26 June 12
  81. 81. 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 installationTuesday 26 June 12
  82. 82. Wrap-UpTuesday 26 June 12
  83. 83. Thank You!Tuesday 26 June 12
  84. 84. Tuesday 26 June 12
  85. 85. ???? ?? ?? ? ?? ? ?Tuesday 26 June 12
  86. 86. Tuesday 26 June 12
  87. 87. inspiring people to share.Tuesday 26 June 12

×