Layered Design - Functional Programming

Layered Design - Functional Programming

Layered Design in Software: Simplifying Code Complexity

Layered design in software is a technique where software is organized into different layers. This approach allows each layer to function without needing detailed knowledge of the other layers. It's like building a cake layer by layer, where each layer has its own specific role.

The Direct Implementation Pattern

When we create functions or use language features, they often operate at different levels of abstraction. For example, using array indexes and loops is considered a lower level of abstraction.

If a single function mixes different levels of abstraction, it can make the code hard to read. It's like trying to read a book where every other paragraph switches between basic and advanced topics.

A function is said to be directly implemented if it operates consistently at the same level of abstraction. It's like staying on the same floor of a building rather than jumping between floors.

But why does mixing abstraction levels make code hard to read? Imagine each level of abstraction as a different box. If elements in a function belong to different boxes (or levels), it's harder to understand the function's overall purpose.

In the direct implementation pattern, it's ideal if all connections (like arrows in a diagram) are of the same length, indicating a uniform level of abstraction. If they're not, it's a sign that the function might not be directly implemented. A good solution is to introduce intermediate functions to bridge these gaps.

  • Group functions with similar purposes using their names.
  • Understand the structure through function names, their content, and the call graph. If the call graph shows arrows (function calls) of varying lengths, it suggests that the functions are not directly implemented.

要查看或添加评论,请登录

GeoJung Im的更多文章

  • Understanding Virtual DOM and React Fiber

    Understanding Virtual DOM and React Fiber

    Background of Virtual DOM Changes in DOM Color changes trigger painting (relatively fast). Changes in visibility or…

  • Scope Chain & Call Stack

    Scope Chain & Call Stack

    Scope Chain The Scope Chain in JavaScript is a list-like structure that stores references to the global object and the…

  • Referencing Values with Refs

    Referencing Values with Refs

    This is the summarization of reading react docs. 1.

  • Getting into Functional Programming

    Getting into Functional Programming

    This is the summarization of reading a grokking functional programming book. Functional Programming Effects…

  • ?? Understanding TypeScript and JavaScript Relationship

    ?? Understanding TypeScript and JavaScript Relationship

    This is the summarization of reading Effective Typescript book. Summary TypeScript is a Superset of JavaScript: This…

  • Performance in Frontend

    Performance in Frontend

    What Does Performance Mean in Frontend Development? In frontend development, performance refers to how quickly and…

    2 条评论
  • Passing Data Deeply with Context

    Passing Data Deeply with Context

    This is what I summarized from react docs. Context lets the parent component make some information available to any…

  • Server Component and Client Component

    Server Component and Client Component

    Advantages of Server Components Data Fetching: It's fast to fetch data from the server because it is physically closer…

  • What is Closure

    What is Closure

    Let's get to know about closure. Closure is used to considered hard to understand.

  • Preserving and Resetting State

    Preserving and Resetting State

    This is the summarization of React docs React uses tree structures to manage and model the UI you make. React makes UI…

社区洞察

其他会员也浏览了