Magnolia 5 - Under the Hood

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


The Me

3

Philipp Bärfuss

36 years, Swiss


The legacy is me

4

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]

5

http://www.brainyquote.com/quotes/quotes/f/friedrichn109781.html





The Story

6


Where are we coming from

7

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]

8

http://www.brainyquote.com/quotes/quotes/d/davebarry102110.html







History of Versions

9

Text


History of Versions

9

outst

andin

g

usab

ility

Text


History of Versions

9

outst

andin

g

usab

ility

mod

ulariz

ation

,

workflow

, DMS

Text


History of Versions

9

outst

andin

g

usab

ility

mod

ulariz

ation

,

workflow

, DMS

arch

itectu

re,

upda

tes,

I18n

Text


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


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


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


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


First Attempt

10

You never know until you try


ExtGWT and GWT

11

To heavy, monolithic compilations


Second AttemptYou never know until you try again

12

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

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

14


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


The Failing - Conference 2011

17


The Failing - Conference 2011

17

were too late anywayhad overloaded the wagon• we tried do solve everything

too much enterprise too little fun


Divide and Conquer

18

Shipped the Backend as 4.5


Phoenix out of the ashes

19

We know now what we want to do


1) be developers best frienduse Vaadin, quick customizations

20


2) mobile revolution

21

be touchy, be iPad


3) be user orientedapps, communication, favorites

22


4) be a CMSfocus on content management

23


The Approach

24


However beautiful the strategy, you should occasionally look at the results.

[Winston Churchill]

25


Retrospection is everything

26

no team is perfect but it can get better


Obstacle Driven Development

27

obstacles first, features later


Innovation flows naturally once the obstacles are removed.

[Me]

28


Three techniques

29

controlled innovation


1) 6 Thinking Hats

30


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


3) Negative Brainstorming

32

understanding what to do by knowing what not to do


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

33


User Experience Design

34


Design is not just what it looks like and feels like. Design is how it works.

[Steve Jobs]

35


Trinity Icons

36


Desktop

37


Touch it or leave it

38


The Result

39


The Result

40

Main Architecture

Configuration

App-lification

Actions & Commands

Forms & Dialogs

Content App

DAM

Communication


Main Architecture

41


Technology Stack

42


Communication Layer

43


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


From Spaghetti


To Lasagne

46

Magnolia Core


To Lasagne

46

Magnolia Core

Vaadin


To Lasagne

46

Magnolia Core

Widgets

Vaadin


To Lasagne

46

Magnolia Core

Widgets

UI Framework

Vaadin


To Lasagne

46

Magnolia Core

Widgets

UI Framework

Apps

Vaadin


Packages - Widgets

47

Magnolia Widgets & Components

Shel

l

Form


Packages - Widgets

47

Magnolia Widgets & Components

Edito

r

Act

ionb

ar

Wor

kben

ch

Dia

logs


Packages - AdminCentral

48

UI Framework - Apps, Locations, Messages, Actions



48

AdminCentral& Shell Apps




48


App




48


App App




48

Content App


App App




48

Content App


App

App App




48

Content App


App App

App App



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


Presenters and Views

50


The Result

51

Main Architecture

Configuration

App-lification

Actions & Commands

Forms & Dialogs

Content App

DAM

Communication


UI Model - Definitions

52


Registries, Definitions and Providers

53


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")))


Configuration by Code - Annotations

55


The Result

56

Main Architecture

Configuration

App-lification

Actions & Commands

Forms & Dialogs

Content App

DAM

Communication


It’s a UI Component

57

has its own context and lifecycle


Launch it

58


App API - UML

59


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


Developer’s View

61


It’s the Context

62


Take the Bus - In App communication

63


Apps vs. Modules

App is a UI component

Module can have

• Apps• Templates• Extensions

64


Are you following me ....


The Result

66

Main Architecture

Configuration

App-lification

Actions & Commands

Forms & Dialogs

Content App

DAM

Communication


Actions and Commands

67


Actions

68

The UI event handling

Open Dialog

Call Command

Show message to user

Change location


Commands

69

Backend executable

No UI

Invoked by

• UI• WebServices• Workflow


Action Bar

70

Configured

• Customize the App• Add Actions by Module

Independent

• Content Apps• Page Editor• Messages

Preview

Sensitive

• Content type


The Result

71

Main Architecture

Configuration

App-lification

Actions & Commands

Forms & Dialogs

Content App

DAM

Communication


Form, Fields and Tabs

72

Configured

• no coding needed

Independent

• used in Apps• used in Dialogs

Data binding

• Items not Nodes


Forms vs. Dialogs

73

Form Dialog


Form in an App

74


Form in a Dialog

75


Validation, Errors and Warnings

76


The Result

77

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]

78


CMS it

79

make content management easy


Contacts, Pages, DAM

80

all based on the same fundament


Workbench - The entry point

81


Content App - Item Tab Sheets

82


Just configure it

83

node types

• icons

tree, list, columns

forms

• to edit the content

actions


The Result

84

Main Architecture

Configuration

App-lification

Actions & Commands

Forms & Dialogs

Content App

DAM

Communication


Digital Asset Management

85


DAM - API

86

Providers

• to access other sources

Renditions

• thumbnails, sizes, formats

Metadata

• Dublin Core


Media Editors - Images

87


Content Structure

88

Standard JCR node types

Ready for WebDAV


The Result

89

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]

90


The Pulse - Communication Center

91


Message View

92

be individual

• define screen per message

• configure the form

don’t talk, act!

• define actions• workflow steps


Build Processes

93

combine Apps, Messages and Workflow


Workflow Engine - JBPM

94

Well known

Visual Tools available

• Eclipse workflow editor

Execute Commands

• activation, versioning, ...

Define Message Screen for Human Tasks


The Takeaways

95


1) have the courage to fail

96

then do it better


2) follow the vision

97

don’t break it by the wrong compromises


Imagination is more important than knowledge.

[Albert Einstein]

98


3) next steps follows naturally

99

once the current step is done


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

[Abraham Lincoln]

100


4) no projects over half a year

101

split bigger projects


And now?


download, try it

103

alpha 3 is ready


follow the blog

104

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




read documentationhttp://wiki.magnolia-cms.com/display/DOCS

105

http://wiki.magnolia-cms.com/display/DOCS/Developing+an+app

http://wiki.magnolia-cms.com/display/DOCS/Developing+an+app


Ready on 20th of June 2013

106


Q & A

107


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/

http://www.flickr.com/photos/giackx/3832338005/sizes/l/in/photostream/




http://www.flickr.com/photos/dullhunk/358365339/sizes/l/in/photostream/

http://www.flickr.com/photos/dullhunk/358365339/sizes/l/in/photostream/

http://www.flickr.com/photos/kwloo/5398685216/

http://www.flickr.com/photos/kwloo/5398685216/

http://www.flickr.com/photos/hom26/6941069435/

http://www.flickr.com/photos/hom26/6941069435/

http://www.flickr.com/photos/boobook48/4728751130/

http://www.flickr.com/photos/boobook48/4728751130/

Magnolia 5 - Under the Hood

Documents

Transcript of Magnolia 5 - Under the Hood