Designing Systems

Erwan Carriou
Jan 21, 2018 · 6 min read
Picture by Sergey Zolkin

In my previous post I explained that, as a developer, you do not create applications but in fact systems, living entities that react to their environment (browsers, servers, …). On this post I will describe a process that you can follow in order to create systems. This process has been inspired by the amazing work of Donella H. Meadows, the B-Method that I learned at the University and the Domain Driven Design.

This process is composed of 5 steps:

  1. Understand the problem
  2. Design your system
  3. Agree on the design
  4. Refine your design
  5. Generate your system

1. Understand the problem

Always remember that you are human

Be inclusive

Speak the same language

2. Design your system

Take a paper and a pen

Create the border

Border of a system

Draw a big circle that represents the border of the system. Then write all the words taken from the list you made.

Write inside the circle the concepts that you think are part of the system. Write outside the circle the concepts that you think are not part of the system.

The border depends on your comprehension of the system and could change from one perspective to another. For example: when designing a web app, you can include the server in the system… or not. It depends on where you put this border.

Find what are the events that provoke a response from the system

Messages

Then look at the concepts that you put outside the system. Think how these concepts can interact with your system.

Create arrows that go into the system for each message that could be send to the system. And name the event responsible for this message.

Create arrows that go out the system for each message that could be send from the system. And name the event responsible for this message.

Design the model

The model

Now look at all the words that you put inside the system. Create a square around each word. Then draw a line between each square that you think are related together. Do not add information on the link, just draw a line. The idea is to have an global overview of the concepts and their relations.

Find the core components

Core components

Name the components that you need to have to start the system and draw little circles that represents them. We will call them the core components.

3. Agree on the design

  • what is the border of the system,
  • what are the events that provoke a response from the system,
  • what is the model of the system and
  • what are the core components of the system.

Be sure that everyone agree on the design and understand how the system is composed.

4. Refine your Design

Describe the model

  • What are the properties of the model?
  • What are the behaviors of the model?
  • What are the type of links. Are they collection, inheritance, …?
  • What are the events send by the model?

I encourage you to use UML to define the model. But keep it simple like we did before. Always use design that everybody can understand.

A model in System Designer

Find the initial states of the core components

I encourage you to describe these values in a JSON object. It is human readable format that you can easily update.

A core component in System Designer

Define the messages

Use also UML to define the structure of the messages.

Message definition in System Designer

5. Generate your system

There are many tools that can use to the model generation, find the one that fills your needs. If you focus on JavaScript, you can try System Designer, a web IDE that I have created in order to design and create systems. It is open source and free.

System Designer in action

Conclusion

It was a quick overview of the process I use when I create systems. I did not go into specific details, I only described the main steps of this process so that you can adapt it to your work.

In my next post I will go more deeper on the model designing process and explain how to have a model synchronized with your running system.

This story is published in The Startup, Medium’s largest entrepreneurship publication followed by 287,184+ people.

Subscribe to receive our top stories here.

The Startup

Medium's largest active publication, followed by +585K people. Follow to join our community.

Erwan Carriou

Written by

I like JavaScript, Web Standards, Open Web Platform, UX, Diversity in Tech

The Startup

Medium's largest active publication, followed by +585K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade