© 2016 Demandware, Inc. All Rights Reserved by their Respective Owners.

Javascript
Controllers
Technical Overview
Danny Gehl, Principal Solution Architect

2 © 2016 Demandware, Inc. All Rights Reserved by their Respective Owners.

 Agenda

• Why, please tell me WHY?

• How does it impact me?
• What’s different from pipelines?
• New concepts in SiteGenesis
• Outlook

4 © 2016 Demandware, Inc. All Rights Reserved by their Respective Owners.

 The Status Quo

• Pipelines are the backbone of all Demandware custom logic

5 © 2016 Demandware, Inc. All Rights Reserved by their Respective Owners.

 Community Quotes on Pipelines

"All Cart pipelines I've seen are a friggin nightmare of hundreds of

spindly lines and nodes that look more like a toddler playing with
flowchart software than succinct easy to follow logic."

"I don't know a single developer than enjoys weeding through the
spaghetti, having to click on node after node to see what it does in the
inspector -- oh wait...what was that value again?"

Source: XChange portal

6 © 2016 Demandware, Inc. All Rights Reserved by their Respective Owners.

 A Closer Look

• Pipelines have some really nice aspects

• Nicely layouted control flow
• Interaction Continue Nodes (ICNs)
• ...but also a lot of shortcomings
• Proprietary concept
• Lack of tooling for certain tasks
• Merging/Code reviews very difficult
• Implications that come with ICNs
• What should be in a pipeline, what in script/pipelet?
• Steeper learning curve
7 © 2016 Demandware, Inc. All Rights Reserved by their Respective Owners.
 Pipeline Alternative Objectives

• Should feel natural to Demandware developers

ü Usage of Demandware Script & Modules
• Should leverage industry standards and be less proprietary
ü Feels like Node.js®, SiteGenesis uses plain Javascript
• Should integrate into the existing platform capabilities
ü Bear with me
ü It’s available to you AS WE SPEAK!

9 © 2016 Demandware, Inc. All Rights Reserved by their Respective Owners.

 The Recipe of the New Model

Controllers + CommonJS + UX Studio = Developer

& Script API Modules Script Editor LOVE
enhancements

10 © 2016 Demandware, Inc. All Rights Reserved by their Respective Owners.

 New Development Model Benefits

ü Standard compliant Javascript

ü Free choice of IDE
ü Large tools stack available for Javascript
• Linter, formatters, static code analysis...
ü Code is executable in a Node.js® runtime for i.e. unit testing
ü Easier to hire talent
ü Code Reviews become enjoyable
ü (Some) Node.js®/npm Libraries can be used
11 © 2016 Demandware, Inc. All Rights Reserved by their Respective Owners.
 Quotes on the New Development Model

"My team has done some initial review and are extremely excited
about what this has to offer. The development environment is so
much cleaner and the code can actually be merged as code
…
THIS WILL BE A HUGE MAINTENANCE TIME SAVER
…
it will also enable us to recruit and train more people as it will not
require them to stop doing development in order to fight with
pipelines and stay with something developers are much more
familiar with (especially the type of people we try to recruit)"
Doug VandenHoek – VP of Enterprise Solutions @ CQL Inc.
12 © 2016 Demandware, Inc. All Rights Reserved by their Respective Owners.
 Transitioning to
Controllers

13 © 2016 Demandware, Inc. All Rights Reserved by their Respective Owners.

Request Routing

• Controllers are replacing Pipelines “in-place”

• URL maps to controller https://<server>/<store>/Demo-Show
Pipeline-StartNode = Controller-Action
Demo.xml (Pipeline) Demo.js (Controller)

function  show  ()  {  

       ....  
}  
 
exports.Show  =  guard.ensure(['get'],  show);  

14 © 2016 Demandware, Inc. All Rights Reserved by their Respective Owners.

 Response Rendering

• Interaction nodes become simple API calls

 require('dw/template/ISML').renderTemplate('rocknroll.isml',  {  
   message:  'Controllers  rock!'  
 });  

• pdict key just references what is passed to renderTemplate

 <isprint  value="${pdict.message}">  

• No more Pipeline Dictionary

