The talk presents the new open-source project openCPQ for the web-based configuration of complex products. In contrast to popular commercial configuration tools openCPQ
- uses the browser not only for the UI but also for the business logic, which makes configurators extremely fast by avoiding round trips to the server,
- supports modelling of configuration rules embedded in JavaScript, which permits user-defined abstractions in a flexible way, and
- recomputes the configuration result from scratch instead of incrementally propagating changes in the user input, which fits nicely with React's architecture and makes openCPQ a light-weight framework.
Presented at the MunichJS meetup in May 2015 by Heribert Schütz and Tim Geisler
19. Business Processes
Product Model
Configuration Engine
User
Configuration
Which variants of a product
are available?
Which particular variant
do I want to buy/sell?
Manufacturing Plan
Visualization
Price(s)
Bill of Materials
...
20. Business Processes
Modeling Tool
Modeler
Product Model
Configuration Engine
User
Configuration
Which variants of a product
are available?
Which particular variant
do I want to buy/sell?
Manufacturing Plan
Visualization
Price(s)
Bill of Materials
...
21. Business Processes
Modeling Tool
Modeler
Product Model
Configuration Engine
User
Configuration
Which variants of a product
are available?
Which particular variant
do I want to buy/sell?
Manufacturing Plan
Visualization
Price(s)
Bill of Materials
...
complex
(web)
applications
22. Business Processes
Modeling Tool
Modeler
Product Model
Configuration Engine
User
Configuration
Which variants of a product
are available?
Which particular variant
do I want to buy/sell?
Manufacturing Plan
Visualization
Price(s)
Bill of Materials
...
complex
(web)
applications
proprietary
format
24. Product Model
Modeling Tool
Business Processes
Modeler
Configuration Engine
User
Configuration
Which variants of a product
are available?
Which particular variant
do I want to buy/sell?
Manufacturing Plan
Visualization
Price(s)
Bill of Materials
...
25. Business Processes
Modeler
Configuration Engine
User
Configuration
Which variants of a product
are available?
Which particular variant
do I want to buy/sell?
Manufacturing Plan
Visualization
Price(s)
Bill of Materials
...
Customer-Specific
Modeling Language
Code Generator
Product Model
High-Level
Product Model
Customer-specific IDE
26. Business Processes
Modeler
Configuration Engine
User
Configuration
Which variants of a product
are available?
Which particular variant
do I want to buy/sell?
Manufacturing Plan
Visualization
Price(s)
Bill of Materials
...
Customer-Specific
Modeling Language
Code Generator
Product Model
High-Level
Product Model
Customer-specific IDE
● Text
● Notions like
„slot“, „board“, ...
27. Business Processes
Modeler
Configuration Engine
User
Configuration
Which variants of a product
are available?
Which particular variant
do I want to buy/sell?
Manufacturing Plan
Visualization
Price(s)
Bill of Materials
...
Customer-Specific
Modeling Language
Code Generator
Product Model
High-Level
Product Model
Customer-specific IDE
Based on
● Eclipse
● Xtext
● Text
● Notions like
„slot“, „board“, ...
36. Modeling as Programming
● Abstractions, data structures
● Programming tools
– Editors/IDEs
– Debuggers and profilers
– Revision control
– Test and CI frameworks
37. Modeling as Programming
● Abstractions, data structures
● 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“
41. Configuring in the Browser
Implement configurators in JavaScript.
JavaScript is also
a reasonable choice for modeling.
42. Business Processes
Modeling Tool
Product Model
Configuration Engine
Manufacturing Plan
Visualization
Modeler User
Configuration
Which variants of a product
are available?
Which particular variant
do I want to buy/sell?
Price(s)
Bill of Materials
...
43. Business Processes
Manufacturing Plan
Visualization
Processes with openCPQ
Editor / IDE
Modeler
JavaScript Code
Browser
User
Configuration
Which variants of a product
are available?
Which particular variant
do I want to buy/sell?
Price(s)
Bill of Materials
...
openCPQ
44. Business Processes
Manufacturing Plan
Visualization
Processes with openCPQ
Editor / IDE
Modeler
JavaScript Code
Browser
User
Configuration
Which variants of a product
are available?
Which particular variant
do I want to buy/sell?
Price(s)
Bill of Materials
...
openCPQ
standard
components
45. Business Processes
Manufacturing Plan
Visualization
Processes with openCPQ
Editor / IDE
Modeler
JavaScript Code
Browser
User
Configuration
Which variants of a product
are available?
Which particular variant
do I want to buy/sell?
Price(s)
Bill of Materials
...
openCPQ
standard
components
expressive,
popular
46. Business Processes
Manufacturing Plan
Visualization
Processes with openCPQ
Editor / IDE
Modeler
JavaScript Code
Browser
User
Configuration
Which variants of a product
are available?
Which particular variant
do I want to buy/sell?
Price(s)
Bill of Materials
...
openCPQ
standard
components
light-weight
layer
expressive,
popular
49. ● Building-block library
– Components
– Dependencies
● Combine building blocks with JavaScript
– a Configurator Toolkit in JS
50. ● Building-block library
– Components
– Dependencies
● Combine building blocks with JavaScript
● Add application-specific building blocks
– a Configurator Toolkit in JS
51. ● Building-block library
– Components
– Dependencies
● Combine building blocks with JavaScript
● Add application-specific building blocks
● A light-weight layer based on React and
Bootstrap
– a Configurator Toolkit in JS
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
69. React:
A JavaScript library for building user interfaces
● Unique approach:
– not a widget library
– not an MVC framework
70. 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!)
71. 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:
72. 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")
73. 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
124. Summary
Take advantage of modern browser
technology for product configuration.
Powerful modeling based on JavaScript,
React, and openCPQ.
125. Summary
Take advantage of modern browser
technology for product configuration.
Powerful modeling based on JavaScript,
React, and openCPQ.
Flexible and fast user interface.
126. 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