SlideShare a Scribd company logo
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
Slicing
In-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

More Related Content

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

Profitability: SaaS Versus On Premise Solutions
Profitability: SaaS Versus On Premise SolutionsProfitability: SaaS Versus On Premise Solutions
Profitability: SaaS Versus On Premise Solutions
Aspire Systems
 
Lava cIt All Comes Down to Return on Investment (ROI): How Content Strategy I...
Lava cIt All Comes Down to Return on Investment (ROI): How Content Strategy I...Lava cIt All Comes Down to Return on Investment (ROI): How Content Strategy I...
Lava cIt All Comes Down to Return on Investment (ROI): How Content Strategy I...
Jack Molisani
 
Quality Control for Translations-The Best in Process, Plans and People
Quality Control for Translations-The Best in Process, Plans and PeopleQuality Control for Translations-The Best in Process, Plans and People
Quality Control for Translations-The Best in Process, Plans and People
Stacey Brown-Sommers
 
Product Management 2.0: Using Confluence to drive company-wide alignment and ...
Product Management 2.0: Using Confluence to drive company-wide alignment and ...Product Management 2.0: Using Confluence to drive company-wide alignment and ...
Product Management 2.0: Using Confluence to drive company-wide alignment and ...
Atlassian
 
Anjali gupta resume
Anjali gupta resumeAnjali gupta resume
Anjali gupta resume
ANJALI GUPTA
 
Performance and User Experience for the Web of Tomorrow
Performance and User Experience for the Web of TomorrowPerformance and User Experience for the Web of Tomorrow
Performance and User Experience for the Web of Tomorrow
WP Engine
 
Greetings david cutler inform and connect
Greetings   david cutler inform and connectGreetings   david cutler inform and connect
Greetings david cutler inform and connect
Sales Strategy and Innovation Delivery
 
011000358700001078532011 e
011000358700001078532011 e011000358700001078532011 e
011000358700001078532011 e
Ravi Ahmed
 
Cloud computing
Cloud computingCloud computing
Cloud computing
Gopinath Manimayan
 
nareshChirra 2+ exp
nareshChirra 2+ expnareshChirra 2+ exp
nareshChirra 2+ exp
naresh chirra
 
Greetings david cutler inform and connect
Greetings   david cutler inform and connectGreetings   david cutler inform and connect
Greetings david cutler inform and connect
Sales Strategy and Innovation Delivery
 
Overview and Walkthrough of the Application Programming Model with SAP Cloud ...
Overview and Walkthrough of the Application Programming Model with SAP Cloud ...Overview and Walkthrough of the Application Programming Model with SAP Cloud ...
Overview and Walkthrough of the Application Programming Model with SAP Cloud ...
SAP Cloud Platform
 
Html 5 mobile - nitty gritty
Html 5 mobile - nitty grittyHtml 5 mobile - nitty gritty
Html 5 mobile - nitty gritty
Mario Noble
 
Backend accessible
Backend accessibleBackend accessible
Backend accessible
Mark Casias
 
Preparing for a website redesign
Preparing for a website redesignPreparing for a website redesign
Preparing for a website redesign
TechSoup Canada
 
Ember At Scale
Ember At ScaleEmber At Scale
Ember At Scale
Chad Hietala
 
TrustRadius Conversion Rate Optimization Survey Results 2014
TrustRadius Conversion Rate Optimization Survey Results 2014TrustRadius Conversion Rate Optimization Survey Results 2014
TrustRadius Conversion Rate Optimization Survey Results 2014
TrustRadius
 
Project Management Software
Project Management SoftwareProject Management Software
Project Management Software
Valeria - Growdigitally
 
DAT - Web Development and Design
DAT - Web Development and DesignDAT - Web Development and Design
DAT - Web Development and Design
Digital Analyst Team
 
SaaS PPM – How Do You Know When It’s Right for You?
SaaS PPM – How Do You Know When It’s Right for You?SaaS PPM – How Do You Know When It’s Right for You?
SaaS PPM – How Do You Know When It’s Right for You?
EPM Live
 

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

Profitability: SaaS Versus On Premise Solutions
Profitability: SaaS Versus On Premise SolutionsProfitability: SaaS Versus On Premise Solutions
Profitability: SaaS Versus On Premise Solutions
 
Lava cIt All Comes Down to Return on Investment (ROI): How Content Strategy I...
Lava cIt All Comes Down to Return on Investment (ROI): How Content Strategy I...Lava cIt All Comes Down to Return on Investment (ROI): How Content Strategy I...
Lava cIt All Comes Down to Return on Investment (ROI): How Content Strategy I...
 
Quality Control for Translations-The Best in Process, Plans and People
Quality Control for Translations-The Best in Process, Plans and PeopleQuality Control for Translations-The Best in Process, Plans and People
Quality Control for Translations-The Best in Process, Plans and People
 
Product Management 2.0: Using Confluence to drive company-wide alignment and ...
Product Management 2.0: Using Confluence to drive company-wide alignment and ...Product Management 2.0: Using Confluence to drive company-wide alignment and ...
Product Management 2.0: Using Confluence to drive company-wide alignment and ...
 
