On Building Software

06BA091F-3176-4B54-84DD-7733EB0588A0_1_201_a.jpeg

This is a snapshot of a whiteboard that drew by software team in one of my previous jobs. It was a team building afternoon, and we were playing a game similar to Pictionary - each person have to drawing with clues about the word they had received for others to guess. When it was my turn to give the words, I decided to pick only one word for the entire team. As you can see, very different pictures were the resulting from the same word! Can you guess what this word was? Please t

ake a minute for a close look.

Smoke came out from the ears? Rollercoaster rides? A ball of mess? Staring at a monitor seeing tangled threads? Waterfall? Is this word FRUSTRATION or CONFUSION or CHAOTIC or AMBIGUOUS or SETBACKS or FATIGUE?.

This word is SOFTWARE! Sadly, this grim picture truly reflects some key aspects of software development in many organizations, where software developers experiment frustration and confusion and chaotic and ambiguous and setbacks and fatigue.

Modulation, encapsulation, and API standardization … with each technique or method added to our toolbox, we hope software construction would be like building LEGOs - finally plugging all pieces together, and HURRAH, it works. But our experience revealed to us again and again, that building software is more like solving a Rubik’s cube, often after we put one cube in the right spot, by accident we moved another one to the wrong spot.

The first 90 percent of the code accounts for the first 90 percent of the Development time. The Remaining 10 percent of the code accounts for the other 90 percent of the development time.
— Tom Cargill, Bell Labs

When I first started learning computer science, my parents who were teaching mechanical engineering at a college in Beijing, often asked me, can you tell us what computer software is? And they would hand me a pencil and asked me to draw. I often told them with arrogant that software is abstract, there is no way I can draw. They then shook their heads with disbelief, since in mechanical engineering, drawing is everything - they give an exact representation of the object and show all parts in their true size relation. Mechanical drawing is used to communicate design ideas, to eliminate uncertainties, and to validate the integrity of the design. Many years have passed since but the idea of drawing the abstract concept of software has been lingering above me - can we visualize the abstract concepts for the same purpose? That started my journey of discovering and using Hierarchical statemachine to “draw software”.

In the following slides, I use a buggy sample code from Microsoft as an example, to demonstrate how software can be or modeled in a systematic manner with "“drawings”. How to use the modeling (drawing) method to capture the complicated real world frequently changed requirement, and how to use the model to reduce the design complexity, while maintain the system as whole, communicate the design to implementation, and finally to validate the design and to verify its implementation. This will not only eliminate “the other 90 percent” of work, but also bring the software quality to the next level. It is not only works correctly, but also has better user flow.

My goal here is to shad light on systematic design in software development. I truly believe it is the direction to go to solve the current frustrations. I hope you will take this concept to heart and develop it further.

Screen Shot 2020-10-26 at 3.46.36 PM.png

Opposite from a fairytale, each software project has a happy beginning, but rarely a happy ending.

At the beginning, everyone in the team are charged for a new project with enthusiastic and energy; The project idea is cool, the technology is new, and the teammates are super smart. But as it closer to the deadline, all the problems, aka bugs, are jumping out to push the deadline again and again. I’ve been seeing this happening everywhere, projects large or small, in companies large or small.

E0BD98E1-EDA1-49C4-B3A1-FF23861690CA_1_201_a.jpeg

Since when the infamous 90-90 rule rules the making of complex software development?

7234ABBF-1D93-49B2-BDF9-222138F67DD9_1_201_a.jpeg

Often it is someone else’s problem, right?

Maybe not…

8D89B4D1-5C9D-4E65-9C41-3FDAA439A905.png

Let’s try to root cause a problem.

I picked Microsoft calculator sample code because it is small enough for a quick understanding, but complex enough to demonstrate the problem.

307B21D1-EF90-4A5F-8C49-65D5F0E26B55.png

This is a Microsoft sample code for Windows calculator.

While it demonstrated the strength of the software development tool, it exposed a problem of software making in even in the famous software house.

AEDEBDB6-89F3-4689-B7AF-B9B38A0550DA.png

It crashes a lot.

Ian Horrock, a computer science professor, said, in an hour with different scenarios, he could make it crash, or freeze for more than 10 times. It normally works well, but only when you try to enter something out side of the rules for a calculator input, For example, punch in “2 + + 3”, or “ x 2 + 2, or 2 + + 2 will crash it.

A895A9CC-87F5-4386-8CB5-39B01720FBA9.png

Just fix the bugs!

You may say, it’s normal for software to have bugs, just fix the bugs, it will be fine. But what if you fix one bug, on the next round of testing, 2 more bugs were found, which was caused by your bug fix. Repeating the fix-test cycle, that is where the other 90% Mr. Cargill mentioned.

