A Custom ExtJS backend for TYPO3


Published on

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
  • 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

No notes for slide

  • A Custom ExtJS backend for TYPO3

    1. 1. A custom, easy to use TYPO3 backend with ExtJS Jan-Erik Revsbech <janerik@mocsystems.com> MOC
    2. 2. Outline • Introduction • Background • Why a new backend? • Requirements and solution • Demonstration • Challenges • Conclusions MOC
    3. 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. 4. Background • A new digital strategy based on social media • Limit support • Common visual identity for all candidates MOC
    5. 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. 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. 7. The competitors system “The webmaster should not be scared if the webdepartment recommends him to write the link himself in HTML.” MOC
    8. 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. 9. A new TYPO3 backend MOC
    10. 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. 11. The custom backend • Fully integrated into website • Stripped from unnecessary complexity • Visually appealing • Using familiar icons MOC
    12. 12. Editing settings • Standard formfields • Tab based editing of all settings • Easy image selection MOC
    13. 13. Simple editing of content MOC
    14. 14. Tooltip help where necessary MOC
    15. 15. Publishing • Publishing content when ready • Previewing content seamlessly MOC
    16. 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. 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. 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. 19. Demonstration MOC
    20. 20. Challenges • Versioning/workspaces • ExtJS • Maintaining a large JavaScript framework • Browser compatibility • Performance MOC
    21. 21. Conclusions • TYPO3 and ExtJS was the right choice • It definitively is possible to create a custom backend using ExtJS for application building. MOC