Developing sites with Magnolia 4 / STK Experience report Magnolia Conference, Technical Track | Basel, 10. September 2009

About us Sebastian Frick Technical Project Manager Norman Wiechmann System Architect

About Aperto Internet Agency, located in Berlin Offering Conception, Design, Development, Online Marketing Clients from sectors like Public, Media, Automotive, Education Focus on Java technology

Internet Agency, located in Berlin

Offering Conception, Design, Development, Online Marketing

Clients from sectors like Public, Media, Automotive, Education

Focus on Java technology

Aperto and Magnolia Using Magnolia CMS in several projects since 2006 (we started with 3.0.1) Magnolia partner since 2007 15 realized projects, amongst others for customers like Bertelsmann, Siemens Home Appliances, Frankfurt School First realized 4.0 project: www.insm.de

Using Magnolia CMS in several projects since 2006 (we started with 3.0.1)

Magnolia partner since 2007

15 realized projects, amongst others for customers like Bertelsmann, Siemens Home Appliances, Frankfurt School

First realized 4.0 project: www.insm.de

Overview about Magnolia 4 / STK

Magnolia 4 Available since April 2009 Standard Templating Kit (STK) Set of pre-built templates and paragraphs unlike Magnolia Sitedesigner the STK is available for CE and EE Advanced Features Enhanced Freemarker Support Additional EE-modules Internal refactorings (API Cleanups)

Available since April 2009

Standard Templating Kit (STK)

Set of pre-built templates and paragraphs

unlike Magnolia Sitedesigner the STK is available for CE and EE

Advanced Features

Enhanced Freemarker Support

Additional EE-modules

Internal refactorings (API Cleanups)

Formation of Standard Templating Kit (STK) short realization times, rapid development and quick changes necessary wide range of project types: from small campaign sites to large business portals own templating kit solutions with other CMS In collaboration with Magnolia we had the opportunity to contribute our experiences and learnings in developing process of the STK conceptional ideas, HTML / CSS and demo theme in STK provided by Aperto

short realization times, rapid development and quick changes necessary

wide range of project types: from small campaign sites to large business portals

own templating kit solutions with other CMS

In collaboration with Magnolia we had the opportunity to contribute our experiences and learnings in developing process of the STK

conceptional ideas, HTML / CSS and demo theme in STK provided by Aperto

What the Standard Templating Kit is not … a visual click-solution a new framework or layer - usage is not mandatory! a static solution concerning features and design a newer sitedesigner (part of the EE in 3.x releases)

a visual click-solution

a new framework or layer - usage is not mandatory!

a static solution concerning features and design

a newer sitedesigner (part of the EE in 3.x releases)

Standard Templating Kit - Overview Set of standard templates (article, news, events, image galleries) Aggregation paragraphs / templates (RSS, dynamic lists) Feature paragraphs (Video player, Form Module, Commenting) Discover all the possibilities on the Magnolia demo instance Flexible for different kinds of designs Flexible configuration of available templates and paragraph types Open and extensible for new requirements Usage of Freemarker as template language

Set of standard templates (article, news, events, image galleries)

Aggregation paragraphs / templates (RSS, dynamic lists)

Feature paragraphs (Video player, Form Module, Commenting)

Discover all the possibilities on the Magnolia demo instance

Flexible for different kinds of designs

Flexible configuration of available templates and paragraph types

Open and extensible for new requirements

Usage of Freemarker as template language

Additional Modules Categorization (for tagging) Imaging Module (automatic resizing of images) User Generated Content Module, supporting clustering between multiple servers And some more... All features and differences between the editions are listed up on the feature matrix on the Magnolia Website

Categorization (for tagging)

Imaging Module (automatic resizing of images)

User Generated Content Module, supporting clustering between multiple servers

And some more...

All features and differences between the editions are listed up on the feature matrix on the Magnolia Website

Possible project approaches

#1 Leave the STK as it is If you have to setup a project really fast… STK provides preconfigured templated in a modern design Logos and images in demo-project can be exchanged

