We present an approach for tackling common problems in configuration frameworks: - It is often difficult to map a conceptual model of a configurable product into the restricted capabilities of configuration engines. For the end user this leads to suboptimal UIs. - The communication between a custom UI front-end and the configuration engine is cumbersome to implement. For the end user the need for round-trips between the UI and the configuration server can cause a sluggish user experience. With HTML5 and JavaScript-based UI frameworks such as React.js browsers have advanced into a powerful application platform. This allows to run not only the UI but also the configuration logic in the browser. This benefits the work of various stakeholders: - Modelers are provided with powerful data structures and the ability to define their own concepts. - Gradually extending the standard UI with custom features becomes easy and is based on standard technologies. - End users will enjoy the user experience of modern web applications. - End users can even use configurators in offline mode, without access to a server. - There is no need to run and maintain a server-side configuration engine. We will demonstrate this approach with concrete products and discuss the integration with an SAP back end. Presented at 2015 CWG Prague - SAP Configuration Workgroup Conference by Heribert Schütz and Tim Geisler

1. Configuring in the Browser, Really!
Tim Geisler, Heribert Schütz
webXcerpt Software GmbH
tg@webxcerpt.com, hs@webxcerpt.com
CWG 2015, Prague 2015-04-28

2. Our History
● Product configuration since 2002,
with SAP since 2007
● Built and maintained
– Models
– Modeling environments
– Configuration frameworks

3. Problem 1: Modeling

4. Problem 1: Modeling
● Framework-specific modeling tools

5. Problem 1: Modeling
● Framework-specific modeling tools
● Lack of abstraction features and data structures
– Loops, functions
– Arrays, objects (with methods)

6. Problem 1: Modeling
● Framework-specific modeling tools
● Lack of abstraction features and data structures
– Loops, functions
– Arrays, objects (with methods)
● Models not represented as human-readable text
– Edit, search & replace
– Discuss, annotate
– Compare, manage revisions

7. Problem 1: Modeling – Solution A

8. Problem 1: Modeling – Solution B

9. Problem 1: Modeling – Solution B
Our solution so far:

10. Problem 1: Modeling – Solution B
Our solution so far:
● Customer-specific modeling languages

11. Problem 1: Modeling – Solution B
Our solution so far:
● Customer-specific modeling languages
● Modeling environments based on Eclipse and
Xtext

12. Problem 1: Modeling – Solution B
Our solution so far:
● Customer-specific modeling languages
● Modeling environments based on Eclipse and
Xtext
● Automated generation of model representation
for target framework

13. Problem 1: Modeling – Solution B
Our solution so far:
●
Customer-specific modeling languages
● Modeling environments based on Eclipse and Xtext
● Automated generation of model representation for target framework
●
See also CWG talks
– Vienna 2010:
ConfigModeler and VClipse -
languages and IDEs
for product modeling
– Cologne 2011:
Domain-Specific Languages
for Product Modeling
– Berlin 2012:
How to Build Your Own
Product-Modeling Environment?

14. Problem 1: Modeling – Solution C

15. Problem 1: Modeling – Solution C
● Use a programming language
– For application-specific inferencing
– But also to build up the model

16. Problem 1: Modeling – Solution C
● Use a programming language
– For application-specific inferencing
– But also to build up the model
● Use programming tools
– Editors/IDEs
– Debuggers and profilers
– Revision control
– Test and CI frameworks

17. Problem 1: Modeling – Solution C
● Use a programming language
– For application-specific inferencing
– But also to build up the model
● Use programming tools
– Editors/IDEs
– Debuggers and profilers
– Revision control
– Test and CI frameworks
● General purpose tools and languages
– Maturity
– Re-usable knowledge, may already be available
– Large communities and „ecosystems“

18. Problem 2: User Experience

19. Problem 2: User Experience

20. Problem 2: User Experience
● Performance

21. Problem 2: User Experience
● Performance
– Client-server round trips

22. Problem 2: User Experience
● Performance
– Client-server round trips
● Rigid UI
– UI structure imposed by framework
– High costs for application-specific UI

23. Problem 2: User Experience
● Performance
– Client-server round trips
● Rigid UI
– UI structure imposed by framework
– High costs for application-specific UI
● Need to be online

