openCPQ - A React-Based Product-Configuration Toolkit

openCPQ
–
A React-Based Product-Configuration
Toolkit
Tim Geisler, Heribert Schütz
webXcerpt Software GmbH
tg@webxcerpt.com, hs@webxcerpt.com
MunichJS Meetup, 2015-05-13

Product Configuration
Variants

Variants
Parameters and Domains

, Dependencies
Variants
Parameters and Domains

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

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

Business Processes
Configuration Engine
User
Configuration
Which particular variant
do I want to buy/sell?

Business Processes
User
Configuration
Manufacturing Plan
Visualization
Price(s)
Bill of Materials
...

Business Processes
Product Model
User
Configuration
Which variants of a product
are available?
Manufacturing Plan
Visualization
Price(s)
Bill of Materials
...

Business Processes
Modeling Tool
Modeler
Product Model
User
Configuration
are available?
Manufacturing Plan
Visualization
Price(s)
Bill of Materials
...

Business Processes
Modeling Tool
Modeler
Product Model
User
Configuration
are available?
Manufacturing Plan
Visualization
Price(s)
Bill of Materials
...
complex
(web)
applications

Business Processes
Modeling Tool
Modeler
Product Model
User
Configuration
are available?
Manufacturing Plan
Visualization
Price(s)
Bill of Materials
...
complex
(web)
applications
proprietary
format

Product Model
Modeling Tool
Business Processes
Modeler
User
Configuration
are available?
Manufacturing Plan
Visualization
Price(s)
Bill of Materials
...

Business Processes
Modeler
User
Configuration
are available?
Manufacturing Plan
Visualization
Price(s)
Bill of Materials
...
Customer-Specific
Modeling Language
Code Generator
Product Model
High-Level
Product Model
Customer-specific IDE

Business Processes
Modeler
User
Configuration
are available?
Manufacturing Plan
Visualization
Price(s)
Bill of Materials
...
Customer-Specific
Modeling Language
Code Generator
Product Model
High-Level
Product Model
● Text
● Notions like
„slot“, „board“, ...

Business Processes
Modeler
User
Configuration
are available?
Manufacturing Plan
Visualization
Price(s)
Bill of Materials
...
Customer-Specific
Modeling Language
Code Generator
Product Model
High-Level
Product Model
Based on
● Eclipse
● Xtext
● Text
● Notions like
„slot“, „board“, ...

Product Models
● Product parameters
– Data types
– Ranges

Product Models
– Data types
– Ranges
● Components

Product Models
– Data types
– Ranges
● Components
● Dependencies between
parameters/components

Product Models
– Data types
– Ranges
● Components
● Calculation of additional output

Product Models
– Data types
– Ranges
● Components
● Calculation of additional output
Models are programs!

Modeling as Programming
● Abstractions, data structures

● Programming tools
– Editors/IDEs
– Debuggers and profilers
– Revision control
– Test and CI frameworks

● 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“

Configuring in the Browser
Implement configurators in JavaScript.

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

Business Processes
Modeling Tool
Product Model
Manufacturing Plan
Visualization
Modeler User
Configuration
are available?
Price(s)
Bill of Materials
...

Business Processes
Manufacturing Plan
Visualization
Processes with openCPQ
Editor / IDE
Modeler
JavaScript Code
Browser
User
Configuration
are available?
Price(s)
Bill of Materials
...
openCPQ

Business Processes
Manufacturing Plan
Visualization
Editor / IDE
Modeler
JavaScript Code
Browser
User
Configuration
are available?
Price(s)
Bill of Materials
...
openCPQ
standard
components

Business Processes
Manufacturing Plan
Visualization
Editor / IDE
Modeler
JavaScript Code
Browser
User
Configuration
are available?
Price(s)
Bill of Materials
...
openCPQ
standard
components
expressive,
popular

Business Processes
Manufacturing Plan
Visualization
Editor / IDE
Modeler
JavaScript Code
Browser
User
Configuration
are available?
Price(s)
Bill of Materials
...
openCPQ
standard
components
light-weight
layer
expressive,
popular

– a Configurator Toolkit in JS

● Building-block library
– Components
– Dependencies

– Components
– Dependencies
● Combine building blocks with JavaScript

– Components
– Dependencies
● Add application-specific building blocks

– Components
– Dependencies
● Add application-specific building blocks
● A light-weight layer based on React and
Bootstrap

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

Liberal MIT license

Liberal MIT license
Use, adapt,
integrate, contribute!

Change Propagation:
Non-Incremental
core
state

Change Propagation:
Non-Incremental
core
state inference
full
state

Change Propagation:
Non-Incremental
core
state
user
interfaceinference render
full
state

Change Propagation:
Non-Incremental
core
state
user
full
state
core
state
user
update

Change Propagation:
Non-Incremental
core
state
user
full
state
core
state
user
interface
full
state
user
update
inference render

Change Propagation:
Non-Incremental
core
state
user
full
state
core
state
user
interface
full
state
core
state
user
interface
full
state
user
update
user
update
inference render
inference render

Change Propagation:
Incremental
core
state
user
interface
full
state
user
update
core
state
user
interface
full
state
user
update
core
state
user
interface
full
state

Change Propagation:
Incremental
core
state
user
interface
full
state
user
update
derived
update
core
state
user
interface
full
state
user
update
core
state
user
interface
full
state

Change Propagation:
Incremental
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

Change Propagation:
Incremental
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

