Hello, everyone.

So I'm going to speak about Al Green's all the small creatures that living in our court basis, even we if we don't really know about it before we start a few facts about me.

So I'm totally I'm working for a company called P Pom as the little train engineer in Poland in Broad Swath.

Frank organizing me tops and I really love to experiment with some interesting staff combined unexpected things and stuff like that.

So and you can follow me on Tito, read my block and things like that.

So our main topic, Calgary's what is actually Calgary's.

So it's a specification.

Howto solve some problems, step by step.

So you just instructions?

Yes.

And what?

Why we should care about it.

Ah, we just using some react components to build your eyes.

So we are not doing some rocket science or think like that.

But actually algorithms, they are everywhere even in all off your frameworks, right?

So many algorithmic optimization sze to reduce memory footprint to make them faster.

And all these things might came with some tradeoffs and we will speak about them as well.

So before we start, I need to introduce what its complexity.

How we can measure our algorithm.

Is it good enough?

Or we should look for a better solution for it.

So complexity is the way to explain us how our coat will scare will work at scale.

For example, On your test environment, you have just a few tests.

User standoff them.

But in Rio application, you have millions off them or something.

So you should I know how it will behave.

Should do optimizes for more entities and in computer science research Standard notation for that called big O.

So what is that?

It's actually a graphical representation.

How our, um time off algorithm you be behave on more and more input data.

So we have, like near one.

So it grows as we increase the entities we passed through the functions.

It could be like grief meek and it could be quadratic and so on.

So forth and respiratory easier explanation about it.

This some emerges.

Yeah, constant time.

You're happy.

You probably couldn't do it even faster.

Margarethe.

Nick.

Good one.

Ah, one year, okay.

And then you became most and more set and those kind of come time, complexity or memory complexity means that you actually need to improve something or even write a code completely to management's May.

In management's time and space complexity, Time stands for how many times it takes on some generic computer machine to execute your coat.

We just sink in that we have some machine that execute one action.

Fair cheek.

Yeah, and space complexity our memory usage.

We can predict how many memory reveal which lies with our help.

So, as I said before, all these metrics will show us Where is the bottleneck in our court?

What we should improve And the sink is with our grades.

Even if you have good enough or grieve, there is a possibility to find a better one.

So there is no any limits, even if you have some ah, knowledge in computer science that the best agree you could use.

Probably you can invent in you one better or more suitors for your situation, your application and the first thing I want to speak about his data normalization.

Now it's coming to you.

Some state management tools like read axe or an injury Kes.

Whatever entered Mexican, a big object continued old data states and usually when you want to access some entities in least you won't do that as fast as possible.

And Theresa Technical data normalization as that allows you to.

I have a constant time access to your entities, basically, what you do.

You remap your data from Ari to object with ski off some I D and object as a failure itself when we can use it when we have some related that data entities in our store or any other kind of data when we can't recursive entities and we want to have fast look ups rule, ease off entities.

Let's take a look of some examples.

For example, data these relations.

Imagine you have e commerce website with some phone selling, and each phone has a category it's relates to.

So it's a relation between ah, item in the cart and a category in your e commerce show.

Recourse is that our structures, your categories, could have some subcategories, and basically they should represent some kind off a tree.

And this and this tree could have cycles as well sometimes.

So it's a recourse of data set Ah, when we can and why we can use data normalization in such cases.

So, for example, we want to get some product by ity.

So instead off accessing and Trevor, since through the least we just accessing.

It's true I d the same when we want to get some categories by i.

D or Brothers by category.

And actually we can reduce some memory footprint.

Is that as well?

Let's take a look in any service.

Just need toe abd.

It'll select our data.

So, for example, we want to get a product by.

We have a list of products and we find in Ah, I d inside this list.

Yes, it should have a linear time complexity, and as this thing we want to get all products related to some category.

So we going through or products and finding if the product related to some category and returning them Intel east.

It will take us and by M ah, time, complexity where the end could be, ah, number off our products and M is number off.

Our categories could be improved.

It's on probably yeah, and we also have a recursive access to categories.

For example, if you're looking for category by I d.

We it ratings through them until we find as a category we want, and it could be linear time.

And also we could use some memory because we you have a recursive call stock that actually uses memory for each call.

As recursive coat could looks like this, you go and deep Erin deeper.

It's very more harder to maintain it.

And right, so that's the things we want to improve.

Eso We can normalize our data instead, off least of products.

We can keep products by its i.

D in an object, and it will be immediate access the same we can do for categories also toe.

If we need to keep the order off products, we can keep their least off ID's toe.

Keep that order instead to have additional east with all objects.

The same we can do with sketch agrees.

Uh, let's take a look how our selectors data selectors could look like Forget product by d.

We just accessing.

I will cues icky often object.

It's laying your time the same four categories, and if you want to get categories by d beast, you have not the best solution.

