angular web app communication Ep13 by Karan Bhandari

Show notes and Links

https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/

Parent to Child: Sharing Data via Input

Child to Parent: Sharing Data via ViewChild

Child to Parent: Sharing Data via Output() and EventEmitter

Unrelated Components: Sharing Data with a Service

—-

Reference passing

<app-side-bar-toggle [sideBar]=”sideBar”></app-side-bar-toggle>
<app-side-bar #sideBar></app-side-bar>

one object to have a publish/subscribe interface- windows opener example
https://stackoverflow.com/a/20526386/5059472

Thunk
https://daveceddia.com/what-is-a-thunk/

Selector https://medium.com/@matthew.holman/what-is-a-redux-selector-a517acee1fe8

https://www.freecodecamp.org/news/an-intro-to-redux-and-how-state-is-updated-in-a-redux-application-839c8334d1b1/
https://cdn-media-1.freecodecamp.org/images/1*VLQNO9Apn9qfm6BPYXG8TA.png

Effects
https://ngrx.io/guide/effects

SNS https://github.com/KMIntelligentSystems/SNS-web-worker-Angular-2

Ngrx socket io
https://github.com/avatsaev/angular-contacts-app-example

Signal r

https://github.com/Odonno/ngrx-signalr#readme

ngrx index db
https://www.npmjs.com/package/ngx-indexed-db

sync-your-state-in-local-storage-with-ngrx
https://medium.com/better-programming/sync-your-state-in-local-storage-with-ngrx-9d6ceba93fc0

https://angular.io/guide/service-worker-getting-started
A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction. … Before service worker, there was one other API
that gave users an offline experience on the web called AppCache.

https://medium.com/bb-tutorials-and-thoughts/communication-patterns-in-angular-9b0a829aa916
ng store
We can have a shared module which is imported in Modules and use the services to share data.
Communication using content projection

FILES
https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications
createObjectURL

https://www.html5rocks.com/en/tutorials/file/filesystem/
https://w3c.github.io/FileAPI/#slice-method-algo

Approximate Audio Transcript

