Builder Pattern - Design Patterns

As a programmer creating objects is one of the most common things that you will do. It is so common that many of us never think twice about how we do it, but this can lead to incredibly messy code. This is where the builder pattern comes in. The builder pattern is one of the best creational design patterns for creating complex objects without complicating your constructors or code. The best part about the builder pattern is that the new changes to JavaScript allow us to create extremely concise builders compared to the traditional way of creating builders.
Design Pattern Playlist:
bit.ly/2QrGnDq
Design Pattern Repository:
github.com/WebDevSimplified/D...
Twitter:
/ devsimplified
GitHub:
github.com/WebDevSimplified
CodePen:
codepen.io/WebDevSimplified
#BuilderPattern #DesignPatterns #Programming

[@DodaGarcia]

The purpose of the Builder pattern is not just so that you can have optional parameters, it's to separate the construction of an object from its representation. Of course it's overkill if all your setters are going to be this.property = value, but it should be communicated that there's a massive benefit in using the pattern for cases where properties need to be validated before being set, or where setting them affects properties that had been set beforehand and so on.

[@KamelJabber1]

Discovered your channel today, great series of videos, deserves more views!

[@WebDevSimplified]

Thanks! I really appreciate it. I have more videos planned for this series as well.

[@jordanski5421]

I was so stuck trying to implement this functionality in my application but know I know this pattern it's made things incredibly easy, thanks for sharing.

[@jonathanmartinez7912]

Thanks for the clear and straightforward explanation of this concept! The examples you used helped me understand builders a lot better.

[@Solarium501]

I am preparing for a technical test for applying to a company and during the interview they hinted out that the test is going to be mostly about design patters. I have never heard of design patterns before and every source on the internet is confusing. However, you are just making it simple and understandable by breaking down each pattern. Thank you so much for these videos. Subscribed.

[@jetbob309]

Wish you all the best with your interview!

[@matis9783]

how was the interview?

[@brijspy]

Great stuff Kyle ! Loved these design patterns, keep up the good work :)

[@tubehelpr]

Great stuff buddy! Love these pattern explinations.

[@austinlords]

so clean. Your videos are perfect little nuggets for beginners. Enough info to understand the "why" without getting bogged down in the weeds. Thanks!

[@WebDevSimplified]

You are very welcome!

[@VibhavChaddha]

There are very few good teachers and you are one of them. Amazingly explained. Loved it. And thanks for that.

[@KyleRebstock]

This is good stuff. Glad someone did a good JS vid on this pattern. I think it would be nice to show more of the most powerful reason why you use the builder method which you did allude to at the very end. When an object ends up having to pass many objects to the constructor that could just be composed and built out with builder methods. That's where the real power shows up. Love your content. Great presentation. Would love to see more.

[@davesomeone4059]

I like short videos that only explain one thing vs long tut videos that do it all.

[@unique_god]

Imagine having builder class for every class taking care of super classes and child classes and composition

[@harshpatel7704]

Your channel is underrated. (full stop!)

[@user-tx9gj9cd8f]

Simple, useful and very clear. Thanks man for that amazing content!

[@cesarmuzio1154]

Thanks for sharing !

[@deependrajoshi199]

Beautiful article. Well explained, loved it. Thank you.

[@NoahNobody]

Another great lesson. I'm a php guy, but this is all the same theory. I think accidently created builder class the other day, but now I know what it was I made.

[@user-nt9bo3ub6k]

Great Explanation with examples! Keep it up, man!

[@DreQueary]

This is so slick. Very nice.

[@pubti]

Thanks. Pretty nice explanation, subscribed

[@barakatosalon]

Great video !!! Thanks for sharing this knowledge !

[@WebDevSimplified]

You're welcome!

[@moonshelter9137]

Thank you so much, well explained and all

[@kaicooper9421]

This is very useful. Perfect req fields

[@techuchiha6510]

Keep up the good work man!! Your channel is going to be epic one day 👍🏻👍🏻👍🏻

[@WebDevSimplified]

Thanks!

[@rolikaseventysix]

Exactly!

[@awekeningbro1207]

And now today he has 1M subs

[@helgestegemoen73]

Thanks. Trying to learn Builder Pattern in Java, and found your video very helpful 🙂

[@yinonelbaz5309]

Thank you very much!!!

[@luisrueda4476]

Good explanation!

[@fiddler-dv4or]

Thanks for the great break down in this pattern! I love that your doing design patterns for JavaScript. Have you given it any thought on do this series using proto_types?

[@GenerikV]

Really helpful. I was looking for python examples but the ones I found were making it bit too complicated, this was simple and precise.

