Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Configuring in the Browser, Really!

Configuring in the Browser, Really!

Herunterladen, um offline zu lesen

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

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

Weitere Verwandte Inhalte

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Configuring in the Browser, Really!

  1. 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. 2. Our History ● Product configuration since 2002, with SAP since 2007 ● Built and maintained – Models – Modeling environments – Configuration frameworks
  3. 3. Problem 1: Modeling
  4. 4. Problem 1: Modeling ● Framework-specific modeling tools
  5. 5. Problem 1: Modeling ● Framework-specific modeling tools ● Lack of abstraction features and data structures – Loops, functions – Arrays, objects (with methods)
  6. 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. 7. Problem 1: Modeling – Solution A
  8. 8. Problem 1: Modeling – Solution B
  9. 9. Problem 1: Modeling – Solution B Our solution so far:
  10. 10. Problem 1: Modeling – Solution B Our solution so far: ● Customer-specific modeling languages
  11. 11. Problem 1: Modeling – Solution B Our solution so far: ● Customer-specific modeling languages ● Modeling environments based on Eclipse and Xtext
  12. 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. 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. 14. Problem 1: Modeling – Solution C
  15. 15. Problem 1: Modeling – Solution C ● Use a programming language – For application-specific inferencing – But also to build up the model
  16. 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. 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. 18. Problem 2: User Experience
  19. 19. Problem 2: User Experience
  20. 20. Problem 2: User Experience ● Performance
  21. 21. Problem 2: User Experience ● Performance – Client-server round trips
  22. 22. Problem 2: User Experience ● Performance – Client-server round trips ● Rigid UI – UI structure imposed by framework – High costs for application-specific UI
  23. 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. 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. 25. In the meantime ...
  26. 26. In the meantime ...
  27. 27. In the meantime ... Client hardware improved
  28. 28. In the meantime ... Client hardware improved ● CPU ● Memory
  29. 29. In the meantime ... Client hardware improved ● CPU ● Memory ● Even on mobiles
  30. 30. In the meantime ... Client hardware improved ● CPU ● Memory ● Even on mobiles … but the speed of light remained the same.
  31. 31. In the meantime ...
  32. 32. In the meantime ... Browser improvements:
  33. 33. In the meantime ... Browser improvements: ● JavaScript performance
  34. 34. In the meantime ... Browser improvements: ● JavaScript performance ● Standardized features – UI extensions – Offline applications – Local storage – …
  35. 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. 36. In the meantime ... A software ecosystem for web applications flourished: ● Web-application frameworks ● Preprocessors for JavaScript/HTML/CSS ● Libraries ● Build tools ● ...
  37. 37. In the meantime ...
  38. 38. In the meantime ... Web browsers have become a serious application platform.
  39. 39. In the meantime ... Web browsers have become a serious application platform. Even for the business logic.
  40. 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. 41. Configuring in the Browser:
  42. 42. Configuring in the Browser: Implement configurators in JavaScript.
  43. 43. Configuring in the Browser: Implement configurators in JavaScript. JavaScript is also a reasonable choice for modeling.
  44. 44. Demo Optical Transport
  45. 45. Demo Example: Hierarchical Configuration SwitchRackSolution Board (Module) Transceiver (Wavelength)
  46. 46. Demo http://opencpq.webxcerpt.com/examples/optical-transport/ ^
  47. 47. – a JavaScript-based Configurator Framework
  48. 48. ● Building-block library – Components – Dependencies – a JavaScript-based Configurator Framework
  49. 49. ● Building-block library – Components – Dependencies ● Combine building blocks with JavaScript – a JavaScript-based Configurator Framework
  50. 50. ● Building-block library – Components – Dependencies ● Combine building blocks with JavaScript ● Add application-specific building blocks – a JavaScript-based Configurator Framework
  51. 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. 52. – an Open-Source Project
  53. 53. Source code and links to live demos available on Github: https://github.com/webXcerpt/openCPQ – an Open-Source Project
  54. 54. Source code and links to live demos available on Github: https://github.com/webXcerpt/openCPQ Liberal MIT license – an Open-Source Project
  55. 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. 56. Modeling with openCPQ: Cases with Details
  57. 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. 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. 59. Data-Driven Modeling with openCPQ
  60. 60. Data-Driven Modeling with openCPQ
  61. 61. Data-Driven Modeling with openCPQ
  62. 62. Data-Driven Modeling with openCPQ
  63. 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. 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. 65. Modeling with openCPQ: Application-specific Abstractions
  66. 66. Modeling with openCPQ: Application-specific Abstractions
  67. 67. Modeling with openCPQ: Application-specific Abstractions
  68. 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. 69. How it Works
  70. 70. Change Propagation core state
  71. 71. Change Propagation core state inference full state
  72. 72. Change Propagation core state user interfaceinference render full state
  73. 73. Change Propagation core state user interfaceinference render full state core state user update
  74. 74. Change Propagation core state user interfaceinference render full state core state user interface full state user update inference render
  75. 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. 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. 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. 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. 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. 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. 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. 82. Change Propagation
  83. 83. Change Propagation Trade-off: ● Non-incremental propagation:
  84. 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. 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. 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. 87. React: A JavaScript library for building user interfaces
  88. 88. React: A JavaScript library for building user interfaces ● Unique approach: – not a widget library – not an MVC framework
  89. 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. 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. 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. 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. 93. Architecture State (JSON)State (JSON) Nodes Nodes VDOM VDOM DOM Types render() apply delta Product Model Updates
  94. 94. Architecture State (JSON)State (JSON) Nodes Nodes VDOM VDOM DOM Types render() apply delta Product Model Updates
  95. 95. Architecture State (JSON)State (JSON) Nodes Nodes VDOM VDOM DOM Types render() apply delta Product Model Updates
  96. 96. SAP Integration
  97. 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. 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. 99. SAP Integration
  100. 100. SAP Integration ● Data (e.g. materials with classification information) – Live vs. pre-exported – Bundling with application vs. loading on demand
  101. 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. 102. Summary
  103. 103. Summary Take advantage of modern browser technology for product configuration.
  104. 104. Summary Take advantage of modern browser technology for product configuration. Powerful modeling based on JavaScript, React, and openCPQ.
  105. 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. 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. 107. Our Offer
  108. 108. Our Offer Discuss: ● Use cases, modeling challenges, … ● Integrations
  109. 109. Our Offer Discuss: ● Use cases, modeling challenges, … ● Integrations Cooperate: ● Professional services, training, ... ● For end users or integrators

×