137

AiA 137 NGRx with Mike Ryan


NGRx with Mike Ryan

On today’s episode, Charles Max Wood, Ward Bell, and Alyssa Nicoll discuss NGRx with Mike Ryan. Mike is a senior software engineer at Synapse Wireless, Inc. in Huntsville, Alabama and is a core team member of NGRx. What he does in work is that he builds real-time interactive UIs for industrial applications. Stay tuned to learn more about what NGRx and what he currently enjoys doing related to web development!

10,000 Foot view of NGRx

There are a lot of problems when you build large-scale reactive applications with Angular. NGRx tries to solve these problems with high quality small reactive libraries. It focuses on bringing more reactivity to APIs that are typically found in the core framework and on improving the developer experience.

Understanding Reactive Programming

Reactive programming is defined as how we react to changes, whether those changes come from the outside of the domain model or in the actual state itself. This also concerns building applications that react to those changes, which results in a reactive cycle formation.

This paradigm does not perfectly fit all applications. However, you can test reactions and model your state as it changes over time when you build real-time applications. This provides a very good model for modeling those kinds of applications.

The Role of RxJS

RxJS defines operators and provides a domain that specifically works with observables. These observables are taken and problems are solved using them. It' not a huge collection, as it only contains three or four main libraries. These libraries are considered as part of the NGRx organization.

RxJS, with any framework, comes with its own opinions with how certain things are done. For Angular, it comes with a module in how to handle HTP requests and routing. Although these solve specific problems, it still doesn't state anything about application management or where side effects are supposed to be isolated.

To hear more about NGRx with Mike Ryan, download and listen to the entire episode. Connect with Mike on Twitter and Github. He would surely love to hear from you! Don't forget to tell him that you heard about him on Devchat.tv.  

Picks:

Alyssa: NG Conf 2017

Ward: NGRx

Charles: Newly built desktop machine running Windows 10, Pamela, and movavi

Mike: NGx charts and Angular CLI

Episode Links:

NGRxReactive Programming, React, RxJS, RxJS Operators, Redux, NGRx/store, Flux, NGRx/effects, NGRx/router-store

This episode is sponsored by

comments powered by Disqus

TRANSCRIPT

AiA137 ngrx with Mike Ryan

Transcript

[0:00] Music.

[0:05] Everybody and welcome episode 137 of the adventures name of the show this week on a panel we have Ward Bell.

Hello everyone I’ll listen I call hello Charles Max wood from Dev Chat. TV.

And this week we have a special guest and that’s Mike Ryan Hey everybody do you want to give us a brief introduction since we haven’t had you on the show before.

[0:31] Sure so I’m a software engineer at an industrial iot company in Huntsville Alabama and I get to build.

Real-time interactive you eyes for industrial applications.

In addition to that I am a core team member of index.

[0:52] And I guess we can see the connection there because you have stuff to observe and it sounds like Angie Eric has something to do with a gerbil.

[1:02] That would be linking there for sure do you want to try to give us the 10,000 for you of what ngrx is.

[1:12] Yeah so we fight there’s a lot of problems when you’re trying to build.

Large-scale reactive applications with each other and to enjoy this is where the organization trying to solve these problems with high quality small reactive libraries silver focusing on.

Bringing more reactivity to a guys that aren’t typically found in the core framework.

Also improving the developer experience making sure that is really easy to use these tools to bring them in and to build well-tested features with them,

for the word reactive is kind of like soup du jour and everybody there’s even a framework for everybody’s benefit can you,

firstly explain what you mean by reactive and contrasted.

Are you looking to expand your skills mobile development have an idea for the next Angry Birds app.

Then you need to check out iOS remote off produced by the same team that brings you your favorite Dev Chat. TV podcasts like Ruby Rogues and I freeze.

Join us for two days are jam-packed fun and learning stream2u Live May 17th and 18th go check it out at iOS remote comp.com.

You mean by reactive and contrasted so.

[2:41] Put it very simply I view reactive programming as programming and away we are reacting to changes,

whatever changes are coming from outside your domain model whether it is your actual State changing and billing applications that reacts of those changes,

bring to Broadway what changes toward forming a reactive cycle if you will in the application and.

This Paradigm is not a perfect fit for all applications but when you’re building real-time applications but you tend to build and iot.

She has some guarantees but it’s quality you can test these reactions you can model your state as changes over time.

And it all just provides a really really sound model from all of those kinds of applications.

[3:33] So and that’s different than say the react framework per se.

Casino what has the word reactive so it must be reactive,

I thought you dripping with sarcasm did not quite come across.

But you are clearly they’re inspired by the notion of reacting to something even if it isn’t that but but but.

Proper you the reactive Paradigm is responding these events okay and you’re bringing you that together with the angular framework.

That’s crap so the NGO in the RX are the combination because our exes short shirt rxjs right,

witches are and you’re using soap so you are you’re with the way you’re handling reactivity is through our staff.

Transcript that is our building block for all of our libraries this is rxjs.

