A Custom ExtJS backend for TYPO3

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

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

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 ﬁnished. MOC

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

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

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

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

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

A new TYPO3 backend MOC

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

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

Editing settings • Standard formﬁelds • Tab based editing of all settings • Easy image selection MOC

Simple editing of content MOC

Tooltip help where necessary MOC

Publishing • Publishing content when ready • Previewing content seamlessly MOC

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

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

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

Demonstration MOC

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

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

A Custom ExtJS backend for TYPO3

by Jan-Erik Revsbech on Oct 01, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 28

Statistics

A Custom ExtJS backend for TYPO3 — Presentation Transcript

http://www.bertrandkeller.info	26
http://mediawiki.arsmedium.de	2