avatarItchimonji

Free AI web copilot to create summaries, insights and extended knowledge, download it at here

2934

Abstract

e handling. It creates a <i>Memento</i> that contains a snapshot of its current internal state. With this, different states can be restored, too:</p><figure id="ccd4"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*i5kJ7T_sFw1vOLFiPJz-oA.png"><figcaption>Originator</figcaption></figure><p id="7f90">The <b>Caretaker</b> is responsible for safekeeping the <i>Memento</i> and does not change or access the content of the <i>Memento</i>:</p><figure id="6e23"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*5JkSONO8GEh1J0khUGGslw.png"><figcaption>Caretaker</figcaption></figure><p id="03a5">Now you can create different <i>MatCards</i> from outside or from another class, restore them, and output their history:</p><figure id="0476"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*UirtKkTqGfhJwDUyButBFQ.png"><figcaption>Creating different states</figcaption></figure><h1 id="789f">Conclusion</h1><p id="6433"><a href="https://en.wikipedia.org/wiki/Software_design_pattern"><b>Design Patterns</b></a> are an important resource and base knowledge for every developer — they are very helpful for solving programmatic problems, help with consistent communication with other developers about system design, and serve as a significant introduction into <a href="https://readmedium.com/inheritance-object-composition-84c9539eeaf9"><b>object composition</b></a> (besides inheritance) and <a href="https://en.wikipedia.org/wiki/Dependency_inversion_principle"><b>dependency inversion</b></a>.</p><p id="280d"><i>Behavioral Patterns</i> deal with algorithms and assignment of responsibilities to objects. Furthermore, they describe mutual communication patterns and grasp complex program sequences. They are therefore very well applicable in areas where complicated code needs to be made readable and maintainable. Extensions are, in consequence, very good and quickly implementable.</p><h1 id="3a44">Code example on Github</h1><div id="3c31" class="link-block"> <a href="https://github.com/Itchimonji/design-patterns-in-typescript"> <div> <div> <h2>Itchimonji/design-patterns-in-typescript</h2> <div><h3>Simple prjoject to train Design Patterns. Contribute to Itchimonji/design-patterns-in-typescript development by…</h3></div> <div><p>github.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/0*xj2Epak4DPEbLlSb)"></div> </div> </div> </a> </div><h1 id="5d55">Learn More</h1><div id="59aa" class="link-block"> <a href="https://readmedium.com/strategy-cheat-sheet-47706f39c2ad"> <div> <div> <h2>Strategy | Cheat Sheet</h2> <div><h3>Behavioral Pattern — Design Patterns Series</h3></div>

Options

    <div><p>medium.com</p></div>
          </div>
          <div>
            <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/1*bVHr6BRMyfLJNsEsCu_9Fg.png)"></div>
          </div>
        </div>
      </a>
    </div><div id="6777" class="link-block">
      <a href="https://readmedium.com/composite-cheat-sheet-6c463a11b3df">
        <div>
          <div>
            <h2>Composite | Cheat Sheet</h2>
            <div><h3>Structural Pattern — Design Patterns Series</h3></div>
            <div><p>medium.com</p></div>
          </div>
          <div>
            <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/1*ZY1MpF5NT0jW9_2G5N5HfA.png)"></div>
          </div>
        </div>
      </a>
    </div><div id="4ad6" class="link-block">
      <a href="https://readmedium.com/how-to-monitor-a-distributed-system-with-a-nestjs-application-edb86d170d4e">
        <div>
          <div>
            <h2>How To Monitor a Distributed System with a NestJS Application</h2>
            <div><h3>Let us take a look into NestJS’ internal healthcheck module, and combine it with a Prometheus client</h3></div>
            <div><p>medium.com</p></div>
          </div>
          <div>
            <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/1*yvk5gRNb-8LbOwRq__-mbg.jpeg)"></div>
          </div>
        </div>
      </a>
    </div><h1 id="dff3">Resources</h1><div id="1c0c" class="link-block">
      <a href="https://www.informit.com/store/design-patterns-elements-of-reusable-object-oriented-9780201633610">
        <div>
          <div>
            <h2>Design Patterns: Elements of Reusable Object-Oriented Software</h2>
            <div><h3>Capturing a wealth of experience about the design of object-oriented software, four top-notch designers present a…</h3></div>
            <div><p>www.informit.com</p></div>
          </div>
          <div>
            <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/0*fr7Wge0uQB3vslgN)"></div>
          </div>
        </div>
      </a>
    </div><div id="09dc" class="link-block">
      <a href="https://refactoring.guru/design-patterns">
        <div>
          <div>
            <h2>Design Patterns</h2>
            <div><h3>Design patterns are typical solutions to common problems in software design. Each pattern is like a blueprint that you…</h3></div>
            <div><p>refactoring.guru</p></div>
          </div>
          <div>
            <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/0*EWbf1LuaX2vSuV88)"></div>
          </div>
        </div>
      </a>
    </div></article></body>

Memento | Cheat Sheet

Behavioral Pattern — Design Patterns Series

Mementos are very important when you need to store and restore a long history of complex object structures. This includes, for example, undoing or redoing drawings (e.g. in Photoshop or in CAD systems), music compositions (e.g. using Cubase), or videos (e.g. in Sony Vegas).

Real-life examples

  • Volume control on the TV: You set a certain volume and then switch to “muted” mode. After leaving this mode, you end up at the previously set volume.
  • Any GUI editor with undo or redo commands (Photoshop, text editors, …)
  • Calculator
  • Database transaction: if a transaction with all its operations fails, it can be rolled back easily

Meaning

  • Capturing and externalising the internal state of an object without affecting its capsules
  • Objects can be returned to a different state from a later point

Applicability (suitable if …)

  • The state of an object (or a part of it) needs to be saved, so it can be restored at a later stage
  • A direct interface to retrieve the state would reveal implementation details and compromise the object’s capsules

Assets and Drawbacks

  • Maintaining encapsulation boundaries — avoiding the release of information to the outside world
  • Simplification of the originator — the burden of memory management is on the originator and one thus has information control
  • The use of mementos can be laborious (when copying large amounts of information)
  • Hidden effort in managing mementos at CareTaker (e.g. large memory management load when saving mementos)

Example

In the following example I backup the current style and its descriptions of an Angular Material card. First of all, we need an interface and a concrete class for this. To use Dependency Inversion at a later stage, you need an interface for the card:

MatCard — An object whose status is to be saved

After this, you can create the Memento class to store the internal state of a MatCard. Additionally, you can add a date to ensure the right edit order:

Memento

Afterwards, you need an Originator which is responsible for state handling. It creates a Memento that contains a snapshot of its current internal state. With this, different states can be restored, too:

Originator

The Caretaker is responsible for safekeeping the Memento and does not change or access the content of the Memento:

Caretaker

Now you can create different MatCards from outside or from another class, restore them, and output their history:

Creating different states

Conclusion

Design Patterns are an important resource and base knowledge for every developer — they are very helpful for solving programmatic problems, help with consistent communication with other developers about system design, and serve as a significant introduction into object composition (besides inheritance) and dependency inversion.

Behavioral Patterns deal with algorithms and assignment of responsibilities to objects. Furthermore, they describe mutual communication patterns and grasp complex program sequences. They are therefore very well applicable in areas where complicated code needs to be made readable and maintainable. Extensions are, in consequence, very good and quickly implementable.

Code example on Github

Learn More

Resources

Design Patterns
Memento
Behavioral Patterns
Cheatsheet
Summary
Recommended from ReadMedium