[4:40] So I’m curious if your excuse is the kind of central piece of this and everything.

Her most everything is built off of it is this just a really large collection of operators or is there more to it than that.

Select-A-Seat is the responsibility of rxjs Define those operators and to sort of provide that domain specific language for work with observables or Ribbon taking Azor taking those observables and we’re solving interesting problems with them,

Estrella large collection really had maybe three or four main library so we can sit apart of the insurance organization.

What is connecting what are excess is doing and all the great work the doing building out I really robust observable API and connecting that to the angular framework.

[5:33] So if we don’t get our itself takes a dependency on at least a small part of our acts so this is her feeling this is her saying bye,

regular sitting there it likes rxjs we like our exchange and let’s build some extra modules that some bring its capabilities around certain problems axis would you look at it that way.

Yeah if there’s any framework it’s going to come with its own opinions on how to do certain things so angular out of the box,

cars with a module to handle h2p requests and the handle routing and this all those specific problems.

But it doesn’t have an opinion how you might manage the state of your application or maybe where you isolate your side effects and so we’re taking those problems and we’re trying to create our own solutions for them.

[6:24] So one of the more hotly contested are XDS on this show at least has been the rxjs the ngrx store.

Don’t talk a little bit about what that is and how it works.

Before you even get there it would give us the label and let us some projects that you’re tackling which into your ex stories one before we go have fun with that.

[6:51] Tim and Eric store is the most popular and probably more contentious of the libraries and Hendricks organization.

And the other three really build off of store he sort of a few stories being a really big part of the ngrx offering he will.

When you’re using store we also want to provide a solution to handle side effects and in this case I’m referring to any kind of code that’s why we talking with the outside world and I request websockets time those kinds of.

Issues and that we have injured Ben,

we also want to help connect more of the angular framework to store so we have a library called injury X router store and it synchronizes the router with store and will probably get into more why the optimal thing to do a little later on.

[7:45] And then we have Deadpool’s which is one of the biggest reasons you use or buy into this way of building applications and say,

really simple to use and by that I mean you can bring in your product with one line to get really high quality instrumentation,

add ratings time travel to bug triangle application so you jump back in time to previous dates and actually see the update live in and spoke with the state is and really good.

Proper way to control the application.

The big library that people use most often jar x.

[8:24] Salt so they are all leveraging in the arc store at the store so what do I tell him about the store.

[8:35] The Indian store is a reactive reimplantation of redox and redox is.

This idea came out of the react to munity that has far-reaching history outside of JavaScript and it’s taking two patterns.

Text somewhere common patterns and bring them together to deliver this statement at the library so what is trying to sell is that saying.

You have stayed in your application and you probably want to share that state across multiple Pages or services.

Make me so damn hard to keep that stay synchronized into that everybody contribute to State changes and a way that’s easy to test an easy to bug and easy to track.

So

Interest or has this idea of a large State trade me some sort of think of it like a database and you make changes that database by dispatching actions not describe.

Now here’s how I think the state should change confunkshun.

Takes the stage and that action and provides a new state to the application and we’re at the state changes in an observable symbol component Services can then inject as a state,

making all of serve the same unified state tree together and it and that alone is what provides.

A really great way to handle State synchronization across an application.

[10:10] Yeah but in a redox I remember that being something of a challenge cuz they don’t have a good observability Paradigm as I recall the idea.

Because I didn’t let him take a dependence on an observable framework like rxjs and fire do I have that right.

So I was correct for at least the first four versions of Redux I believe it by 10 span within the past year they have recently implemented enough of the observable spec that supposed to be landing in a few transcript.

News.

ReStore in Redux as an observable today without really any other additional enter a player so so if you can use the store and relax.

I wish we know like some amount of observable happening like what what does index give us then.

Ask a question in terms of functionality nothing in fact we Ducks might have even more because buying those large ecosystem.

Hendricks store in does as were trying to really capitalize on providing a really great Aguilar developer experience so we’re going to handle wiring everything up to an injector for you we’re going to give you you know.

Try and provide lazy-loading for you we’re going to be great with the framework in ways that Redux as an independent Library cannot.

[11:35] I see okay so how much is like implemented so far.

[11:41] Everything works great today sorry I thought you know what you said we’re going to try like to wire up an injector or provide laser getting it sounded like they weren’t a hundred percent there or.

Hey it’s okay we’re coming back today I said we’re going to try and make sure that works at Lazy loading today and tomorrow it’s going to work a whole lot better.

Okay you using as in production right your iot business.

Which is the I find incredibly encouraging when somebody’s actually using it to build something yes we are delivering.

Real products built with index today to customers.

[12:25] So let’s say that I am thinking okay ngrx looks cool I want to try it out in my angler application how do you pull it in.

[12:37] Only two packages if you don’t you can store you need and Eric score which provide some common utilities which are monks all Insurance products or of analogous to angular court and I don’t need the insurance store back about that you can install from an m.

When she have those packages installed.

You can import entire store feature with one engine module and that’s part of that really high Boy available screening test speaking to earlier.

