Magnolia 5 Under the Hood Revealed

Magnolia 5 - Under The Hood

Philipp Bärfuss, Head of Product Development 05.03.2013 at Miami Amplify

1 Version 1.0 Magnolia is a registered trademark owned by Magnolia International Ltd.

The Map

The Me
The Story
The Approach
The Result
The Takeaways


The Me

Philipp Bärfuss
36 years, Swiss


The legacy is me
for 8 years working on the Magnolia CMS


One must still have chaos in oneself to
be able to give birth to a dancing star.
[Friedrich Nietzsche]


The Story


Where are we coming from
longing for a better UI for years


Bill Gates is a very rich man today... and
do you want to know why? The answer
is one word: versions. [Dave Barry]


History of Versions

Text


History of Versions

Text
ili g
ab din
ty
us an
t
ts
ou


History of Versions

Text
ili g

M ,
D n
ab din

, io
ty

S
w t
us an

lo iza
t

kf ar
ts
ou

or l
w odu
m


History of Versions

Text
ili g

M ,

8n ,
D n

I1 re
ab din

, io
ty

S

s, tu
w t
us an

lo iza

te ec
t

da hit
kf ar
ts
ou

or l

up c
w odu

ar
m


9
ou
ts
t
us an

Version 1.0
ab din
ili g
m ty
w odu
or l
kf ar
lo iza
w t
, io
D n
M ,
ar S
up c
da hit
te ec
s, tu
I1 re
History of Versions

en 8n ,
te p
rp er
ris fo
e rm
fe a
Text

at nc
ur e,
es

Magnolia is a registered trademark owned by Magnolia International Ltd.

9
ou
ts
t
us an

Version 1.0
ab din
ili g
m ty
w odu
or l
kf ar
lo iza
w t
, io
D n
M ,
ar S
up c
da hit
te ec
s, tu
I1 re
History of Versions

en 8n ,
te p
rp er
ris fo
e rm
fe a
Text

at nc
ur e,
es
te
m
pl
at
in
g
ki
t

9
ou
ts
t
us an

Version 1.0
ab din
ili g
m ty
w odu
or l
kf ar
lo iza
w t
, io
D n
M ,
ar S
up c
da hit
te ec
s, tu
I1 re
History of Versions

en 8n ,
te p
rp er
ris fo
e rm
fe a
Text

at nc
ur e,
es
te
m
pl
at
in
g
ki
t
in
te u
ro s a
pe b
ra ilit
bi y
lit &
y

9
ou
ts
t
us an

Version 1.0
ab din
ili g
m ty
w odu
or l
kf ar
lo iza
w t
, io
D n
M ,
ar S
up c
da hit
te ec
s, tu
I1 re
History of Versions

en 8n ,
te p
rp er
ris fo
e rm
fe a
Text

at nc
ur e,
es
te
m
pl
at
in
g
ki
t
in
te u
ro s a
pe b
4.5

ra ilit
bi y
lit &
y

First Attempt
You never know until you try


ExtGWT and GWT
To heavy, monolithic compilations


Second Attempt
You never know until you try again


Vaadin


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


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]


The Failing - Conference 2011


The Failing - Conference 2011

were too late anyway
had overloaded the wagon
• we tried do solve everything
too much enterprise too little fun


Divide and Conquer
Shipped the Backend as 4.5


Phoenix out of the ashes
We know now what we want to do


1) be developers best friend
use Vaadin, quick customizations


2) mobile revolution
be touchy, be iPad


3) be user oriented
apps, communication, favorites


4) be a CMS
focus on content management


The Approach


However beautiful the strategy, you
should occasionally look at the results.
[Winston Churchill]


Retrospection is everything
no team is perfect but it can get better


Obstacle Driven Development
obstacles first, features later


Innovation flows naturally once the
obstacles are removed.
[Me]


Three techniques

controlled innovation


1) 6 Thinking Hats


2) Osborne’s Checklist

Other uses Substitute
• New ways to use as is? • Who else instead? What else

Adapt instead?

• What else is like this? Rearrange
• What could I copy? • Interchange components?

Modify Other pattern?

• New twist? Reverse
• Turn it backward, upside
Magnify
down, inside out?
• What to add? More time?
Combine
Minify
• How about a blend, an alloy,
• What to subtract? Smaller?
an assortment, an


3) Negative Brainstorming
understanding what to do by knowing what not to do


The perfect is the enemy of the good.
[Voltaire]


User Experience Design


Design is not just what it looks like and
feels like. Design is how it works.
[Steve Jobs]


Trinity Icons


Desktop


Touch it or leave it


The Result


The Result

Main Architecture
Configuration
App-lification
Actions & Commands
Forms & Dialogs
Content App
DAM
Communication


Main Architecture


Technology Stack


