The upcoming TYPO3 version 5.0 - codename Phoenix - will be a revolution. Not only on the server-side there will be fundamental changes in the way of programming the system and its extensions also the backend interface will feature many revolutionary ideas of working with a content management system. The implementation of the user interface needs to address these new concepts and allow for a flexible yet robust architecture.

1. * Bild austauschen
* fehlende
Bildver weise
ersetzen
T3CON10 Inspiring people to
Development of the TYPO3 Phoenix User Interface with Ext JS share
Dienstag, 5. Oktober 2010

2. Development of the TYPO3 Phoenix
User Interface with Ext JS
01.10.2010
Nils Dehl <nils.dehl@dkd.de>
Christopher Hlubek <hlubek@networkteam.com>
Dienstag, 5. Oktober 2010

3. Christopher Hlubek Nils Dehl
twitter: hlubek twitter: nilsdehl
Inspiring people to
Development of the TYPO3 Phoenix User Interface with Ext JS
share
Dienstag, 5. Oktober 2010

4. Agenda
Introduction
Challenges of implementing the TYPO3 Phoenix UI
Choosing Ext JS
The Phoenix JS UI architecture
Next steps
Questions
Inspiring people to
Development of the TYPO3 Phoenix User Interface with Ext JS
share
Dienstag, 5. Oktober 2010

5. Introduction
Inspiring people to
Development of the TYPO3 Phoenix User Interface with Ext JS
share
Dienstag, 5. Oktober 2010

6. Dienstag, 5. Oktober 2010

7. Dienstag, 5. Oktober 2010

8. Challenges
of implementing the TYPO3
Phoenix UI
Inspiring people to
Development of the TYPO3 Phoenix User Interface with Ext JS
share
Dienstag, 5. Oktober 2010

9. 1 Smooth workflow &
rich user experience
Development of the TYPO3 Phoenix User Interface with Ext JS Inspiring people to
share
Dienstag, 5. Oktober 2010

10. Traditional web interface
Web > Page Web > List Web > Preview
Template Workspace
Page load
Inspiring people to
Development of the TYPO3 Phoenix User Interface with Ext JS
share
Dienstag, 5. Oktober 2010

11. Phoenix user interface
Web > List
Web Template
> Page
Workspace
Web > Preview
Single page
Page load
Inspiring people to
Development of the TYPO3 Phoenix User Interface with Ext JS
share
Dienstag, 5. Oktober 2010

12. Single page workflow
Load everything at once
Intelligent initialization
Manage browser history
Inspiring people to
Development of the TYPO3 Phoenix User Interface with Ext JS
share
Dienstag, 5. Oktober 2010

13. 2 Extensibility
Development of the TYPO3 Phoenix User Interface with Ext JS Inspiring people to
share
Dienstag, 5. Oktober 2010

14. Insert section
Insert menu item
Add column
Dienstag, 5. Oktober 2010

15. Add form field
Change input
type
Add dialog
Dienstag, 5. Oktober 2010

16. 1s
Extensibility
tl
ev
el
co
n ce
Extend everything
p t
Don‘t worry about extensibility
Easy API
Inspiring people to
Development of the TYPO3 Phoenix User Interface with Ext JS
share
Dienstag, 5. Oktober 2010

17. 3 Development with many
(unknown) people
Consistency
Intuitive concepts
Simple vs. Flexible
Inspiring people to
Development of the TYPO3 Phoenix User Interface with Ext JS
share
Dienstag, 5. Oktober 2010

18. 4 Robust API
(safe and maintainable)
Using it right should be simple
Good documentation
Stable vs. Extensible
Inspiring people to
Development of the TYPO3 Phoenix User Interface with Ext JS
share
Dienstag, 5. Oktober 2010

19. Choosing Ext JS
Inspiring people to
Development of the TYPO3 Phoenix User Interface with Ext JS
share
Dienstag, 5. Oktober 2010

20. Dienstag, 5. Oktober 2010

21. Dienstag, 5. Oktober 2010

22. ExtJS
very rich component library
cross-browser compatible
great component model
many nice abstractions, f.e. Data Stores
uses Layout Managers
easy to extend
Inspiring people to
Development of the TYPO3 Phoenix User Interface with Ext JS
share
Dienstag, 5. Oktober 2010

23. Ext Direct
Controller
RPC Action
Client
Controller
Action
Server
Inspiring people to
Development of the TYPO3 Phoenix User Interface with Ext JS
share
Dienstag, 5. Oktober 2010