So once you have that empty module.

You need to provide will be call a producer function and a producer function as well as a living to earlier with the database analogy producer function actually is what’s going or something actions.

And changing State based on those actions so if you reduce your function and Angie module you’re ready to go can you charge an entire application you and turned into your extra to cover,

all application State or the a certain model of data that is,

relevant to your to the App Store domain mobile.

[13:45] I think it’s best for the main model we certainly see people trying to put 100% of the state of their state and interest or that’s so totally valid way to handle it I think sort of like.

Text Kevin today you can get $0.95 away there I have really gotten all the main benefits you don’t need every last piece of your state to be honest or.

[14:06] What kind of a domain model do you have what’s up what you think is particularly well suited for the NBA Oreck store.

Applications that maybe have.

Shallow relationships monster in STEEZ and are going to be updating really frequently where that’s from user interaction or maybe a website connection those are really well suited to injure extra.

[14:31] Are you able to describe for example say one of these iot things devices and what kind of a domain model or you would be monitoring and updating and stuff like that without,

breaking some seal of confidentiality,

so we’re going on a daily basis it’s called simply simply snap is a smart lighting system,

for outdoor applications and give it like a football stadiums or no big high Bay Insulation and street lights.

Those types of problems and was interesting as when you were talking about installations of that size you’re talking about thousands of Lights.

These lights are typically being control from the why they can control the intelligence where that’s coming from sensors or maybe just common light switches like we might think about our offices.

Windows light chain light levels are changing we want to represent that to the user and addition to things like power saving information and where those lights are at and so the entity model and that application is show it’s a lot of lights.

Updating really frequently and there’s a lot of them.

Having a consistent way to handle and keep the state updated for that many lights shared across only part of the single application that’s the kind of model where in drug store really shines.

Yeah that’s it here’s a news flash for people who heard me call this whole thing in the question that seems to me to be absolutely the right application for this paradise.

[16:05] I’ve got no problem with that people that sounds just right on.

Protection I mean I see all the values there are you got within is your reason across the lights,

really different voices all singing at a different time it make sense to to trigger coordinating,

actions that become as the different ones change and immutability make sense in this context to me it must make sense to you in this context,

set time to time travel so.

Has to go back in time to see okay what did the say the application look like five minutes ago and with lights that can be really important.

We have so much to that how much of that is available like that history.

It’s comparable to you inside of the box that provides the full history II have some performance implications right because if your retaining every previous,

the chart of your state you introducing every week so and production we deployed to catch the last 10 snapshots of state and it,

that’s going to really be dependent on how many actions are fire going to how frequently to actually interesting when I didn’t,

I wouldn’t have guessed that you kept the snapshots of the state but rather that you did something,

call event sourcing which is that you kept the history of the actions and you replied them against an initial state is that not how it works.

[17:38] Not necessarily so for performance reasons sometimes is going to make sense to actually capture a snapshot of the state for a given action and then when you want to remove that action or inaction of future you don’t reply every single action,

you play every action since the one you skipped,

yeah yeah I’ve seen hybrids where they capture the events but they do snapshot so they don’t have to roll back all the way that’s exactly this is doing it you know get more performance two days ago in Tulsa.

[18:12] Yeah that makes me see that makes sense to me also.

Is your trying to debug your system and when one iot devices input cat trigger some rule that causes some others,

to go in with cascading Matlock that kind of interaction could be really hard to debug if you couldn’t step through it again and again and sweet things.

But I’ve never actually worked with time traveling things like that and where you need to look back to your say are you saying that the only other option is that you have to actually roll back through all of these like versions of your stay there if you don’t take snapshots.

[18:50] So because of the way the architecture Works where you’re effectively reducing,

a series of actions you don’t necessarily have to capture SnapChat he could like we’re having tested just take out an action replay all them through a juicer that’s not particularly effective when you’re talking really are State trees at the pharmacy locations with that.

That they want to touch you could take.

[19:16] I mean I don’t do a lot of iot programming and so I’m trying to Envision.

You know what I think this is where Ward contends that this may or may not be the right approach.

What about a web application and what about maybe a little bit more complicated data.

[19:34] That’s where it starts getting a little tricky because then you have to start answering questions about your application like how life is this application how complex are my model relationships,

and it’s to be a little difficult to say okay for this application using drugstore but for this application don’t know that’s definitely research be a little fuzzy.

And know whether to apply or not.

And I wish I had those solid answers for you one clue is the consequences of side effects know most of the side effects that you’re describing are confined to changes in the model right.

The other words to make your application successful and is your step moving forward and backward in time your attraction is changing local state but it’s not like going to make credit card payment you would be very difficult to reverse.

That’s correct and that’s another reason why we’re not replaying options so the other half for the disabling Avenger X tourism GRS effects which is taking these actions are dispatching and store in triggering,

side effect code based off of them.

When we are replaying actions we don’t want to read trigger effects right we don’t want to cause that request to happen again we just want to see what the state was like in the application.

