Your SlideShare is downloading. ×
  • Like
A Custom ExtJS backend for TYPO3
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

A Custom ExtJS backend for TYPO3


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 …

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.

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. A custom, easy to use TYPO3 backend with ExtJS Jan-Erik Revsbech <> 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