If you have to setup a project really fast…

STK provides preconfigured templated in a modern design

Logos and images in demo-project can be exchanged

#2 Customizing design Usage of modern frontend standards (XHTML, CSS, SEO-friendly markup, WCAG compliance) High maintainability via CSS Flexible Designs due to usage of Media Queries or preconfigured grid variants Maintenance possible without Java / Freemarker knowledge

Usage of modern frontend standards (XHTML, CSS, SEO-friendly markup, WCAG compliance)

High maintainability via CSS

Flexible Designs due to usage of Media Queries or preconfigured grid variants

Maintenance possible without Java / Freemarker knowledge

#2 Customizing design – Choice between grid variants Several grid variants available (1-3 columns layout, 0-2 sidebars) via body classes Configuration via STK module Possible variants can be found in the online documentation

Several grid variants available (1-3 columns layout, 0-2 sidebars) via body classes

Configuration via STK module

Possible variants can be found in the online documentation

#2 Customizing design – Choice between grid variants configuration by adding a node bodyClass in template definition

#2 Customizing design – Choice between grid variants <body ... class=„col-float3“ > no body class...

? Just changing designs - is this our real world?

Challenges in our daily business Clients sometimes don‘t need all templates / paragraphs, sometimes less is more Clients sometimes need additional templates / paragraphs Not every design can be realized via CSS and configuration A project seems to be completely different from a typical STK project

Clients sometimes don‘t need all templates / paragraphs, sometimes less is more

Clients sometimes need additional templates / paragraphs

Not every design can be realized via CSS and configuration

A project seems to be completely different from a typical STK project

#3 Changing composition of templates and paragraphes Possible configurations in Admin Central... Availability of existing or new templates / paragraphs Mapping between paragraphs and templates Managing several themes Multiple site support in Magnolia EE

Possible configurations in Admin Central...

Availability of existing or new templates / paragraphs

Mapping between paragraphs and templates

Managing several themes

Multiple site support in Magnolia EE

#4 Adding own templates / paragraphs Create an own module for your enhancements It‘s easy to copy and maintain existing sources No barriers in relation to developing completely new features

Create an own module for your enhancements

It‘s easy to copy and maintain existing sources

No barriers in relation to developing completely new features

#5 Remixing STK Create something new from existing STK sources Pick what you need, leave the rest aside Break the grid

Create something new from existing STK sources

Pick what you need, leave the rest aside

Break the grid

STK project #1: www.insm.de and subsites - www.einstieg-in-arbeit.de - www.insm-newsroom.de

STK project #2: www.studio-tv-film.de

A closer look on the backend site…

What is your style of developing? One genious person can do it all single live instance no build, no deployment process Team of developers with different skills source control management continuous integration scripted deployment on staging- and live instances VS.

One genious person can do it all

single live instance

no build, no deployment process

Team of developers with different skills

source control management

continuous integration

scripted deployment on

staging- and live instances

Maven Setup Multi Module Project html-prototype theme-module project-module webapp content-module patch (optional)

Multi Module Project

html-prototype

theme-module

project-module

webapp

content-module

patch (optional)

Maven Archetype Maven Archetype Plugin http://maven.apache.org/plugins/maven-archetype-plugin/ Provided by Magnolia maven-archetype-magnolia-module maven-archetype-magnolia-webapp Not available for 4.x yet STK theme type planned (MPARCH-11) Custom Maven Archetype multi module project strukture

Maven Archetype Plugin

http://maven.apache.org/plugins/maven-archetype-plugin/

Provided by Magnolia

maven-archetype-magnolia-module

maven-archetype-magnolia-webapp

Not available for 4.x yet

STK theme type planned (MPARCH-11)

Custom Maven Archetype

multi module project strukture

Theme Module Theme Configuration

Theme Configuration