24. Problem 2: User Experience
● Performance
– Client-server round trips
● Rigid UI
– UI structure imposed by framework
– High costs for application-specific UI
● Need to be online
Increasing gap:
Configurators ↔ Modern web applications

25. In the meantime ...

26. In the meantime ...

27. In the meantime ...
Client hardware
improved

28. In the meantime ...
Client hardware
improved
● CPU
● Memory

29. In the meantime ...
Client hardware
improved
● CPU
● Memory
● Even on mobiles

30. In the meantime ...
Client hardware
improved
● CPU
● Memory
● Even on mobiles
… but the speed of light remained the same.

31. In the meantime ...

32. In the meantime ...
Browser improvements:

33. In the meantime ...
Browser improvements:
● JavaScript performance

34. In the meantime ...
Browser improvements:
● JavaScript performance
● Standardized features
– UI extensions
– Offline applications
– Local storage
– …

35. In the meantime ...
Browser improvements:
● JavaScript performance
● Standardized features
– UI extensions
– Offline applications
– Local storage
– …
● Improved compatibility
http://kangax.github.io/compat-table/es5/

36. In the meantime ...
A software ecosystem for web applications
flourished:
● Web-application frameworks
● Preprocessors for JavaScript/HTML/CSS
● Libraries
● Build tools
● ...

37. In the meantime ...

38. In the meantime ...
Web browsers have become a
serious application platform.

39. In the meantime ...
Web browsers have become a
serious application platform.
Even for the business logic.

40. In the meantime ...
Web browsers have become a
serious application platform.
Even for the business logic.
And they are getting better and better.

41. Configuring in the Browser:

42. Configuring in the Browser:
Implement configurators in JavaScript.

43. Configuring in the Browser:
Implement configurators in JavaScript.
JavaScript is also
a reasonable choice for modeling.

44. Demo
Optical Transport

45. Demo Example:
Hierarchical Configuration
SwitchRackSolution Board (Module) Transceiver (Wavelength)

46. Demo
http://opencpq.webxcerpt.com/examples/optical-transport/
^

47. – a JavaScript-based Configurator Framework

48. ● Building-block library
– Components
– Dependencies
– a JavaScript-based Configurator Framework

49. ● Building-block library
– Components
– Dependencies
● Combine building blocks with JavaScript
– a JavaScript-based Configurator Framework

50. ● Building-block library
– Components
– Dependencies
● Combine building blocks with JavaScript
● Add application-specific building blocks
– a JavaScript-based Configurator Framework

51. ● Building-block library
– Components
– Dependencies
● Combine building blocks with JavaScript
● Add application-specific building blocks
● A light-weight layer based on ReactJS and
Bootstrap
– a JavaScript-based Configurator Framework

52. – an Open-Source Project

53. Source code and links to live demos
available on Github:
https://github.com/webXcerpt/openCPQ
– an Open-Source Project

54. Source code and links to live demos
available on Github:
https://github.com/webXcerpt/openCPQ
Liberal MIT license
– an Open-Source Project

55. Source code and links to live demos
available on Github:
https://github.com/webXcerpt/openCPQ
Liberal MIT license
Use, adapt,
integrate, contribute!
– an Open-Source Project

56. Modeling with openCPQ:
Cases with Details

57. Modeling with openCPQ:
Cases with Details
var configuration = CSelect([
unansweredCase("Select Configuration Mode"),
ccase("Switches", "Optical Switches",
CQuantifiedList({}, "Optical Switch",
opticalSwitches)),
ccase("Rack", "Racks",
CQuantifiedList({}, "Rack",
rack)),
ccase("Solution", "Solution",
solution),
]);
cases
details

58. Modeling with openCPQ:
Cases with Details
function boards(isDoubleWidthSlot) {
return CSelect([
for (b of components.boards)
if (!b.doubleWidth ||
isDoubleWidthSlot)
ccaseBOM(b.name, b.label,
ports(b.ports))
]);
}
var configuration = CSelect([
unansweredCase("Select Configuration Mode"),
ccase("Switches", "Optical Switches",
CQuantifiedList({}, "Optical Switch",
opticalSwitches)),
ccase("Rack", "Racks",
CQuantifiedList({}, "Rack",
rack)),
ccase("Solution", "Solution",
solution),
]);
cases
details
cases
details

