EVOLVE'14 | Enhance | Jakub Kaniewski | AEM 6 Geolocation, AEM Goes Spacial
CONNECT Web Experience - Basel. Treffen der AEM Developer Community.
description
Transcript of CONNECT Web Experience - Basel. Treffen der AEM Developer Community.
![Page 1: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/1.jpg)
Connect Web Experience. Basel. Modular Front-End in AEM. Namics.
Michael Kreis. Software Engineer. René Bach. Senior Frontend Engineer. 25. Juni 2014
![Page 2: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/2.jpg)
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
![Page 3: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/3.jpg)
Namics.
Who we are.
27.06.2014 3 Denken. Präsentieren. Umsetzen.
![Page 4: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/4.jpg)
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
![Page 5: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/5.jpg)
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.
![Page 6: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/6.jpg)
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.
![Page 7: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/7.jpg)
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.
![Page 8: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/8.jpg)
Namics.
Modular Front-End.
27.06.2014 8 Denken. Präsentieren. Umsetzen.
![Page 9: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/9.jpg)
Namics.
What is a module?
Modular Front-End.
27.06.2014 Denken. Präsentieren. Umsetzen. 9
![Page 10: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/10.jpg)
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.
![Page 11: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/11.jpg)
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.
![Page 12: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/12.jpg)
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.
![Page 13: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/13.jpg)
Namics.
Why using modules?
Modular Front-End.
27.06.2014 Denken. Präsentieren. Umsetzen. 13
![Page 14: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/14.jpg)
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
![Page 15: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/15.jpg)
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
![Page 16: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/16.jpg)
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
![Page 17: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/17.jpg)
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
![Page 18: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/18.jpg)
Namics.
Getting started with modular front-end
Modular Front-End.
27.06.2014 Denken. Präsentieren. Umsetzen. 18
![Page 19: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/19.jpg)
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
![Page 20: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/20.jpg)
Namics.
Getting started with modular front-end
Modular Front-End.
27.06.2014 20 Denken. Präsentieren. Umsetzen.
Layout
![Page 21: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/21.jpg)
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
![Page 22: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/22.jpg)
Namics.
Getting started with modular front-end
Modular Front-End.
27.06.2014 22 Denken. Präsentieren. Umsetzen.
Modules
![Page 23: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/23.jpg)
Namics.
Frameworks
Modular Front-End.
27.06.2014 Denken. Präsentieren. Umsetzen. 23
![Page 24: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/24.jpg)
Namics.
Frameworks
Modular Front-End.
27.06.2014 24 Denken. Präsentieren. Umsetzen.
![Page 25: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/25.jpg)
Namics.
Frameworks - Terrific
Modular Front-End.
27.06.2014 Denken. Präsentieren. Umsetzen. 25
![Page 26: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/26.jpg)
Namics.
Frameworks - Terrific
Markup
modules/navmain/navmain.html
Modular Front-End.
27.06.2014 Denken. Präsentieren. Umsetzen. 26
![Page 27: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/27.jpg)
Namics.
Frameworks - Terrific
CSS / LESS
modules/navmain/css/navmain.less
Modular Front-End.
27.06.2014 Denken. Präsentieren. Umsetzen. 27
![Page 28: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/28.jpg)
Namics.
Frameworks - Terrific JavaScript
modules/navmain/js/navmain.js
Modular Front-End.
27.06.2014 Denken. Präsentieren. Umsetzen. 28
![Page 29: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/29.jpg)
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
![Page 30: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/30.jpg)
Namics.
Challenges.
27.06.2014 30 Denken. Präsentieren. Umsetzen.
![Page 31: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/31.jpg)
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
![Page 32: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/32.jpg)
Namics.
Experiences.
27.06.2014 32 Denken. Präsentieren. Umsetzen.
![Page 33: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/33.jpg)
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
![Page 34: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/34.jpg)
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
![Page 35: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/35.jpg)
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
![Page 36: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/36.jpg)
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
![Page 37: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/37.jpg)
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
![Page 38: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/38.jpg)
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
![Page 39: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/39.jpg)
Namics.
Integration approach III
Experiences.
27.06.2014 Denken. Präsentieren. Umsetzen. 39
Available on Github: https://github.com/m-kay/connect-terrific-aem
![Page 40: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/40.jpg)
Namics.
Perfect world???
Experiences.
27.06.2014 Denken. Präsentieren. Umsetzen. 40
![Page 41: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/41.jpg)
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
![Page 42: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/42.jpg)
Namics.
Outlook.
27.06.2014 42 Denken. Präsentieren. Umsetzen.
![Page 43: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/43.jpg)
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
![Page 44: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/44.jpg)
Namics.
Questions? Comments?
27.06.2014 44 Denken. Präsentieren. Umsetzen.
![Page 45: CONNECT Web Experience - Basel. Treffen der AEM Developer Community.](https://reader034.fdocuments.us/reader034/viewer/2022052522/554d0939b4c9052c5a8b4b35/html5/thumbnails/45.jpg)
Namics.
Thank you for your attention.
[email protected] [email protected]
© Namics
27.06.2014 45 Denken. Präsentieren. Umsetzen.