[@joeb.1163]

Very good stuff

[@yaolegoleynik]

Thank you :) Need more pattern please

[@andersonlavor]

The first one is builder pattern. Second example is called "named parameters" , you can use it in classes and functions.

[@quanghong3922]

awesome thank you

[@amjadshadid90]

thanks a lot

[@mdsajaldeowan1054]

thanks, Kyle for the great video Kyle is it possible to remove the final build method and gets the same result if so then how

[@WhiteSiroi]

thank you

[@yaseralamoodi8314]

good video, please keep up and do more videos. thanks

[@WebDevSimplified]

Thank you. I have a backlog of video ideas so long I fear I will never reach the end of it, so you won't have to worry about me stopping anytime soon 😜

[@winter_light]

@@WebDevSimplified could you also do videos on SOLID principles. I find some of them really difficult to grasp. I purchased a course on Udemy but I always end up watching your videos to really understand how these work.

[@dudeimadolphin4318]

nice your doing so good man

[@WebDevSimplified]

Thanks!

[@sankethb.k642]

Thank you. Can you please tell how did you linked live server to javascript

[@cleverengineer2410]

You are a Legend.

[@maliksalman6504]

Thank you for Video Kyle. I actually have a doubt if we can call any parameters for multiple times in the builder pattern?

[@praveengundla1235]

Thanks a lot for your effort.. BTW in builder class methods we are setting properties of actual user object , i.e. in setphone method setting phone property of user object so user is not immutable ... So why can't we set these properties individually from the client (calling code)?

[@kinansharif5625]

Hey, can you say Backbone's way of initializing views and models, uses the second approach of the builder design pattern? Thanks !

[@natqe4049]

Thanks

[@WebDevSimplified]

You're welcome!

[@emirsalihovic6616]

Kyle, can you do a design pattern series? :)

[@fabioribeirodecarvalho2382]

I'm wondering if use the get and set method could be a way to solve this problem....thanks for the course, it help us a lot...ok I tested this way, but I realize we cannot declare a property class like private to try esolation them. So, the method getters and setters become useless in this case...I reviewed the case and we can has the private fields with # before the variable name

[@zerobit778]

One thing that the Builder could be better than named Parameters is that : When the set.... method not only need set the value solely but has other logics which may relate to other parts. Please verify my guess. Thanks~

[@shivammakwan6409]

cool...👍

[@WebDevSimplified]

Thanks!

[@idev6775]

thank you so muchh

[@soniablanche5672]

Wouldn't it make more sense to create the User object inside the build method? That way you can build as many different User object as you want.

[@JPTechForum]

Correct... Heres an example on java kzbin.info/www/bejne/Zni3lmubbKmMfs0

[@usmaness]

Great video, I wonder if there is a way to implement builder like in JS with php, regardless the original way

[@WebDevSimplified]

What do you mean? You can implement this pattern in any programming language of your choice.

[@purduetom90]

Yes, you can do the first way in PHP. Methods in a php class can return $this. Works beautifully and is a great way to eliminate the use of long parameter lists.

[@TheHuntingSpot]

Maybe I'm old school but I like the having semicolons. What does everyone else think?

[@harag9]

Interesting, thanks for this, but quick question - why no semi-colons? Are they not needed anymore in javascript?

[@WebDevSimplified]

They are not needed anymore.

[@3ab9ari1]

for the second methode is that available just in javaScript ? and why not for other languages ?

[@konstantinkkk8397]

Hi, I cannot find optional parameters on MDN or any other resourses. It looks like destructuring and thats all. No need to call it optional parameters? or I mistake?

[@abdelrhmanshokr7546]

when I use the build method it returns an undefined even though I did exactly as you did !!!

[@mahdisalem3776]

whats the idea behind creating new class called UserBuilder , we can simply add all set methods inside the class user itself ?

[@FluidEnjoyer]

Can't you create the "functions" from the first builder in the user class itself? I don't see to point of the builder object.

[@Luxcium]

I tend to keep separate objects with data value from objects with methods and properties (getters and/or setters)… what wording (or naming) could be used to describe such objects in JavaScript? I would tend to use POJO but it’s not like it is something that is without any method or I would call it a JSON like object (obviously it wouldn’t have a constructor)…

[@davidjustice2323]

Kyle, how about using optional parameters like constructor(name?, age?) ?

[@WebDevSimplified]

By default every parameter in javascript is optional.

[@davidjustice2323]

@@WebDevSimplified thanks for replying boss

[@ivanpavlovnorth]

Really useful video! But resolution options are available in the only 360p.

[@WebDevSimplified]

