Solving for complex UI designs: a front-end perspective and approach

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

<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>%

%%%%<h3%%class=“heading">${content.headingText!}</h3>%
%%%%<h4%class=“subheading">${content.subheadingText!}</h4>%
%%%%%%${cmsfn.decode(content).bodyText}%
%%%%</div>%
%%</div>%
</div>%
Template Script

YO DAWG, I HEARD YOU LIKE
MAGNOLIA CONFIGURATION
SO I PUT CONFIGURATION IN YOUR
CONFIGURATION SO YOU CAN
CONFIGURE YOUR CONFIGURATION.

FORGET TO EXPORT YOUR
CONFIGURATION
I DARE YOU, I DOUBLE DARE YOU

Alternative
conﬁguration methods

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

Eliminating (or reducing) of
conﬁguration 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

%%%%<h3%%class="heading">Who%We%Are</h3>%
%%%%<h4%class="subheading">We%are%a%Magnolia%CMS%Services%&%Integration%Company</h4>%
%%%%%%<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>%
%%</div>%
</div>%
Area
Deﬁniton
Template
Script
Dialog
Deﬁniton
Content

Abstract out conventional
conﬁguration

Specify only unconventional
conﬁguration, when needed

Convention over
Conﬁguration (CoC)

“Convention over conﬁguration is a software
design paradigm which seeks to decrease the
number of decisions that developers need to
make, gaining simplicity, but not necessarily
losing ﬂexibility.”

Use Domain Speciﬁc
Language (DSL) rules to
deﬁne conventions

Implicit/Explicit
Conﬁguration

Minimum Effective Dose of
conﬁguration (MED Conﬁg)

Design
Philosophy
Architecture
Technology
Stack

Template
ViewModel
Three-way data binding

UI Sandbox
DSL Rules
+
MGNL
Config
Slicing
In-memory
NoSQL DB
NoCR
REST
MED
Config
MGNL
Config
Magnolia
JCR
Template
Model View
C J H

rami.enbashi@nrg-edge.com
Thank you

Solving for complex UI designs: a front-end perspective and approach

More Related Content

Similar to Solving for complex UI designs: a front-end perspective and approach (20)

More from Magnolia (20)

Solving for complex UI designs: a front-end perspective and approach