This talk was given by Rami Enbashi, NRG Edge, at Magnolia Conference 2015 in Basel, Switzerland. NRG Edge has developed a tool that not only improves the Magnolia templating process, but also synchronizes template configuration with the UI design. By using three-way data binding, the tool supports real-time editing and the configuration of Magnolia templating on the fly. The tool is so easy to use, even a UI developer with no Magnolia training can work with it and see results in real time. The tool also connects and synchronizes the UI design to Magnolia, which reduces project time and cost. Rami Enbashi, the UI development lead at NRG Edge, will lead a presentation and demonstration of this development tool.

1. A FRONT-END PERSPECTIVE & APPROACH
RAMI ENBASHI . NRG-EDGE
JUNE 11 , 2015 . BASEL, SWITZERLAND
SOLVING FOR COMPLEX
UI DESIGNS

2. TL;DR
• Magnolia is very powerful
• Template development can be painful
• We have a solution

4. Clients – A Select Sample

5. Magnolia as a
platform

6. Users

7. Content Editor

12. Template Developer

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

15. Area Definiton

16. Dialog Definiton

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

18. Pages App

19. Content

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

22. Components?

24. Nested areas?

25. Themes?

27. Change your mind?

29. Working in teams?

31. Forgot to export?

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

33. Configuration Hell

35. Alternative
configuration methods

37. MTE

38. What’s the problem?

41. Configuration

42. Configuration is
optional

43. Development != Configuration

44. The environment

45. Express
CSS JS HTML

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

47. A holistic front-end
approach

48. UI Sandbox™

49. Eliminating (or reducing) of
configuration is a byproduct
of the solution

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

53. Magnolia
Developer
Content
Editor
Front-end
Developer
C J H
UI
Sandbox

54. STK vs UI Sandbox

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

56. Introduce conventions

57. Abstract out conventional
configuration

58. Specify only unconventional
configuration, when needed

59. Simplicity vs Flexibility

60. Convention over
Configuration (CoC)

61. “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.”

62. Conventions are
subjective

63. Use Domain Specific
Language (DSL) rules to
define conventions

64. Implicit/Explicit
Configuration

65. Minimum Effective Dose of
configuration (MED Config)

66. Demo time!

67. Design
Philosophy
Architecture
Technology
Stack

68. Template
ViewModel
Three-way data binding

69. UI Latency
Compensation

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

71. Next steps

72. rami.enbashi@nrg-edge.com
Thank you