connect web experience - basel. treffen der aem developer community

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



Namics.

René Bach.

Senior Frontend Engineer

Namics, Zürich



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



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



Namics.

Modular Front-End.


Namics.

What is a module?

Modular Front-End.


Namics.

What is a module?

Modular Front-End.


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.





Namics.

Why using modules?

Modular Front-End.


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.


Namics.






Modular Front-End.


Namics.

Getting started with modular front-end

Modular Front-End.


Namics.


Modular Front-End.


Layout First structure your layout (header, footer, sitebar, main-

area,...) Figure out variations of layout elements

Namics.


Modular Front-End.


Layout

Namics.


Modular Front-End.


Modules Figure out modules Don't be to general Don't be to specific

Namics.


Modular Front-End.


Modules

Namics.

Frameworks

Modular Front-End.


Namics.

Frameworks - Terrific

Modular Front-End.


Namics.


Markup

modules/navmain/navmain.html

Modular Front-End.


Namics.


CSS / LESS

modules/navmain/css/navmain.less

Modular Front-End.


Namics.

Frameworks - Terrific JavaScript

modules/navmain/js/navmain.js

Modular Front-End.


Namics.

Frameworks – Terrific-Micro

Modular Front-End.


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.


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.


Namics.

Experiences.


Namics.

Integration approach I

Develop FE in standalone Terrific

Deliver compiled assets

Experiences.


+ 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.


+ 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.


+ Same code base

+ FE and BE can use their tools

Differences between CQ and Terrific concepts

Pages / Views

Assets

Namics.


Terrific Micro is installed in component directory

Exclude Terrific files in CRX Package

FE only uses component directory

Experiences.


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.


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.


Namics.


Experiences.


Available on Github: https://github.com/m-kay/connect-terrific-aem

https://github.com/m-kay/connect-terrific-aem







Namics.

Perfect world???

Experiences.


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.


Namics.

Outlook.


Namics.

Possibilities in AEM 6

Sightly is only using valid HTML

Can be rendered in Apache and CQ

Same source even for markup

Outlook.


Namics.

Questions? Comments?
