This document discusses a front-end perspective and approach for solving complex UI designs. It outlines a process for developing templates that allows incremental UI changes with minimal backend configuration. The process involves UX design, mobile strategy, template analysis, UI development, testing, and syncing the UI with the Magnolia CMS backend. It recommends tools like Grunt, Bower, and Yeoman for streamlining front-end development. The goal is to provide a UI sandbox that simplifies template configuration and reduces configuration issues.

1. A FRONT-END PERSPECTIVE & APPROACH
RAMI ENBASHI . NRG-EDGE
MAY 6 , 2015 . FOSTER CITY, CALIFORNIA
SOLVING FOR COMPLEX
UI DESIGNS

2. About me

3. I am lazy

4. Work smart
not hard

5. Work on fresh ideas
not tedious tasks

6. Productive

7. Laziness
Productivity

8. Good decision making

9. Decision Fatigue

10. A lazy team is a
productive team

11. The machine

13. Automate my
workflow

15. Magnolia

16. The story of Mr. X
and the green bars

20. A lazy user is a
happy user

21. A lazy developer is a
productive developer

22. Magnolia Template
Development

23. How do we get there?

24. UI Sandbox™

25. Background

26. UI-Focused, Content
Managed,
Responsive Solutions

27. UI-Focused

28. Design first

29. Complex client-side
functionality

30. Project
Manager
Lead
Analyst
DesignerDev Lead
UI Lead
Magnolia
Lead
UI
Developer
UI
Developer
Magnolia
Developer
Magnolia
Developer
Analyst/
Tester
Analyst/
Tester

31. Express
CSS JS HTML

32. The problem

33. The environment

35. Magnolia
Dev
UI Dev

36. Magnolia
Dev
UI Dev

37. The process

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

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

40. 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
Wireframes
Color Palate
Typography
Style Guide
Interaction Guide
High Fidelity Designs
(PSDs)

41. UX/Design
Mobile Strategy
Template Analysis
UI Development
UI Build / QA
UI-Magnolia Sync
Magnolia Development
Final Testing
Major/Minor Breakpoints
Supported Devices
Grid System Definition
Fluid/Fixed-width Layout
Responsive/Adaptive
01
02
03
04
05
06
07
08

42. 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
Content Managed Fields
Templates
Areas
Components
Content Type

44. 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
Design Implementation
Client-side Functionality
Front-end API Integration
Functional Website

45. Template Engine

46.
var$data$=${$
$$title:$'My$Buddies',$
$$friends:$[$
$$$$'Tyrion',$
$$$$'Arya',$
$$$$'Ygritte',$
$$$$'Drogo'$
$$]$
};
<h1>{{$title$}}</h1>$
<ul>$
{%$for$friend$in$friends$%}$
$$$$<li>{{$friend$}}</li>$
{%$endfor$%}$
</ul>
<h1>My$Buddies</h1>$
<ul>$
$$$$<li>Tyrion</li>$
$$$$<li>Arya</li>$
$$$$<li>Ygritte</li>$
$$$$<li>Drogo</li>$
</ul>
+ →

47. .
├── global
│ ├── areas
│ │ ├── footer.swig
│ │ ├── htmlHeader.swig
│ │ ├── logo.swig
│ │ ├── mainArea.swig
│ │ └── navigation.swig
│ ├── components
│ │ └── genericContent.swig
│ └── macros
│ └── calculator.swig
├── layouts
│ ├── about.swig
│ ├── generic.swig
│ └── homepage.swig
└── pages
└── homepage
├── areas
│ ├── callout.swig
│ ├── features.swig
│ ├── products.swig
│ ├── welcome.swig
│ └── whoWeAre.swig
└── components
└── featureItem.swig

48.
<div$id="welcome">$
$$<div$class="container">$
$$$$<h3$$class="heading">Welcome$to$Launch</h3>$
$$$$<h4$class="subheading">We$are$a$Magnolia$CMS$Services$&$Integration$Company</h4>$
$$$$<a$href="/login"$class=“login">Log$In</a>$
$$</div>$
</div>$
#welcome{$
$$background:$url(../assets/images/welcomeYbg.jpg)$noYrepeat$50%$84%;$
$$backgroundYsize:$cover;$
$$width:$inherit;$
}$
CSS
HTML

