Download - Solving for complex UI designs
![Page 1: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/1.jpg)
A FRONT-END PERSPECTIVE & APPROACH
RAMI ENBASHI . NRG-EDGE MAY 6 , 2015 . FOSTER CITY, CALIFORNIA
SOLVING FOR COMPLEX UI DESIGNS
![Page 2: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/2.jpg)
About me
![Page 3: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/3.jpg)
I am lazy
![Page 4: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/4.jpg)
Work smart not hard
![Page 5: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/5.jpg)
Work on fresh ideas not tedious tasks
![Page 6: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/6.jpg)
Productive
![Page 7: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/7.jpg)
Laziness
Prod
uctiv
ity
![Page 8: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/8.jpg)
Good decision making
![Page 9: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/9.jpg)
Decision Fatigue
![Page 10: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/10.jpg)
A lazy team is a productive team
![Page 11: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/11.jpg)
The machine
![Page 12: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/12.jpg)
![Page 13: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/13.jpg)
Automate my workflow
![Page 14: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/14.jpg)
![Page 15: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/15.jpg)
Magnolia
![Page 16: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/16.jpg)
The story of Mr. X and the green bars
![Page 17: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/17.jpg)
![Page 18: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/18.jpg)
![Page 19: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/19.jpg)
![Page 20: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/20.jpg)
A lazy user is a happy user
![Page 21: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/21.jpg)
A lazy developer is a productive developer
![Page 22: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/22.jpg)
Magnolia Template Development
![Page 23: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/23.jpg)
How do we get there?
![Page 24: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/24.jpg)
UI Sandbox™
![Page 25: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/25.jpg)
Background
![Page 26: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/26.jpg)
UI-Focused, Content Managed,
Responsive Solutions
![Page 27: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/27.jpg)
UI-Focused
![Page 28: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/28.jpg)
Design first
![Page 29: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/29.jpg)
Complex client-side functionality
![Page 30: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/30.jpg)
Project Manager
Lead AnalystDesignerDev Lead
UI LeadMagnolia
Lead
UI Developer
UI Developer
Magnolia Developer
Magnolia Developer
Analyst/ Tester
Analyst/ Tester
![Page 31: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/31.jpg)
Express
CSS JS HTML
![Page 32: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/32.jpg)
The problem
![Page 33: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/33.jpg)
The environment
![Page 34: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/34.jpg)
![Page 35: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/35.jpg)
Magnolia Dev
UI Dev
![Page 36: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/36.jpg)
Magnolia Dev
UI Dev
![Page 37: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/37.jpg)
The process
![Page 38: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/38.jpg)
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
![Page 39: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/39.jpg)
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
![Page 40: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/40.jpg)
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)
![Page 41: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/41.jpg)
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
![Page 42: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/42.jpg)
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
![Page 43: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/43.jpg)
![Page 44: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/44.jpg)
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
![Page 45: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/45.jpg)
Template Engine
![Page 46: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/46.jpg)
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>
+ →
![Page 47: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/47.jpg)
. ├── 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
![Page 48: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/48.jpg)
<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
![Page 49: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/49.jpg)
<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
![Page 50: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/50.jpg)
Bower
![Page 51: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/51.jpg)
Front-end Dependency Management
![Page 52: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/52.jpg)
{$$$"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
![Page 53: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/53.jpg)
Grunt
![Page 54: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/54.jpg)
Task Runner
![Page 55: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/55.jpg)
Compiling
![Page 56: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/56.jpg)
Injection
![Page 57: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/57.jpg)
![Page 58: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/58.jpg)
Minification
![Page 59: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/59.jpg)
UnCSS
![Page 60: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/60.jpg)
Watch / Live Reload
![Page 61: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/61.jpg)
Testing
![Page 62: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/62.jpg)
Deployment
![Page 63: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/63.jpg)
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
![Page 64: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/64.jpg)
Yeoman
![Page 65: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/65.jpg)
App Scaffolding Tool
![Page 66: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/66.jpg)
Knyle Style Sheets (KSS)
![Page 67: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/67.jpg)
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
![Page 68: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/68.jpg)
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
![Page 69: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/69.jpg)
{""""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
![Page 70: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/70.jpg)
<plugin>$$$<groupId>org.jasig.maven</groupId>$$$<artifactId>sassYmavenYplugin</artifactId>$</plugin>$
SASS
![Page 71: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/71.jpg)
<plugin>$$$<groupId>pl.allegro</groupId>$$$<artifactId>gruntYmavenYplugin</artifactId>$</plugin>$
Grunt
![Page 72: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/72.jpg)
http://addyosmani.com/blog/making-maven-grunt
![Page 73: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/73.jpg)
<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>$
![Page 74: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/74.jpg)
{$//$Environment$targets$
$$development:${$$$$$options:${$$$$$$$loginURL:$'http://localhost:9000/login'$$$$$$$herokuPath:$'[email protected]:devYproject.git',$$$$$$$endpoint:$'content/products.json',$$$$$$$googleMapsKey:$'AucmoT6cAyH9TeXeGGqsB8LIYoJhvs',$$$$$$$assetsPath:$'assets/images'$$$$$}$$$},$$$magnoliaBuild:${$$$$$options:${$$$$$$$loginURL:$'/login'$$$$$$$herokuPath:$'[email protected]:mgnlYproject.git',$$$$$$$endpoint:$'/magnoliaYinstance/.rest/products',$$$$$$$googleMapsKey:$'zciuv2aS1N04nujJw0_hZoP',$$$$$$$assetsPath:$'/.resources/projectYmoduleYtheme/assets/images'$$$$$}$$$}$}
Gruntfile.json
![Page 75: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/75.jpg)
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$});$$$$$$$}$$$$$};$$$});$
![Page 76: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/76.jpg)
<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
![Page 77: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/77.jpg)
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
![Page 78: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/78.jpg)
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
![Page 79: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/79.jpg)
Template Configuration
![Page 80: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/80.jpg)
<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>$
![Page 81: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/81.jpg)
Area Definiton
![Page 82: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/82.jpg)
Dialog Definiton
![Page 83: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/83.jpg)
<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
![Page 84: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/84.jpg)
Pages App
![Page 85: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/85.jpg)
Content
![Page 86: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/86.jpg)
Configuration hell
![Page 87: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/87.jpg)
YO DAWG, I HEARD YOU LIKE MAGNOLIA CONFIGURATION
SO I PUT CONFIGURATION IN YOUR CONFIGURATION SO YOU CAN
CONFIGURE YOUR CONFIGURATION.
![Page 88: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/88.jpg)
Alternative configuration methods
![Page 90: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/90.jpg)
STK
![Page 91: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/91.jpg)
A front-end solution
![Page 92: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/92.jpg)
UI Sandbox™
![Page 93: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/93.jpg)
<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
![Page 94: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/94.jpg)
Introduce conventions
![Page 95: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/95.jpg)
Abstract out conventional configuration
![Page 96: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/96.jpg)
Specify only unconventional configuration
![Page 97: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/97.jpg)
Examples of Area Definition conventions
![Page 98: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/98.jpg)
• Area name = HTML element ID in camelCase
• “who-we-are” => “whoWeAre”
![Page 99: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/99.jpg)
• Area title = Area name in Title Case
• “whoWeAre” => “Who We Are”
![Page 100: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/100.jpg)
Defaults
![Page 101: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/101.jpg)
• type = “noComponent”
• renderType = “freemarker”
• enabled = true
![Page 102: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/102.jpg)
<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:$“…”$
}$
![Page 103: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/103.jpg)
Gain simplicity
![Page 104: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/104.jpg)
Do we have to lose Flexibility?
![Page 105: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/105.jpg)
Convention over Configuration (CoC)
![Page 106: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/106.jpg)
“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.”
![Page 107: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/107.jpg)
Conventions are subjective
![Page 108: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/108.jpg)
Use Domain Specific Language (DSL) rules to
define conventions
![Page 109: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/109.jpg)
Rules$:{$areaNameSuffix:$“Area”,$dialogNameSuffix:$“Dialog”,$defaultAreaType:$“noComponent”,$//$$or$“single”,$“list”$areaEnabledByDefault:$true,$defaultRenderType:$“freemarker”,$//$or$“jsp”$...$
}$
![Page 110: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/110.jpg)
<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
![Page 111: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/111.jpg)
Minimum Effective Dose of configuration (MED Config)
![Page 112: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/112.jpg)
Implicit/Explicit Configuration
![Page 113: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/113.jpg)
<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
![Page 114: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/114.jpg)
<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
![Page 115: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/115.jpg)
<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>$
![Page 116: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/116.jpg)
<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
![Page 117: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/117.jpg)
<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
![Page 118: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/118.jpg)
What did we gain?
![Page 119: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/119.jpg)
Demo time!
![Page 120: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/120.jpg)
Right technology stack
![Page 121: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/121.jpg)
Data binding
![Page 122: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/122.jpg)
Source
Target
One-way data binding
![Page 123: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/123.jpg)
Model
View
Two-way data binding
![Page 124: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/124.jpg)
Template
ViewModel
Three-way data binding
![Page 125: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/125.jpg)
UI Sandbox
DSL Rules
+MGNL Config
SlicingIn-memory NoSQL DB
NoCR
REST
MED Config
HTML
MGNL Config
Magnolia
JCR
Template
Model View
![Page 126: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/126.jpg)
Is this for everyone?
![Page 127: Solving for complex UI designs](https://reader033.vdocuments.net/reader033/viewer/2022042615/55c6899dbb61eb695f8b45a8/html5/thumbnails/127.jpg)
What’s next?