Theme Module – Version Handler Default: info.magnolia.module.templatingkit.setup.ThemeVersionHandler bootstrap theme configuration install JavaScript and CSS files into repository with „processed“ type install Images files into dms Custom ThemeVersionHandler not using „processed“ type insert version number into static file pathes adding virtual uri mapping that removes version number on request adding cache header creation on static files with far future expiration

Default: info.magnolia.module.templatingkit.setup.ThemeVersionHandler

bootstrap theme configuration

install JavaScript and CSS files into repository with „processed“ type

install Images files into dms

Custom ThemeVersionHandler

not using „processed“ type

insert version number into static file pathes

adding virtual uri mapping that removes version number on request

adding cache header creation on static files with far future expiration

Project Module – Site Definition using custom fluent language update tasks (see MAGNOLIA-2828 for source code)

using custom fluent language update tasks

(see MAGNOLIA-2828 for source code)

Freemarker enforcing of strict separation of design and code (no scriptlets possible) optimized for writing templates independent from servlet container and servlet api allows arbitrary storage location no compilation necessary easy unit testing existing taglibs can be used IDE support for Eclipse + IDEA

enforcing of strict separation of design and code (no scriptlets possible)

optimized for writing templates

independent from servlet container and servlet api

allows arbitrary storage location

no compilation necessary

easy unit testing

existing taglibs can be used

IDE support for Eclipse + IDEA

Freemarker with Magnolia various Freemarker template locations module's jar (classpath) content repository webapp folder / any filesystem folder overloading templates mixing Freemarker and JSP possible

various Freemarker template locations

module's jar (classpath)

content repository

webapp folder / any filesystem folder

overloading templates

mixing Freemarker and JSP possible

STK-specific Context Objects stk instance of the STKUtil content same as normal, but HTML encoded by default def most likely an instance of STKTemplate access header, footer, areas, css-, js-files model depends on the modelClass defined in the template, most likely an instance of an STKTemplateModel

stk

instance of the STKUtil

content

same as normal, but HTML encoded by default

def

most likely an instance of STKTemplate

access header, footer, areas, css-, js-files

model

depends on the modelClass defined in the template, most likely an instance of an STKTemplateModel

Content Model Bean accessing content properties do calculations accessing related contents do content queries your businesslogic ... … we love it!

accessing content properties

do calculations

accessing related contents

do content queries

your businesslogic ...

… we love it!

New Module – Newsletter Integration of email marketing software and mailing lists Submodules newsletter newsletter-stk campaignmonitor www.campaignmonitor.com

Integration of email marketing software and mailing lists

Submodules

newsletter

newsletter-stk

campaignmonitor

www.campaignmonitor.com

Closing conclusions Magnolia 4 doesn‘t break existing habits! Still possible to use it the way you did before in previous releases No experience migrating complete projects to Magnolia 4 yet, no big problems in porting our helper classes

Magnolia 4 doesn‘t break existing habits!

Still possible to use it the way you did before in previous releases

No experience migrating complete projects to Magnolia 4 yet, no big problems in porting our helper classes

Closing conclusions STK fits to different needs Less templating effort for backend developers, more flexibility for frontend developers More time to focus on new features and integration issues After passing the learning curve: big acceleration in development phase

STK fits to different needs

Less templating effort for backend developers, more flexibility for frontend developers

More time to focus on new features and integration issues

After passing the learning curve: big acceleration in development phase

How to get started? Check the online demo Study the STK documentation (it‘s growing) Join the mailing list for discussion and suggestions, don‘t hesitate to put questions

Check the online demo

Study the STK documentation (it‘s growing)

Join the mailing list for discussion and suggestions, don‘t hesitate to put questions

Thank you for your interest! Our contacts.. [email_address] [email_address] In the web... http://www.aperto.de http://blog.aperto.de http://www.twitter.com/aperto http://www.twitter.com/maschinenraum

Our contacts..

[email_address]

[email_address]

In the web...

http://www.aperto.de

http://blog.aperto.de

http://www.twitter.com/aperto

http://www.twitter.com/maschinenraum