Yeah, we're reducing the products by categories and so on.

That's the point we could improve even more.

And if you know about that, a basis for first searches the prepare indexes for ah search.

We can do pretty similar things with our date on client side.

So if he prepares the product ideas by category in some object, we can have immediate access for it.

And after that, we can easily get products by category, jazz getting cues from the object and moppet toe and my product ideas to actual products.

And it will improve our time complexity to be linear one.

And I believe there are more and more different techniques to improve this things.

So how to use it in your coat?

Of course, you can always do it yourself.

The court.

Your could rely only It's only your coat, isn't it?

But there are a bunch of libraries, for example, for react.

You can use some select normal, either, for Andrea reeks.

You can use built in entity Ah entered a model, and it's easy.

That's a very, very important to kick.

I want to speak about memorization.

Memorization is the ability off some function to remember the results off previous calls sounds really easier.

Whether we can use it again when we work in the sunset like read acts and to be returning completely new state on each states changes we can trigger the renders the changes more often where than they actually need it.

For examples, we have some data selection that's really, really deep in our store.

And if we change something difference and that property be triggers changes on thes subscription.

So for data selections, we can use memorization for repeated communications like you repeat, some product.

I don't know hash or something like this.

You can catch this result if we computer CPU have a computations.

And for derived data states as well as the simplest example toe explain.

Memorization is few panache numbers.

Yeah, we call him.

Will function Visa recourse.

Of course.

The optimizes the tail Riker Shin.

And if you look, um, called three these reach arguments we call in our function, we can see that we repeating some computations over and over again.

And this is the work that we actually want to do again.

So to reduce ah regards of expensive calls, we can use memorization and for frequently used date as well.

How do we look like for example, this trip in action.

So we create another function that you'll return from a natural and dysfunction.

We'll contain some object for cash in results.

Or it could be least actually in Fibonacci.

And if we already calculated civilian for the past argument, we just returning immediately Railly from cash, not computer.

And listen again, how we can use it.

Of course, we can do it ourselves every time but better solution to use some library like re select on them.

And the thing is that, um, I showed some basic example of memorization, but we have multi slaughtered my organization.

Movies slaughtered and some libraries provide you effect to Ramesses to create the ah memorization customized for your needs.

So it is better to at least check those libraries and the next, more interesting things that I want to.

So Levin stay in distance algorithm and how to improve some user experience.

Who is it?

So what?

This lemon stained the stones.

It's their algorithm that calculates how many edits you need to perform to create one string from another.

It completes the number off edits, numbers changes, and it could be easily ah introduced by Albert Einstein Yes.

Everyone trusted information over the Internet.

Yes.

No, it was a Virginia reel.

Even stand.

Ah, mathematicians that created this algorithm in 1965.

We can represent their work of these are greed with the metrics and actually be a feeling mattresses when were executed it.

So we have two boards Honda and Hyundai.

And for each letter in this world, starting from the 1st 1 we calculating Do we need to change something in target?

Three strings.

To get the 1st 1 and exempt, we get the number total number off these changes.

So in this case, it will be sweet.

And that's means the distance between those two strings will be three.

And actually, this algorithm not that complicated.

And some select such alliance off code.

And the interesting story How I found this are greeting.

I was looking to some source coat off Angler Seelye, and, uh, I've seen house.

They provide out a correction for comments so they have a list of comments.

And if you get a type of they suggest you and as a common that probably you want to execute.

And for that they're using Levenstein Distance Calgary.

So when it Often Lee used so two for after correction after completion or smart suggestions, for example, keyboards or Seelye tools or ah, after correction in text editor.

And here's a coat look like, for example, and get if you trying to call, get claim instead clone.

It will suggest you that, Hey, you might want to execute clone common and example in angular Sly, where I found actually and treat about limits.

Stay in distance algorithm.

So if I called tau generate some component, it's adjust me, generate common and it's us.

But let's try to use lemon stain distance Alderete to create smart for zero full pages and to prove our your ex.

What is the problem?

This user all standards for zero For Paige, we get a type of, for example, or rink is already broken or was changed in back end.

And to be shooting enter and we get some helpful you hi vis kitties.

Yes, it's very useful.

We can wash for a while and completely forget what we want to do so but that's it.

Solve any problem, probably not what we can do.

Instead, we can suggest you, sir ah properly.

Here's a simple example I have an application.

Oh, it won't plays the video.

Okay, I have an implication.

Just feelings home about contacts here.

So let's make a typo.

For example, Came and to the bottom of the page.

I have a suggestion for user.

Sorry, You probably made a typo.

Did you mean about page?

Or we can type contract in.

Instead, Contact and Louisville be redirected toe correct page.

So it's actually real soft problem for user.

It will have some value for them.

So why not to improve our 404 pages business?

Al Green.

How we actually coats of Oregon?