49.
<div$id=“welcome"$style=“backgroundYimage:$url(../assets/images/welcomeYbg.jpg)”$>$
$$<div$class="container">$
$$$$<h3$$class="heading">Welcome$to$Launch</h3>$
$$$$<h4$class="subheading">We$are$a$Magnolia$CMS$Services$&$Integration$Company</h4>$
$$$$<a$href="/login"$class=“login">Log$In</a>$
$$</div>$
</div>$
#welcome{$
$$background:$noYrepeat$50%$84%;$
$$backgroundYsize:$cover;$
$$width:$inherit;$
}$
CSS
HTML

50. Bower

51. Front-end Dependency
Management

52.
{$
$$"name":$"magnoliaYdemo",$
$$"version":$"1.3.0YSNAPSHOT",$
$$"dependencies":${$
$$$$"angular":$">=1.3.*",$
$$$$"json3":$"~3.3.1",$
$$$$"es5Yshim":$"~3.0.1",$
$$$$"foundation":$"~5.4.3",$
$$$$"angularYresource":$">=1.2.*",$
$$$$"angularYcookies":$">=1.2.*",$
$$$$"angularYsanitize":$">=1.2.*",$
$$$$"fontYawesome":$">=4.1.0",$
$$$$"lodash":$"~2.4.1",$
$$$$"angularYuiYrouter":$"~0.2.10",$
$$$$"ngYlodash":$"~0.0.2",$
$$$$"cssYtoggleYswitch":$"~3.0.0",$
$$$$"angularYplaceholderYtai":$"~1.0.1",$
$$$$"angularYscroll":$"~0.6.4",$
$$$$"angularjsYgeolocation":$"~0.1.1",$
$$$$"mobileYdetect":$"hgoebl/mobileYdetect.js#~0.4.3"$
$$},$
$$"devDependencies":${$
$$$$"angularYmocks":$">=1.2.*",$
$$$$"angularYscenario":$">=1.2.*"$
$$}$
}$
bower.json

53. Grunt

54. Task Runner

55. Compiling

56. Injection

58. Minification

59. UnCSS

60. Watch / Live Reload

61. Testing

62. Deployment

