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

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

The Map

The MeThe StoryThe ApproachThe ResultThe 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

ulariz

workflow

History of Versions

ulariz

workflow

itectu

History of Versions

ulariz

workflow

itectu

enterp

rise featur

History of Versions

ulariz

workflow

itectu

enterp

rise featur

templa

ting kit

History of Versions

ulariz

workflow

itectu

enterp

rise featur

templa

ting kit

History of Versions

ulariz

workflow

itectu

enterp

rise featur

templa

ting kit

History of Versions

ulariz

workflow

itectu

enterp

rise featur

templa

ting kit

First Attempt

You never know until you try

ExtGWT and GWT

To heavy, monolithic compilations

Second AttemptYou never know until you try again

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

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

were too late anywayhad 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 frienduse Vaadin, quick customizations

2) mobile revolution

be touchy, be iPad

3) be user orientedapps, communication, favorites

4) be a CMSfocus 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.

Three techniques

controlled innovation

1) 6 Thinking Hats

2) Osborne’s Checklist

Other uses

• New ways to use as is?

• 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

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

Main Architecture

Configuration

App-lification

Actions & Commands

Forms & Dialogs

Content App

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

Magnolia Core

Vaadin

To Lasagne

Magnolia Core

Widgets

Vaadin

To Lasagne

Magnolia Core

Widgets

UI Framework

Vaadin

To Lasagne

Magnolia Core

Widgets

UI Framework

Vaadin

Packages - Widgets

Magnolia Widgets & Components

Packages - Widgets

Magnolia Widgets & Components

Packages - AdminCentral

UI Framework - Apps, Locations, Messages, Actions

AdminCentral& Shell Apps

App App

Content App

App App

Content App

App App

Content App

App 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

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

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

Communication

Actions and Commands

Actions

The UI event handling

Open Dialog

Call Command

Show message to user

Change location

Commands

Backend executable

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

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

Forms vs. Dialogs

Form Dialog

Forms vs. Dialogs

Form Dialog

Forms vs. Dialogs

Form Dialog

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

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

• to edit the content

actions

The Result

Main Architecture

Configuration

App-lification

Actions & Commands

Forms & Dialogs

Content App

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

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 documentationhttp://wiki.magnolia-cms.com/display/DOCS

Ready on 20th of June 2013

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

Documents

Transcript of Magnolia 5 - Under the Hood

Linked Data Under the Hood

Under the Hood & In the Hood

UNDER CABINET RANGE HOOD

Yammer under the hood

Inspecting Under the Hood of Autodesk Vault Inspecting Under the Hood of Autodesk Vault

INSTAGRAM UNDER THE HOOD - Simple is Better Than Complex · Django Under the Hood 2016 Carl Meyer INSTAGRAM UNDER THE HOOD

Under the hood of Yammer

Mozilla: Under the Hood

RubyMotion: Under the Hood

Jvm profiling under the hood

UNDER THE HOOD - OCLC

Acrolinx Under the Hood

Under the Hood

vConverter' TechNote Under the Hood

JVM Under the Hood

Ebook basics under the hood

Under the Hood with MySQL

Multiverse - Under the Hood

Opendata - Under the hood

PHP, Under The Hood - DPC