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 <ul><li>Internet Agency, located in Berlin  </li></ul><ul><li>Offering Conception, Design, Development, Onlin...
Aperto and Magnolia <ul><li>Using Magnolia CMS in several projects since 2006 (we started with 3.0.1) </li></ul><ul><li>Ma...
Overview about Magnolia 4 / STK
Magnolia 4 <ul><li>Available since April 2009 </li></ul><ul><li>Standard Templating Kit (STK) </li></ul><ul><ul><li>Set of...
Formation of Standard Templating Kit (STK) <ul><li>short realization times, rapid development and quick changes necessary ...
What the Standard Templating Kit is  not … <ul><li>a visual click-solution </li></ul><ul><li>a new framework or layer - us...
Standard Templating Kit - Overview <ul><li>Set of standard templates (article, news, events, image galleries) </li></ul><u...
Additional Modules  <ul><li>Categorization (for tagging)  </li></ul><ul><li>Imaging Module (automatic resizing of images) ...
Possible project approaches
#1 Leave the STK as it is <ul><li>If you have to setup a project  really  fast… </li></ul><ul><li>STK provides preconfigur...
#2 Customizing design  <ul><li>Usage of modern frontend standards (XHTML, CSS, SEO-friendly markup, WCAG compliance) </li>...
#2 Customizing design – Choice between grid variants <ul><li>Several grid variants available (1-3 columns layout, 0-2 side...
#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 <ul><li>Clients sometimes don‘t need all templates / paragraphs, sometimes less is more <...
#3 Changing composition of templates and paragraphes <ul><li>Possible configurations in Admin Central... </li></ul><ul><li...
#4 Adding own templates / paragraphs  <ul><li>Create an own module for your enhancements  </li></ul><ul><li>It‘s easy to c...
#5 Remixing STK  <ul><li>Create something new from existing STK sources </li></ul><ul><li>Pick what you need, leave the re...
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? <ul><li>One genious person can do it all </li></ul><ul><li>single live instance </li></u...
Maven Setup <ul><li>Multi Module Project </li></ul><ul><ul><li>html-prototype </li></ul></ul><ul><ul><li>theme-module </li...
Maven Archetype <ul><li>Maven Archetype Plugin </li></ul><ul><ul><li>http://maven.apache.org/plugins/maven-archetype-plugi...
Theme Module <ul><li>Theme Configuration </li></ul>
Theme Module – Version Handler <ul><li>Default: info.magnolia.module.templatingkit.setup.ThemeVersionHandler  </li></ul><u...
Project Module – Site Definition <ul><li>using custom fluent language update tasks </li></ul><ul><ul><ul><li>(see MAGNOLIA...
Freemarker <ul><li>enforcing of strict separation of design and code (no scriptlets possible) </li></ul><ul><li>optimized ...
Freemarker with Magnolia <ul><li>various Freemarker template locations  </li></ul><ul><ul><li>module's jar (classpath) </l...
STK-specific Context Objects <ul><li>stk </li></ul><ul><ul><li>instance of the STKUtil </li></ul></ul><ul><li>content </li...
Content Model Bean <ul><li>accessing content properties </li></ul><ul><li>do calculations </li></ul><ul><li>accessing rela...
New Module – Newsletter <ul><li>Integration of email marketing software and mailing lists </li></ul><ul><li>Submodules </l...
Closing conclusions <ul><li>Magnolia 4 doesn‘t break existing habits! </li></ul><ul><li>Still possible to use it the way y...
Closing conclusions <ul><li>STK fits to different needs </li></ul><ul><li>Less templating effort for backend developers, m...
How to get started? <ul><li>Check the online demo </li></ul><ul><li>Study the STK documentation (it‘s growing) </li></ul><...
Thank you for your interest! <ul><li>Our contacts.. </li></ul><ul><li>[email_address] </li></ul><ul><li>[email_address] </...
Upcoming SlideShare
Loading in …5
×

Developing sites with Magnolia 4 / STK

4,835 views

Published on

Developing sites with Magnolia 4 / STK Experience report on Magnolia Conference Basel 09/10/2009

Published in: Technology, Business, Travel
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,835
On SlideShare
0
From Embeds
0
Number of Embeds
189
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Developing sites with Magnolia 4 / STK

  1. 1. Developing sites with Magnolia 4 / STK Experience report Magnolia Conference, Technical Track | Basel, 10. September 2009
  2. 2. About us Sebastian Frick Technical Project Manager Norman Wiechmann System Architect
  3. 3. About Aperto <ul><li>Internet Agency, located in Berlin </li></ul><ul><li>Offering Conception, Design, Development, Online Marketing </li></ul><ul><li>Clients from sectors like Public, Media, Automotive, Education </li></ul><ul><li>Focus on Java technology </li></ul>
  4. 4. Aperto and Magnolia <ul><li>Using Magnolia CMS in several projects since 2006 (we started with 3.0.1) </li></ul><ul><li>Magnolia partner since 2007 </li></ul><ul><li>15 realized projects, amongst others for customers like Bertelsmann, Siemens Home Appliances, Frankfurt School </li></ul><ul><li>First realized 4.0 project: www.insm.de </li></ul>
  5. 5. Overview about Magnolia 4 / STK
  6. 6. Magnolia 4 <ul><li>Available since April 2009 </li></ul><ul><li>Standard Templating Kit (STK) </li></ul><ul><ul><li>Set of pre-built templates and paragraphs </li></ul></ul><ul><ul><li>unlike Magnolia Sitedesigner the STK is available for CE and EE </li></ul></ul><ul><li>Advanced Features </li></ul><ul><ul><li>Enhanced Freemarker Support </li></ul></ul><ul><ul><li>Additional EE-modules </li></ul></ul><ul><li>Internal refactorings (API Cleanups) </li></ul>
  7. 7. Formation of Standard Templating Kit (STK) <ul><li>short realization times, rapid development and quick changes necessary </li></ul><ul><li>wide range of project types: from small campaign sites to large business portals </li></ul><ul><li>own templating kit solutions with other CMS </li></ul><ul><li>In collaboration with Magnolia we had the opportunity to contribute our experiences and learnings in developing process of the STK </li></ul><ul><li>conceptional ideas, HTML / CSS and demo theme in STK provided by Aperto </li></ul>
  8. 8. What the Standard Templating Kit is not … <ul><li>a visual click-solution </li></ul><ul><li>a new framework or layer - usage is not mandatory! </li></ul><ul><li>a static solution concerning features and design </li></ul><ul><li>a newer sitedesigner (part of the EE in 3.x releases) </li></ul>
  9. 9. Standard Templating Kit - Overview <ul><li>Set of standard templates (article, news, events, image galleries) </li></ul><ul><ul><li>Aggregation paragraphs / templates (RSS, dynamic lists) </li></ul></ul><ul><ul><li>Feature paragraphs (Video player, Form Module, Commenting) </li></ul></ul><ul><ul><li>Discover all the possibilities on the Magnolia demo instance </li></ul></ul><ul><li>Flexible for different kinds of designs </li></ul><ul><li>Flexible configuration of available templates and paragraph types </li></ul><ul><li>Open and extensible for new requirements </li></ul><ul><li>Usage of Freemarker as template language </li></ul>
  10. 10. Additional Modules <ul><li>Categorization (for tagging) </li></ul><ul><li>Imaging Module (automatic resizing of images) </li></ul><ul><li>User Generated Content Module, supporting clustering between multiple servers </li></ul><ul><li>And some more... </li></ul><ul><li>All features and differences between the editions are listed up on the feature matrix on the Magnolia Website </li></ul>
  11. 11. Possible project approaches
  12. 12. #1 Leave the STK as it is <ul><li>If you have to setup a project really fast… </li></ul><ul><li>STK provides preconfigured templated in a modern design </li></ul><ul><li>Logos and images in demo-project can be exchanged </li></ul>
  13. 13. #2 Customizing design <ul><li>Usage of modern frontend standards (XHTML, CSS, SEO-friendly markup, WCAG compliance) </li></ul><ul><li>High maintainability via CSS </li></ul><ul><li>Flexible Designs due to usage of Media Queries or preconfigured grid variants </li></ul><ul><li>Maintenance possible without Java / Freemarker knowledge </li></ul>
  14. 14. #2 Customizing design – Choice between grid variants <ul><li>Several grid variants available (1-3 columns layout, 0-2 sidebars) via body classes </li></ul><ul><li>Configuration via STK module </li></ul><ul><li>Possible variants can be found in the online documentation </li></ul>
  15. 15. #2 Customizing design – Choice between grid variants configuration by adding a node bodyClass in template definition
  16. 16. #2 Customizing design – Choice between grid variants <body ... class=„col-float3“ > no body class...
  17. 17. ? Just changing designs - is this our real world?
  18. 18. Challenges in our daily business <ul><li>Clients sometimes don‘t need all templates / paragraphs, sometimes less is more </li></ul><ul><li>Clients sometimes need additional templates / paragraphs </li></ul><ul><li>Not every design can be realized via CSS and configuration </li></ul><ul><li>A project seems to be completely different from a typical STK project </li></ul>
  19. 19. #3 Changing composition of templates and paragraphes <ul><li>Possible configurations in Admin Central... </li></ul><ul><li>Availability of existing or new templates / paragraphs </li></ul><ul><li>Mapping between paragraphs and templates </li></ul><ul><li>Managing several themes </li></ul><ul><li>Multiple site support in Magnolia EE </li></ul>
  20. 20. #4 Adding own templates / paragraphs <ul><li>Create an own module for your enhancements </li></ul><ul><li>It‘s easy to copy and maintain existing sources </li></ul><ul><li>No barriers in relation to developing completely new features </li></ul>
  21. 21. #5 Remixing STK <ul><li>Create something new from existing STK sources </li></ul><ul><li>Pick what you need, leave the rest aside </li></ul><ul><li>Break the grid </li></ul>
  22. 22. STK project #1: www.insm.de and subsites - www.einstieg-in-arbeit.de - www.insm-newsroom.de
  23. 23. STK project #2: www.studio-tv-film.de
  24. 24. A closer look on the backend site…
  25. 25. What is your style of developing? <ul><li>One genious person can do it all </li></ul><ul><li>single live instance </li></ul><ul><li>no build, no deployment process </li></ul><ul><li>Team of developers with different skills </li></ul><ul><li>source control management </li></ul><ul><li>continuous integration </li></ul><ul><li>scripted deployment on </li></ul><ul><li>staging- and live instances </li></ul>VS.
  26. 26. Maven Setup <ul><li>Multi Module Project </li></ul><ul><ul><li>html-prototype </li></ul></ul><ul><ul><li>theme-module </li></ul></ul><ul><ul><li>project-module </li></ul></ul><ul><ul><li>webapp </li></ul></ul><ul><ul><li>content-module </li></ul></ul><ul><ul><li>patch (optional) </li></ul></ul>
  27. 27. Maven Archetype <ul><li>Maven Archetype Plugin </li></ul><ul><ul><li>http://maven.apache.org/plugins/maven-archetype-plugin/ </li></ul></ul><ul><li>Provided by Magnolia </li></ul><ul><ul><li>maven-archetype-magnolia-module </li></ul></ul><ul><ul><li>maven-archetype-magnolia-webapp </li></ul></ul><ul><ul><li>Not available for 4.x yet </li></ul></ul><ul><ul><li>STK theme type planned (MPARCH-11) </li></ul></ul><ul><li>Custom Maven Archetype </li></ul><ul><ul><li>multi module project strukture </li></ul></ul>
  28. 28. Theme Module <ul><li>Theme Configuration </li></ul>
  29. 29. Theme Module – Version Handler <ul><li>Default: info.magnolia.module.templatingkit.setup.ThemeVersionHandler </li></ul><ul><ul><li>bootstrap theme configuration </li></ul></ul><ul><ul><li>install JavaScript and CSS files into repository with „processed“ type </li></ul></ul><ul><ul><li>install Images files into dms </li></ul></ul><ul><li>Custom ThemeVersionHandler </li></ul><ul><ul><li>not using „processed“ type </li></ul></ul><ul><ul><li>insert version number into static file pathes </li></ul></ul><ul><ul><li>adding virtual uri mapping that removes version number on request </li></ul></ul><ul><ul><li>adding cache header creation on static files with far future expiration </li></ul></ul>
  30. 30. Project Module – Site Definition <ul><li>using custom fluent language update tasks </li></ul><ul><ul><ul><li>(see MAGNOLIA-2828 for source code) </li></ul></ul></ul>
  31. 31. Freemarker <ul><li>enforcing of strict separation of design and code (no scriptlets possible) </li></ul><ul><li>optimized for writing templates </li></ul><ul><li>independent from servlet container and servlet api </li></ul><ul><ul><li>allows arbitrary storage location </li></ul></ul><ul><ul><li>no compilation necessary </li></ul></ul><ul><ul><li>easy unit testing </li></ul></ul><ul><li>existing taglibs can be used </li></ul><ul><li>IDE support for Eclipse + IDEA </li></ul>
  32. 32. Freemarker with Magnolia <ul><li>various Freemarker template locations </li></ul><ul><ul><li>module's jar (classpath) </li></ul></ul><ul><ul><li>content repository </li></ul></ul><ul><ul><li>webapp folder / any filesystem folder </li></ul></ul><ul><li>overloading templates </li></ul><ul><li>mixing Freemarker and JSP possible </li></ul>
  33. 33. STK-specific Context Objects <ul><li>stk </li></ul><ul><ul><li>instance of the STKUtil </li></ul></ul><ul><li>content </li></ul><ul><ul><li>same as normal, but HTML encoded by default </li></ul></ul><ul><li>def </li></ul><ul><ul><li>most likely an instance of STKTemplate </li></ul></ul><ul><ul><li>access header, footer, areas, css-, js-files </li></ul></ul><ul><li>model </li></ul><ul><ul><li>depends on the modelClass defined in the template, most likely an instance of an STKTemplateModel </li></ul></ul>
  34. 34. Content Model Bean <ul><li>accessing content properties </li></ul><ul><li>do calculations </li></ul><ul><li>accessing related contents </li></ul><ul><li>do content queries </li></ul><ul><li>your businesslogic ... </li></ul><ul><ul><li>… we love it! </li></ul></ul>
  35. 35. New Module – Newsletter <ul><li>Integration of email marketing software and mailing lists </li></ul><ul><li>Submodules </li></ul><ul><ul><li>newsletter </li></ul></ul><ul><ul><li>newsletter-stk </li></ul></ul><ul><ul><li>campaignmonitor </li></ul></ul><ul><li>www.campaignmonitor.com </li></ul>
  36. 36. Closing conclusions <ul><li>Magnolia 4 doesn‘t break existing habits! </li></ul><ul><li>Still possible to use it the way you did before in previous releases </li></ul><ul><li>No experience migrating complete projects to Magnolia 4 yet, no big problems in porting our helper classes </li></ul>
  37. 37. Closing conclusions <ul><li>STK fits to different needs </li></ul><ul><li>Less templating effort for backend developers, more flexibility for frontend developers </li></ul><ul><li>More time to focus on new features and integration issues </li></ul><ul><li>After passing the learning curve: big acceleration in development phase </li></ul>
  38. 38. How to get started? <ul><li>Check the online demo </li></ul><ul><li>Study the STK documentation (it‘s growing) </li></ul><ul><li>Join the mailing list for discussion and suggestions, don‘t hesitate to put questions </li></ul>
  39. 39. Thank you for your interest! <ul><li>Our contacts.. </li></ul><ul><li>[email_address] </li></ul><ul><li>[email_address] </li></ul><ul><li>In the web... </li></ul><ul><li>http://www.aperto.de </li></ul><ul><li>http://blog.aperto.de </li></ul><ul><li>http://www.twitter.com/aperto </li></ul><ul><li>http://www.twitter.com/maschinenraum </li></ul>

×