Recent progress of TYPO3 backend usability is really changing the way we see TYPO3 as a tool for a large variety of editors, from tech-savy "superusers" to once-in-a-while average users with no particular technical insight. However we recently faced a project where the editors needed an even simpler, and in many cases much less versatile backend. Many features of the TYPO3 backend were not needed, but the ones that were, needed to be dead-simple. The editors requiring this simplicity are all members of a large danish political parti running for government, and thus the candidates are busy campaigning, and need a system that facilitates fast and easy editing of their websites. In order to provide this, we developed a new custom ExtJS (now Sencha) based backend programmed in close collaboration with a representative of the client. We will show how its possible to use TYPO3 combined with a custom backend for uses requiring this sort of extremely simplistic (but feature limited) editing. The talk will focus on how the clients requirements were met and how he full project was completed as an agile project during a very intensive 2 month period using SCRUM.

1. A custom, easy to
use TYPO3
backend with ExtJS
Jan-Erik Revsbech
<janerik@mocsystems.com>
MOC

2. Outline
• Introduction
• Background
• Why a new backend?
• Requirements and solution
• Demonstration
• Challenges
• Conclusions
MOC

3. Introduction
• TYPO3: Easy to use, especially for
the regular editor
• Front-end editing: Works, but was
not considered easy enough to use.
• Recent development is in progress,
but not yet finished.
MOC

4. Background
• A new digital strategy based on
social media
• Limit support
• Common visual identity for all
candidates
MOC

5. Requirements
• Small but visually appealing
candidate websites acting as a hub
for social media services
• Primary content from social media
• Themeable
• Good-looking, stringent design
• Possibility to kickstart new sites
• Extremely simple and intuitive to use
• Hard deadline
MOC

6. The editors
• Candidates for danish party
• Busy schedules
• Their website might not be the primary
information channel
• Not interested in technology, only in content.
Technology is not the driving force
• Utilizing existing information channels
• Varying personas, from the very infrequent
user to the dedicated webmaster
• Must be able to manage their websites
themselves
MOC

7. The competitors system
“The webmaster should not be
scared if the webdepartment
recommends him to write the link
himself in HTML.”
MOC

8. The websites
• Basic grid-based front
page with a social media
feed, mixing twitter,
facebook, youtube and
flickr entries.
• Standard top and right
column, only content in
central column is directly
editable
• Manual ordering of content
• All componentes made
with Extbase
MOC

9. A new TYPO3 backend
MOC

10. The need-to-have’s
• Front end editing. Seamless integrated into website
• Drag’n’drop of content
• Actively control the source and order of the social-
media-stream
• Easy editing of “standard” content settings and
content elements
• Integration to
• Twitter
• Facebook
• Flickr
• Youtube
• Standard settings should migrate content from central
party social feeds. “Kickstart and leave”
MOC

11. The custom backend
• Fully integrated into
website
• Stripped from
unnecessary
complexity
• Visually appealing
• Using familiar icons
MOC

12. Editing settings
• Standard
formfields
• Tab based editing
of all settings
• Easy image
selection
MOC

13. Simple editing of content
MOC

14. Tooltip help where necessary
MOC

15. Publishing
• Publishing content
when ready
• Previewing content
seamlessly
MOC

16. Technical considerations
• Using real TYPO3 backend editors
• Utilizing existing workspaces
framework
• Submitting all content editing via
ajax, updating necessary content
when needed
• Using ExtJS
MOC

17. Reasons for using ExtJS
• Standard framework for TYPO3
version 4.3 and above (and Phoenix)
• Many standard components: Panels,
tabs, gridviews, tooltips etc.
• Tested in various (needed) browsers
MOC

18. Considerations with ExtJS
• Removing the “ExtJS” feel of the new
backend application
• Learning a new large JavaScript
framework
• Browser compatibility and general
support
MOC

19. Demonstration
MOC

20. Challenges
• Versioning/workspaces
• ExtJS
• Maintaining a large JavaScript
framework
• Browser compatibility
• Performance
MOC

21. Conclusions
• TYPO3 and ExtJS was the right choice
• It definitively is possible to create a
custom backend using ExtJS for
application building.
MOC