Inside Adobe Experience Manager (AEM) 6.4: frontend technology
As a trusted Adobe Experience Cloud expert, Netcentric works at the forefront of innovation. To help us keep one eye on the digital horizon and deliver exceptional experiences for our clients, our infrastructure needs to be future-proof too. In light of that, the new version of netcentric.biz, based on AEM 6.4, went live as a minimum viable product (MVP). With continuous refinement and improvements, we’ve constructed a fully-fledged, scalable and future-proof product.
With the new site now live, we reflect on the tech stack that was implemented, and share our findings with you.
At the forefront of innovation
Adobe launched Adobe Experience Manager (AEM) 6.4 with a focus on the reuse of content at scale across all screens and an increased velocity in delivering experiences via pre-made components and experience fragments. It also enables an enhanced customization of components via the styles system, and the use of responsive layouts & channel-optimized communications.
Right from the outset, Netcentric was involved in the development and testing phases of AEM 6.4 and Core Components. This close partnership with Adobe in the launch of AEM 6.4 has equipped us with expertise and insights to facilitate the implementation of AEM 6.4 internally. When it comes to implementing new features, and in particular core components, our expert approach is to introduce these within new AEM projects rather than in existing applications where larger migration efforts would be required. This extreme modular approach to building websites, combined with the need for more content editor flexibility, led us to believe this was the perfect opportunity for a new Netcentric website.
A change in paradigm
Modularity and velocity
Using AEM Core Components as the foundation of any website, and extending them to fit the requirements of a specific project, requires a new mindset. The aim here is to build websites with as little code as possible by reusing and customizing the core components. This speeds up development and facilitates maintainability.\
- Process-wise, the following stages are involved:
- Deconstruction: the designs of the yet-to-be-born website are broken down into smaller pieces (e.g. single image, image with text, 2-column text)
- Inventory mapping: the constituent parts are mapped to core or customized components (e.g. Image component, Teaser component, Layout container)
- (Re)construction: the designs are authored and re-assembled in AEM Sites
Think of it as a Lego game, with the added benefit that you also get to build your own blocks. By starting with a working set of components, we were able to considerably reduce the time and resources channelled into development and coding efforts.
Content author is king
This new approach also shifts the principal focus from content to content author. Our powerful new solution enables our expert authors to continuously deliver, optimise and improve our website. That means www.netcentric.biz is just one instantiation of content. Our content authors now have the tools to create countless others, overhaul the existing one and reuse content across channels. In other words, since our new platform doesn’t just mean one new website, it means the ability to deliver future-proofed sites for years to come, it equips us with a true website machine.
Under the hood
AEM 6.4 provides out-of-the-box responsive capabilities through the Layout Container, which can be used in combination with the Layout Mode and the Emulator:\
- Layout container provides a responsive grid, represented as vertical columns, into which components can be nested. The components can be placed and resized on this responsive grid. Based on predefined breakpoints, the grid re-arranges the layout relative to the screen size and orientation.
- Layout mode complements Edit mode and enables authors to configure the layout of a responsive grid, and to position content within the responsive grid.
- Emulator allows users to render content relative to emulated devices, such as tablets, iPhones or Android devices.
Netcentric customized the AEM Grids to adjust Responsive Behavior further via the Block and Flex options. These options allow authors to automatically resize components and control the way they reflow. Extending the functionality of the AEM Grids was done by enabling AEM Styles (a.k.a. Style System) in the Responsive Layout component. To improve the performance of the AEM Grid, we also implemented a refactored version of the standard AEM Grid by cleaning repetitive code.
AEM Style System
The AEM Style System either expands the functionality of components or provides visual variations of the same component. This can be done by adding or removing CSS classes in the decoration wrapper element of the component. Once developed, content authors can expand the so-called Brush Menu and select the desired feature from a drop-down menu. E.g. Alignment Options: Left, Center, Right.\
Netcentric used the in-built AEM 6.4 Style system and implemented 16 style categories which offer authors more than 34 customization options. This screen capture demonstrates 2 style categories (Shape, Align) and 4 styling options (green, black, border, solid):
Adobe introduced Experience Fragments to further facilitate content reuse. Experience Fragments are constructs made up of content and layout that live in AEM under Experience Fragments, not AEM Sites. Once created, they can be referenced in AEM Sites and included on pages thus easily reusing and maintaining content. Once the experience fragment is updated, the change is propagated to all pages in which the respective experience fragment is referenced.
For the new netcentric.biz, we used Experience Fragments for the facility they provide in managing repetitive content. For instance, the Footer was implemented as an Experience Fragment, since this remains constant across all pages.
HTTP/2 Server Push
Lazy image loading
Unless optimized for a variety of use cases, assets, such as high-resolution images, can weigh heavily on performance and burn through mobile users’ data. To address these challenges for our netcentric.biz project, two frontend technologies were implemented:\
- To tackle lazy loading, a mechanism whereby images are loaded asynchronously and conditionally was used. This was enabled using the Intersection Observer API to identify whether images are in the visible area of the screen and only load them if so. For instance, if users don’t scroll all the way down a page, these assets simply won’t be loaded, resulting in a saved bandwidth.
- To further combat lazy loading, we leveraged responsive images. Based on CSS configuration, images are loaded relative to the screen size they are rendered on.
The combination of these technologies results in the best possible image size, optimized speed and, hopefully, happier mobile users.
Conclusion: a future-proof frontend
Netcentric is proud to work with the world’s leading brands to deliver exceptional customer experiences across touchpoints. With netcentric.biz, we’ve made sure our own digital experience reflects the standards we always hit for our clients. Our powerful new frontend means easier maintenance, greater autonomy for content editors, consistent performance across devices and exceptional user experiences. By unleashing the full power of Adobe Experience Manager 6.4 internally, we’re ready to unlock its potential for our clients.