Even if you were using actions to trigger a credit card request I think that’s the main model it still work for you.

[21:06] Write it when it’s on for my money it’s when there are deep and complicated relationships within the domain,

anime model conceit not as just one entity but his ass is aware of,

things like customers orders of order line items products that and when you have to,

win the kind of changes that you’re making or stored in some on the server somewhere and I’m somebody else can make changes to that and there’s not it’s really hard to talk about,

seen the advantages of time travel in the world in which there multiple users making changes interacting at some point that you don’t control,

it can be done but the complexity starts to take off but that’s not the kind of application you’re describing.

That’s cracked if it’s an application where there’s not like a lot of concurrent users all changing the same data model and it’s an actual,

time with distance between those kind of changes and maybe doesn’t make sense to your store.

[22:16] I mean I still think it covers a lot,

we are this is why I was asking hinting at the question about whether Allstate belongs here or whether one can imagine that application that had some part of its domain model that really look like this and which of this with beautifully soda,

and I and the others may have other parts for which it wasn’t appropriate and there’s nothing wrong in my mind bringing those things together and just knowing where,

part of your domain belongs needs this treatment and Wichita the bad kind of where I was going to see if that way Mike I definitely see it that way,

I have not got no build an application like that but I can for see how you can really architect us all rebuilt out that by using interest when you bring it into application it’s not handcuff you and saying You must treat All State,

Raceway,

Heather is still angular anything checked many kinds of services and plus you can buy many kinds of observable two-door additive to a larger States to Mexico no sense.

[23:22] In the classic Redux pattern there is exactly one,

one store where and it was based on flux as I recall which had like a different store for every and any type can,

we better it might leave my instinct is that it doesn’t have to be either of those extreme can I have more than one instance of the store at the entry or exit or that covers a particular to Main and another one that covers another domain,

or do you try and keep it all in one entry Oreck store.

You can provide store you can use the store module and multiple feature models there’s nothing out of the box stop me from doing that I’d be a little concerned but I might be difficult to track which instance of store in Ponta is injecting.

To find a solution that promise I think it will,

why can’t you describe this the same pretty well it’s when you have independent new have an application at the composite of different,

a workflows different Real Models and I wouldn’t split up a domain into several indirect storage but I might have an application that involve multiple concerns multiple domains Each of which was maybe even a different lazy loaded model and where there’s no real cross.

Action between one store and another they’re just different part of your program and that’s where I would want the feature you just described does that make sense.

It does make sense and this is actually a problem with indirect store today is it does not really help you build applications that way.

[24:55] And so I’m not the one who created Insurance Rob warm old he was a telegraphic kid Google team he started this project and we’ve been working for the past couple of months it’s going okay how can we solve this problem with indirect store.

[25:10] And we have a solution for this and work on your Apple State Management where you can have some feature modular some isolated concern,

using interest or you bring it in and it just connects to a global instance without you having to think about it will handle things like conflicts for you will still get time travel to bugging for just the one instance and.

You can build your application with isolated concerns in mind.

[25:39] That’s that sounds really interesting you so can you so go ahead.

[25:48] It’s going to challenge us and it’s been a lot of work we’re currently using it internally here for our applications and it’s working pretty well we’re pretty happy with it and enables a much better,

lazy loading story you know an entire feature can music store you just bring it in and it connects for you automatically.

We want to make sure that we’re communicating developers you know when you’re injecting store.

What times does new kid whose state do you get to access for the components are still working on some problems.

Turns out he never sponsibility thank you can access which state but we hope to have it released hopefully before inch, this year well that’s awesome.

Really is like a lot of people are scared of rxjs.

They fear that they will be overwhelmed by that is that you guys have thought about this and a pair down the surface of,

we are xjs that you think most consumers of this will really need are your can you talk a little bit about that problem and how your dressing.

[26:56] Just a trim understand the question correctly you’re asking how do we.

Boil down to the essence of observables to leave like any are part of our extra that you want that’s all yours that’s why it’s there but I mean in practice as you look at the ways in which you’re using.

This product do you find that if you come down to a tax number of operators that are just part of your.

Very dated a tool bag when you’re interacting with a ninja art store.

Does your team need to master regular Jay S Voice is digital offers and other boot camp a three-day in-person workshop class or individuals or team.

Bring it to your site or send developer store hours angular bootcamp.com.

When you’re interacting with ingr.

[27:52] Yes for probably 9% of the feast rebuilding they’re probably using it maybe 6 or 7 of the same operators every time every once in awhile you know unique feature you have to do then,

haha to exist in the operator toolbelt but you’re right there is probably just the six or seven essential operators to eat no fur rxjs.

Okay what are they okay here they are map mapping values.

Do the cast of Side Effects Purge map to convert one of their verbal into another observable.

Merge to merge multiple cervical together and that might actually be a.

Dozens of used most frequently across all features you can build a lot of things with just those tools,

see that that’s the folks out there I’m like I got it all this is the same like our chances 50-60 $100 aters the but I,

I agree with Mike I feel like in day today practice it comes down to some set that some sweets at,

