How to develop modules that hide complexity

When developing functionality in an app there are many design challenges for the developer. One of the most important ones that determines how easy / hard the entire solution architecture is to develop and maintain over time is how well each function / module / class that is created hides the complexity within.

The main purpose of a module in a larger system is to hide complexity

An example to illustrate this is when developing interactive CAD-configurators where the user can place components with the mouse, but a strict set of rules still need to be applied. Lets say the user can create a door on a wall section with the click of a mouse button. This requires both infomation about the click, the door and how this comes together in relation to existing components (like a wall).

The following four alternatives for the addDoor function illustrates how different approachers will impact how much complexity is hidden

1 – No complexity hidden

assembly.addDoor(doorObject, position)

An entire door object needs to be created outside the function and rules affecting position also needs to be handled outside the function – no complexity hidden

2 – Door complexity hidden

assembly.addDoor(doorType, size, position)

Only type and size is needed here but position rules still need to be outside the function – door complexity hidden

3 – Positioning complexity hidden

assembly.addDoor(doorComponent, requestedPosition)

The door object is created outside but the position is just a request and rules for actual position is computed inside – position rule complexity hidden

4 – Both door and position complexity hidden

assembly.addDoor(doorType, size, requestedPosition)

Combining 2 and 3 results in hiding of both door and placement rule complexities

There will always be trade-offs that keep you from hiding all complexity in the function. But becoming aware of this mechanism is the first step to designing good modules and well functioning architecture.

Strategies for CAD assemblies in visual configuration

With a class based definition of CAD assemblies in a web configurator there are two main strategies to choose from: Property driven or interaction driven assembly

Property driven CAD assembly

With the property driven approach there is a set of properties that are known in advance and can describe the entire assembly. The number of parts and layouts can vary but its all driven from changes in the same properties.

PRO: The benefit of this is that the entire assembly can be controlled with a single procedural sequence which can start from an empty assembly (see docs on how component handler and clearAll works).

CON: The weakness of the property driven approach is that it cannot store states in the different components (like changing a specific size).

Interaction driven CAD assembly

With the interaction based approach the assembly is generate through a set of predefined methods on the assembly class (eg. assembly.addDoor(…), assembly.configureSection(..). These methods needs to be created by the person implementing the class based configuration and carefully shaped to match the intended interactions.

PRO: This enables complex configuration guided with the mouse (drag and drop configuration) and gives a lot of freedom to the user.

CON: The drawback is the increased skill requirements and time needed for the person implementing the interaction based approach. The predefined methods need to hide complexity and handle all the edge cases of all potential mouse interactions, yet still produce a valid assembly.

Template – Conveyor Layout configurator

Working with multi model configurations can be tricky. One way to simplify things is to create a predefined sequence of products where each new item connects to the next in a predictable way. This can be used for creating conveyors or similar and we have created a starting template just for that.

CAD configurator for 3D-printed motor brackets

A DynaMaker template project that generates a motor bracket that fits the NEMA standard for stepper motors. With very few inputs the user can modify the installation size and picking the right standard without having to know anything about the NEMA specifications.

You can navigate the model with the middle and right mouse buttons.

Does this template look useful to you? Contact us at and we can get you started with this!

Greenhouse configurator template

This is one of many template projects available for a quick start with customization in DynaMaker. It’s a simple one-step configurator that enables parametric customization of a greenhouse with automated CAD exports. See the video below for an example of how it could work for your e-commerce!

Integrations with SendGrid and Auth0

Most online applications work together with other systems and solutions to help users design and customize products online. Therefore they almost always have to be connected to a homepage, e-commerce, ERP, customer portals and similar to do their intended work.

As a fast and standardize way of connecting the applications your create with DynaMaker to these type of platforms we have now released plugins in the developer dashboard!

Develop a CAD configurator for the web

When working with an all-in-one cloud service like DynaMaker you can pretty much follow these 10-steps to develop your first CAD configurator for web, e-commerce or CPQ. All the technical aspects can be found on or by a discussion with our support team. The hardest part is usually doing things in the right order.