A FRONT-END PERSPECTIVE & APPROACH

RAMI ENBASHI . NRG-EDGE JUNE 11 , 2015 . BASEL, SWITZERLAND

SOLVING FOR COMPLEX UI DESIGNS

TL;DR

• Magnolia is very powerful

• Template development can be painful

• We have a solution

Clients – A Select Sample

Magnolia as a platform

Users

Content Editor

Template Developer

<div%id="who+we+are">%%%<div%class="container">%%%%%<h3%%class="heading">Who%We%Are</h3>%%%%%<h4%class="subheading">We%are%a%Magnolia%CMS%Services%&%Integration%Company</h4>%%%%%<div%class="bodyText">%%%%%%%<p>NRG%Edge%has%helped%organizations%implement%and%use%Magnolia%CMS%to%build%%%%%%%%%%and%improve%the%digital%experiences%they%provide%to%their%customers.</p>%%%%%</div>%%%%%<a%href="/about"%class="learnmore">Learn%More</a>%%%</div>%</div>%

Area Definiton

Dialog Definiton

<div%id="who+we+are">%%%<div%class="container">%%%%%<h3%%class=“heading">${content.headingText!}</h3>%%%%%<h4%class=“subheading">${content.subheadingText!}</h4>%%%%%<div%class="bodyText">%%%%%%%${cmsfn.decode(content).bodyText}%%%%%</div>%%%%%<a%href="/about"%class="learnmore">Learn%More</a>%%%</div>%</div>%

Template Script

Pages App

Content

YO DAWG, I HEARD YOU LIKE MAGNOLIA CONFIGURATION

SO I PUT CONFIGURATION IN YOUR CONFIGURATION SO YOU CAN

CONFIGURE YOUR CONFIGURATION.

Components?

Nested areas?

Themes?

Change your mind?

Working in teams?

Forgot to export?

FORGET TO EXPORT YOUR CONFIGURATION

I DARE YOU, I DOUBLE DARE YOU

Configuration Hell

Alternative configuration methods

MTE

What’s the problem?

Configuration

Configuration is optional

Development != Configuration

The environment

Express

CSS JS HTML

Solving a front-end problem using a back-end solution

A holistic front-end approach

UI Sandbox™

Eliminating (or reducing) of configuration is a byproduct

of the solution

01 UX/Design

02 Mobile Strategy

03 Template Analysis

04 UI Development

05 UI Build / QA

06 UI-Magnolia Sync

07 Magnolia Development

08 Final Testing

Magnolia Developer

Content Editor

Front-end Developer

C J H

UI Sandbox

STK vs UI Sandbox

<div%id="who+we+are">%%%<div%class="container">%%%%%<h3%%class="heading">Who%We%Are</h3>%%%%%<h4%class="subheading">We%are%a%Magnolia%CMS%Services%&%Integration%Company</h4>%%%%%<div%class="bodyText">%%%%%%%<p>NRG%Edge%has%helped%organizations%implement%and%use%Magnolia%CMS%to%build%%%%%%%%%%and%improve%the%digital%experiences%they%provide%to%their%customers.</p>%%%%%</div>%%%%%<a%href="/about"%class="learnmore">Learn%More</a>%%%</div>%</div>%

Area Definiton

Template Script

Dialog Definiton Content

Introduce conventions

Abstract out conventional configuration

Specify only unconventional configuration, when needed

Simplicity vs Flexibility

Convention over Configuration (CoC)

“Convention over configuration is a software design paradigm which seeks to decrease the number of decisions that developers need to make, gaining simplicity, but not necessarily

losing flexibility.”

Conventions are subjective

Use Domain Specific Language (DSL) rules to

define conventions

Implicit/Explicit Configuration

Minimum Effective Dose of configuration (MED Config)

Demo time!

Design Philosophy

Architecture

Technology Stack

Template

ViewModel

Three-way data binding

UI Latency Compensation

UI Sandbox

DSL Rules

+MGNL Config

SlicingIn-memory NoSQL DB

NoCR

REST

MED Config

MGNL Config

Magnolia

JCR

Template

Model View

C J H

Next steps

rami.enbashi@nrg-edge.com

Thank you