Anjali gupta resume
Anjali gupta resumeAnjali gupta resume
Anjali gupta resume
 
Performance and User Experience for the Web of Tomorrow
Performance and User Experience for the Web of TomorrowPerformance and User Experience for the Web of Tomorrow
Performance and User Experience for the Web of Tomorrow
 
Greetings david cutler inform and connect
Greetings   david cutler inform and connectGreetings   david cutler inform and connect
Greetings david cutler inform and connect
 
011000358700001078532011 e
011000358700001078532011 e011000358700001078532011 e
011000358700001078532011 e
 
Cloud computing
Cloud computingCloud computing
Cloud computing
 
nareshChirra 2+ exp
nareshChirra 2+ expnareshChirra 2+ exp
nareshChirra 2+ exp
 
Greetings david cutler inform and connect
Greetings   david cutler inform and connectGreetings   david cutler inform and connect
Greetings david cutler inform and connect
 
Overview and Walkthrough of the Application Programming Model with SAP Cloud ...
Overview and Walkthrough of the Application Programming Model with SAP Cloud ...Overview and Walkthrough of the Application Programming Model with SAP Cloud ...
Overview and Walkthrough of the Application Programming Model with SAP Cloud ...
 
Html 5 mobile - nitty gritty
Html 5 mobile - nitty grittyHtml 5 mobile - nitty gritty
Html 5 mobile - nitty gritty
 
Backend accessible
Backend accessibleBackend accessible
Backend accessible
 
Preparing for a website redesign
Preparing for a website redesignPreparing for a website redesign
Preparing for a website redesign
 
Ember At Scale
Ember At ScaleEmber At Scale
Ember At Scale
 
TrustRadius Conversion Rate Optimization Survey Results 2014
TrustRadius Conversion Rate Optimization Survey Results 2014TrustRadius Conversion Rate Optimization Survey Results 2014
TrustRadius Conversion Rate Optimization Survey Results 2014
 
Project Management Software
Project Management SoftwareProject Management Software
Project Management Software
 
DAT - Web Development and Design
DAT - Web Development and DesignDAT - Web Development and Design
DAT - Web Development and Design
 
SaaS PPM – How Do You Know When It’s Right for You?
SaaS PPM – How Do You Know When It’s Right for You?SaaS PPM – How Do You Know When It’s Right for You?
SaaS PPM – How Do You Know When It’s Right for You?
 

More from Magnolia

The SEO Workflow
The SEO WorkflowThe SEO Workflow
The SEO Workflow
Magnolia
 
Magnolia 6 release walkthrough
Magnolia 6 release walkthroughMagnolia 6 release walkthrough
Magnolia 6 release walkthrough
Magnolia
 
Buzzword bingo: The real deal behind omnichannel, personalization and headless
Buzzword bingo: The real deal behind  omnichannel, personalization and headlessBuzzword bingo: The real deal behind  omnichannel, personalization and headless
Buzzword bingo: The real deal behind omnichannel, personalization and headless
Magnolia
 
Developing Magnolia based sites correctly, quickly and efficiently
Developing Magnolia based sites correctly, quickly and efficientlyDeveloping Magnolia based sites correctly, quickly and efficiently
Developing Magnolia based sites correctly, quickly and efficiently
Magnolia
 
Integrating e-Commerce into your Customer Experience
Integrating e-Commerce into your Customer ExperienceIntegrating e-Commerce into your Customer Experience
Integrating e-Commerce into your Customer Experience
Magnolia
 
Customer Engagement in the Digital Era
Customer Engagement in the Digital EraCustomer Engagement in the Digital Era
Customer Engagement in the Digital Era
Magnolia
 
The Age of the IOT & Digital Business
The Age of the IOT & Digital BusinessThe Age of the IOT & Digital Business
The Age of the IOT & Digital Business
Magnolia
 
Using Magnolia in a Microservices Architecture
Using Magnolia in a Microservices ArchitectureUsing Magnolia in a Microservices Architecture
Using Magnolia in a Microservices Architecture
Magnolia
 
A modern front end development workflow for Magnolia at Atlassian
A modern front end development workflow for Magnolia at AtlassianA modern front end development workflow for Magnolia at Atlassian
A modern front end development workflow for Magnolia at Atlassian
Magnolia
 
Magnolia Conference 2015 - Pascal Mangold's keynote
Magnolia Conference 2015 - Pascal Mangold's keynoteMagnolia Conference 2015 - Pascal Mangold's keynote
Magnolia Conference 2015 - Pascal Mangold's keynote
Magnolia
 
Product keynote - introducing Magnolia 5.4
Product keynote - introducing Magnolia 5.4Product keynote - introducing Magnolia 5.4
Product keynote - introducing Magnolia 5.4
Magnolia
 
Launching Magnolia on demand
Launching Magnolia on demandLaunching Magnolia on demand
Launching Magnolia on demand
Magnolia
 
Front-end developers - build Magnolia sites faster
Front-end developers - build Magnolia sites fasterFront-end developers - build Magnolia sites faster
Front-end developers - build Magnolia sites faster
Magnolia
 
