openCPQ - A React-Based Product-Configuration Toolkit
-
Upload
tim-geisler -
Category
Software
-
view
1.084 -
download
1
Transcript of openCPQ - A React-Based Product-Configuration Toolkit
![Page 1: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/1.jpg)
openCPQ –
A React-Based Product-Configuration Toolkit
Tim Geisler, Heribert Schütz
webXcerpt Software GmbH
[email protected], [email protected]
MunichJS Meetup, 2015-05-13
![Page 2: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/2.jpg)
Product Configuration
![Page 3: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/3.jpg)
Product ConfigurationVariants
![Page 4: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/4.jpg)
Product ConfigurationVariants
Parameters and Domains
![Page 5: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/5.jpg)
Product ConfigurationVariants
Parameters and Domains
![Page 6: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/6.jpg)
Product ConfigurationVariants
Parameters and Domains
![Page 7: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/7.jpg)
Product ConfigurationVariants
Parameters and Domains
![Page 8: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/8.jpg)
Product Configuration
, Dependencies
Variants
Parameters and Domains
![Page 9: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/9.jpg)
Product Configuration
, Dependencies
Variants
Parameters and Domains
![Page 10: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/10.jpg)
Product Configuration
, Dependencies
Variants
Parameters and Domains
![Page 11: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/11.jpg)
Product Configuration
, Dependencies
Variants
Parameters and Domains
![Page 12: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/12.jpg)
Product Configuration
, Dependencies
Variants
Parameters and Domains
![Page 13: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/13.jpg)
Product Configuration
, Dependencies
Variants
Parameters and Domains
![Page 14: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/14.jpg)
Demo
Optical Transport
![Page 15: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/15.jpg)
Demo Example:Hierarchical Configuration
SwitchRackSolution Board (Module) Transceiver (Wavelength)
![Page 16: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/16.jpg)
Demo
http://opencpq.webxcerpt.com/examples/optical-transport/
^
![Page 17: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/17.jpg)
Business Processes
Configuration Engine
User
Configuration
Which particular variantdo I want to buy/sell?
![Page 18: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/18.jpg)
Business Processes
Configuration Engine
User
Configuration
Which particular variantdo I want to buy/sell?
Manufacturing Plan
Visualization
Price(s)
Bill of Materials
...
![Page 19: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/19.jpg)
Business Processes
Product Model
Configuration Engine
User
Configuration
Which variants of a productare available?
Which particular variantdo I want to buy/sell?
Manufacturing Plan
Visualization
Price(s)
Bill of Materials
...
![Page 20: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/20.jpg)
Business Processes
Modeling Tool
Modeler
Product Model
Configuration Engine
User
Configuration
Which variants of a productare available?
Which particular variantdo I want to buy/sell?
Manufacturing Plan
Visualization
Price(s)
Bill of Materials
...
![Page 21: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/21.jpg)
Business Processes
Modeling Tool
Modeler
Product Model
Configuration Engine
User
Configuration
Which variants of a productare available?
Which particular variantdo I want to buy/sell?
Manufacturing Plan
Visualization
Price(s)
Bill of Materials
...
complex(web)
applications
![Page 22: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/22.jpg)
Business Processes
Modeling Tool
Modeler
Product Model
Configuration Engine
User
Configuration
Which variants of a productare available?
Which particular variantdo I want to buy/sell?
Manufacturing Plan
Visualization
Price(s)
Bill of Materials
...
complex(web)
applications
proprietaryformat
![Page 23: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/23.jpg)
Problem 1
![Page 24: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/24.jpg)
Product Model
Modeling Tool
Business Processes
Modeler
Configuration Engine
User
Configuration
Which variants of a productare available?
Which particular variantdo I want to buy/sell?
Manufacturing Plan
Visualization
Price(s)
Bill of Materials
...
![Page 25: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/25.jpg)
Business Processes
Modeler
Configuration Engine
User
Configuration
Which variants of a productare available?
Which particular variantdo I want to buy/sell?
Manufacturing Plan
Visualization
Price(s)
Bill of Materials
...
Customer-SpecificModeling Language
Code Generator
Product Model
High-LevelProduct Model
Customer-specific IDE
![Page 26: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/26.jpg)
Business Processes
Modeler
Configuration Engine
User
Configuration
Which variants of a productare available?
Which particular variantdo I want to buy/sell?
Manufacturing Plan
Visualization
Price(s)
Bill of Materials
...
Customer-SpecificModeling Language
Code Generator
Product Model
High-LevelProduct Model
Customer-specific IDE
● Text● Notions like
„slot“, „board“, ...
![Page 27: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/27.jpg)
Business Processes
Modeler
Configuration Engine
User
Configuration
Which variants of a productare available?
Which particular variantdo I want to buy/sell?
Manufacturing Plan
Visualization
Price(s)
Bill of Materials
...
Customer-SpecificModeling Language
Code Generator
Product Model
High-LevelProduct Model
Customer-specific IDE
Based on● Eclipse● Xtext
● Text● Notions like
„slot“, „board“, ...
![Page 28: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/28.jpg)
Product Models
![Page 29: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/29.jpg)
Product Models
● Product parameters– Data types
– Ranges
![Page 30: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/30.jpg)
Product Models
● Product parameters– Data types
– Ranges
● Components
![Page 31: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/31.jpg)
Product Models
● Product parameters– Data types
– Ranges
● Components● Dependencies between
parameters/components
![Page 32: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/32.jpg)
Product Models
● Product parameters– Data types
– Ranges
● Components● Dependencies between
parameters/components● Calculation of additional output
![Page 33: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/33.jpg)
Product Models
● Product parameters– Data types
– Ranges
● Components● Dependencies between
parameters/components● Calculation of additional output
Models are programs!
![Page 34: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/34.jpg)
Modeling as Programming
![Page 35: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/35.jpg)
Modeling as Programming
● Abstractions, data structures
![Page 36: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/36.jpg)
Modeling as Programming
● Abstractions, data structures● Programming tools
– Editors/IDEs
– Debuggers and profilers
– Revision control
– Test and CI frameworks
![Page 37: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/37.jpg)
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“
![Page 38: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/38.jpg)
Problem 2
![Page 39: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/39.jpg)
Configuring in the Browser
![Page 40: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/40.jpg)
Configuring in the Browser
Implement configurators in JavaScript.
![Page 41: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/41.jpg)
Configuring in the Browser
Implement configurators in JavaScript.
JavaScript is alsoa reasonable choice for modeling.
![Page 42: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/42.jpg)
Business Processes
Modeling Tool
Product Model
Configuration Engine
Manufacturing Plan
Visualization
Modeler User
Configuration
Which variants of a productare available?
Which particular variantdo I want to buy/sell?
Price(s)
Bill of Materials
...
![Page 43: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/43.jpg)
Business Processes
Manufacturing Plan
Visualization
Processes with openCPQ
Editor / IDE
Modeler
JavaScript Code
Browser
User
Configuration
Which variants of a productare available?
Which particular variantdo I want to buy/sell?
Price(s)
Bill of Materials
...
openCPQ
![Page 44: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/44.jpg)
Business Processes
Manufacturing Plan
Visualization
Processes with openCPQ
Editor / IDE
Modeler
JavaScript Code
Browser
User
Configuration
Which variants of a productare available?
Which particular variantdo I want to buy/sell?
Price(s)
Bill of Materials
...
openCPQ
standardcomponents
![Page 45: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/45.jpg)
Business Processes
Manufacturing Plan
Visualization
Processes with openCPQ
Editor / IDE
Modeler
JavaScript Code
Browser
User
Configuration
Which variants of a productare available?
Which particular variantdo I want to buy/sell?
Price(s)
Bill of Materials
...
openCPQ
standardcomponents
expressive,popular
![Page 46: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/46.jpg)
Business Processes
Manufacturing Plan
Visualization
Processes with openCPQ
Editor / IDE
Modeler
JavaScript Code
Browser
User
Configuration
Which variants of a productare available?
Which particular variantdo I want to buy/sell?
Price(s)
Bill of Materials
...
openCPQ
standardcomponents
light-weightlayer
expressive,popular
![Page 47: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/47.jpg)
– a Configurator Toolkit in JS
![Page 48: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/48.jpg)
● Building-block library– Components
– Dependencies
– a Configurator Toolkit in JS
![Page 49: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/49.jpg)
● Building-block library– Components
– Dependencies
● Combine building blocks with JavaScript
– a Configurator Toolkit in JS
![Page 50: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/50.jpg)
● Building-block library– Components
– Dependencies
● Combine building blocks with JavaScript● Add application-specific building blocks
– a Configurator Toolkit in JS
![Page 51: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/51.jpg)
● 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
![Page 52: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/52.jpg)
– an Open-Source Project
![Page 53: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/53.jpg)
Source code and links to live demosavailable on Github:https://github.com/webXcerpt/openCPQ
– an Open-Source Project
![Page 54: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/54.jpg)
Source code and links to live demosavailable on Github:https://github.com/webXcerpt/openCPQ
Liberal MIT license
– an Open-Source Project
![Page 55: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/55.jpg)
Source code and links to live demosavailable on Github:https://github.com/webXcerpt/openCPQ
Liberal MIT license
Use, adapt,integrate, contribute!
– an Open-Source Project
![Page 56: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/56.jpg)
How it Works
![Page 57: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/57.jpg)
Change Propagation:Non-Incremental
corestate
![Page 58: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/58.jpg)
Change Propagation:Non-Incremental
corestate inference
fullstate
![Page 59: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/59.jpg)
Change Propagation:Non-Incremental
corestate
userinterfaceinference render
fullstate
![Page 60: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/60.jpg)
Change Propagation:Non-Incremental
corestate
userinterfaceinference render
fullstate
corestate
userupdate
![Page 61: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/61.jpg)
Change Propagation:Non-Incremental
corestate
userinterfaceinference render
fullstate
corestate
userinterface
fullstate
userupdate
inference render
![Page 62: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/62.jpg)
Change Propagation:Non-Incremental
corestate
userinterfaceinference render
fullstate
corestate
userinterface
fullstate
corestate
userinterface
fullstate
userupdate
userupdate
inference render
inference render
![Page 63: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/63.jpg)
Change Propagation:Incremental
corestate
userinterface
fullstate
userupdate
corestate
userinterface
fullstate
userupdate
corestate
userinterface
fullstate
![Page 64: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/64.jpg)
Change Propagation:Incremental
corestate
userinterface
fullstate
userupdate
derivedupdate
corestate
userinterface
fullstate
userupdate
corestate
userinterface
fullstate
![Page 65: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/65.jpg)
Change Propagation:Incremental
corestate
userinterface
fullstate
userupdate
derivedupdate
derivedupdate
corestate
userinterface
fullstate
userupdate
corestate
userinterface
fullstate
![Page 66: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/66.jpg)
Change Propagation:Incremental
corestate
userinterface
fullstate
userupdate
derivedupdate
derivedupdate
corestate
userinterface
fullstate
userupdate
derivedupdate
derivedupdate
corestate
userinterface
fullstate
![Page 67: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/67.jpg)
Change Propagation:Mixed
corestate
userinterface
fullstate
userupdate
derivedupdate
corestate
userinterface
fullstate
userupdate
derivedupdate
corestate
userinterface
fullstate
inference
inference
inference
![Page 68: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/68.jpg)
React:A JavaScript library for building user interfaces
![Page 69: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/69.jpg)
React:A JavaScript library for building user interfaces
● Unique approach:– not a widget library
– not an MVC framework
![Page 70: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/70.jpg)
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!)
![Page 71: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/71.jpg)
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:
![Page 72: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/72.jpg)
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")
![Page 73: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/73.jpg)
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
![Page 74: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/74.jpg)
Architecture
State(JSON)State
(JSON)
NodesNodes
VDOMVDOM DOM
Types render() apply delta
ProductModel
Updates
![Page 75: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/75.jpg)
Architecture
State(JSON)State
(JSON)
NodesNodes
VDOMVDOM DOM
Types render() apply delta
ProductModel
Updates
![Page 76: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/76.jpg)
Architecture
State(JSON)State
(JSON)
NodesNodes
VDOMVDOM DOM
Types render() apply delta
ProductModel
Updates
![Page 77: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/77.jpg)
Example Code: Product Model
State(JSON)State
(JSON)
NodesNodes
VDOMVDOM DOM
Types render() apply delta
ProductModel
Updates
![Page 78: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/78.jpg)
Product Model: Cases with Details
![Page 79: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/79.jpg)
Product Model: Cases with Detailsvar 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
![Page 80: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/80.jpg)
Product Model: Cases with Detailsvar 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
function configuration({caseId, details}) { switch (caseId) { case "unanswered": /* do nothing */ break; case "Switches": CQuantifiedList({}, "Optical Switch", opticalSwitches)(details); break; case "Rack": ...; break; case "Solution": solution(details); break; }}
Compare topseudocode:
![Page 81: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/81.jpg)
Product Model: Cases with Detailsvar 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
![Page 82: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/82.jpg)
Data-Driven Product Modeling
![Page 83: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/83.jpg)
Data-Driven Product Modeling
![Page 84: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/84.jpg)
Data-Driven Product Modeling
![Page 85: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/85.jpg)
Data-Driven Product Modeling
![Page 86: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/86.jpg)
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))) ]);}
![Page 87: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/87.jpg)
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))) ]);}
[for (… of …) if (…) …]array comprehension
![Page 88: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/88.jpg)
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))) ]);}
Concise specification of complex models
![Page 89: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/89.jpg)
Example Data: State
State(JSON)State
(JSON)
NodesNodes
VDOMVDOM DOM
Types render() apply delta
ProductModel
Updates
![Page 90: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/90.jpg)
Configuration State{ "caseId": "Solution", "detailValue": { "project": { "release": { "caseId": "R2.0" }, "UPS": true }, "racks": [ { "quantity": "4", "value": { "UPS": true, "switches": [ … ] } } ] }}
![Page 91: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/91.jpg)
Example Code: Node Rendering
State(JSON)State
(JSON)
NodesNodes
VDOMVDOM DOM
Types render() apply delta
ProductModel
Updates
![Page 92: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/92.jpg)
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> ); }}
![Page 93: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/93.jpg)
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> ); }}
Inherited constructor
Unpack constructorparameters.
![Page 94: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/94.jpg)
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> ); }}
Create a VDOM tree.
![Page 95: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/95.jpg)
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> ); }}
JSX:HTML templatesin JavaScript
![Page 96: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/96.jpg)
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> ); }}
JSX:HTML templatesin JavaScript
… also with „higher-level“XML elements(from react-bootstrap)
![Page 97: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/97.jpg)
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> ); }}
Interpolate JavaScriptexpressions with {...}
![Page 98: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/98.jpg)
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> ); }}
array comprehension
![Page 99: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/99.jpg)
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> ); }}
![Page 100: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/100.jpg)
Example Code: Types
State(JSON)State
(JSON)
NodesNodes
VDOMVDOM DOM
Types render() apply delta
ProductModel
Updates
![Page 101: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/101.jpg)
function ccase(id, label, type = CUnit()) { return {id, label, type};}
function CSelect(cases) { return { makeNode(ctx) { var {state, updateTo} = ctx; var {caseId, detailState} = state || {caseId: cases[0].id}; var currentCase = cases.find(x => x.id === caseId); var detailNode = currentCase.type.makeNode({ ...ctx, state: detailState, updateTo(newDetail) { updateTo({caseId, detailState: newDetail}); } }); return new SelectNode({cases, currentCase, detailNode, updateTo}); } };}
Selection Type (simplified)
![Page 102: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/102.jpg)
function ccase(id, label, type = CUnit()) { return {id, label, type};}
function CSelect(cases) { return { makeNode(ctx) { var {state, updateTo} = ctx; var {caseId, detailState} = state || {caseId: cases[0].id}; var currentCase = cases.find(x => x.id === caseId); var detailNode = currentCase.type.makeNode({ ...ctx, state: detailState, updateTo(newDetail) { updateTo({caseId, detailState: newDetail}); } }); return new SelectNode({cases, currentCase, detailNode, updateTo}); } };}
Selection Type (simplified)
![Page 103: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/103.jpg)
function ccase(id, label, type = CUnit()) { return {id, label, type};}
function CSelect(cases) { return { makeNode(ctx) { var {state, updateTo} = ctx; var {caseId, detailState} = state || {caseId: cases[0].id}; var currentCase = cases.find(x => x.id === caseId); var detailNode = currentCase.type.makeNode({ ...ctx, state: detailState, updateTo(newDetail) { updateTo({caseId, detailState: newDetail}); } }); return new SelectNode({cases, currentCase, detailNode, updateTo}); } };}
Selection Type (simplified)
![Page 104: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/104.jpg)
function ccase(id, label, type = CUnit()) { return {id, label, type};}
function CSelect(cases) { return { makeNode(ctx) { var {state, updateTo} = ctx; var {caseId, detailState} = state || {caseId: cases[0].id}; var currentCase = cases.find(x => x.id === caseId); var detailNode = currentCase.type.makeNode({ ...ctx, state: detailState, updateTo(newDetail) { updateTo({caseId, detailState: newDetail}); } }); return new SelectNode({cases, currentCase, detailNode, updateTo}); } };}
Selection Type (simplified)
Nothing to configure
![Page 105: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/105.jpg)
function ccase(id, label, type = CUnit()) { return {id, label, type};}
function CSelect(cases) { return { makeNode(ctx) { var {state, updateTo} = ctx; var {caseId, detailState} = state || {caseId: cases[0].id}; var currentCase = cases.find(x => x.id === caseId); var detailNode = currentCase.type.makeNode({ ...ctx, state: detailState, updateTo(newDetail) { updateTo({caseId, detailState: newDetail}); } }); return new SelectNode({cases, currentCase, detailNode, updateTo}); } };}
Selection Type (simplified)
![Page 106: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/106.jpg)
function ccase(id, label, type = CUnit()) { return {id, label, type};}
function CSelect(cases) { return { makeNode(ctx) { var {state, updateTo} = ctx; var {caseId, detailState} = state || {caseId: cases[0].id}; var currentCase = cases.find(x => x.id === caseId); var detailNode = currentCase.type.makeNode({ ...ctx, state: detailState, updateTo(newDetail) { updateTo({caseId, detailState: newDetail}); } }); return new SelectNode({cases, currentCase, detailNode, updateTo}); } };}
Selection Type (simplified)
![Page 107: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/107.jpg)
function ccase(id, label, type = CUnit()) { return {id, label, type};}
function CSelect(cases) { return { makeNode(ctx) { var {state, updateTo} = ctx; var {caseId, detailState} = state || {caseId: cases[0].id}; var currentCase = cases.find(x => x.id === caseId); var detailNode = currentCase.type.makeNode({ ...ctx, state: detailState, updateTo(newDetail) { updateTo({caseId, detailState: newDetail}); } }); return new SelectNode({cases, currentCase, detailNode, updateTo}); } };}
Selection Type (simplified)
![Page 108: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/108.jpg)
function ccase(id, label, type = CUnit()) { return {id, label, type};}
function CSelect(cases) { return { makeNode(ctx) { var {state, updateTo} = ctx; var {caseId, detailState} = state || {caseId: cases[0].id}; var currentCase = cases.find(x => x.id === caseId); var detailNode = currentCase.type.makeNode({ ...ctx, state: detailState, updateTo(newDetail) { updateTo({caseId, detailState: newDetail}); } }); return new SelectNode({cases, currentCase, detailNode, updateTo}); } };}
Selection Type (simplified)Context:● state● updateTo() (replace state)● aggregators (bill of materials, …)● ...
Injects application-specific data.
![Page 109: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/109.jpg)
function ccase(id, label, type = CUnit()) { return {id, label, type};}
function CSelect(cases) { return { makeNode(ctx) { var {state, updateTo} = ctx; var {caseId, detailState} = state || {caseId: cases[0].id}; var currentCase = cases.find(x => x.id === caseId); var detailNode = currentCase.type.makeNode({ ...ctx, state: detailState, updateTo(newDetail) { updateTo({caseId, detailState: newDetail}); } }); return new SelectNode({cases, currentCase, detailNode, updateTo}); } };}
Selection Type (simplified)Context:● state● updateTo() (replace state)● aggregators (bill of materials, …)● ...
Injects application-specific data.
![Page 110: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/110.jpg)
function ccase(id, label, type = CUnit()) { return {id, label, type};}
function CSelect(cases) { return { makeNode(ctx) { var {state, updateTo} = ctx; var {caseId, detailState} = state || {caseId: cases[0].id}; var currentCase = cases.find(x => x.id === caseId); var detailNode = currentCase.type.makeNode({ ...ctx, state: detailState, updateTo(newDetail) { updateTo({caseId, detailState: newDetail}); } }); return new SelectNode({cases, currentCase, detailNode, updateTo}); } };}
Selection Type (simplified)
detailNode = detailType(ctx')
![Page 111: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/111.jpg)
function ccase(id, label, type = CUnit()) { return {id, label, type};}
function CSelect(cases) { return { makeNode(ctx) { var {state, updateTo} = ctx; var {caseId, detailState} = state || {caseId: cases[0].id}; var currentCase = cases.find(x => x.id === caseId); var detailNode = currentCase.type.makeNode({ ...ctx, state: detailState, updateTo(newDetail) { updateTo({caseId, detailState: newDetail}); } }); return new SelectNode({cases, currentCase, detailNode, updateTo}); } };}
Selection Type (simplified)
detailNode = detailType(ctx')
updateTo() for detail node:● do not modify surrounding state● send new state to parent's updateTo()
=> easy undo/redo
![Page 112: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/112.jpg)
function ccase(id, label, type = CUnit()) { return {id, label, type};}
function CSelect(cases) { return { makeNode(ctx) { var {state, updateTo} = ctx; var {caseId, detailState} = state || {caseId: cases[0].id}; var currentCase = cases.find(x => x.id === caseId); var detailNode = currentCase.type.makeNode({ ...ctx, state: detailState, updateTo(newDetail) { updateTo({caseId, detailState: newDetail}); } }); return new SelectNode({cases, currentCase, detailNode, updateTo}); } };}
Selection Type (simplified)
![Page 113: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/113.jpg)
function ccase(id, label, type = CUnit()) { return {id, label, type};}
function CSelect(cases) { return { makeNode(ctx) { var {state, updateTo} = ctx; var {caseId, detailState} = state || {caseId: cases[0].id}; var currentCase = cases.find(x => x.id === caseId); var detailNode = currentCase.type.makeNode({ ...ctx, state: detailState, updateTo(newDetail) { updateTo({caseId, detailState: newDetail}); } }); return new SelectNode({cases, currentCase, detailNode, updateTo}); } };}
Selection Type (simplified)
![Page 114: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/114.jpg)
Tools
![Page 115: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/115.jpg)
Tools
● react.js
![Page 116: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/116.jpg)
Tools
● react.js● bootstrap with ( or ?)
![Page 117: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/117.jpg)
Tools
● react.js● bootstrap with ( or ?)● react-bootstrap, react-widgets
![Page 118: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/118.jpg)
Tools
● react.js● bootstrap with ( or ?)● react-bootstrap, react-widgets● ( react JSX/esprima; ?)
![Page 119: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/119.jpg)
Tools
● react.js● bootstrap with ( or ?)● react-bootstrap, react-widgets● ( react JSX/esprima; ?)
● webpack ( / )
![Page 120: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/120.jpg)
Tools
● react.js● bootstrap with ( or ?)● react-bootstrap, react-widgets● ( react JSX/esprima; ?)
● webpack ( / )● ( ),
![Page 121: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/121.jpg)
Tools
● react.js● bootstrap with ( or ?)● react-bootstrap, react-widgets● ( react JSX/esprima; ?)
● webpack ( / )● ( ), ●
![Page 122: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/122.jpg)
Summary
![Page 123: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/123.jpg)
Summary
Take advantage of modern browser technology for product configuration.
![Page 124: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/124.jpg)
Summary
Take advantage of modern browser technology for product configuration.
Powerful modeling based on JavaScript, React, and openCPQ.
![Page 125: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/125.jpg)
Summary
Take advantage of modern browser technology for product configuration.
Powerful modeling based on JavaScript, React, and openCPQ.
Flexible and fast user interface.
![Page 126: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/126.jpg)
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
![Page 127: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/127.jpg)
Issues to Discuss
![Page 128: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/128.jpg)
Issues to Discuss
● Use cases– product configuration, software configuration
– questionnaires
– …?
![Page 129: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/129.jpg)
Issues to Discuss
● Use cases– product configuration, software configuration
– questionnaires
– …?
● Technologies
![Page 130: openCPQ - A React-Based Product-Configuration Toolkit](https://reader034.fdocuments.us/reader034/viewer/2022042608/55c6b097bb61ebc4688b4576/html5/thumbnails/130.jpg)
Issues to Discuss
● Use cases– product configuration, software configuration– questionnaires
– …?
● Technologies● Cooperation
– Extensions: Integrations (SAP, Salesforce, ...), Visualization, ...
– Student projects
– Application development