magnolia 5 - under the hood
DESCRIPTION
TRANSCRIPT
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
Philipp Bärfuss, Head of Product Development 05.03.2013 at Miami Amplify
Magnolia 5 - Under The Hood
1
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
The Map
The MeThe StoryThe ApproachThe ResultThe Takeaways
2
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
The Me
3
Philipp Bärfuss
36 years, Swiss
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
The legacy is me
4
for 8 years working on the Magnolia CMS
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
One must still have chaos in oneself to be able to give birth to a dancing star.
[Friedrich Nietzsche]
5
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
The Story
6
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
Where are we coming from
7
longing for a better UI for years
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
Bill Gates is a very rich man today... and do you want to know why? The answer
is one word: versions. [Dave Barry]
8
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
History of Versions
9
Text
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
History of Versions
9
Text
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
History of Versions
9
outst
andin
g
usab
ility
Text
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
History of Versions
9
outst
andin
g
usab
ility
mod
ulariz
ation
,
workflow
, DMS
Text
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
History of Versions
9
outst
andin
g
usab
ility
mod
ulariz
ation
,
workflow
, DMS
arch
itectu
re,
upda
tes,
I18n
Text
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
History of Versions
9
outst
andin
g
usab
ility
mod
ulariz
ation
,
workflow
, DMS
arch
itectu
re,
upda
tes,
I18n
perfo
rman
ce,
enterp
rise featur
es
Text
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
History of Versions
9
outst
andin
g
usab
ility
mod
ulariz
ation
,
workflow
, DMS
arch
itectu
re,
upda
tes,
I18n
perfo
rman
ce,
enterp
rise featur
es
templa
ting kit
Text
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
History of Versions
9
outst
andin
g
usab
ility
mod
ulariz
ation
,
workflow
, DMS
arch
itectu
re,
upda
tes,
I18n
perfo
rman
ce,
enterp
rise featur
es
templa
ting kit
usab
ility
&
inte
rope
rabi
lity
Text
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
History of Versions
9
outst
andin
g
usab
ility
mod
ulariz
ation
,
workflow
, DMS
arch
itectu
re,
upda
tes,
I18n
perfo
rman
ce,
enterp
rise featur
es
templa
ting kit
usab
ility
&
inte
rope
rabi
lity
Text
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
History of Versions
9
outst
andin
g
usab
ility
mod
ulariz
ation
,
workflow
, DMS
arch
itectu
re,
upda
tes,
I18n
perfo
rman
ce,
enterp
rise featur
es
templa
ting kit
usab
ility
&
inte
rope
rabi
lity
Text
4.5
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
First Attempt
10
You never know until you try
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
ExtGWT and GWT
11
To heavy, monolithic compilations
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
Second AttemptYou never know until you try again
12
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.13
Vaadin
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Why Vaadin
Rich widget framework
Out-of-the-box theming
Java developer friendly
• Close to Swing• GWT based (Java -> Javascript)• Can integrate any GWT-components• Rare GWT-compiles (compared to plain GWT)
Testing with pure JUnit
Apache License
Well documented
14
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
When I am working on a problem, I never think about beauty but when I have finished, if the solution is not
beautiful, I know it is wrong.[R. Buckminster Fuller]
15
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.16
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
The Failing - Conference 2011
17
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
The Failing - Conference 2011
17
were too late anywayhad overloaded the wagon• we tried do solve everything
too much enterprise too little fun
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
Divide and Conquer
18
Shipped the Backend as 4.5
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
Phoenix out of the ashes
19
We know now what we want to do
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
1) be developers best frienduse Vaadin, quick customizations
20
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
2) mobile revolution
21
be touchy, be iPad
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
3) be user orientedapps, communication, favorites
22
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
4) be a CMSfocus on content management
23
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.24
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
The Approach
24
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
However beautiful the strategy, you should occasionally look at the results.
[Winston Churchill]
25
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
Retrospection is everything
26
no team is perfect but it can get better
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
Obstacle Driven Development
27
obstacles first, features later
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
Innovation flows naturally once the obstacles are removed.
[Me]
28
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Three techniques
29
controlled innovation
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
1) 6 Thinking Hats
30
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
2) Osborne’s Checklist
31
Other uses
• New ways to use as is?
Adapt
• What else is like this?• What could I copy?
Modify
• New twist?
Magnify
• What to add? More time?
Minify
• What to subtract? Smaller?
Substitute
• Who else instead? What else instead?
Rearrange
• Interchange components? Other pattern?
Reverse
• Turn it backward, upside down, inside out?
Combine
• How about a blend, an alloy, an assortment, an
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
3) Negative Brainstorming
32
understanding what to do by knowing what not to do
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
The perfect is the enemy of the good. [Voltaire]
33
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
User Experience Design
34
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
Design is not just what it looks like and feels like. Design is how it works.
[Steve Jobs]
35
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Trinity Icons
36
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Desktop
37
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Touch it or leave it
38
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
The Result
39
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
The Result
40
Main Architecture
Configuration
App-lification
Actions & Commands
Forms & Dialogs
Content App
DAM
Communication
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Main Architecture
41
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Technology Stack
42
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Communication Layer
43
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Dependency Injection - Dev Drugs
44
scopes
• main, app, subapp
injection of
• context, modules, configuration
customizing
• nearly every component can be replaced
standard
• standard annotations
transparent
• constructors declare what is needed
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.45
From Spaghetti
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.45
From Spaghetti
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
To Lasagne
46
Magnolia Core
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
To Lasagne
46
Magnolia Core
Vaadin
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
To Lasagne
46
Magnolia Core
Widgets
Vaadin
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
To Lasagne
46
Magnolia Core
Widgets
UI Framework
Vaadin
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
To Lasagne
46
Magnolia Core
Widgets
UI Framework
Apps
Vaadin
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Packages - Widgets
47
Magnolia Widgets & Components
Shel
l
Form
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Packages - Widgets
47
Magnolia Widgets & Components
Edito
r
Act
ionb
ar
Wor
kben
ch
Dia
logs
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Packages - AdminCentral
48
UI Framework - Apps, Locations, Messages, Actions
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Packages - AdminCentral
48
AdminCentral& Shell Apps
UI Framework - Apps, Locations, Messages, Actions
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Packages - AdminCentral
48
AdminCentral& Shell Apps
App
UI Framework - Apps, Locations, Messages, Actions
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Packages - AdminCentral
48
AdminCentral& Shell Apps
App App
UI Framework - Apps, Locations, Messages, Actions
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Packages - AdminCentral
48
Content App
AdminCentral& Shell Apps
App App
UI Framework - Apps, Locations, Messages, Actions
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Packages - AdminCentral
48
Content App
AdminCentral& Shell Apps
App
App App
UI Framework - Apps, Locations, Messages, Actions
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Packages - AdminCentral
48
Content App
AdminCentral& Shell Apps
App App
App App
UI Framework - Apps, Locations, Messages, Actions
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
The Content Structure
49
Proper Node Types
• mgnl:page, mgnl:component, ...
Proper Mixins for Extensions
• mgnl:renderable, mgnl:activatable
Leaner content structure
• no meta data sub nodes
Binaries are nt:resources nodes
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Presenters and Views
50
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
The Result
51
Main Architecture
Configuration
App-lification
Actions & Commands
Forms & Dialogs
Content App
DAM
Communication
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
UI Model - Definitions
52
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Registries, Definitions and Providers
53
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Configuration by Code - DSL
54
1. apps().content().workspace("data").root("/contacts")2. .types(3. type("contact").icon("/xxx").dialog(4. dialog("contact").title("Group").tabs(5. tab("base").title("Contact").fields(6. field("firstname").text().title("Name"),7. field("lastname").text().title("Lastname")))),8. 9. type("group").icon("/xxx").dialog(10. dialog("group").title("Group").tabs(11. tab("group").title("Group").fields(12. field("name").text().title("Group Name")))13. .subTypes("contact"))14. 15. .columns(16. column("name").text().title("Name").bindings(17. binding().type("group").to("name")18. binding().type("contact").to("firstname")),19. column("modDate").text().title("Modification Date").bindings(20. binding().allTypes().metaData("modificationDate")))
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Configuration by Code - Annotations
55
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
The Result
56
Main Architecture
Configuration
App-lification
Actions & Commands
Forms & Dialogs
Content App
DAM
Communication
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
It’s a UI Component
57
has its own context and lifecycle
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Launch it
58
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
App API - UML
59
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Location, Location, Location
60
URL Anchor
• #app:<appName>:<subAppId>:<parameter>
In App navigation
• main, app, subapp
Bookmarks
• save URL, send them to other users, ...
History
• back and forward buttons
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Developer’s View
61
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
It’s the Context
62
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Take the Bus - In App communication
63
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Apps vs. Modules
App is a UI component
Module can have
• Apps• Templates• Extensions
64
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.65
Are you following me ....
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.65
Are you following me ....
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
The Result
66
Main Architecture
Configuration
App-lification
Actions & Commands
Forms & Dialogs
Content App
DAM
Communication
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Actions and Commands
67
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Actions
68
The UI event handling
Open Dialog
Call Command
Show message to user
Change location
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Commands
69
Backend executable
No UI
Invoked by
• UI• WebServices• Workflow
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Action Bar
70
Configured
• Customize the App• Add Actions by Module
Independent
• Content Apps• Page Editor• Messages
Preview
Sensitive
• Content type
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
The Result
71
Main Architecture
Configuration
App-lification
Actions & Commands
Forms & Dialogs
Content App
DAM
Communication
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Form, Fields and Tabs
72
Configured
• no coding needed
Independent
• used in Apps• used in Dialogs
Data binding
• Items not Nodes
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Forms vs. Dialogs
73
Form Dialog
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Forms vs. Dialogs
73
Form Dialog
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Forms vs. Dialogs
73
Form Dialog
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Forms vs. Dialogs
73
Form Dialog
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Forms vs. Dialogs
73
Form Dialog
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Form in an App
74
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Form in a Dialog
75
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Validation, Errors and Warnings
76
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
The Result
77
Main Architecture
Configuration
App-lification
Actions & Commands
Forms & Dialogs
Content Apps
DAM
Communication
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
We want to reinvent the phone. What's the killer app? The killer app is making calls! It's amazing how hard
it is to make calls on most phones.[Steve Jobs]
78
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
CMS it
79
make content management easy
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
Contacts, Pages, DAM
80
all based on the same fundament
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Workbench - The entry point
81
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Content App - Item Tab Sheets
82
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Just configure it
83
node types
• icons
tree, list, columns
forms
• to edit the content
actions
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
The Result
84
Main Architecture
Configuration
App-lification
Actions & Commands
Forms & Dialogs
Content App
DAM
Communication
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Digital Asset Management
85
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
DAM - API
86
Providers
• to access other sources
Renditions
• thumbnails, sizes, formats
Metadata
• Dublin Core
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Media Editors - Images
87
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Content Structure
88
Standard JCR node types
Ready for WebDAV
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
The Result
89
Main Architecture
Configuration
App-lification
Actions & Commands
Forms & Dialogs
Content App
DAM
Communication
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
Things don't have to change the world to be important.
[Steve Jobs]
90
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
The Pulse - Communication Center
91
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Message View
92
be individual
• define screen per message
• configure the form
don’t talk, act!
• define actions• workflow steps
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
Build Processes
93
combine Apps, Messages and Workflow
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Workflow Engine - JBPM
94
Well known
Visual Tools available
• Eclipse workflow editor
Execute Commands
• activation, versioning, ...
Define Message Screen for Human Tasks
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
The Takeaways
95
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
1) have the courage to fail
96
then do it better
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
2) follow the vision
97
don’t break it by the wrong compromises
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
Imagination is more important than knowledge.
[Albert Einstein]
98
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
3) next steps follows naturally
99
once the current step is done
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
The best thing about the future is that it comes one day at a time.
[Abraham Lincoln]
100
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
4) no projects over half a year
101
split bigger projects
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0102
And now?
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
download, try it
103
alpha 3 is ready
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
follow the blog
104
http://dev.magnolia-cms.com/blog/
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
read documentationhttp://wiki.magnolia-cms.com/display/DOCS
105
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Ready on 20th of June 2013
106
Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.0
Q & A
107
Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.
Resources
108
St. Gotthard:http (The Approach)://www.flickr.com/photos/giackx/3832338005/sizes/l/in/photostream/
Math (The Result): http://www.flickr.com/photos/dullhunk/358365339/sizes/l/in/photostream/
Münster Basel (Under the Hood):�http://www.flickr.com/photos/kwloo/5398685216/
Spirale - Architecture:�http://www.flickr.com/photos/hom26/6941069435/
Helvetia in Basel:�http://www.flickr.com/photos/boobook48/4728751130/