Magnolia and beacons: how do they work best together?
Magnolia and beacons: how do they work best together?Magnolia and beacons: how do they work best together?
Magnolia and beacons: how do they work best together?
Magnolia
 
Magnolia and the IOT
Magnolia and the IOTMagnolia and the IOT
Magnolia and the IOT
Magnolia
 
Internationalization for globalized enterprise websites
Internationalization for globalized enterprise websitesInternationalization for globalized enterprise websites
Internationalization for globalized enterprise websites
Magnolia
 
The new visana website how to fit a square peg into a round hole
The new visana website   how to fit a square peg into a round holeThe new visana website   how to fit a square peg into a round hole
The new visana website how to fit a square peg into a round hole
Magnolia
 
Extending Magnolia with our solutions
Extending Magnolia with our solutionsExtending Magnolia with our solutions
Extending Magnolia with our solutions
Magnolia
 
Boost your online e commerce with magnolia
Boost your online e commerce with magnoliaBoost your online e commerce with magnolia
Boost your online e commerce with magnolia
Magnolia
 
The slick YAML based configuration by file in Magnolia 5.4
The slick YAML based configuration by file in Magnolia 5.4The slick YAML based configuration by file in Magnolia 5.4
The slick YAML based configuration by file in Magnolia 5.4
Magnolia
 

More from Magnolia (20)

The SEO Workflow
The SEO WorkflowThe SEO Workflow
The SEO Workflow
 
Magnolia 6 release walkthrough
Magnolia 6 release walkthroughMagnolia 6 release walkthrough
Magnolia 6 release walkthrough
 
Buzzword bingo: The real deal behind omnichannel, personalization and headless
Buzzword bingo: The real deal behind  omnichannel, personalization and headlessBuzzword bingo: The real deal behind  omnichannel, personalization and headless
Buzzword bingo: The real deal behind omnichannel, personalization and headless
 
Developing Magnolia based sites correctly, quickly and efficiently
Developing Magnolia based sites correctly, quickly and efficientlyDeveloping Magnolia based sites correctly, quickly and efficiently
Developing Magnolia based sites correctly, quickly and efficiently
 
Integrating e-Commerce into your Customer Experience
Integrating e-Commerce into your Customer ExperienceIntegrating e-Commerce into your Customer Experience
Integrating e-Commerce into your Customer Experience
 
Customer Engagement in the Digital Era
Customer Engagement in the Digital EraCustomer Engagement in the Digital Era
Customer Engagement in the Digital Era
 
The Age of the IOT & Digital Business
The Age of the IOT & Digital BusinessThe Age of the IOT & Digital Business
The Age of the IOT & Digital Business
 
Using Magnolia in a Microservices Architecture
Using Magnolia in a Microservices ArchitectureUsing Magnolia in a Microservices Architecture
Using Magnolia in a Microservices Architecture
 
A modern front end development workflow for Magnolia at Atlassian
A modern front end development workflow for Magnolia at AtlassianA modern front end development workflow for Magnolia at Atlassian
A modern front end development workflow for Magnolia at Atlassian
 
Magnolia Conference 2015 - Pascal Mangold's keynote
Magnolia Conference 2015 - Pascal Mangold's keynoteMagnolia Conference 2015 - Pascal Mangold's keynote
Magnolia Conference 2015 - Pascal Mangold's keynote
 
Product keynote - introducing Magnolia 5.4
Product keynote - introducing Magnolia 5.4Product keynote - introducing Magnolia 5.4
Product keynote - introducing Magnolia 5.4
 
Launching Magnolia on demand
Launching Magnolia on demandLaunching Magnolia on demand
Launching Magnolia on demand
 
Front-end developers - build Magnolia sites faster
Front-end developers - build Magnolia sites fasterFront-end developers - build Magnolia sites faster
Front-end developers - build Magnolia sites faster
 
Magnolia and beacons: how do they work best together?
Magnolia and beacons: how do they work best together?Magnolia and beacons: how do they work best together?
Magnolia and beacons: how do they work best together?
 
Magnolia and the IOT
Magnolia and the IOTMagnolia and the IOT
Magnolia and the IOT
 
Internationalization for globalized enterprise websites
Internationalization for globalized enterprise websitesInternationalization for globalized enterprise websites
Internationalization for globalized enterprise websites
 
The new visana website how to fit a square peg into a round hole
The new visana website   how to fit a square peg into a round holeThe new visana website   how to fit a square peg into a round hole
The new visana website how to fit a square peg into a round hole
 
Extending Magnolia with our solutions
Extending Magnolia with our solutionsExtending Magnolia with our solutions
Extending Magnolia with our solutions
 
Boost your online e commerce with magnolia
Boost your online e commerce with magnoliaBoost your online e commerce with magnolia
Boost your online e commerce with magnolia
 
The slick YAML based configuration by file in Magnolia 5.4
The slick YAML based configuration by file in Magnolia 5.4The slick YAML based configuration by file in Magnolia 5.4
The slick YAML based configuration by file in Magnolia 5.4
 

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