63. module.exports$=$function(grunt)${$
$$grunt.initConfig({$
$$$$jshint:${$
$$$$$$files:$['Gruntfile.js',$'src/**/*.js',$$$$$$$$$$$
'test/**/*.js'],$
$$$$$$options:${$
$$$$$$$$globals:${$
$$$$$$$$$$jQuery:$true$
$$$$$$$$}$
$$$$$$}$
$$$$},$
$$$$watch:${$
$$$$$$files:$['<%=$jshint.files$%>'],$
$$$$$$tasks:$['jshint']$
$$$$}$
$$});$
$$grunt.loadNpmTasks('gruntYcontribYjshint');$
$$grunt.loadNpmTasks('gruntYcontribYwatch');$
$$grunt.registerTask('default',$['jshint']);$
};$
{"
"""name":""magnolia-frontend","
"""version":""1.0.1","
"""dependencies":"{},"
"""devDependencies":"{"
"""""bower":""~1.3.3","
"""""browserify":""~6.2.0","
"""""grunt":""~0.4.2","
"""""grunt-autoprefixer":""~1.0.1","
"""""grunt-browserify":""~3.2.0","
"""""grunt-contrib-concat":""~0.5.0","
"""""grunt-contrib-cssmin":""~0.10.0","
"""""grunt-contrib-htmlmin":""~0.3.0","
"""""grunt-contrib-imagemin":""~0.9.1","
"""""grunt-contrib-jshint":""~0.10.0","
"""""grunt-contrib-less":""~0.12.0","
"""""grunt-contrib-uglify":""~0.6.0","
"""""grunt-contrib-watch":""~0.6.1","
"""""grunt-injector":""~0.5.3","
"""""grunt-karma":""~0.9.0","
"""""grunt-swig-templates":""~0.1.2","
"""""grunt-usemin":""2.1.1","
"""""jshint-stylish":""~1.0.0","
"""""karma":""~0.12.21","
"""""karma-chrome-launcher":""^0.1.7","
"""""karma-phantomjs-launcher":""~0.1.2","
"""""kss":""~1.3.0","
"""""lodash":""~2.4.1","
"""""minifyify":""~5.0.0""
"}"
}"
Gruntfile.json package.json

64. Yeoman

65. App Scaffolding Tool

66. Knyle Style Sheets
(KSS)

67. 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
Centralized CI Build
Automated Tests
Browser / Device
Compatibility Testing

68. 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
A process to allow
incremental UI changes
with minimal configuration
or backend changes

69. {"
"""name":""magnolia-frontend","
"""version":"“1.0.1-SNAPSHOT”,"
"""dependencies":"{},"
"""devDependencies":"{"
""""..."
"}"
}"
package.json
$$<groupId>com.project.frontend</groupId>$
$$<artifactId>projectYmoduleYtheme</artifactId>$
$$<version>1.0.1YSNAPSHOT</version>$
$$<name>Project$Magnolia$Theme</name>$
pom.xml

70. <plugin>$
$$<groupId>org.jasig.maven</groupId>$
$$<artifactId>sassYmavenYplugin</artifactId>$
</plugin>$
SASS

71. <plugin>$
$$<groupId>pl.allegro</groupId>$
$$<artifactId>gruntYmavenYplugin</artifactId>$
</plugin>$
Grunt

72. http://addyosmani.com/blog/making-maven-grunt

73. <plugin>$
$$<groupId>com.github.eirslett</groupId>$
$$<artifactId>frontendYmavenYplugin</artifactId>$
</plugin>$
NodeJS
<execution>$
$$<id>npm$install</id>$
</execution>$
<execution>$
$$<id>bower$install</id>$
</execution>$
<execution>$
$$<id>grunt$build</id>$
<configuration>$
$$<arguments>build:magnolia</arguments>$
</configuration>$
</execution>$

74. {$
//$Environment$targets$
$$development:${$
$$$$options:${$
$$$$$$loginURL:$'http://localhost:9000/login'$
$$$$$$herokuPath:$'git@heroku.com:devYproject.git',$
$$$$$$endpoint:$'content/products.json',$
$$$$$$googleMapsKey:$'AucmoT6cAyH9TeXeGGqsB8LIYoJhvs',$
$$$$$$assetsPath:$'assets/images'$
$$$$}$
$$},$
$$magnoliaBuild:${$
$$$$options:${$
$$$$$$loginURL:$'/login'$
$$$$$$herokuPath:$'git@heroku.com:mgnlYproject.git',$
$$$$$$endpoint:$'/magnoliaYinstance/.rest/products',$
$$$$$$googleMapsKey:$'zciuv2aS1N04nujJw0_hZoP',$
$$$$$$assetsPath:$'/.resources/projectYmoduleYtheme/assets/images'$
$$$$}$
$$}$
}
Gruntfile.json

75. angular.module('app')$
$$.factory('products',$function($http)${$
$$$$return${$
$$$$$$getProducts:$function(params)${$
$$$$$$$$return$$http.get('content/products.json',${$params:$params$});$
$$$$$$}$
$$$$};$
$$});$
products.service.js
angular.module('app')$
$$.factory('products',$function($http)${$
$$$$return${$
$$$$$$getProducts:$function(params)${$
$$$$$$$$return$$http.get(‘/magnoliaYinstance/.rest/products',${$params:$params$});$
$$$$$$}$
$$$$};$
$$});$
angular.module('app')$
$$.factory('products',$function($http,$ENV)${$
$$$$return${$
$$$$$$getProducts:$function(params)${$
$$$$$$$$return$$http.get(ENV.endpoint,${$params:$params$});$
$$$$$$}$
$$$$};$
$$});$

76.
<div$id="welcome">$
$$<div$class="container">$
$$$$<h3$class=“heading”>{{content.headingText}}</h3>$
$$$$<h4$class=“subheading”>{{content.subheadingText}}</h4>$
$$</div>$
</div>$
welcome.swig
<div$id="welcome">$
$$<div$class="container">$
$$$$<h3$class=“heading">${content.headingText}</h3>$
$$$$<h4$class=“subheading">${content.subheadingText}</h4>$
$$</div>$
</div>$
welcome.ftl

77. 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
Template configuration

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

79. Template
Configuration

80.
<div$id="whoYweYare">$
$$<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>$

81. Area Definiton

82. Dialog Definiton

83.
<div$id="whoYweYare">$
$$<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

84. Pages App

85. Content

86. Configuration hell

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

88. Alternative
configuration methods

89. http://kickstart.io

90. STK

91. A front-end solution

92. UI Sandbox™

93.
<div$id="whoYweYare">$
$$<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

94. Introduce conventions

95. Abstract out conventional
configuration

96. Specify only unconventional
configuration

97. Examples of Area
Definition conventions

98. • Area name = HTML element ID in camelCase
• “who-we-are” => “whoWeAre”

99. • Area title = Area name in Title Case
• “whoWeAre” => “Who We Are”

100. Defaults

101. • type = “noComponent”
• renderType = “freemarker”
• enabled = true

102.
<div$id="whoYweYare">$
$$<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>$
Autogenerate
Area$Definition$:{$
name:$“whoWeAre",$
title:$“Who$We$Are”,$
enabled:$true,$
type:$“noComponent”,$
renderType:$“freemarker”,$
templateScript:$“…”$
}$

103. Gain simplicity

104. Do we have to lose
Flexibility?

105. Convention over
Configuration (CoC)

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

107. Conventions are
subjective

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

109. Rules$:{$
areaNameSuffix:$“Area”,$
dialogNameSuffix:$“Dialog”,$
defaultAreaType:$“noComponent”,$//$$or$“single”,$“list”$
areaEnabledByDefault:$true,$
defaultRenderType:$“freemarker”,$//$or$“jsp”$
...$
}$

110.
<div$id="whoYweYare">$
$$<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>$
Rules
Area$Definition$:{$
name:$“whoWeAre",$
title:$“Who$We$Are”,$
enabled:$true,$
type:$“noComponent”,$
renderType:$“freemarker”,$
templateScript:$“…”$
}$
Magnolia Config
+
→
Autogenerate

111. Minimum Effective Dose of
configuration (MED Config)

112. Implicit/Explicit
Configuration

113.
<div$id="whoYweYare">$
$$<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>$
Rules
Area$Definition$:{$
name:$“whoWeAre",$
title:$“Who$We$Are”,$
enabled:$true,$
type:$“noComponent”,$
renderType:$“freemarker”,$
templateScript:$“…”$
}$
Magnolia Config
+
→
Autogenerate

114.
<div$id="whoYweYare"$areaYname="myArea">$
$$<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>$
{"
areaName:"“myArea”"
}"
MED Config
Area$Definition$:{$
name:$“myArea",$
title:$“My$Area”,$
enabled:$true,$
type:$“noComponent”,$
renderType:$“freemarker”,$
templateScript:$“…”$
}$
Magnolia Config
+
→
Autogenerate

115.
<div$id="whoYweYare">$
$$<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>$

116. <div$id="whoYweYare">$
$$<div$class="container">$
$$$$<h3$class=“heading"$field="heading">Who$We$Are</h3>$
$$$$<h4$class=“subheading"$field="subheading">We$are$a$Magnolia$CMS$Services$&$
Integration$Company</h4>$
$$$$<div$class=“bodyText"$field="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>
{"
content:"["
{"name:"“heading”,""
type:"“text”"
},"
{"name:"“subheading”,""
type:"“text”"
},"
{"name:"“bodyText”,""
type:"“richText”"
}"
]"
}
MED Config
+
→
<div$id="whoYweYare">$
$$<div$class="container">$
$$$$<h3$$class=“heading">$
${content.headingText!”Heading”}$
</h3>$
$$$$<h4$class=“subheading">$
${content.subheadingText!”Subheading”}$
</h4>$
$$$$<div$class="bodyText">$
$$$$$$${cmsfn.decode(content).bodyText!”bodytext”}$
$$$$</div>$
$$$$<a$href="/about"$class=“learnmore">$
Learn$More$
</a>$
$$</div>$
</div>
FTL Template

117. <div$id="whoYweYare">$
$$<div$class="container">$
$$$$<h3$class=“heading"$field="heading">Who$We$Are</h3>$
$$$$<h4$class=“subheading"$field="subheading">We$are$a$Magnolia$CMS$Services$&$
Integration$Company</h4>$
$$$$<div$class=“bodyText"$field="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>
{"
content:"["
{"name:"“heading”,""
type:"“text”"
},"
{"name:"“subheading”,""
type:"“text”"
},"
{"name:"“bodyText”,""
type:"“richText”"
}"
]"
}
MED Config
+
→ Dialog/Content

118. What did we gain?

119. Demo time!

120. Right technology
stack

121. Data binding

122. Source
Target
One-way data binding

123. Model
View
Two-way data binding

124. Template
ViewModel
Three-way data binding

125. UI Sandbox
DSL Rules
+
MGNL
Config
Slicing
In-memory
NoSQL DB
NoCR
REST
MED
Config
HTML
MGNL
Config
Magnolia
JCR
Template
Model View

126. Is this for everyone?

127. What’s next?

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