Javascript Design Patterns #6 - Proxy Pattern

What is a proxy object?
A proxy object is an object that acts as an interface (or placeholder) for something else. The proxy could be an interface to anything: an API, a network connection, a large object in memory, or some other resource that is expensive or impossible to duplicate.
A proxy is a 'stand-in' object that is used to access the 'real' object behind the scenes. In the proxy, extra functionality can be provided, for example caching when operations on the real object are resource intensive, or checking preconditions before operations on the real object are invoked.
📚Materials/References:
GitHub Code: github.com/pkellz/devsage/blo...
"Design Patterns Explained Simply" Ebook: payhip.com/b/MLtJ
🌎 Find Me Here:
Twitter: / realdevsage
Ebooks: payhip.com/devsage
Discord: / discord
Merch: cottonbureau.com/people/devsage

[@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];

[@neuodev]

this video is my "Proxy" for Design Patterns!

[@GopalSinghR1]

Thanks man this is crystal clear explanation

[@kirillpavlovskii8342]

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

[@zikrilariliusra4737]

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

[@DevSage]

I appreciate it

[@TimWinfred]

Awesome video! Thank you!!!

[@DevSage]

You're welcome! 🤙

[@hadibohluli5207]

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

[@unicrix]

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

[@developerAKX]

Love form India bro

[@developerAKX]

Thinks bro

[@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'

[@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

[@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 !

[@mahdiali4299]

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

[@vasurangpariya8492]

I have question that we can also impliment features in main function then why we need proxy 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?

[@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

[@clingyking2774]

I think this is also reffered to as facade pattern

[@TheArmanist]

Looks like more as singleton pattern..