how much are interesting about those maybe for that it’s listed it’s everything that promise. Then right.

Panels mapping the Transformer trailer promises where he’s at your side effects and so you know they still doing applications that sort of look like the same kind of that you might have been with a promise.

[29:27] But you also have that flexibility attack and that much larger ocean of operators when you need them.

[29:36] The eyes look up like a really cool I don’t talk idea is just talking about like those 4 things and the comparison of like using then versus using ngrx like I love that was really cool.

[29:51] Open Benz a metaphor I mean the here is the case where promises just leave you in the Lurch because this is a flood of events and Promises her in a really wacky hard when you have to cook with something that is,

they’re not great flood of events and that’s what you are facing right now.

[30:12] Petraeus how do you or would rather which data type.

Captures stream correctly use at the event emitter it can’t be a promise because it can we had a one of value.

I said a generator lazy people today using generators to handle you know I’ve been driven a secret tasks.

Or is it a terrible sin I have a lot of faith in observable.

[30:39] I kind of want to get back into some of the aspects of avenge ERX though cuz it we talked about the store,

we talked about kind of the debate of whether or not you want to be one of the other but what I’m curious about at this point is you know what are some of these other,

Library Sarah mean we’ve got a fax we’ve got notify we’ve been oh so so what else does ngrx give you besides the the store and everything that ties into that.

[31:09] Chair so we talked about that before you have store you have an observable of State.

When you bring a text we’re saying okay you’re dispatching all these actions.

Mouse model that action stream as an observable and let you be off of actions happening across the application to perform interesting work on the side.

So when you say actions what do you mean exactly.

So an accident and the read offense is that it’s an object that has a type and describe some kind of state change can have a personal properties of it of course but really it sits and has that type.

[31:56] Buying you into this notion that you’ve already got this unified event stream basically is what it is what it is now it’s.

Key off of events that are happening across your application to perform maybe a network request to do that can you drop a picture for us with one of your life examples.

Like a give us an action that regards the lighting thing and then what effect you might,

it is that action flows to the reducer what what power would you have ordered it will be in a fact that you would care about and how would a pickup that action and do it.

So I had to light application most time to controlling it,

the sensor switches are Outlet field troll lights from the I Survived indicate the level of a light cuz our lights are dimmable and I’ve been that like down to 50%.

Right away I’m going to fire some action damn this like the 50% and I would reflect that immediately across my application but this light,

it’s our life it’s a 50% them level the sliding into the actions not enough to make some kind of network West.

Talk that light at the actually done it inside write an effect and it’s got all the train,

I can listen to that one actually type hey I hear that someone wants to them that’s like 50% and it’s going to the news observer Bulls to make that Network request happen and capture any side effects the show actions might come out of making that request.

[33:37] This is so this is where you have here is the asynchronous partment lot of people don’t quite get right away that but the redox model and I guess and Eric store are synchronous vision of the best,

and the effects of how you would make a scene at work asynchronously to both send a message out and also receive information in is that correct.

That’s very fair so store is secretive action door handle anyone being dispatched.

And requirements strongly suggest that you handle that action away that’s immutable and without side effects.

Yeah that’s the solution of where put that code that has to talk to the outside world because the outside world is not so clean it’s not a mutable it’s not going to have you know it’s not free.

[34:26] Yeah typically when you talk about reactive-programming people are doing it in a functional Manner and so,

Yeah by having no side effects that’s what gives you the time travel in your state and all of these other things is because you don’t have to worry about what happened outside of your application until that this is just a way of managing all of that.

External stuff and keeping your state clean and and without worry about what everything else is doing.

[34:55] Not just the state because these effects are like long running processes,

FedEx service center components are now free of side effects they’re no longer making service calls they’re just dispatching at the store and receiving state from the stage stream.

Yes I’m bringing Purity to your phone and says well is a big reason why you might want to use Insurance effects,

because look what’s a poet was follow that so I didn’t but my component has a slider it it sends a damn action to the infected,

picks it up send it off somewhere and now presumably that thing responds and says I’ve been that I’ve damned it becomes an action that comes back in is that.

How that works that’s cracked and so because of my component is already interacting with the store it can respond to that that I did that action and adjust expression accordingly.

Right at the component it since it’s just pulling into the stage dream if that success action making that request,

success action then causes a state change in the reducers components going to be notified because it was listening to the same stage famous everybody else.

[36:16] So we just have to every time something comes down from the state it just has to figure out,

how to parse the matinee which which two parts of the right word out a petition the stream into useful a visual learner interact or are you a results that kind of thinking.

That’s crap please me say that when you’re buying into this way of doing things to affect your components really just become a projection of your state.

They’re going to show the best of visual representation that they can create Facebook the state of your application at any given moment.

So then this leads to another question and that is is if something changes on one end of the screen and there’s only one other component that cares about that kind of a change.

And everything is basically subscribe to the stream of.

The state changing then does everything get notified and isn’t that kind of I don’t know an efficient.