59. Data-Driven Modeling
with openCPQ

60. Data-Driven Modeling
with openCPQ

61. Data-Driven Modeling
with openCPQ

62. Data-Driven Modeling
with openCPQ

63. Data-Driven Modeling
with openCPQ
function boards(isDoubleWidthSlot) {
return CSelect([
for (b of components.boards)
if (!b.doubleWidth || isDoubleWidthSlot)
ccaseBOM(b.name, b.label,
aggregate("power", b.power,
ports(b.ports)))
]);
}

64. Data-Driven Modeling
with openCPQ
function boards(isDoubleWidthSlot) {
return CSelect([
for (b of components.boards)
if (!b.doubleWidth || isDoubleWidthSlot)
ccaseBOM(b.name, b.label,
aggregate("power", b.power,
ports(b.ports)))
]);
}
Concise specification of complex models

65. Modeling with openCPQ:
Application-specific Abstractions

66. Modeling with openCPQ:
Application-specific Abstractions

67. Modeling with openCPQ:
Application-specific Abstractions

68. Modeling with openCPQ:
Application-specific Abstractions
CNameSpace("props", CGroup([
cmember("ConfigType", "Configuration Type",
CNamed("props", "ConfigType", {valueAccessor: n => n.value}, CSelect([
ccase("NEW", "New Configuration"), ccase("EXT", "Upgrade / Extension"),
]))),
cmember("Server", "Server", ep.table([
ep.rowInteger("clients", "Connected clients"),
crow("Size", "Server size", ({props}) => props.ConfigType === "EXT"
? [ep.eCell("Size", CSelect([for (s of serverSizes) ccase(s)])),
() => ep.pCell("Size", CSelect([for (s of serverSizes)
onlyIf(serverSizes.indexOf(s) >= serverSizes.indexOf(ep.E(props.Size)),
"Downgrade not supported", [ccase(s)])]))]
: [ep.pCell("Size", CSelect([for (s of serverSizes) ccase(s)]))]
),
ep.rowBoolean("redundancy", "Redundant server"),
])),
])),

69. How it Works

70. Change Propagation
core
state

71. Change Propagation
core
state inference
full
state

72. Change Propagation
core
state
user
interfaceinference render
full
state

73. Change Propagation
core
state
user
interfaceinference render
full
state
core
state
user
update

74. Change Propagation
core
state
user
interfaceinference render
full
state
core
state
user
interface
full
state
user
update
inference render

75. Change Propagation
core
state
user
interfaceinference render
full
state
core
state
user
interface
full
state
core
state
user
interface
full
state
user
update
user
update
inference render
inference render

76. Change Propagation
core
state
user
interfaceinference render
full
state
core
state
user
interface
full
state
core
state
user
interface
full
state
user
update
user
update
inference render
inference render
non-incremental
propagation

77. Change Propagation
core
state
user
interface
full
state
user
update
core
state
user
interface
full
state
user
update
core
state
user
interface
full
state

78. Change Propagation
core
state
user
interface
full
state
user
update
derived
update
core
state
user
interface
full
state
user
update
core
state
user
interface
full
state

79. Change Propagation
core
state
user
interface
full
state
user
update
derived
update
derived
update
core
state
user
interface
full
state
user
update
core
state
user
interface
full
state

80. Change Propagation
core
state
user
interface
full
state
user
update
derived
update
derived
update
core
state
user
interface
full
state
user
update
derived
update
derived
update
core
state
user
interface
full
state

81. Change Propagation
core
state
user
interface
full
state
user
update
derived
update
derived
update
core
state
user
interface
full
state
user
update
derived
update
derived
update
core
state
user
interface
full
state
incremental
propagation

82. Change Propagation

83. Change Propagation
Trade-off:
● Non-incremental propagation:

84. Change Propagation
Trade-off:
● Non-incremental propagation:
– Redo inference steps
● CPU consumption
– Redo rendering
● CPU consumption
● Flicker, loss of UI state (focus, scroll, selection), ...
● Incremental propagation:

