Connect Web Experience. Basel. Modular Front-End in AEM. Namics. Michael Kreis. Software Engineer. René Bach. Senior Frontend Engineer.

Transcription

1 Connect Web Experience. Basel. Modular Front-End in AEM. Michael Kreis. Software Engineer. René Bach. Senior Frontend Engineer. 25. Juni 2014

2 The challenge of implementing modular front-end in a AEM environment. A case study. Agenda. Who we are Modular Front-End Challenges Experiences Outlook

3 Who we are

4 The challenge of implementing modular front-end in a AEM environment. A case study. Michael Kreis. Software Engineer Namics, St. Gallen

5 The challenge of implementing modular front-end in a AEM environment. A case study. René Bach. Senior Frontend Engineer Namics, Zürich

6 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

7 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

8 Modular Front-End

9 Modular Front-End. What is a module?

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

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

12 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

13 Modular Front-End. Why using modules?

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 )

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 )

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 )

17 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 )

18 Modular Front-End. Getting started with modular front-end

19 Modular Front-End. Getting started with modular front-end Layout First structure your layout (header, footer, sitebar, mainarea,...) Figure out variations of layout elements

20 Modular Front-End. Getting started with modular front-end Layout

21 Modular Front-End. Getting started with modular front-end Modules Figure out modules Don't be to general Don't be to specific

22 Modular Front-End. Getting started with modular front-end Modules

23 Modular Front-End. Frameworks

24 Modular Front-End. Frameworks

25 Modular Front-End. Frameworks - Terrific

26 Modular Front-End. Frameworks - Terrific Markup modules/navmain/navmain.html

27 Modular Front-End. Frameworks - Terrific CSS / LESS modules/navmain/css/navmain.less

28 Modular Front-End. Frameworks - Terrific JavaScript modules/navmain/js/navmain.js

29 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

30 Challenges

31 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

32 Experiences

33 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

34 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

35 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

36 Experiences. Integration approach III Terrific Micro is installed in component directory Exclude Terrific files in CRX Package FE only uses component directory

37 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)

38 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

39 Experiences. Integration approach III Available on Github:

40 Experiences. Perfect world???

41 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

42 Outlook

43 Outlook. Possibilities in AEM 6 Sightly is only using valid HTML Can be rendered in Apache and CQ Same source even for markup

44 Questions? Comments?

45 Thank you for your attention. Namics