Yes if you would just buy if you’re just having another Allstate straight like that you would suffer immediate performance penalty.

We do add however one operator to the store observable and this to select operator and what the select operate you do if he lets you select.

One part of the state that you’re interested in and then it’s only going to notify you when that one part of the state changes that way you can have a lot of State Container Store the components for only care about one particular part of that state.

[37:50] Don’t suffer any performance penalties silver example if you build ngrx store into.

Tour of Heroes and you have a component this just one hero displaying when hero and letting you interact with one hero you can send only care about State changes related to that hero and everybody else.

It just doesn’t get notified about anything else.

So like you’re thinking about this all sometimes,

business people say we don’t have any like that well you know they are watching stock tickers or something like that one of the challenges is that if you’re really listening closely you get overwhelmed,

buy a flood of,

messages incoming messages they’re trying update States off work how do you do the pound so how do you handle that.

Thank you for being overwhelmed that’s a good question as we had this exact problem we scaled the thousands of Lights.

Take me to setting up styles to messages per second given as their status update.

And that’s we start pulling into operators or maybe are outside of your usual tool belt and when it we find it helpful is buffer and buffer for any given amount of time let me collect all messages on a string.

And then I’ll do something with a collection of events so when it comes to life status changes for instance we might both of those on 100 millisecond intervals.

[39:20] Can handle all the updates that happen in the past 100 milliseconds with one action and that’s sort of how you can.

Call Lawrence fish using about the messages.

Yeah I found that in my own exploration I found that to be very helpful I actually handled my own but her because I didn’t know about it,

a real step outside the Zone do you ever find that was to try and,

slow down the change detection cycle when I’m updating a whole bunch of components all over the place which could happen which going to happen in that synchronous moment there where,

where you’re trying to process that before. So do you ever find it necessary to step outside of the angular Zone and make some changes before or is that just nothing to pump it,

unfortunately yes we do have to say that I was out of work frequently would like and I think this is one of the developer pain points that might experience when you’re building applications like this with the framework is that,

so we use framework are protractor to handle our into and tests and the tractor is going to wait for the application to come stable and it’s going to know about stability based on,

status of the zone is the global Zone related operator.

Typically find ourselves going outside of his own applying those operators and if they do something interesting that we should want to notify the application about them will re enter The Zone conditionally based on that.

[40:57] Yeah mmm some for people have performance stuff into his own entering and exiting his own stuff is is a good thing for you all to learn about out there it’s not hard being the cool thing is me like we don’t talk about it in the docs yet,

as a general rule for most of the stuff that we did a normal person. You don’t even have to know it’s there but it’s,

it sure is nice to know that you can you can step outside and it’s pretty easy to do I mean you found a pretty easy to write yourself as well.

So one of the interesting caveats of rxjs that has.

Dora has incorporated into how a lot of The Operators work it’s schedulers and schedule there’s are responsible for scheduling some interesting past that happen a future.

Because rxjs has its own scheduling sometimes you might find that rxjs has inadvertently taking you out of his own and so knowing about house where the zone and replaces a really great skill set.

Can you give me just back up because I’m sure there are some people who are.

Somewhat new to Angular who are going what is this is own I mean we we we talked around it a few times on a few episodes but.

Can you just treat it explicitly really quickly.

[42:16] Sure so don’t say yes is this Library by the Eagles record team and what it does is it lets an application.

Handle its own asynchronous scheduling and what kinds of things to do.

It’s know when something interesting has happened your application and then Aguilar can intelligently guess okay something happened.

Does now maybe now’s a good time to rear end of the year and this Souls that’s really ugly problem an old angularjs we had to use your scope lie.

Or make sure coming from react World rehab in a Duke Conant. Set State Aguilar can make that guess for your Windermere editor.

Yes why we don’t have to call Dollar apply anymore nice.

[43:08] Why do I want to know about a new router and why there is such a thing in TRX router because we have a router in a killer in it,

you and I communicate to the world through our so there’s a reason for it something that you are X-rays that’s not part of the Native.

This is requires little bit of history about the angular router projects but if you’re building applications but thank you they’re going as far back as some of the early.

Anglers had a lot of routers at a time.

And it’s a running joke as a matter of fact so great.

And a lot of it very hard to use so.

When we were using the first router we experience a lot of these developer pain points around okay how do I AC currency load-in features how do I.

Missouri State changes out my application to connect to the store and Brandon Roberts who’s on the end of their docks team and I we came together and we built ngrx rapper.

At the same time the Google core team was working on their own sequel to the router which would become router to.

Releasing a routers right around the same time and then check router picks up a lot of traction a lot of the other Charter buying into it,

Ana NG conf of last year we got to meet with.

[44:39] The angler Court team and they said we really like the way you handle some of these concepts with inject router and,

and I would like to create a router that’s where brings together the,

The Best of Both Worlds and angular router three and injured router has been fabricated since then you know we keep it there for a tour of historical reasons but it got to sort of live on through town.

[45:05] Oh that’s really cool yeah.