24. The Phoenix JS UI architecture
Inspiring people to
Development of the TYPO3 Phoenix User Interface with Ext JS
share
Dienstag, 5. Oktober 2010

25. JavaScript UI architecture
Base UI
Base Components
Initialization Configuration
ExtDirect
Schema Security Services
I18N
information ACLs
Inspiring people to
Development of the TYPO3 Phoenix User Interface with Ext JS
share
Dienstag, 5. Oktober 2010

26. JavaScript UI concepts
Configuration
Initialization
Module
Helper API
Event container
Inspiring people to
Development of the TYPO3 Phoenix User Interface with Ext JS
share
Dienstag, 5. Oktober 2010

27. Creating Modules
Application.createModule(‘F3...SomeModule‘, {
configure: function(registry) {
registry.set(‘form/type/...‘, ‘value‘);
},
initialize: function(application) {
application.afterInitializationOf(‘F3...SomeModule‘,
function(someModule) { ... }
);
}
});
Inspiring people to
Development of the TYPO3 Phoenix User Interface with Ext JS
share
Dienstag, 5. Oktober 2010

28. Initialization
Dienstag, 5. Oktober 2010

29. Initialization order
?
Module 2 Module 3
Module 4
Module 1
t
Inspiring people to
Development of the TYPO3 Phoenix User Interface with Ext JS
share
Dienstag, 5. Oktober 2010

30. Dienstag, 5. Oktober 2010

31. Application initialization
create
Module addContent initialize
for every Module:
for every Module:
configure()
initialize()
Area viewport
create
Module
create ... ...
Module
afterInitializationOf Application.
DOM onReady
UserInterfaceModule afterBootstrap
t
Inspiring people to
Development of the TYPO3 Phoenix User Interface with Ext JS
share
Dienstag, 5. Oktober 2010

32. Initialization process
Module A Module B
afterInitialization ...
afterInitialization ...
register events
register events
afterBootstrap
afterBootstrap
configure()
configure()
initialize()
Application initialize()
Inspiring people to
Development of the TYPO3 Phoenix User Interface with Ext JS
share
Dienstag, 5. Oktober 2010

33. Configuration
Dienstag, 5. Oktober 2010

34. Registry
menu
main
content
title "Content"
Inspiring people to
Development of the TYPO3 Phoenix User Interface with Ext JS
share
Dienstag, 5. Oktober 2010

35. Registry registry.set(
'menu/main[]/content/title',
menu 'Welcome'
)
main
content
title "Welcome"
"Content"
Inspiring people to
Development of the TYPO3 Phoenix User Interface with Ext JS
share
Dienstag, 5. Oktober 2010

36. Registry registry.set(
'menu/main[]/content/title',
menu 'Welcome'
)
main
registry.append(
'menu/main[]', 'management',
content {title: 'Mgmt'}
)
title "Welcome"
"Content"
management
title "Mgmt"
Inspiring people to
Development of the TYPO3 Phoenix User Interface with Ext JS
share
Dienstag, 5. Oktober 2010

37. Registry registry.set(
'menu/main[]/content/title',
menu 'Welcome'
)
main
registry.set(
'menu/main[]/management/
content title', 'Manage'
)
title "Welcome"
"Content" registry.append(
'menu/main[]', 'management',
management {title: 'Mgmt'}
)
title "Mgmt"
"Manage"
Inspiring people to
Development of the TYPO3 Phoenix User Interface with Ext JS
share
Dienstag, 5. Oktober 2010

38. Registry
Order independent configuration
Needs compilation after
Create any JSON structure
Menus
Form definitions
Grid columns
...
Inspiring people to
Development of the TYPO3 Phoenix User Interface with Ext JS
share
Dienstag, 5. Oktober 2010

39. Next Steps
Refine the API
Implement more features
Create lots of custom components
Implement the new design
And for that...
Inspiring people to
Development of the TYPO3 Phoenix User Interface with Ext JS
share
Dienstag, 5. Oktober 2010

40. We need you!
Inspiring people to
Development of the TYPO3 Phoenix User Interface with Ext JS
share
Dienstag, 5. Oktober 2010

41. ????
??
??
?
??
?
?
Inspiring people to
Development of the TYPO3 Phoenix User Interface with Ext JS
share
Dienstag, 5. Oktober 2010

42. inspiring people to share.
Dienstag, 5. Oktober 2010