Command & Memento Patterns in Typescript (No BS TS Series 2 Episode 4)

Let's have a look at the Command and Memento Design Patterns in TypeScript and see how to implement Undo, and time-travel state management the easy way. We even build out a custom hook that adds undo functionality to useState!

👉 What's my theme? Night Wolf [black]
👉 What's that font? MonoLisa

00:00 Introduction
00:49 Architecture of the Command Pattern
01:25 Project setup
02:05 Command Pattern with Classes
08:45 Command Pattern with Functions
15:00 Command & Memento Architecture
15:35 Command & Memento with Classes
18:30 Command & Memento with Functions
20:20 React application with useStateWithUndo
25:37 Outroduction

Thank you for watching this video, click the "SUBSCRIBE" button to stay connected with this channel.

#typescript #nobsTS

[WesleyHandy]

Folks, you will get the best out of these videos if you code along with him. Stop and start to keep up with the pace. But doing will really help solidify the principles.

These are useful and helpful examples, Jack!

[matthew]

Jack you are killing it this year. You really are filling the void of intermediate/advanced topics in web dev ecosystem. Almost everything is beginner only.

[robwatson]

This was one of my favourite videos of yours to date. A great topic and some really interesting (and surprisingly simple) implementations! Great stuff Jack

[aminomar]

His book “NO BS TS”, is very valuable, he is talented as a teacher too, I suffered a lot by jumping from place to place, there was no good explanation, missing important points, especially I am not that type who just keep digging without understanding the details, I wasted a lot of time till I found his valuable book.
I can’t recommend it enough!

[kr]

Absolute perfection when it comes to explaining these topics with the examples, practical uses and different coding styles.

I don't know if this would be useful as a future video idea, probably a very niche topic, but it could be cool to have the CommandStack tag each command with an id and maybe return the id on the execute method of the CommandStack class. It could extend the functionality to be able to undo only a specific command in the stack, or async undo. The `git revert` command comes to mind, but also other programs that show you the history of changes as a list to the side

[info]

Could we use Private class features instead? since they're truly private variables.
Thanks a lot for your high quality content

[eminqasimov]

I think command pattern is more flexable than memento, most times you need interact with backend api. saving json state will not be helpfull in memento, with command you can easly define undo function (doing some async api requests)

[Messirobben]

Jack, Why does your terminal says ".... on (east -1)" ?

[jemesmemes]

This should get added to the playlist. It's not in there yet.

[drvictor]

Amazing episode and series + I'm buying the book for xmass :)

One question to the Command class implementation - why is the Command defined as an abstract class, rather than an interface which the command sub-classes would then implement rather than extend?

[笙于-gc]

Master, i have a question.What `s the difference between class type and function type? And is this programming style(implement with function) belonging to functional programming, or where can I learn this kind of functional writing style systematically

[ItsAqib]

Which VS Code theme and fonts are you using in this video, Sir...??

[eminqasimov]

When I see copilot autocompletes codes it blows my mind. I am on waitlist for a long time. but still they not give access to me.
does someone know?

[aminam]

could you please mention the extension name for the sketch ?

[chauklaus]

functional programming in JS/TS 🥺 please?

[georgekalogeropoulos]

Why do you not save it as json and you save it as string

[ngneerin]

Please give examples where these patterns are used in real applications

[NolanZewariligon]

Simply exposing object's state publicly isn't the Memento pattern.

Memento should be opaque to the public - no public API.
Only the object who creates the memento should know how to handle it.

Since TypeScript doesn't have friend classes like C++, I guess Memento should be a base class with everything private except the protected constructor that creates the memento metadata, and the method that reconstructs the state from memento-ed metadata.
Then the class that derives the memento can expose the API to get and set mementos publicly without the public knowing anything about what's in the memento.
And then another class can keep the reference to the derived class and be in charge of keeping mementos and undoing.