[45:09] So I saw that it I thought I saw that it had some new life in it perhaps related to grading or something or did I miss read the traffic on that.

I have misread the traffic but we do have another and drugs project this sort of sounds of a similar and that’s injured X router store.

The router stores accept library and what it does is if you think of a router as.

Trying to keep your application and state with whatever the you were all is in a browser,

in-store as hand like the rest of it router store Bridges the two it brings the router State into the store so you can use the same developer tools to time travel with the router in mind.

[45:57] Yeah that that’s a freaking going to want to tap into that.

So that you said to me earlier to broadcast that left.

Sunglass gasping to that you have a lot of admiration for the readex tools and,

and I thought sometime I said hurt something about trying to be able to bring that tool said and apply at the end JRX store and I don’t know where that all landed is that your gold has heard of,

pick the best that they have the offer or do you actually think about interacting that you don’t know.

Yeah so we love her a text and tools and we have no interest in rebuilding bows and within the past couple of months we have built in a native integration with the Redux Deadpool’s extension.

You bring an engine stores that tools any registered in your application you can immediately start using the Redux extension in your application today and we think that’s the that’s the right balance.

Is that we can just build the interface to those that tools and let them control the state for us.

That is going to be nice pretty big that’s not because there is such a rich community that is growing around redox and you ate that day.

How to play me too so this is that’s really good news.

You can use that today with us something coming aversion for we have that in the version of Truth is out there and pull it down all you need is store and then stored up tools and to install extension at work out of the way.

[47:27] So you said that you need to let them control state is that.

[47:33] Difficult to do or are you just include Redux them tools and it starts working.

So when does producer function the way this time traveling works is you have to have some parent reducer that sort of controlling,

which state to return based on the history of actions and so we have to sort of when you’re trying to use the dev tools,

we have to pump the actions and states are just reducing to the dab tools,

they tell us back hey this is what state you should be showing based on the way that the developers interact with developer tools okay so that’s really cool.

So beyond endurance router store effects store we do have two additional libraries that people sometimes use.

How about we don’t consider them be finished yet they’re things that we’ve been actively working on for a while and they are DB and notify.

MTV is a really interesting one there’s this really high quality.

Indexeddb API that existed modern browsers but it could be a little difficult to use it’s a very complex and Rich API with a lot of functionality.

The interesting does his it’s a wrap around the indexeddb.

80 is a Proviso unobservable for your for your indexeddb and it gives you any other services to communicate store changes in that TV.

[49:06] That’s interesting because this in that.

[49:10] Isn’t indexeddb something that you know you can basically store stuff off line so when you come back to the page that data still there.

[49:20] Ass crack it does not have the friendliest API in the world so if you’re doing something to it she move that over that’s good and there’s a,

metal browsers support it so how do you it is going to be some kind of a pull back to the hood.

It’s something we’re still exploring you know there might be a situation where the price of module for Evergreen browsers that too have a safe guy admitted or there’s a couple of nice community.

Libraries of sort of give you a polyfill if you will for indexeddb but we want to make sure we’re doing though is the ability to cancel transactions,

naturally think it’s ever was such a great way to wrap.

Handling transactions to in text APA as we want to say okay you can make reads and you can make right you can also cancel them if they’re taking a while and,

it’s hard to find the right polyfill that gives you that functionality that exists in two days and I Steve Vai.

[50:23] That’s something to look forward to what was the other one was notified and this is for,

desktop notifications browsers also have a notification of guys and there’s a lot of ceremony that goes into creating one is notifications handling when they dismissed it handling click on the notification center on Alafaya give you service.

LSU again creating a notification cervical dislocation subscribe to the result listen for clicks on those.

[50:56] Very cool I’m getting tired of cooking block on other websites I go to cuz they ask if they can show notifications.

[51:04] Three colonies based you trying to push notifications Twitter or YouTube so many high-profile applications to have Tuesdays.

[51:15] Set an alarm an hour iot lighting after we’ve been talking about the day it might make sense if perhaps a light is not working or responding correctly to notify the user hey something’s wrong with his controller maybe she could check it out we think they’re in a reasonable use cases,

what notification does make sense with Alyssa’s try to sneak into my house I have to find that to the tech bad and,

make sure I have a glass of wine ready for her when she breaks it it’s like no but for real though,

I don’t know if people complain about the notifications but I personally love that like I enable all of them so.

So it doesn’t get anything done.

Someone posted another cat picture on Facebook.

Notification this is really fascinating like I am really happy about this show it’s just so and lightning like.

You guys done a lot of that like a lot of work you definitely tell.

I think it’s been a community on Robin Roberts was on the docks he was also decor. And we have,

now plenty of contributors for actively working everyday but Asian adding features helping users out her dinner so it so it’s been a big community,

efforts to build these tools the release schedule where there’s heard of periodic or major events or something we should be looking forward to.

[52:52] There’s no release schedule one minute.

I guess part of these libraries are so simple that it sometimes can be hard to think that’s okay without I need a change like a face feels like a Finnish library to us and so do it,