I am able to select 1080p resolution on this video. Maybe youtube was having some trouble when you tried to view the video.

[@ivanpavlovnorth]

​@@WebDevSimplified I familiar with that thing, but it was so strange to watch it twice on 360p on two different devices... As it turns out the problem is in Firefox on Windows 10 N. Thanks for smooth picture at 60fps.

[@TheHuntingSpot]

where did you get that boomerang in the background?

[@Klinoklaz]

What's the advantage of using a builder comparing to using setters directly in the user class? Sorry I didn't quite get it

[@maheerali531]

Why not use "Object.assign(this, options)". It prevents use to write this.address = address etc

[@eldwinc9884]

how would we implement this? Like this(?): class User { constructor( name,{age,phone,address}={} ) { User.assign(this, name, age, phone, address) } }

[@Q99a]

Hi, why we've used build method in builder class ? Like what's wrong about using builder class.

[@elhamuddin.mahmoodi]

Which theme is this in your VB Code I love it, plz name it.

[@WebDevSimplified]

It is just the default dark theme.

[@davidfonseca698]

That was funny lol

[@deansprivatearchive]

Shouldn't you use extends?

[@technomaestro6092]

Can we do this with keyword arguments like **kwargs in python

[@aryankumar87771]

is there a video on Factory Design Pattern ?

[@skalippanbalippan6972]

Why don't we just put a setter and getter inside the User class?

[@blank-vw2sb]

It's pretty time consuming to write for every single property. AND I personally don't like that interface...

[@jamshediqbal7936]

Why don't you use const instead of let, when initiating class?

[@starman9000]

Let allows to update field within the scope while CONST don't.

[@shivabansfore7510]

can we use this design pattern with react js?

[@imadetheuniverse4fun]

makes me really appreciate python kwargs

[@blackpurple9163]

So this is like the state Hook in React?

[@rnater7145]

I'm surely not understanding something. Why even use a builder class in the first approach? afaik this is valid code (assuming that each set method returns _this_): const user = new User('Bob').setAge(22).setPhone(phone)

[@r3boxx]

Where is the director. I am confused. I have seen other tutorials where they use something called a director.

[@d0paminer]

thx from Russia..!

[@jarwishroshan4298]

Hey you're posting Great Stuff man!! Thank you for that. Btw Can you show us how do you run your js files in browser? 😂

[@donnytechiera957]

Bro you make coding simplified !!

[@WebDevSimplified]

Thanks! That is the goal.

[@JimmyC0]

Why don't we just put the setters method inside the user class with constructor having one parameter "name"

[@sagyas]

Can't you just remove 'age' and 'phone' from the constructor, and put the Setters in the User class?

[@baphnie]

Exactly what I was thinking.

[@arkilisx]

agree, quite misleading....

[@faridguelmi7123]

@Sagy Assor the reason is explained at the beginning of the video

[@sagyas]

@@faridguelmi7123 in what exact time?

[@matikb.6733]

@@sagyas I agree, and believe this at 1:50 is the reason, Building is nice. Also Setters aren't better, cause the Builder implies semanticaly that We are *creating* something - the Setters on the other hand just say that You *set* something... "But on what purpose", coz the constructor is right there? - Code Viewers could ask. Plus You can feel like Java Dev with Builders - I don't believe that it's a negative name.

[@adityamishra348]

Why can't we simply use named parameters?

[@Vibestr]

builder pattern is confusing w/ all those "this' keywords.

[@fredianriko5648]

not really if you understand the meaning of "this" keyword first, try to understand it and make resume of what you understand with your own word.

[@Ali-mc4le]

Please tell me you work at google? You are damn good. Thanks for explaining this.

[@NitinKatiyarCircle]

Its painful when you write code without semicolon 😨

[@WebDevSimplified]

Semicolons aren't needed and only make the code messy in my opinion.

[@NitinKatiyarCircle]

@@WebDevSimplified I find them make code more clear. When changing syntax in multiple line then it make it clear where it ends. Visual studio 2017 also show an error when do not use semicolon. Also it brings c# and other serverside languages closer to js. Well it's just me. Everyone has their preferences.

[@xBZZZZyt]

//why not just do this: class User{} var user=new User(); user.name="asd"; user.address=new Address("1","main");

[@mattmaloney5988]

Please do a hair styling tutorial.

[@olegsuprun7590]

Im sorry but this is not a classic builder pattern, you also have to implement a director class, and pass a builder object to it , then call construct() on the director and get product from builder

[@guitarboy12]

Why can't a C++ Builder Pattern be this simple? haha

[@largo17]

You should really use console.table() for these examples :)