• No magic variables, only explicitly declared parameters
• Script API is the single source of truth
15 © 2016 Demandware, Inc. All Rights Reserved by their Respective Owners.
 Pipelets

• ...are gone
• Everything is pure Javascript now
• Code can be structured as desired
• Proper scope for all server side code
• By using CommonJS Modules

16 © 2016 Demandware, Inc. All Rights Reserved by their Respective Owners.

 SiteGenesis & Platform

• Full Controller replacement of all Pipelines available

• Implements a MVC-style pattern
• Existing template set remained untouched
• Purposely to allow for efficient parallel maintenance
• Changes required to unleash the full potential of the Controllers
• Controllers can be used in production since 16.1
• Controller Performance is roughly equal to Pipelines

17 © 2016 Demandware, Inc. All Rights Reserved by their Respective Owners.

 Endpoint Security via Guard Concept

• Concept to secure any endpoint a controller exposes

• Replaces private or secure pipelines
• Extensible, as it is part of SiteGenesis
• Standard options are prebuilt into SiteGenesis
 var  guard  =  require('app_storefront_controllers/cartridge/scripts/guard');  
 //  normal  get  request,  no  post  allowed  
 exports.World  =  guard.ensure(['get'],  world);  
 //  get,  https  and  customer  must  be  logged  in  
 exports.Payment  =  guard.ensure(['get',  'https',  'loggedIn'],  payment);  
 //  can  only  be  used  for  remote  includes  
 exports.Tile  =  guard.ensure(['include'],  tile);  

18   © 2016 Demandware, Inc. All Rights Reserved by their Respective Owners.

 Imagine the
Possibilities

19 © 2016 Demandware, Inc. All Rights Reserved by their Respective Owners.

 Cache Control

• Cache tags in ISML templates are used today

• Confusion about templates getting cached
• It's the entire response that gets cached (it always has been)
• Cache control can now be done in Controller
• Use response.setExpires()

20 © 2016 Demandware, Inc. All Rights Reserved by their Respective Owners.

 Shared Data Layer on Server & Client

• Use the same logic on server & client

Controller
function  show(){  
 //...  
 var  data  =  {  
   name    :  product.name,  
   image  :  product.getImage('large',  0),  
   price  :  product.priceModel.price   Template
 };  
 ISML.renderTemplate('producttile',  data);   <div>  
}   Controller  <span>${pdict.name}</span>  
 <img  src="${pdict.image}"  />  
function  show(){    <span  class="price">${pdict.price}</span>  
 //...   </div>  
 var  data  =  {  
   name    :  product.name,  
   image  :  product.getImage('large',  0),  
   price  :  product.priceModel.price  
 }  
 response.getWriter().print(JSON.stringify(data));  
}  
21 © 2016 Demandware, Inc. All Rights Reserved by their Respective Owners.
 Shared Data Layer on Server & Client

• All rendering in SiteGenesis is done via a View class

app.getView().render('content/home/homepage');  

• By changing three lines all controllers will be able to render JSON

if  (request.httpParameterMap.format.stringValue  ==  'ajax'))  {  
response.getWriter().print(JSON.stringify(this));  
}  else  {  …  }  

• How cool is that?

• Why don't we do this in SiteGenesis then?
• Not all views are powered by plain Javascript models
• Resulting JSON would contain {} for all System objects
22 © 2016 Demandware, Inc. All Rights Reserved by their Respective Owners.
 Summary

• Key takeaway
• The New Development Model makes your life easier!
• It is available today, start adopting it!
• There is more cool stuff to come!
• Resources
• Info Center: https://documentation.demandware.com/DOC1/index.jsp
• XChange space
https://xchange.demandware.com/community/developer/new-model
• Javascript Library list
https://xchange.demandware.com/community/developer/new-model/blog/
2016/03/12/tool-shed-open-source-libraries-on-demandware-servers
• Upcoming Deep Dive Session
23 © 2016 Demandware, Inc. All Rights Reserved by their Respective Owners.
 Please complete the
session survey.
Thank you!

24 © 2016 Demandware, Inc. All Rights Reserved by their Respective Owners.