Communication Layer


Dependency Injection - Dev Drugs

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

From Spaghetti


To Lasagne

Magnolia Core


To Lasagne

Vaadin

Magnolia Core


To Lasagne

Widgets

Vaadin

Magnolia Core


To Lasagne

UI Framework

Widgets

Vaadin

Magnolia Core


To Lasagne

Apps

UI Framework

Widgets

Vaadin

Magnolia Core


Packages - Widgets

Magnolia Widgets & Components


Packages - Widgets

Workbench
Actionbar
Dialogs

Editor
Form
Shell

Magnolia Widgets & Components


Packages - AdminCentral

UI Framework - Apps, Locations, Messages, Actions



AdminCentral
& Shell Apps




AdminCentral
App
& Shell Apps




AdminCentral
App App
& Shell Apps




AdminCentral
App App
& Shell Apps

Content App




App
AdminCentral
App App
& Shell Apps

Content App




App App
AdminCentral
App App
& Shell Apps

Content App



The Content Structure

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


Presenters and Views


The Result

Main Architecture
Configuration
App-lification
Actions & Commands
Forms & Dialogs
Content App
DAM
Communication


UI Model - Definitions


Registries, Definitions and Providers


Configuration by Code - DSL
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")))


Configuration by Code - Annotations


The Result

Main Architecture
Configuration
App-lification
Actions & Commands
Forms & Dialogs
Content App
DAM
Communication


It’s a UI Component
has its own context and lifecycle


Launch it


App API - UML


Location, Location, Location

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


Developer’s View


It’s the Context


Take the Bus - In App communication


Apps vs. Modules

App is a UI component
Module can have
• Apps
• Templates
• Extensions


Are you following me ....


The Result

Main Architecture
Configuration
App-lification
Actions & Commands
Forms & Dialogs
Content App
DAM
Communication


Actions and Commands


Actions

The UI event handling
Open Dialog
Call Command
Show message to user
Change location


Commands

Backend executable
No UI
Invoked by
• UI
• WebServices
• Workflow


Action Bar

Configured
• Customize the App
• Add Actions by Module

Independent
• Content Apps
• Page Editor
• Messages

Preview
Sensitive
• Content type


The Result

Main Architecture
Configuration
App-lification
Actions & Commands
Forms & Dialogs
Content App
DAM
Communication


Form, Fields and Tabs

Configured
• no coding needed

Independent
• used in Apps
• used in Dialogs

Data binding
• Items not Nodes


Forms vs. Dialogs
Form Dialog


Form in an App


Form in a Dialog


Validation, Errors and Warnings


The Result

Main Architecture
Configuration
App-lification
Actions & Commands
Forms & Dialogs
Content Apps
DAM
Communication


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]


CMS it
make content management easy


Contacts, Pages, DAM
all based on the same fundament


Workbench - The entry point


Content App - Item Tab Sheets


Just configure it

node types
• icons

tree, list, columns
forms
• to edit the content

actions


The Result

Main Architecture
Configuration
App-lification
Actions & Commands
Forms & Dialogs
Content App
DAM
Communication


Digital Asset Management


DAM - API

Providers
• to access other sources

Renditions
• thumbnails, sizes, formats
Metadata
• Dublin Core


Media Editors - Images


Content Structure

Standard JCR node types
Ready for WebDAV


The Result

Main Architecture
Configuration
App-lification
Actions & Commands
Forms & Dialogs
Content App
DAM
Communication


Things don't have to change the world
to be important.
[Steve Jobs]


The Pulse - Communication Center


Message View

be individual
• define screen per
message
• configure the form
don’t talk, act!
• define actions
• workflow steps


Build Processes
combine Apps, Messages and Workflow


Workflow Engine - JBPM

Well known
Visual Tools available
• Eclipse workflow editor

Execute Commands
• activation, versioning, ...

Define Message Screen for Human Tasks


The Takeaways


1) have the courage to fail
then do it better


2) follow the vision
don’t break it by the wrong compromises


Imagination is more important than
knowledge.
[Albert Einstein]


3) next steps follows naturally
once the current step is done


The best thing about the future is that it
comes one day at a time.
[Abraham Lincoln]


4) no projects over half a year
split bigger projects


And now?


download, try it
alpha 3 is ready


follow the blog
http://dev.magnolia-cms.com/blog/


read documentation
http://wiki.magnolia-cms.com/display/DOCS


Ready on 20th of June 2013


Q&A


Resources

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/


Magnolia 5 Under the Hood Revealed

Recommended

Recommended

More Related Content

Similar to Magnolia 5 Under the Hood Revealed

Similar to Magnolia 5 Under the Hood Revealed (18)

More from Philipp Bärfuss

More from Philipp Bärfuss (7)

Magnolia 5 Under the Hood Revealed