The Current State of TYPO3 Phoenix -- T3CON11

2,911 views
2,827 views

Published on

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.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,911
On SlideShare
0
From Embeds
0
Number of Embeds
628
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

The Current State of TYPO3 Phoenix -- T3CON11

  1. 1. TYPO3 Phoenix The Current State Sebastian Kurfürst Christian MüllerSonntag, 9. Oktober 11
  2. 2. Sebastian Christian Kurfürst Müller @skurfuerst @daskitsunetSonntag, 9. Oktober 11
  3. 3. Changes since last year Content Plugin User Model System InterfaceSonntag, 9. Oktober 11
  4. 4. Content ModelSonntag, 9. Oktober 11
  5. 5. 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 ametSonntag, 9. Oktober 11
  6. 6. 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” workspaceSonntag, 9. Oktober 11
  7. 7. 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” workspaceSonntag, 9. Oktober 11
  8. 8. Plugin SystemSonntag, 9. Oktober 11
  9. 9. Plugin System • Every FLOW3 Package can be used as Phoenix PluginSonntag, 9. Oktober 11
  10. 10. 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: indexSonntag, 9. Oktober 11
  11. 11. ss re Plugin System og Pr in • Every FLOW3 Package can be used as Phoenix k or PluginW TYPO3: TYPO3CR: contentTypes: TYPO3.Conference:Plugin: superTypes: [TYPO3.TYPO3:Plugin] label: TYPO3 Conference Plugin properties: package: default: TYPO3.Conference controller: default: Conference action: default: indexSonntag, 9. Oktober 11
  12. 12. User InterfaceSonntag, 9. Oktober 11
  13. 13. Sonntag, 9. Oktober 11
  14. 14. Sonntag, 9. Oktober 11
  15. 15. Sonntag, 9. Oktober 11
  16. 16. Sonntag, 9. Oktober 11
  17. 17. Sonntag, 9. Oktober 11
  18. 18. Sonntag, 9. Oktober 11
  19. 19. http://www.sxc.hu/photo/1281342 Progress very slowSonntag, 9. Oktober 11
  20. 20. http://www.sxc.hu/photo/1281342 Why... no progress?Sonntag, 9. Oktober 11
  21. 21. http://www.sxc.hu/photo/1281342 Why... no progress? • Difficult to build stable + extensible JS applicationSonntag, 9. Oktober 11
  22. 22. http://www.sxc.hu/photo/1281342 Why... no progress? • Difficult to build stable + extensible JS application • we could not use FLOW3 strenghts for PhoenixSonntag, 9. Oktober 11
  23. 23. 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 complexSonntag, 9. Oktober 11
  24. 24. 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 processSonntag, 9. Oktober 11
  25. 25. The UX Concept from Last YearSonntag, 9. Oktober 11
  26. 26. The UX Concept from Last Year Visionary!Sonntag, 9. Oktober 11
  27. 27. Sonntag, 9. Oktober 11
  28. 28. Sonntag, 9. Oktober 11
  29. 29. Sonntag, 9. Oktober 11
  30. 30. Sonntag, 9. Oktober 11
  31. 31. Sonntag, 9. Oktober 11
  32. 32. Sonntag, 9. Oktober 11
  33. 33. Sonntag, 9. Oktober 11
  34. 34. Which kind of web applications do I use?Sonntag, 9. Oktober 11
  35. 35. Sonntag, 9. Oktober 11
  36. 36. Sonntag, 9. Oktober 11
  37. 37. Sonntag, 9. Oktober 11
  38. 38. Sonntag, 9. Oktober 11
  39. 39. Desktop-Style Web-Style Application ApplicationSonntag, 9. Oktober 11
  40. 40. Sonntag, 9. Oktober 11
  41. 41. Sonntag, 9. Oktober 11
  42. 42. Try out something new...Sonntag, 9. Oktober 11
  43. 43. take the bird-eye view Try out something new...Sonntag, 9. Oktober 11
  44. 44. Sonntag, 9. Oktober 11
  45. 45. Reliable EditingSonntag, 9. Oktober 11
  46. 46. Reliable Predictable Editing BehaviorSonntag, 9. Oktober 11
  47. 47. Reliable Predictable Editing Behavior Immediate User FeedbackSonntag, 9. Oktober 11
  48. 48. Reliable Predictable Editing Behavior Immediate Built With The Web - User Feedback For The WebSonntag, 9. Oktober 11
  49. 49. more pragmaticSonntag, 9. Oktober 11
  50. 50. Technical Foundations • ExtJS where it makes sense • good mixture of Server- and Client Side • SproutCore 2Sonntag, 9. Oktober 11
  51. 51. Wanna See It Live?Sonntag, 9. Oktober 11
  52. 52. Really?Sonntag, 9. Oktober 11
  53. 53. Demo!Sonntag, 9. Oktober 11
  54. 54. UI ArchitectureSonntag, 9. Oktober 11
  55. 55. Sproutcore 2Sonntag, 9. Oktober 11
  56. 56. About Sproutcore • build on top of jQuery • strong MVC concept • MIT license • mobile.me and iWorkSonntag, 9. Oktober 11
  57. 57. Data BindingSonntag, 9. Oktober 11
  58. 58. Data Binding truly connects your UI and data UI Component UI Component Content (Data)Sonntag, 9. Oktober 11
  59. 59. Sonntag, 9. Oktober 11
  60. 60. Sonntag, 9. Oktober 11
  61. 61. Data Binding Code Example onPreviewModeChange: function() { window.localStorage.previewMode = this.get(previewMode) ? true : false; }.observes(previewMode)Sonntag, 9. Oktober 11
  62. 62. Computed Properties __publishable: function() { ! return (this.get(__workspacename) !== live); }.property(__workspacename).cacheable(),Sonntag, 9. Oktober 11
  63. 63. Handlebars TemplatesSonntag, 9. Oktober 11
  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>Sonntag, 9. Oktober 11
  65. 65. Content Module ArchitectureSonntag, 9. Oktober 11
  66. 66. Use the website for editing content <html> <body> <div id=”myWebsiteCode”> </div> </body> </html> <div id=”t3-backend”>...</div>Sonntag, 9. Oktober 11
  67. 67. Use the website for editing content <html> <body> <div id=”t3-backend”>...</div> <div id=”myWebsiteCode”> </div> </body> </html>Sonntag, 9. Oktober 11
  68. 68. Using FLOW3Sonntag, 9. Oktober 11
  69. 69. Use the strengths of the foundation •use Fluid templates •request pre-made elements from server •separate modules •securitySonntag, 9. Oktober 11
  70. 70. Productivity!Sonntag, 9. Oktober 11
  71. 71. Sonntag, 9. Oktober 11
  72. 72. The FutureSonntag, 9. Oktober 11
  73. 73. http://www.sxc.hu/photo/107023 Code Sprints bildSonntag, 9. Oktober 11
  74. 74. Next Steps • Management / System / Reports View • fine-tune editing and plugin API • re-think rendering process (TypoScript vs Fluid)Sonntag, 9. Oktober 11
  75. 75. 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 rootSonntag, 9. Oktober 11
  76. 76. Wrap-UpSonntag, 9. Oktober 11
  77. 77. Sonntag, 9. Oktober 11
  78. 78. Sonntag, 9. Oktober 11
  79. 79. Thank You!Sonntag, 9. Oktober 11
  80. 80. Sonntag, 9. Oktober 11
  81. 81. ???? ?? ?? ? ?? ? ?Sonntag, 9. Oktober 11
  82. 82. Sonntag, 9. Oktober 11
  83. 83. inspiring people to share.Sonntag, 9. Oktober 11

×