Javascript Design Patterns #6 - Proxy Pattern

[@DevSage]

🤖 GitHub: github.com/pkellz/devsage/blob/master/DesignPatterns/Proxy.js 📕 "Design Patterns Explained Simply" Ebook - payhip.com/b/MLtJ 💙 Twitter: twitter.com/realDevSage 📙 Ebooks: payhip.com/devsage 💥 Discord: discord.gg/BP8wPv6raA

[@RudeyTV]

Nice video. Just also want to mention that if you were to follow such a pattern, be aware that you need to check for outdated data, especially if you're working with data that changes a lot. One way to do that is to also attach a Date object to that specific data you're pulling in, and add some time limit for how long something will be stored in the proxy - which will be checked every time you try to fetch something via it. If you want to do a lot of this, it's worth checking out Redis, a cache database.

[@DevSage]

Thanks for the tip!

[@sbr4339]

@@DevSage Yeah those prices definitely seem to be outdated by now

[@CottidaeSEA]

It's easy enough to just clear it with setTimeout. Let it be cached for 10 minutes or something like that. if (cache[key] === undefined) { cache[key] = fetchFromApi(); setTimeout(function() { cache[key] = undefined; }, 10 * 60 * 1000); // 600000 ms but easier to read just for the sake of the example. } return cache[key];

[@georgegolovchiner657]

Hash comparison between proxy and the original object is required. So there should be at least one network call to the original to verify cache validity.

[@neuodev]

this video is my "Proxy" for Design Patterns!

[@GopalSinghR1]

Thanks man this is crystal clear explanation

[@TheArmanist]

Looks like more as singleton pattern..

[@zikrilariliusra4737]

Nice and clear explanation. i hope your channel will grow up like thenewboston and traversymedia

[@DevSage]

I appreciate it

[@js_programmer8423]

can you actaully use this example in the real world or would i need to set up a real cache? like setting up cookies? or is cache basically a proxy pattern itself?

[@DevSage]

Really depends on what your application needs to do. Having the cache built in the code here is obviously just for example purposes, but if you had a real life web application that lived on a real server, yeah you probably would need to implement the cache in a different way (like using a Redis instance as the proxy, or using browser cookies etc). The cache is more just the idea, how you implement it is completely up to you.

[@js_programmer8423]

@@DevSage got it, thanks !

[@theotherme9965]

Is this the pattern used for service workers?

[@DevSage]

Yes. Good observation

[@pawandeore1656]

but now don't we have the problem of stale data? how to deal with that

[@kirillpavlovskii8342]

great, I like this teaching style , it would be nice to do patterns on TS

[@vasurangpariya8492]

I have question that we can also impliment features in main function then why we need proxy pattern

[@mahdiali4299]

Thank you very much, but you haven't used Proxy keyword in the code. This is Proxy pattern or memoization pattern?

[@hadibohluli5207]

by far best explain for design patterns , I appreciate it, please make Adapter pattern video

[@satlibwanzai111]

Thank you Sage. But why would you declare cache as an object, then use it as an Array? Why don't you declare cache as an array in the first place?

[@DevSage]

I'm not using it as an array. The 'cache[coin]' syntax is an ES6 feature known as 'computed property'. 'obj' is an object and 'coin' is a variable. Javascript automatically uses the value of the variable and creates a new property on 'obj' with the value of that variable. Example const obj = {} const coin = 'bitcoin' obj[coin] = 'hello' // this is the same thing as obj.bitcoin = 'hello'

[@TimWinfred]

Awesome video! Thank you!!!

[@DevSage]

You're welcome! 🤙

[@clingyking2774]

I think this is also reffered to as facade pattern

[@tommyshaw2420]

but wait im confused....If you cashe the value, then the value will not update? so when the value changes on the other end you wont know?

[@DevSage]

You are correct. This example could be modified in a way that cached values store a timestamp as well as the coin data. Whenever you call the proxy, check to see if the timestamp of the previous call is 'too old'. If it's old, call the API and store the new value.

[@johnsonye7124]

@@DevSage what if handling real time data? If set timestamp for the cache, it still not going to get the data update in real time. How can we use observer pattern to handle real time data?

[@developerAKX]

Love form India bro

[@developerAKX]

Thinks bro

[@unicrix]

I wanna know about ES6 proxy instead of this. But thanks for making this video, this is a nice design pattern.

[@georgegolovchiner657]

ES6 adds syntactical sugar, however it's useful to know the basics first, so this video is still very useful for a novice

[@raymondmichael4987]

Dude you're doing such a great work bro. But can adjust that theme, it's too dark. Otherwise I learned a lot. Greetings from Tanzania 🇹🇿

[@DevSage]

Thank you

[@be2wa]

What's too dark? The contrast is OK, so it's readable and it doesn't tire your eyes like the white theme. If anything is too dark then it's probably your monitor