Well hello Internet technology buffs. This is technology. I think podcasts brought to you by Karen Bhandari and in this episode. We are covering the topic of communication within angular applications.Our communication.Within an angular type of ecosystem like react Redux.I’m going to talk about the framework level. Things also because most of the production applications. The web applications are generally built on Vue JS or angular or react so I’m going to take the popular choice. Ann just talk about how do we communicate between components between servers between clients and just? How do you go about passing data?Well, in Anglo if you see the fire base article that I have given you in the show notes and links one can do parent to child communication by the input tag and where what you do is you just define some square braces in the.Tag or the element the custom element that you want to send data into an the other. One will have annotation on Top of a variable call at the rate input and they receive data.The other way is uh you may ask how will the child communicate back to the parent for that there is something that is a concept called, is event emitter.And for that you need to attach an output property an all you have to do is pass it into the output property dot emit an you pass the object into that emit function and the other parent will receive it. Outside using the non square braces, which is like the curved braces. So to pass data into a child. You use input to pass data from the child to the parent you use output?OK, this is for simple communication and.The more easier way is by just injecting a service into both of them.For example, if you just want to maintain the username or the user profile. You would just maintain a user service and simply use it as dot get dot store use angular properties. An you can use you can just use a global variable on a service an that’s the easiest thing to do.No, but I will also define something called, is a view child an in view child? What happens is you have reference to the.Do 2 to the child and you suppose if you are injecting something called as a child. A new element that you define within your HTML template. Then you can reference it by using something called as a view child annotation and then you can call anything of the child like the child dot something or child dot message child dot set something and you have access to the entire child elements.And uh.Yet another way of doing things like if you want a child to call the parents. Things then what you can do is in in the same input property that I had talked about in the first you pass on.You pass on you know a reference of something else like? How do you how do you reference an element in angular you just put the hash and suppose you have app sidebar you put hash sidebar and then the other one is supposed supposed navigation supposed navigation. Top horizontal line and you can just pass the sidebars reference into that and then one component can call the reference of some other component.The moose term logical thing to do is you know rely on a framework not use these bare bones things because very soon. You’ll get lossed, an which component is sharing information to another component an?It gets it gets very confusing so I would recommend you to use a frameworks like Angie RX where you define.You know a single story.A single store and.You know there is only one way communication only the reducers have capability to produce new store. You can’t just you know mutate the store. Just like that. You need to generate a new store and you don’t have to be terrified about you know, maintaining a single store. Becausr each each store can be subdivided within that OK. The store is supposed to be the single source of Truth, but logically you can.Separate them like you know that index dot JS file can refer to many elements so you can separate them by saying like OK. This is handling the stock ticker. This is handling the graph that shows the stock over 5 years. This is handling the news related to the company so you can maintain 56 toes and then reference all of them into the single store. Ann you use a framework to go about doing NGRX on Top of it?So NGRX is maintaining you know it should be a read only state an only if PR functions are supposed to update the state so this is in general. What redux is redux is nothing but you have a store, which has state an reducer is the only one that returns a new state and updates. The state and the action is the one that takes you to the radius and the reducer returns a new state so the UI.Can trigger actions like OK a button has been clicked?Nope, someone has opened a sidebar so you go and you go and start the UI keeps creating actions an you know reduces returns new state, but this paradigm is sometimes not enough. You you tend to have more complicated scenarios for example, on click click on often action. You want a server call to be made that just can’t be put into the reducer for that. You need to use something called’s effect.An actually before the effect came that unk so let’s talk about tongue and then I’ll talk about how.Effects can simplify tongue so tank is nothing but a function that returns a function. So suppose if I say get so suppose if I say that get score of a particular game. It won’t instantly. Get me the score. It will return the function that calls the HTTP call over the get in the sense.Like the trunk is a function that returns a function and this you can install a middleware and then your reducer and action can become smarter by not just updating you know by creating a new immutable state why with the help of immutability GS or with the help of things like the spread operator. You’re not just limited to that you can also use thunk as a middleware to.Make these calls, but the easier thing to do is use something called effects and effects is something that you use a method called, is create effect, an you pipe into the action an you tell OK, when I get the ad book action, I will.Go ahead and make a service call and then once it’s successful. I will fire another action then that action can update the reducer so an effect can be fired that listens to actions and then it files another action on success or failure.This is one way or this is a way where long running operations in the.US redux is possible won the simplest way is thunk, but no sorry the complicated waste hunk and the simpler ways effects. So NGRX has a guide effect has a guy to effects. I’m putting it in the show notes and.Most of the applications are riquier playing around with not just you know their data within themselves within you know communication. They also need to refer to server so for that. Of course, you can use a service rap it up with HTTP you can rap. The HTTP within a service. An yeah that service could be called from a chunk or from the effect.How however there are some more or scenarios for example, if suppose you have a fire and forget call or maybe a chat window. An you sometimes after 15 minutes or 20 minutes of server wants to talk to you, you just.Well hello Internet technology buffs. This is technology. I think podcasts brought to you by Karen Granddaddy and in this episode. We are covering the topic of communication within angular applications.Or communication within an angular type of ecosystem like react Redux.I’m going to talk about the framework level. Things also because most of the production applications. The web applications are generally built on Vue JS or angular or react so I’m going to take the popular choice. Ann just talk about how do we communicate between components between servers between clients and just? How do you go but passing data?Well, in Anglo if you see the fire base article that I have given you in the show notes and links one can do parent to child communication by the input tag and where what you do is you just define some square braces in the.Tag or the element the custom element that you want to send data into an the other. One will have annotation on Top of a variable call at the rate input and they receive data.The other way is you may ask how will the child communicate back to the parent for that there is something that is a concept called, is event emitter.And for that you need to attach an output property and all you have to do is pass it into the output property dot emit an you pass the object into that emit function and the other parent will receive it. Outside using the non square braces, which is like the curved braces so to pass data into a child you use input to pass data from the child?The parent you use output OK this is for simple communication and?The more easier way is by just injecting a service into both of them for example, if you just want to maintain the username or the user profile. You would just maintain a user service and simply use it as dot get dot store use angular properties. An you can use you can just use a global variable on a service an that’s the easiest thing to do.No, but I will also define something called, is a view child an in view child? What happens is you have reference to the.Do 2 to the child and you suppose if you are injecting something called as a child. A new element that you define within your HTML template. Then you can reference it by using something called as a view child annotation and then you can call anything of the child like the child dot something or child dot message child dot set something and you have access to the entire child elements.And uh.Yet another way of doing things like if you want a child to call the parents. Things then what you can do is in in the same input property that I had talked about in the first you pass on.You pass on you know a reference of something else like? How do you how do you reference an element in angular you just put the hash and suppose you have app sidebar you put hash sidebar and then the other one is supposed supposed navigation supposed navigation. Top horizontal line and you can just pass the sidebars reference into that and then one component can call the reference of some other component.The moose term logical thing to do is you know rely on a framework not use these bare bones things because very soon. You’ll get lossed, an which component is sharing information to another component an?It gets it gets very confusing so I would recommend you to use a frameworks like Angie RX where you define.You know a single story.A single store and.You know there is only one way communication only the reducers have capability to produce new store. You can’t just you know mutate the store. Just like that. You need to generate a new store and you don’t have to be terrified about you know, maintaining a single store. Becausr each each store can be subdivided within that OK. The store is supposed to be the single source of Truth, but logically you can.Separate them like you know that index dot JS file can refer to many elements so you can separate them by saying like OK. This is handling the stock ticker. This is handling the graph that shows the stock over 5 years. This is handling the news related to the company so you can maintain 56 toes and then reference all of them into the single store. Ann you use a framework to go about doing NGRX on Top of it?So NGRX is maintaining you know it should be a read only state an only if PR functions are supposed to update the state so this is in general. What redux is redux is nothing but you have a store, which has state an reducer is the only one that returns a new state and updates. The state and the action is the one that takes you to the radius and the reducer returns a new state so the UI.Can trigger actions like OK a button has been clicked?Nope, someone has opened a sidebar so you go and you go and start the UI keeps creating actions an you know reduces returns new state, but this paradigm is sometimes not enough. You you tend to have more complicated scenarios for example, on click click on often action. You want a server call to be made that just can’t be put into the reducer for that. You need to use something called’s effect.An actually before they affect came that unk so let’s talk about tongue and then I’ll talk about how come?Effects can simplify tongue so tank is nothing but a function that returns a function. So suppose if I say get so suppose if I say that get score of a particular game. It won’t instantly. Get me the score. It will return the function that calls the HTTP call over the get in the sense.Like that unk is a function that returns a function and this you can install a middleware and then your reducer and any action can become smarter by not just updating you know by creating a new immutable state why with the help of immutability GS or with the help of things like the spread operator. You’re not just limited to that you can also use thunk as a middleware to.Make these calls, but the easier thing to do is use something called his effects and effects is something that you use a method called, is create effect, an you pipe into the action an you tell OK when I get the ad book action, I will.Go ahead and make a service call and then once it’s successful. I will fire another action then that action can update the reducer so an effect can be fired that listens to actions and then it files another action on success or failure.This is one way or this is a way where long running operations in the.US redux is possible won the simplest way is thunk, but no sorry the complicated waste hunk and the simpler ways effects. So NGRX has a guide effect has a guy to effects. I’m putting it in the show notes.I end up.Most of the applications are riquier playing around with not just you know their data within themselves within you know communication. They also need to refer to server so for that. Of course, you can use a service rap it up with HTTP you can rap. The HTTP within a service. An yeah that service could be called from a chunk or from the effect.How however there are some more or scenarios for example, if suppose you have a fire and forget call or maybe a chat window. An you sometimes after 15 minutes or 20 minutes of server wants to talk.You you just you just can’t keep actively calling the server and asking are you done are you done. You need to use something more robust like websockets or even better use something called a signal are an.You can control.So web sockets is nothing but.Instead of you calling the server the server. Collins calls you and tells you that there is new data and you just have something in the UI that says on this message on suppose score. Update you do something around it and that also has an NGRX.Hum.Implementation where you just mention that OK in one of the effects. You mentioned that I’m interested in these kind of events like score update or job done an you can then fire new actions. From there and then that can correspondingly fire new effects or updater reducer. So NGRX has a has a good example over here called angular Contacts example, you can also use something.Like push notifications you can create a topic on SNS.Amazon services some is called as SNS, an you can create the same kind of push notification effects that the mobile apps have an Chrome also has similar mechanisms like fire base over.The Google push notifications or the APN S, an Chrome can also fire push notifications.It’s with the help of Amazon. SNS then signal are you would have heard about me talking about signal or signal is nothing but a better implementation of Websockets, where where web sockets is limited to just one kind of protocol. But sometimes you browsers are different, and you may not be having.The privilege to you know have web sockets at all types of browser. Then you know signal. I can fall back to some legacy means like service center events or if that’s not available. It will go back to long polling, but signal are abstracts that away from you and there is another library called Angie Oryx signaler, which can help you with the madness of handling updates so in that they have predefined some things like you know signal are connected.See disconnected state and they also have something like on message and there, you tell that OK, you maintain a switch statement where you convey what kind of messages. You are subscribed to and then from there. You can correspondingly fire actions and that can help you to get back the information into the redux system.There is another way of communications called, is indexed DB indexed. DB is the Chrome zone index database. It’s like a sequel built into Chrome an you could write make get calls get all Kohl’s. Find Kohl’s an makes equal kind of queries on the data that you have a simulated inside, indexed DB.I know or there’s a link. I’m giving you in the show notes that talks about how you do things like migrations. For example, OK, you’re opening the database for the first time? How do you populate data into it once you add a new column? How do you fill for the data that is already there, like make the previous columns is null and go about doing migrations or you could get by key get get all get by index you can add you can count.You can update you can aggregate you can delete you can do things like that on indexed DB and a significant way? How your user uses the application is.You need to have a mix of both online and offline scenarios, and for that. I recommend that you use something called a service worker so it’s nothing service worker is not a very complicated. Concept it’s a script that runs in the background. An they use the application cash to give the application and offline experience because your user is using your application in the.He’s on the subway train and then it goes through a tunnel where the network is not there, then it comes back then. It goes away and now people are in traffic there passing by different.Organizations that have signal Jammers sometimes uhm, so you need to have a good offline experience and service worker is a good way to abstract that away so that you know you can.Kevin offline experience an ensure that you can update the application.In a graceful manner or even continued amending the application while the user is disconnected.GRX also has a time to local storage. I have given one link local storage is nothing but something if you have files under fire me or sorry data and if I am bu can keep store storing things in a key value pair in so in the Chrome has something called his local storage and.Come there is Inter module communication you can achieve by using a shared module. I’ve given a link on how to go about doing that.For example, if one organization is made or something called as you know the billing module. The other organization will make the transactions module and you want a list of accounts to be synced between the two transactions and Bill payments because you know the from account will have the same list. Then you could use a shared module to do that, or of course, yeah, the NGO Arctic store is amazing to have that kind of information.No.What about those applications that are data heavy where you know?It’s You You have a canvas and you’re trying to imagine you’re trying to make a rule designer wear your shipping and logistics is happening that OK. I draw a human and then it. I draw like a container and how the human you have some interaction diagrams that show that OK human is going to load things onto the container and then the container will be put into a TU thatyou will be shipped.And then sent so you know this logistics train to have these complicated. UI is an hundreds of analysts are working on that UI.And you wish to coordinate stuff amongst them, an for that and sometimes you know, people send you know bar code scan bar codes or you know photos on WhatsApp that OK. This particular thing is accomplished an they take a photo of how it arrived so that you know the next party has faith that OK. The product is in a good condition, then you have to use the files.Um HTML5 files API, the file system is extremely rich you can keep.Maintaining things likeOh, you know you can maintain things like logs. You could maintain things like images. You can maintain complicated diagrams and sing between them. Becausr now file entry file system has given you an advantage to work with files directories in you know sandbox environment, so Chrome allows you access to a sandbox file system.And this enables you to there is it’s called as a file system and sometimes you need to request for more quota. If you’re using the web kit. If you want to handle things more than 1GB an the user has to click on grant permissions and now you have functions like onloaded. Remove ad with both files and directories and you can also deal with sub directories an have a so suppose I and you’re going to go about doing editing.Ann you have like a background uploader and you want things to be offline. An even a Mail application can become very complicated. With you know the users attachments. Sometimes you know the user clicks on have attachment offline. An just goes back to some other screen to handle something else. You need to be able to you know have like a download manager.To cash the data as in comes in so you need to be in a position to handle you know blobs an split.The files because some of your servers have 20 MB limits on file upload so you play with blobs and you don’t directly deal with everything so the file system. API of HTML is very mature take a look at it.I know if you are very bold enough you can also like put these of sometimes you need to make this uh. You know if suppose your your your web application being served is within a docker application.And being run from Cuban 80s, then.You may need to explore into things like world volumes. Persistent volumes an storage classes, so storage classes can help you abstract away things like as your file share over the blob storage OK. That’s getting 2 advanced but possibilities are endless. There are various ways of communicating with in angular across angular 2 angular from angular.Boot a two way communication one way communication simplex Multiplex duplex. Numerous scenarios are there. We have covered not just component component communication, but also things like reference passing thunk selectors?But then in getting into the code of redox you have things like.Effects I know the central point of store you have the socket. IO to have asynchronous updates signaler that is a higher level wrapper over sockets. IO there is a database type of environment using indexed DB you have the local storage where you can store the key value pairs, which are on fire. MB and then the entire file system is open to you make sure that you also leverage service workers to have a good offline experience.I know I’ll take a look at the files API. It’s capable of doing very complicated. Things your web you will be surprised to know a web application can actually replace your their desktop application.And all the best keep communicating.Keep um ensure that nothing is stagnant.The communication will ensure that the water body flows an it should not be stagnant like a Lake. Otherwise, it will start rotting let the reverse flow through channels of.Productivity andmitigate the fields of.Progress this is me current binary, signing off. I’m a developer and a technical lead at associated generally working in the innovation team. My LinkedIn is LinkedIn my user handle is in LinkedIn is KURTZACE my Twitter handle is Khurd says. And you could drop me an email at curves@aol.com so keep communicating keep the wheels turning.This is me current my daddy signing off bye.