Change Propagation:
Mixed
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

React:
A JavaScript library for building user interfaces

React:
● Unique approach:
– not a widget library
– not an MVC framework

React:
● Virtual DOM ("VDOM"):
– Representation of the DOM tree as a JavaScript
data structure (cheap!)

React:
– Representation of the DOM tree as a JavaScript
data structure (cheap!)
● Upon each update:

React:
– Representation of the DOM tree as a JavaScript data
structure (cheap!)
– User code
● generates VDOM from your model
● possibly using XML templating integrated into JavaScript ("JSX")

React:
– Representation of the DOM tree as a JavaScript data structure
(cheap!)
– 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

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

Example Code: Product Model
State
(JSON)State
(JSON)
Nodes
Nodes
VDOM
VDOM DOM
Types render()
apply
delta
Product
Model
Updates

Product Model: 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

Data-Driven Product Modeling
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)))
]);
}

return CSelect([
ports(b.ports)))
]);
}
[for (… of …) if (…) …]
array comprehension

return CSelect([
ports(b.ports)))
]);
}
Concise specification of complex models

Example Data: State
State
(JSON)State
(JSON)
Nodes
Nodes
VDOM
VDOM DOM
Types render()
apply
delta
Product
Model
Updates

Configuration State
{
"caseId": "Solution",
"detailValue": {
"project": {
"release": {
"caseId": "R2.0"
},
"UPS": true
},
"racks": [
{
"quantity": "4",
"value": {
"UPS": true,
"switches": [
…
]
}
}
]
}
}

Example Code: Node Rendering
State
(JSON)State
(JSON)
Nodes
Nodes
VDOM
VDOM DOM
Types render()
apply
delta
Product
Model
Updates

Selection Node (simplified)
class SelectNode extends Node {
//constructor(options) { this.__options = options; }
render() {
var {cases, currentCase, detailNode, updateTo} = this.__options;
return (
<div>
<DropdownButton title={currentCase.label}>
{[
for ({id, label} of cases)
<MenuItem onSelect={() => updateTo({caseId: id})}>
{label}
</MenuItem>
]}
</DropdownButton>
{detailNode.render()}
</div>
);
}
}

render() {
return (
<div>
{[
{label}
</MenuItem>
]}
</DropdownButton>
</div>
);
}
}
Inherited constructor
Unpack constructor
parameters.

render() {
return (
<div>
{[
{label}
</MenuItem>
]}
</DropdownButton>
</div>
);
}
}
Create a VDOM tree.

render() {
return (
<div>
{[
{label}
</MenuItem>
]}
</DropdownButton>
</div>
);
}
}
JSX:
HTML templates
in JavaScript

render() {
return (
<div>
{[
{label}
</MenuItem>
]}
</DropdownButton>
</div>
);
}
}
JSX:
HTML templates
in JavaScript
… also with „higher-level“
XML elements
(from react-bootstrap)

render() {
return (
<div>
{[
{label}
</MenuItem>
]}
</DropdownButton>
</div>
);
}
}
Interpolate JavaScript
expressions with {...}

render() {
return (
<div>
{[
{label}
</MenuItem>
]}
</DropdownButton>
</div>
);
}
}
array comprehension

Example Code: Types
State
(JSON)State
(JSON)
Nodes
Nodes
VDOM
VDOM DOM
Types render()
apply
delta
Product
Model
Updates

}
return {
makeNode(ctx) {
...ctx,
state: detailState,
}
});
}
};
}
Nothing to configure

}
return {
makeNode(ctx) {
...ctx,
state: detailState,
}
});
}
};
}
Context:
● state
● updateTo() (replace state)
● aggregators (bill of materials, …)
● ...
Injects application-specific data.

}
return {
makeNode(ctx) {
...ctx,
state: detailState,
}
});
}
};
}
detailNode = detailType(ctx')

}
return {
makeNode(ctx) {
...ctx,
state: detailState,
}
});
}
};
}
detailNode = detailType(ctx')
updateTo() for detail node:
● do not modify surrounding state
● send new state to parent's updateTo()
=> easy undo/redo

Tools
● react.js
● bootstrap with ( or ?)

Tools
● react.js
● react-bootstrap, react-widgets

Tools
● react.js
● ( react JSX/esprima; ?)

Tools
● react.js
● webpack ( / )

Tools
● react.js
● webpack ( / )
● ( ),

Tools
● react.js
● webpack ( / )
● ( ),
●

Summary
Take advantage of modern browser
technology for product configuration.

Summary
Powerful modeling based on JavaScript,
React, and openCPQ.

Summary
React, and openCPQ.
Flexible and fast user interface.

Summary
React, and openCPQ.
Flexible and fast user interface.
Use, adapt, integrate, contribute!

Issues to Discuss
● Use cases
– product configuration, software configuration
– questionnaires
– …?

Issues to Discuss
● Use cases
– questionnaires
– …?
● Technologies

Issues to Discuss
● Use cases
– questionnaires
– …?
● Technologies
● Cooperation
– Extensions: Integrations (SAP, Salesforce, ...),
Visualization, ...
– Student projects
– Application development

openCPQ - A React-Based Product-Configuration Toolkit

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to openCPQ - A React-Based Product-Configuration Toolkit

Similar to openCPQ - A React-Based Product-Configuration Toolkit (20)

Recently uploaded

Recently uploaded (20)

openCPQ - A React-Based Product-Configuration Toolkit