Command Pattern - Design Patterns
Вставка
- Опубліковано 29 вер 2024
- 🚨 IMPORTANT:
1 Year Free Hosting: www.atlantic.n...
Use code KYLE for an additional $50
The command pattern is probably my favorite design pattern, because of all the fun things you can do with it. The idea of the command pattern is to create an abstraction between the operations an object can do, its commands, and the actual commands themselves. This makes it really easy to combine together or chain different commands without having to change the code. The program can dynamically chain and combine these actions. The best part is since each command is its own object you can easily implement and undo function for each command and make a set of undo-able actions.
📚 Materials/References:
GitHub Code: github.com/Web...
Design Patterns Playlist: • What Are Design Patterns?
🧠 Concepts Covered:
- What the command pattern is
- Why the command pattern is important
- How to implement the command pattern in JavaScript
- When to use the command pattern
🌎 Find Me Here:
My Blog: blog.webdevsim...
My Courses: courses.webdev...
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/Web...
CodePen: codepen.io/Web...
#CommandPattern #WDS #DesignPatterns
Ideally "undo" shouldn't take any parameters and the command class should be immutable, storing the "currentValue" itself, so undo is assured to reverse the original command.
this was really clear and helpful : ) ! thank you !
I get how the pattern is implemented, but I'm not sure what problem does it solve. The "why" is more important than "what" or "how".
I was thinking the same.
CQRS for example, is based on commands and events. Every modern event driven microservice architecture build the right way, use commands and events.
Maybe it helps to think about the three examples given (calculator, save/save&exit/exit, bold/etc text), or any situation where you would need to manage the state of a variety of ‘tools’, and how much more complicated our code might be to do it if we didn’t know this pattern
think about implementing chess game.
This pattern makes even more sense in a static typed language where you can create a "Command" interface, which the Commands extend.
It'll be way easier to implement in typescript.
How can we implement this in java ? Especially the Calculator class
@@abhayanavkar2243 You can use Stack commandStack = new Stack(). Declaring it this way will allow you to push() every object that implements interface Command. And when you'll want to use undo() write: Command last_command = commandStack.pop();
Hope that helps :)
Love your consistency!!! I gotta ring that bell to be notified when you post new videos :)
Better donate some cash! Help the coder out!
For doing save and exit i find this kinda overengineered. You could also just call Save () and then Exit() inside the Save&Exit and you would not have to duplicate anything. Also for Save and Exit.. Providing an undo is not really something that's is useful and should be done
Well, dont take it literally. Its an example to show you that you can compose commands. SaveExit command can also do some additonal stuff, e.g cleanup(); save(); exit().
But in that way maybe you eventually have to pay extra attention for the undo part ? Because if a function is sort of irreversable (i mean, in case you can't track of the original value just by doing the other way around) e.g in the typical case user put 0 as a multiplier. And because the undo part is coded in a bit of hard coded way, so there could be many cases you can't come back to the initial value and then you have to add extra code to fix it although it doesn't necessarily hurt the worth of pattern itself. Just a thought.
That is a really good point. In cases like these one thing you can do is store the previous value inside the command class for the undo operation.
Glad to see some sponsorship on your videos. These are hands down the best js videos ive ever seen, and you deserve to be compensated for them. Thanks!
Thanks! I was a little worried doing a sponsorship that it might annoy people but I am glad that it doesn't bother you.
@@WebDevSimplified Yep not an annoyance at all. As long as the sponsorship ads are fairly relevant and concise(60-90 seconds is probably about the longest a plug should last imo) then you're golden. Keep up the awesome work. You've taught me a ton!
Thank you so much for showing this example without complicating it with threading as some examples do. This was very clearly explained!!
This is sick! I definitely need to practice it as it's still really confusing, but you did a great job explaining it and how it could be used sort of like Lego or higher order functions (I think that's where you have a function that calls other functions right? :P ) Still pretty new. Thanks for your great videos.
hella fucking confusing.... break this shit down even further bro....
Hello, thank you so much!
But you don't need to creating so many class as AddCommand, DivideCommand, etc
You can create Command class and code as:
class Command {
constructor(value, method) {
this.value = value;
this.method = method;
}
execute(currentValue) {
return {
add: currentValue + this.value,
subtract: currentValue - this.value,
multiple: currentValue * this.value,
divide: currentValue / this.value,
}[this.method];
}
undo(currentValue) {
return {
add: currentValue - this.value,
subtract: currentValue + this.value,
multiple: currentValue / this.value,
divide: currentValue * this.value,
}[this.method];
}
}
And then
const calculator = new Calculator();
calculator.executeCommand(new Command(10, 'add'));
console.log(calculator.value);
calculator.undo();
If it is stupid... please comment below. Thank for reading.
That's a really great way of simplifying the code
But the problem is, your code doesn't follow open-close SOLID principle which means it's not open for extensions
For eg : you do have all the methods for doing basic arithmetic like add, subtract, etc...
But let's say you need to add square root as an option or raised to power or floor function or any other complicated function that'll take about 10+ lines of code
Your calculator class would start disobeying the single dependency SOLID principle which states each class(or file or function) should do only one complicated thing.
Hi Kyle, thank you for the content!! I noticed that you didn't build a base command class that could be extended to child commands. Would you suggest implementing a base command with a value and execute and undo methods?
It is really strange to explain pattern without abstract diagram, it could be more understandable if you had shown us an UML diagram.
I feel like executeCommand() and undo() had to return 'this'. So you could do:
calculator.executeCommand(new AddCommand(10))
.executeCommand(new MutliplyCommand(2))
.undo();
But that's just me being picky on random youtube videos :-)
That would be ideal actually. Nice point.
Yes, using fluent interfaces in this example would be great and make combinations like AddThenMultiplay like that unnecessary.
I tried this solution and it works. The problem with this approach, in my humble opinion, is that violates the single responsibility principle of SOLID. Because executeCommand() shouldn't return an object, just should execute a command.
@@dariogabalec13 If I'm not mistaken then Java Streams and C# LINQ also is in violation. Or is it the semantics of "execute" you object to? That doesn't seem like a OOP issue to me, but about naming conventions (and can be easily fixed).
@@muchograndeyolatengo It is not an OOP issue, returning the original instance is fairly common in OOP. However, it is most commonly used for things like the factory pattern.
SOLID however is a different story. While I do not believe SOLID is technically against this sort of chaining, the issues is rather that the execute method then would have multiple uses, or responsibilities as Dario put it. While not necessarily multiple responsibilities in my opinion, it allows for potentially complicated chaining which *does* go against the principles of SOLID.
I don't think you necessarily have to strictly follow a principle, it is just that, a principle. It is something you should follow where it makes sense, but it is not a law. In some cases not following a set principle is the best approach, other times it is not, which is why experience is necessary to judge the situation properly. In this case I absolutely agree that it should not return the instance. If multiple commands are to be chained, it is in my opinion better to simply loop through an array.
As for Java Streams, they don't necessarily violate SOLID, but their usage can certainly do. The issue with streams and lambdas in Java is that they sometimes become very long and bulky, making them hard to read. As a result it can be better to just assign the return value to a variable which you then use on the following row.
Depending on what you're doing in the function, it should follow those principles and all is fine. Besides, if you split literally everything into separate methods, you'll have a massive hell to work through, not to mention naming the damn things.
But what if the command is not reversible?
Like for example after scaling an image down you cannot scale it up because you lose information. Should then be used a history of state there, and for undo you pick the last state of your object / application - but this may increase memory usage for large objects like images / videos?
Just save the initial state rather than try to calculate the original state. That's a bad idea regardless of the required computational power as it can lead to other side effects such as floating point variances, funky things happening to strings due to encoding, etc. It's better to instead just save the state somehow.
The clearest and illustrative way explaining design pattern I ever get.
An undo function that needs to be cognizant of the previous operation isn't really an undo however... There are some commands that you potentially cannot undo either (i.e. bitshifting where you've lost bits). A far better demonstration would've been to cache the original value, and it would've also saved on computations.
SaveExit() { this.save(); this.exit(); }
I mean, you would be a top computer teacher in a university or bootcamp
Thanks a lot Kyle, this is the first time I've seen this.
Hi I love you video the way u built it. Thks for all u efforts take to explain the concept.
this was so clear and easy to understand! doing a great job!
Back then i did not learn Command the way you explain, it had just en execute() method, no other method, no parameters, everything was wrapped before the call, which is very similar to the implementation of Runnable in java. Still, I had to implement some cancel operation, and I did not need to divide a value but just return the initial value that was passed on at the construction time
The command pattern can be implemented pretty much however you want. The main thing to keep in mind is that the interface should be uniform; in fact, if you have access to interfaces in the language you're using, you should use them. That way you can add instructions that the executing class can use.
What you mentioned regarding just returning the original value on cancel/undo is the better approach as it reduces computational power. In fact, I slightly disagree with what was done in this video. If using the principle you mentioned, it would be enough to simply have one execute method, the calculator itself can worry about dealing with the history, not the commands.
Combined with statechart machines and you can make some impressive systems.
This is randomly getting recommended now!
Do more on design pattern, please!
this video was amazing
too much staring o.o
Hey Bro are you using any extension for not using semicolons...please tell🤔🤔🤔🤔
Nope. Semi colons are optional in JS
@@WebDevSimplified Try to use them as a standard because you very often have to use them with TypeScript. that said - u can use Prettier connected to an Eslint rule that will add the semi-columns for you.
why arent your eyes blinking?
What are u using to code??
He uses vscode
Clear explanation, only this seems like a lot of overhead compared to using the functional style of composing curried functions?
Thank you
Thank you for everything Incredible videos, keep going
great, thx!
what are the possibilities, I got told this is a good way of controlling what type of action/function I want to be called at a specific times, for example a turn base system.
Nice and clean explaination of the command pattern.
How do you record sound? It sounds like some "noise reduction" option is enabled and it destroys the sound...
I am using OBS, but I agree something sounds off. I really need to sit down for an hour or so with someone who knows audio really well and go through my setup.
@@WebDevSimplified Just follow this instructions but turn off all options.
techtalk.currys.co.uk/gadgets/smart-home/how-to-reduce-microphone-noise/
Lovely! I've been around for a bit and it reminds me of the postFix notation in Forth, SmallTalk and a few other languages. What it comes down to is that you first push values (operands) onto a stack followed by the operator. So rather "3 5 +" then "3 + 5". In this example, "3 5 +" pushes the numbers onto the stack because they are numbers/operands. The "+" is recognized as an operator. and It'll add the 2 numbers by pulling them from the stack and pushing the result "5".
I am not sure if this was actually implemented in SmallTalk but you can easily manage history by adding markers to the stack in the same way as try/catch (and a few other "GOTO's in disguise") work.
Stacks are just arrays of objects and can be easily inplemented in Javascript ;-)
Anyway: thanks for all your efforts to share you knowledge in a very accessible way!
Ed
add undo limit because calculator will use more RAM every time command is executed
Hey ..can u tell which design pattern is used in Modern web React-redux application?
83th
Weird. 2 years ago.
indeed the execute() method shouldnt receive any parameter
Design patterns 👍💪🤓
Bro can you please explain me function closures in JavaScript please ..please ..please..
Good idea is to use Dependency Injection, creating for example Device interface, so you can have multiple devices which are implementing the interface, like Calculator, Remote, etc.
You can create the class ExecuteCommand, with constructor require the interface Device, so you can do something like this:
Class ExecuteCommand {
constructor(Device insertDevice)
execute(DoCommand);
undo(UndoCommand);
}
executeCalcurator = new ExecuteCommand(new Calculator)
executeRemote = new ExecuteCommand(new Remote)
executeCalcurator->execute(new AddCommand(10))
executeCalcurator->undo(new SubtractCommand(10))
executeRemote->execute(new AddVolume(10))
executeRemote->undo(new SubtractVolume(10))
etc, etc...
Note: My pseudo code reminiscent on PHP, the language I usually use, so sorry about that. ;)
The calculator itself should worry about the history. I don't feel like the commands themselves should have to think much of it. However, even then it should be enough to remember the initial state, which should be set during execute. If you want to be proper, the execute command should also throw an error if it has already been run, that way you can ensure the state remains untouched.
could do video for flywieght pattern
09:45 just use functions to avoid duplication
You explained this perfectly. Thank you
Couldn't have made this concept anymore simple and easy to consume, great job!
this is kind of command pattern with integrated factory pattern
Thanks a lot man, such a great job, cheers!
What’s the benefit to using “const” rather than an “int” or “double”
There is no int or double in JavaScript. A const cannot be reassigned, modified if an object however. There are two alternatives, let and var. Most favor let these days, but var can ensure it cannot be deleted and as such will technically keep being defined even though the value itself can be undefined. They also have different scope rules.
But to answer your question; there is no reason not to, it just doesn't exist in JavaScript.
I learnt so much today, thanks Kyle!
did u just changed your shirt
Isnt this memento pattern???
Nice work. Very clearly explained, dude.
Every pattern is your favorite 😁
great explanation brother!
I am using heroku so is there any benefits of using Atlantic hosting? Suggest me
Atlantic is cheaper by a lot for the power you get but it requires you to do more devops yourself since it is just a ser we and you have to manage everything yourself. It is great for learning devops.
Which mic you are using?
can you please blink? hahaha
Loved it
Hey everyone had a awesome life until webassembly comes
Absolutely splendid!
Just love it ...
Thanks Keil
nice explanation
Always impressive
you made a good job of it!
🤯👌
I clicked the video to see your spin.
why didn't you do it.
I only ever did it in one video
@@WebDevSimplified it was about positioning in css and it was a good one.
I wanted to learn a little a bout front-end.
I have a bunch of videos on the frontend on my channel you can checkout. Unfortunately, none have a chair spin though.
One of my favorite youtubers so far. Blessings Kyle. I have been following the series and it’s great!!!
Great video, for the history array you should try out concat or the spread operator to keeps things immutable
Amaizing !!!