07CCA5AB-5C26-4962-B31E-D86C18B4ADC0.png

The difficulty with event driven system

The challenge is rooted from, any even can come in any time in any sequence, but how to handle the event is based on the context. For example in the calculator, when you type 2 + - 3, it is totally fine. But if you type 2 + x 3, although both follows “operand, operator, operator, operand” sequence. But how can you distinguish it so the system would not process the second one?

FC64596E-007D-4814-9B58-E559CD9D741E.png

The button-up design and the use of flags

A conventional way of “remembering” the context is to share flags between the event handlers, to set it, or to read it on a conditional statement. Each time we discover a missing context in our logic flow, we add another flag. Along with the growing number of flags, we started to trapped in a maze created by ourselves.

815D22EE-BA77-49AB-A8B5-1FD3991C99D5.png

“When complexity also works, why bother with simplicity.” - Anonymous

This is a design document from Microsoft. On the good side, it actually has a document! But on the flip side, who has the courage to trace its logic, to maintain this documentation, and can still say it is correct with confidence? If you want to make a change here, how can you guarantee that you will not break something else? In other words, bottom-up design made us loose the sight of the system working together as a whole.

B36A0005-5BB4-48FB-8F58-355DDE9B5FE8.png

I’m wonder what is Weinberg’s fist law.

AC335498-CD0B-4C8E-B1F2-45F63668B7E4.png

A systematic design for mechanical engineering, for building architecture, is modeling.

The born of Statechart

David Harel, a young professor at the time, mentioned that when he was invited to join a regular discussion on building a new aircraft for the Israel air force, everyone there was the top expert in their field. But the discussion often goes on and on with little progress, because there is nothing to help them to capture their thoughts, to organize them into a system, and to communicate them through different disciplines. He tried to draw finite state-machine like charts on the board to capture the ideas in a way so everyone can see it. That was eventually how the state chart was developed.

D984D2CA-EDE8-4E04-A2A4-D98448C00D0D.png

The control part in a Model-View-Controller as a system

It is an over used design pattern, the idea is to decouple the software into three parts, View manages the user experience, Model maintains the data collected or generated, the Control tracks the business logic and based on the context to notify View or Model. In this discussion, we focus on the Controller part.

2F103421-60EA-4F58-A92B-1D5E8201814A.png

The calculator Controller in statechart

Statechart maintains a context without the flagship flags.

BA0AFC48-04FD-4CE9-BED1-A76C37354255.png

Statechart support simplicity through abstraction, which concept has been used in Object—oriented design for several decades, that is using inheritance for a behavior shared among many components.

Abstraction is the key of simplicity. For testing, it means a huge deduction of testing coverage: instead of testing many times in each components, it only test once in super-class.

C2DB9568-B2C4-4341-89F0-8E4F589AB67C.png
1456231F-F207-4002-8767-E7F2AD481A8D.png

Statechar support a top-down design, which made it possible to see the system as a whole

691867EB-3747-4A0A-9934-141A88DCECB9.png
66371057-E94E-4CE4-A55F-D15050705D30.png
7147F94A-0870-4EDB-8ECE-83FA5BE027AC.png

The statechart modeling of a advanced calculator

6A20FB3C-BB46-4BD9-A869-CA0E8ACBA14B.png

What a relief!

D52C6040-5AD0-4B0B-BAAB-1A48E1AC94B1.png
8BB64DD1-A624-4ACA-B9D8-4C78BDFCDCB1.png

For the semantics of the statechart, this specific character that to be able to map between the design and the implementation, is as important at mapping a mechanical drawing to an object.

B509B7F5-767C-48E3-ADE3-0C73B9F72872.png

A new way of event handling

41B6CBBB-3F85-4839-B9A0-33EAAB35ECFD.png

Build on top of a framework for statechart

4C863FA5-A593-410B-BE9C-639B3DB9D66A.png

A generic architecture for a large but decoupled system

E399E953-E6B9-4C86-81C7-A042FA788E4A.png

A real world class-III medical device built on statechart.

1A59EB1E-2567-41DF-A23A-9368F1BAEAC5.png

My favorite quote from this famous writer, the same principle applies to software writing.

FEF47781-6EB3-49BE-87B6-EB5E744E79CD.png

If work makes you unhappy, either, it is not the right thing to do, or, we haven’t done it right.

—Jingyu Li 😀

Let’s do it in the right way!

846F79C5-4A79-4002-B072-C985A9A2B898.png

Slides Show

The following is the slide show that repeats the content above. Click on the image to proceed.

Previous
Previous

Exploring Nature’s Greatest Secret