Connect Web Experience. Basel. Modular Front-End in AEM. Namics.
Michael Kreis. Software Engineer. René Bach. Senior Frontend Engineer. 25. Juni 2014
Namics.
Agenda.
Who we are
Modular Front-End
Challenges
Experiences
Outlook
The challenge of implementing modular front-end in a AEM environment. A case study.
27.06.2014 Denken. Präsentieren. Umsetzen. 2
Namics.
Who we are.
27.06.2014 3 Denken. Präsentieren. Umsetzen.
Namics.
Michael Kreis.
Software Engineer
Namics, St. Gallen
The challenge of implementing modular front-end in a AEM environment. A case study.
27.06.2014 Denken. Präsentieren. Umsetzen. 4
Namics.
René Bach.
Senior Frontend Engineer
Namics, Zürich
The challenge of implementing modular front-end in a AEM environment. A case study.
27.06.2014 5 Denken. Präsentieren. Umsetzen.
Namics.
Namics. 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
The challenge of implementing modular front-end in a AEM environment. A case study.
27.06.2014 6 Denken. Präsentieren. Umsetzen.
Namics.
Namics. 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
The challenge of implementing modular front-end in a AEM environment. A case study.
27.06.2014 7 Denken. Präsentieren. Umsetzen.
Namics.
Modular Front-End.
27.06.2014 8 Denken. Präsentieren. Umsetzen.
Namics.
What is a module?
Modular Front-End.
27.06.2014 Denken. Präsentieren. Umsetzen. 9
Namics.
What is a module?
Modular Front-End.
27.06.2014 10 Denken. Präsentieren. Umsetzen.
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.
Namics.
What is a module?
Modular Front-End.
27.06.2014 11 Denken. Präsentieren. Umsetzen.
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.
Namics.
What is a module?
Modular Front-End.
27.06.2014 12 Denken. Präsentieren. Umsetzen.
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.
Namics.
Why using modules?
Modular Front-End.
27.06.2014 Denken. Präsentieren. Umsetzen. 13
Namics.
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”)
Modular Front-End.
27.06.2014 Denken. Präsentieren. Umsetzen. 14
Namics.
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”)
Modular Front-End.
27.06.2014 Denken. Präsentieren. Umsetzen. 15
Namics.
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”)
Modular Front-End.
27.06.2014 Denken. Präsentieren. Umsetzen. 16
Namics.
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”)
Modular Front-End.
27.06.2014 Denken. Präsentieren. Umsetzen. 17
Namics.
Getting started with modular front-end
Modular Front-End.
27.06.2014 Denken. Präsentieren. Umsetzen. 18
Namics.
Getting started with modular front-end
Modular Front-End.
27.06.2014 19 Denken. Präsentieren. Umsetzen.
Layout First structure your layout (header, footer, sitebar, main-
area,...) Figure out variations of layout elements
Namics.
Getting started with modular front-end
Modular Front-End.
27.06.2014 20 Denken. Präsentieren. Umsetzen.
Layout
Namics.
Getting started with modular front-end
Modular Front-End.
27.06.2014 21 Denken. Präsentieren. Umsetzen.
Modules Figure out modules Don't be to general Don't be to specific
Namics.
Getting started with modular front-end
Modular Front-End.
27.06.2014 22 Denken. Präsentieren. Umsetzen.
Modules
Namics.
Frameworks
Modular Front-End.
27.06.2014 Denken. Präsentieren. Umsetzen. 23
Namics.
Frameworks
Modular Front-End.
27.06.2014 24 Denken. Präsentieren. Umsetzen.
Namics.
Frameworks - Terrific
Modular Front-End.
27.06.2014 Denken. Präsentieren. Umsetzen. 25
Namics.
Frameworks - Terrific
Markup
modules/navmain/navmain.html
Modular Front-End.
27.06.2014 Denken. Präsentieren. Umsetzen. 26
Namics.
Frameworks - Terrific
CSS / LESS
modules/navmain/css/navmain.less
Modular Front-End.
27.06.2014 Denken. Präsentieren. Umsetzen. 27
Namics.
Frameworks - Terrific JavaScript
modules/navmain/js/navmain.js
Modular Front-End.
27.06.2014 Denken. Präsentieren. Umsetzen. 28
Namics.
Frameworks – Terrific-Micro
Modular Front-End.
27.06.2014 29 Denken. Präsentieren. Umsetzen.
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
Namics.
Challenges.
27.06.2014 30 Denken. Präsentieren. Umsetzen.
Namics.
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
Challenges.
27.06.2014 Denken. Präsentieren. Umsetzen. 31
Namics.
Experiences.
27.06.2014 32 Denken. Präsentieren. Umsetzen.
Namics.
Integration approach I
Develop FE in standalone Terrific
Deliver compiled assets
Experiences.
27.06.2014 Denken. Präsentieren. Umsetzen. 33
+ Same tools
+ Quick setup
Different code base
Hard to keep track of changes
Complete FE should be finished when starting with BE
Namics.
Integration approach II
Adapt modular concept in CQ
Only use Terrific JS framework
Experiences.
27.06.2014 Denken. Präsentieren. Umsetzen. 34
+ Standard CQ
+ Quick setup
+ Same code base
Different tools for FE
CQ instance needed for FE
Namics.
Integration approach III
Fully integrate Terrific in CQ
Use Terrific modules as CQ components
Experiences.
27.06.2014 Denken. Präsentieren. Umsetzen. 35
+ Same code base
+ FE and BE can use their tools
Differences between CQ and Terrific concepts
Pages / Views
Assets
Namics.
Integration approach III
Terrific Micro is installed in component directory
Exclude Terrific files in CRX Package
FE only uses component directory
Experiences.
27.06.2014 Denken. Präsentieren. Umsetzen. 36
Namics.
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)
Experiences.
27.06.2014 Denken. Präsentieren. Umsetzen. 37
Namics.
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
Experiences.
27.06.2014 Denken. Präsentieren. Umsetzen. 38
Namics.
Integration approach III
Experiences.
27.06.2014 Denken. Präsentieren. Umsetzen. 39
Available on Github: https://github.com/m-kay/connect-terrific-aem
Namics.
Perfect world???
Experiences.
27.06.2014 Denken. Präsentieren. Umsetzen. 40
Namics.
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
Experiences.
27.06.2014 Denken. Präsentieren. Umsetzen. 41
Namics.
Outlook.
27.06.2014 42 Denken. Präsentieren. Umsetzen.
Namics.
Possibilities in AEM 6
Sightly is only using valid HTML
Can be rendered in Apache and CQ
Same source even for markup
Outlook.
27.06.2014 Denken. Präsentieren. Umsetzen. 43
Namics.
Questions? Comments?
27.06.2014 44 Denken. Präsentieren. Umsetzen.
Namics.
Thank you for your attention.
[email protected] [email protected]
© Namics
27.06.2014 45 Denken. Präsentieren. Umsetzen.