preface

Have you ever been distressed to write a bad document, write a bad article, clearly said very good, but when it comes to writing, it will rest vegetables, or write a good essay, the document is also very smooth, but the boss asked you to draw, you are confused, do not know where to start? If so, look down, if not, look down too.

In an ideal environment, people’s grade is mainly determined by their thinking ability. Simply put, if you don’t think, you can do physical activities. If you are too lazy to move, you can beg, that is, stay still. But if you think about the creation of the universe by development, then you are at a very high level, like Einstein, or if you think about the development of the country, the future of the nation, like the leaders of the country (except For Comrade Chuan Jianguo).

The hierarchy here is not equal to class, but more like a kind of behavior hierarchy of human society in a more universal sense

On our industry is also same, such as the characteristics of the most ordinary engineer is about technology, will say can’t write, work in the move brick and duplication of high strength, commonly known as CV engineers, advanced can speak and write but I can’t draw, generally is the core of the team the backbone, senior or advanced development, Next, the soul of the team is capable of speaking, writing and drawing, mainly represented by architects, technical leaders and technical experts.

Speaking, writing and drawing are actually means of information flow production, and the thinking level corresponds to the production and consumption of information flow under the thinking framework of different levels. Whether we can’t speak, write or draw is caused by the lack of corresponding thinking framework

The body of the

Thinking framework

Let’s take the React coordination algorithm as an example. I’m sure most readers will be able to tell you something about key, layer comparison, Fiber, virtual stack, single-linked list, two-tree traversal, etc.

But interestingly, if you write an article explaining the React coordination algorithm, most people will be left scratching their heads. If you further describe the technical architecture of the React coordination algorithm with diagrams, 99% of people will be left scratching their heads.

So according to? Why is that?

Because most of us only have a mental framework for speaking, not for writing and drawing, and since we’re trained to speak from birth, from elementary school through college, about speaking, how to say, how to say I think you’ve been practicing and thinking about it for more than a decade, In the past ten years, most people have acquired the ability to express themselves without thinking. When you learn or receive some information, you can say it naturally. This is the ability that the thinking framework gives you to consume old information and quickly produce new information

Information → thinking frame → speaking

However, writing and drawing are not the abilities we have practiced since childhood, and there is no corresponding thinking frame in our brain. Moreover, after entering the society, there is no theory and practice to help you practice and establish these two thinking frames as there was at school, so there is a lack of these two abilities

So what is a frame of thinking? A frame of thinking is a fixed way of thinking that results from deliberate practice of using specific abilities to consume and produce information

Back to easel composition

See the above content, I think you should learn the architecture drawing bad reason is that compared with speaking and writing, drawing consumption and the production method of the information is too abstract, and need to substantially concise information, this also led to the difficulty of thinking has risen sharply, so if writing technical documentation also qualified for most people, But easel composition is a specialty of the few, and that’s because it’s really hard

But even though it’s hard, there are some tricks that can help make your thinking easier

Tip # 1 Don’t try to represent two different streams of information on the same graph

When we speak and write, there’s no dimension of space or time, so you can express a very complex flow of information, like past and present, or something completely different, for you to just pause for a drink of water, or start a new line and change the title, but architecture doesn’t, Because architecture diagram is on a plane and space is limited, when we see the floor plan, people’s understanding ability is a natural limit on the single dimension, which you can’t use a flat architecture diagram shows two different dimensions of information at the same time, popular point, you can only use figure shows one thing, either business or technology, Or a process, which is very different from speaking and writing.

Tip two: Learn and use fixed thinking frames

If you’ve studied software engineering, you’ve probably seen UML diagrams. UML is a specific thinking framework for describing object-oriented languages. Given the constraints, you can think in terms of scope and focus, which makes it much easier to think. But you can help build your own frame of mind by learning about UML to get the feeling of thinking with a frame of mind.

My own summary of the common architecture diagram thinking framework

After years of deliberate practice drawing diagrams, I have summarized three diagrams that I often use as a front-end architect, along with a framework for thinking behind them

Everyone’s thinking frame is not exactly the same, but it is almost the same. If you know or know a certain thinking frame, it will help you to practice and think specifically, but it is not certain whether it can become your own eventually, but if you do not practice, you will never have this ability.

Business architecture diagrams and thought frames

To do engineering, to do architecture, you have to understand the business, deriving the technical architecture from the business is an inherent process, so there’s no doubt about that, you have to understand the business before you can start to design the technical architecture, just keep that in mind, and ideally to draw the technical architecture, you have to be able to draw the business architecture, My thinking frame for a business architecture diagram goes something like this

Business types
  • First-line business, directly facing users, flexible demand, unstable, rapid change
  • Horizontal business: a business formed by refining a number of different front-line businesses
  • Vertical business, common business, provide business support for the first line and horizontal business
Business maturity
  • innovation
  • growth
  • mature
  • stagnation
  • The recession
Figure sample

For different types of business on the technical architecture design is also differentiated, coupled with the maturity of thinking, in balance and rhythm of implementation and by means of techniques and tools such as there will be further consideration, don’t do here, interested can communicate directly to find me ha, follow-up will also say how to write relevant articles from business architecture technical architecture

Technical architecture diagrams and thought frames

Technical architecture diagram is generally used to describe how we use technical means to systematically solve certain business problems. I have been studying Webpack in depth these two days, and I also tried to draw the technical architecture diagram of Webpack. The following is an unfinished architecture diagram, without discussing the details and correctness. I tried to use webPack’s technical architecture diagram to show that the business problem WebPack solves is the process of building JavaScript Code, packaging it, and running it

So the thinking framework for the technical architecture diagram that I’ve summarized is

  • The technical architecture contains more than one state and is incompatible, including but not limited to
    • Development time
    • The runtime
    • Compile time
    • . when
  • Technical architecture consists of more than one kind of technical material, and the same diagram can only illustrate the material of the same abstract dimension. But you can’t draw Code and JavaScript Code at the same time, because the abstraction dimensions are different, and trying to draw would be uncomfortable and difficult to understand.)

Production and consumption flow chart and thinking frame

Production and consumption flow chart is mainly used to explain the process of information flow being consumed and produced between different roles and different systems, and is often used to define the boundary of the system, such as this chart, whose structure is similar to that of a swimlane chart

Thinking frame of production and consumption flow chart

  • Each graph should have a unique source of production and consumption
  • Borders and boundaries are different roles
  • The legend should be around the role around how to consume the source, and produce the source, with chain.

The latter

At the end of the article, let’s ask a question: why can’t you draw architecture diagrams?

  • Lack of targeted deliberate practice
  • Not building your own frame of thought
  • Did not read my article 😀
  • Thinking that drawing is not an important skill reflects a lack of desire and understanding for a higher level of thinking.

Finally, the reason why architectural design should strive for simplicity is that architectural diagrams are highly abstract and uncomplicated, and complex diagrams are often problematic