what’s the most part we think that it provides a really good solution out of a box.

[53:14] Old people want to find or follow or contribute to the project where they go.

You can find us on her at dinner. Complex has the organization page you can do all her projects,

I might interest you in actively contribute to it additionally we had a really active dinner community so if you go together. I am / NJ / store.

It’s a lot of people in their everyday talking about interest or work on problems around it and it’s a great place to help jump in and sort of getting a loop of what’s going on with the project.

[53:48] Nice hey there this is Charles Max would I just wanted to talk to you really briefly about freelance remote-com.

I’m putting on a conference for people who want to go freelance or if you are freelance and bringing in some of the experts from the freelancer show.

You about how to find clients how to collect money how to build your business.

To specialize and much much more so if you’re thinking about going freelance or you’re already freelance and want to hear from the experts on how to go become a.

Grow your freelancing business then by all means come check us out a freelancer milk.com.

[54:29] Nice well let’s go ahead and jump on over to the pics.

[54:40] Melissa do you have some pics for us.

I’m just excited about Angie come coming up really really soon and I just actually got back last night.

From Norway so I’m still a little dazed from all of the travel but no I am just really excited and that’s really all that’s on my brain so I don’t have any exciting pics of him.

Alright word what are your pics well like I feel like I was in Finland.

But I’m going to cheat and I’m going to say then I think,

Mike has made a compelling case for hopping over to the Ender excite and,

looking more closely at this and and I’m doing I’m making that my pic partly also because everybody thinks I’m in India right hater and I’m not,

I’m not I know I really like what Mike had to say yeah there’s a difference between a hater and a skeptic right right word.

Well yeah but I’m not even a skeptic I me today but I am is like I’m I’m I have a problem with.

With people becoming lost in love with a technology and trying to use it for everything and overstating what it can do and too much you don’t like starting with a real.

Real business problem he had something he really is all this the Paradigm and making sense.

[56:15] Totally agree alright I’m going to go ahead and jump in here with a few pics first of all.

I wind up moving off of the Mac so I have a new desktop with ya and am just getting onto it running Windows 10.

And you know I’m actually really liking it.

Yeah but the next upgrade to the MacBook Pro Justin quite do it for me and I was like you know what I’ll spend half the money and get,

the four times the machine so so that’s what I did and I am I’m super happy with it I’m gonna put up the link to the the bill that I used,

cuz I just found a list of components online the only difference is that I did get the GTX 1080 instead of the GTX 1070 I think is one that they recommend.

I got 64 gig ram instead of the 8 gig ram or 16 gig around that they recommended and yeah.

But other than that it’s it’s basically the same machine and I am I’m loving that I have four screens hooked up to it which is super cool,

and anyway it’s it’s really really nice the other thing I’m going to pick is when you move from Mac to Windows,

not everything moves over unfortunately you don’t get all of the same apps that you have for.

You know for what you doing so for this show for example we record on Skype and my backup is always been you can call recorder well doesn’t exist on Windows.

[57:51] So instead what I’m doing is I’m actually using a program called Pamela and it record Skype calls as well,

and so I’m using that I still record through to the hardware and stuff but that’s kind of my backup run in case something happens and I’m pretty happy with it it looks like he has a bunch of other features though it’s like voicemail and.

You know call scheduling and stuff like that so anyway I’m really happy without the other one that I really missed was.

Screenflow and I found another app that does a lot of what screenflow did and is pretty much a simple to use is called Mojave.

It’s movavi and anyway so far I’ve used it to edit down a bunch of conference videos and I’m probably going to do some screencast with it and see how that goes so I’m I’m happy about that as well.

But yeah Mike what are your pics.

[58:48] 70 pics the first is a library called ngx charts not commute confused ngrx.

It’s the library by Slimline Austin over there has been a really high quality chart library on top of angular and D3 the charts look great it’s really is his Library I’d recommend you check it out high performance training for application.

And as I’m sure it gets paid the good bit but the angular-cli it gets better every day I believe that actually supposed to releasing the final version of it and you’re the end of this week but he’s not check that out recently they really don’t like fast and easy to use,

awesome well.

If people want to follow you on Twitter and such you know we already asked them to follow the project but if they want to.

See what you’re doing personally what were they do you can find me on Twitter and I’ll get Hub at my crime 5 2.

5 – decorate your shoe size your waistline what is it,

it’s a random number there are many Mike Ryan’s in the world do not confuse me with the semi truck Stunt Driver Mike Ryan for the Nashville country singer Mike Ryan I am Mike Ryan,

Mike Ryan 52951.

Yeah we we know that those other two migraines are definitely on GitHub.

Current down for sure go ahead and wrap this one up thank you for coming and sharing this with us and hopefully some folks will go check it out and see what’s there for them.

[1:00:28] And what could it be thanks Mike.

Thanks word see you guys bandwidth for this segment is provided by cash by the world’s fastest Indian,

deliver content fast with cash light visit cachefly.com to learn more.

[1:00:50] Music.

 

x