Connect Web Experience. Basel. Modular Front-End in AEM. Michael Kreis. Software Engineer. René Bach. Senior Frontend Engineer. 25. Juni 2014
The challenge of implementing modular front-end in a AEM environment. A case study. Agenda. Who we are Modular Front-End Challenges Experiences Outlook 27.06.2014 2
Who we are. 27.06.2014 3
The challenge of implementing modular front-end in a AEM environment. A case study. Michael Kreis. Software Engineer Namics, St. Gallen 27.06.2014 4
The challenge of implementing modular front-end in a AEM environment. A case study. René Bach. Senior Frontend Engineer Namics, Zürich 27.06.2014 5
The challenge of implementing modular front-end in a AEM environment. A case study. Leading Swiss Internet consultancy with a strong presence in the German market. Focus Internet Strategy Design and implementation of user-centered, efficient and compelling internet applications Marketing and launch support of online activities Standards based approach, pragmatic realization 27.06.2014 6
The challenge of implementing modular front-end in a AEM environment. A case study. Facts and figures founded 1995 as a spin-off of the University of St. Gallen > 430 employees, Revenue 2013 CHF 55 Mns Locations: Frankfurt, Hamburg, Munich, St. Gallen, Zurich 27.06.2014 7
Modular Front-End. 27.06.2014 8
Modular Front-End. What is a module? 27.06.2014 9
Modular Front-End. What is a module? A module is a unique element that has a specific set of functionalities and is not tied to the layout of a website. Wherever the module resides on the site, it has the same general sub elements and functionality. Modules should be independent of other modules or layout elements. 27.06.2014 10
Modular Front-End. What is a module? A module is a unique element that has a specific set of functionalities and is not tied to the layout of a website. Wherever the module resides on the site, it has the same general sub elements and functionality. Modules should be independent of other modules or layout elements. 27.06.2014 11
Modular Front-End. What is a module? A module is a unique element that has a specific set of functionalities and is not tied to the layout of a website. Wherever the module resides on the site, it has the same general sub elements and functionality. Modules should be independent of other modules or layout elements. 27.06.2014 12
Modular Front-End. Why using modules? 27.06.2014 13
Modular Front-End. Why using modules? The code will be cleaner, because CSS and JS of modules are bundled in an own module-file-structure Changes in markup, CSS and JS can be done very quick, because it's clear where to find it in the code Modules are reusable Modules can have different representations ( skins ) 27.06.2014 14
Modular Front-End. Why using modules? The code will be cleaner, because CSS and JS of modules are bundled in an own module-file-structure Changes in markup, CSS and JS can be done very quick, because it's clear where to find it in the code Modules are reusable Modules can have different representations ( skins ) 27.06.2014 15
Modular Front-End. Why using modules? The code will be cleaner, because CSS and JS of modules are bundled in an own module-file-structure Changes in markup, CSS and JS can be done very quick, because it's clear where to find it in the code Modules are reusable Modules can have different representations ( skins ) 27.06.2014 16
Modular Front-End. Why using modules? The code will be cleaner, because CSS and JS of modules are bundled in an own module-file-structure Changes in markup, CSS and JS can be done very quick, because it's clear where to find it in the code Modules are reusable Modules can have different representations ( skins ) 27.06.2014 17
Modular Front-End. Getting started with modular front-end 27.06.2014 18
Modular Front-End. Getting started with modular front-end Layout First structure your layout (header, footer, sitebar, mainarea,...) Figure out variations of layout elements 27.06.2014 19
Modular Front-End. Getting started with modular front-end Layout 27.06.2014 20
Modular Front-End. Getting started with modular front-end Modules Figure out modules Don't be to general Don't be to specific 27.06.2014 21
Modular Front-End. Getting started with modular front-end Modules 27.06.2014 22
Modular Front-End. Frameworks 27.06.2014 23
Modular Front-End. Frameworks 27.06.2014 24
Modular Front-End. Frameworks - Terrific 27.06.2014 25
Modular Front-End. Frameworks - Terrific Markup modules/navmain/navmain.html 27.06.2014 26
Modular Front-End. Frameworks - Terrific CSS / LESS modules/navmain/css/navmain.less 27.06.2014 27
Modular Front-End. Frameworks - Terrific JavaScript modules/navmain/js/navmain.js 27.06.2014 28
Modular Front-End. Frameworks Terrific-Micro Boilerplate for Terrific Modules Module template generator Features CSS/JS concatenation & minification LESS/SASS support (optional) Caching (LESS/SASS) for optimal performance Written in PHP https://github.com/rogerdudler/terrific-micro 27.06.2014 29
Challenges. 27.06.2014 30
Challenges. Bringing Back-End and Front-End together We are using CQ and Terrific Development, both back-end and front-end, must be quick The less develpoment dependencies between BE & FE, the better FE should be able to use the same tools in for every environment 27.06.2014 31
Experiences. 27.06.2014 32
Experiences. Integration approach I Develop FE in standalone Terrific Deliver compiled assets + Same tools + Quick setup Different code base Hard to keep track of changes Complete FE should be finished when starting with BE 27.06.2014 33
Experiences. Integration approach II Adapt modular concept in CQ Only use Terrific JS framework + Standard CQ + Quick setup Different tools for FE CQ instance needed for FE + Same code base 27.06.2014 34
Experiences. Integration approach III Fully integrate Terrific in CQ Use Terrific modules as CQ components + Same code base + FE and BE can use their tools Differences between CQ and Terrific concepts Pages / Views Assets 27.06.2014 35
Experiences. Integration approach III Terrific Micro is installed in component directory Exclude Terrific files in CRX Package FE only uses component directory 27.06.2014 36
Experiences. Integration approach III Component handling Terrific modules are used as CQ components Own ClientLib for each module/component Embed module ClientLibs in design ClientLib (/etc/designs/project/clientlibs.css) 27.06.2014 37
Experiences. Integration approach III Asset handling No access to Terrific asset folder in CQ Copy to design folder Maven resource plugin Rewrite references in Stylesheets Maven replacer plugin No direct references in markup possible 27.06.2014 38
Experiences. Integration approach III Available on Github: https://github.com/m-kay/connect-terrific-aem 27.06.2014 39
Experiences. Perfect world??? 27.06.2014 40
Experiences. Known problems Markup has to be copied Changes in markup do not take immediate effect in CQ Terrific does not have the same concept of pages like CQ Different LESS compiler in Terrific and CQ 27.06.2014 41
Outlook. 27.06.2014 42
Outlook. Possibilities in AEM 6 Sightly is only using valid HTML Can be rendered in Apache and CQ Same source even for markup 27.06.2014 43
Questions? Comments? 27.06.2014 44
Thank you for your attention. michael.kreis@namics.com rene.bach@namics.com Namics 27.06.2014 45