85. Change Propagation
Trade-off:
● Non-incremental propagation:
– Redo inference steps
● CPU consumption
– Redo rendering
● CPU consumption
● Flicker, loss of UI state (focus, scroll, selection), ...
● Incremental propagation:
– Keep track of dependencies
● Error-prone (unless completely shielded from the modeler)
● Consumes memory and CPU

86. Change Propagation
core
state
user
interface
full
state
user
update
derived
update
core
state
user
interface
full
state
user
update
derived
update
core
state
user
interface
full
state
inference
inference
inference
mixed
propagation

87. React:
A JavaScript library for building user interfaces

88. React:
A JavaScript library for building user interfaces
● Unique approach:
– not a widget library
– not an MVC framework

89. React:
A JavaScript library for building user interfaces
● Unique approach:
– not a widget library
– not an MVC framework
● Virtual DOM ("VDOM"):
– Representation of the DOM tree as a JavaScript
data structure (cheap!)

90. React:
A JavaScript library for building user interfaces
● Unique approach:
– not a widget library
– not an MVC framework
● Virtual DOM ("VDOM"):
– Representation of the DOM tree as a JavaScript
data structure (cheap!)
● Upon each update:

91. React:
A JavaScript library for building user interfaces
● Unique approach:
– not a widget library
– not an MVC framework
● Virtual DOM ("VDOM"):
– Representation of the DOM tree as a JavaScript data
structure (cheap!)
● Upon each update:
– User code
● generates VDOM from your model
● possibly using XML templating integrated into JavaScript ("JSX")

92. React:
A JavaScript library for building user interfaces
● Unique approach:
– not a widget library
– not an MVC framework
● Virtual DOM ("VDOM"):
– Representation of the DOM tree as a JavaScript data structure
(cheap!)
● Upon each update:
– User code
● generates VDOM from your model
● possibly using XML templating integrated into JavaScript ("JSX")
– React
● diffs the VDOM with the previous VDOM
● applies only the diff to the actual DOM

93. Architecture
State
(JSON)State
(JSON)
Nodes
Nodes
VDOM
VDOM DOM
Types render()
apply
delta
Product
Model
Updates

94. Architecture
State
(JSON)State
(JSON)
Nodes
Nodes
VDOM
VDOM DOM
Types render()
apply
delta
Product
Model
Updates

95. Architecture
State
(JSON)State
(JSON)
Nodes
Nodes
VDOM
VDOM DOM
Types render()
apply
delta
Product
Model
Updates

96. SAP Integration

97. SAP Integration
● Models
– Conversion of LO-VC and IPC models to openCPQ
● Schema, basic logic: automatable with VClipse extension
● Complex logic: manual conversion

98. SAP Integration
● Models
– Conversion of LO-VC and IPC models to openCPQ
● Schema, basic logic: automatable with VClipse extension
● Complex logic: manual conversion
– Model storage and management
● Just static resources
● App server not needed (but can be used)

99. SAP Integration

100. SAP Integration
● Data
(e.g. materials with classification information)
– Live vs. pre-exported
– Bundling with application vs. loading on demand

101. SAP Integration
● Data
(e.g. materials with classification information)
– Live vs. pre-exported
– Bundling with application vs. loading on demand
● Runtime
– Loading and saving configurations
● External configurator API
● Mimic IPC

102. Summary

103. Summary
Take advantage of modern browser
technology for product configuration.

104. Summary
Take advantage of modern browser
technology for product configuration.
Powerful modeling based on JavaScript,
React, and openCPQ.

105. Summary
Take advantage of modern browser
technology for product configuration.
Powerful modeling based on JavaScript,
React, and openCPQ.
Flexible and fast user interface.

106. Summary
Take advantage of modern browser
technology for product configuration.
Powerful modeling based on JavaScript,
React, and openCPQ.
Flexible and fast user interface.
Use, adapt, integrate, contribute!
https://github.com/webXcerpt/openCPQ

107. Our Offer

108. Our Offer
Discuss:
● Use cases, modeling challenges, …
● Integrations

109. Our Offer
Discuss:
● Use cases, modeling challenges, …
● Integrations
Cooperate:
● Professional services, training, ...
● For end users or integrators