Videos

language: EN

                  WEBVTT
I'm recording my desktop guys.
In the meantime, we have some nice discussions.
So yeah, I'm recording the desktop
from our environment perspective.
So we're gonna have also the video,
not only the voice, all right?
No voice.
Good, yes, of course, welcome.
All right.
Let me check the other chart.
All right, this one is fine.
Good, so we have this anguim underscore.
Plenty of examples in this folder.
We're gonna start with ng-train.
I'm gonna do some exercises in ftj.
But of course, I need to explain the whole thing
shortly because it's like hopping into existing application.
Only two days, you already know Angular
and we agreed to do some topics, only not everything.
So let's start explaining it
from the presentation perspective.
You don't have to do it on your machines.
So just observe my machine for now.
Stay with me on my machine, all right?
And oh, I forgot to do one more reminder,
which is about the first break.
I usually forget about the first break,
so let me do that now, sorry.
Let's make it, if you want 12, which is five,
which means we should do first hour and a half,
so in 45 minutes, awesome.
All right.
Now, in this presentation,
this is presentation with slides.
I'm gonna skip a lot of things, of course.
I'm gonna hop in straight away to some of the points.
Which means we're gonna start with the point five,
number five, component-based development.
Just stay with me, I'm gonna just go there.
And the link doesn't work.
That's interesting, yay, awesome.
And it's not a Monday, come on.
Oh, I know why, one of my colleagues did the update.
Yeah, well, this tool is,
the website is done with Wikimedia.
Wikimedia has new versions, like Angular.
And one of my colleagues did, couple of days ago,
he did update, and the links doesn't work
from the content at the top, come on.
All right, I'm gonna make a note.
Sorry for that, I didn't know.
I did know about the updates,
but I didn't check the links, sorry.
The links in the agenda don't work.
I'm gonna quickly, in the break, tell my guys to fix it,
and hopefully it will be fixed today, in a moment.
Okay, so we cannot use links here,
but at least I can scroll down.
So I'm gonna go there.
And we're gonna talk about component pattern,
just lightly, and then we're gonna example,
we'll look at the example of application and explain it.
So the example which we're gonna use during the training
is a small game, very, very simple, right?
Web browser game, very, tremendously simple, right?
With very easy engine, and just small user interface.
I call it five to join.
We're gonna use it as an exercises, all right?
The bunch of examples I'm gonna show
for each particular topic, and then you do the exercise.
That's the common flow.
In the between, we do some discussions,
maybe I'm gonna show some of your solutions
to the other guys, we will see, right?
We need to think about it properly,
so I'm gonna start with the way.
Because we are in Angular, we think about my business,
our businesses as components, or in the other words,
we have to map business perspective into Angular,
which means into components most of the time.
Why components?
Because component is the most important element of Angular.
Now, to develop, I say, create components,
bundle them into modules and boost up the application.
That's the minimum we have to know about Angular.
All right?
And we have to follow specific flow
from the user interface perspective.
Not top-down practice, but component-based design.
So we start by looking at the expected behavior,
we do the dummy interface,
all the necessary minimum stuff,
we encapsulate everything into building blocks,
which most of the time will be components,
and then the other creatures in Angular,
like pipes, services, et cetera, all right?
Then we do each separate component by itself,
we look at the view part of the business,
and then we map all the behaviors into class.
So provide props and methods.
That's the flow.
Now, one of the best practices,
one of the best practices is to modularize early,
in Angular, which means if I know,
because I prototyped my application already,
or maybe I'm migrating from something else,
like PHP plus jQuery, maybe.
Before I had PHP and jQuery,
and now I'm gonna have Angular.
So I have a structure already,
I already have a business perspective.
So I know my parts, bigger parts of application.
So I can divide into modules,
or maybe I already have some meaningful modules,
and then I do Angular and I create modules straight away.
If I do it from scratch, like from zero,
it's a startup project, or let's say we are
actually prototyping now with new client of ours,
and then we don't know yet,
so we can stochastically try to predict
what kind of modules we will have and create them.
Well, of course we can do it later,
but if possible, we should do it at the beginning.
Now, following this approach,
if you want to achieve such very simple goal
like this small game, right?
It's like we have a user interface
in which we guess the jewels
randomly chosen by the computer.
And if I guess properly, I'm the winner.
If I don't, computer is supposed to talk to me
in reactive way and tell me,
well, you didn't win yet, well, I'm gonna help you.
Okay, it's not the proper choice, very simple thing.
So when we want to map such business into application,
we should think about the approach first.
So all the functionalities we need,
then we need to think about data.
Not first, all right, first about functionalities,
then data.
Usually data means what?
Our model with data, okay?
In this very simple application,
at the beginning we have model
which is part of the component.
Later on we can separate it into something bigger
like files on the disk, or maybe even database,
and then query it via any means, HTTP requests,
RESTful API, maybe chain of web services, et cetera.
And then we need to think about how to build
the dummy interface, then static interface,
then working with dynamic interface
to handle all the functionalities.
All right, now, we're not gonna follow all these instructions,
I'm just explaining the way because we're gonna hop
into existing application, we're not creating it.
So again, when we design it, we need to map
all the necessary minimum functionalities.
First of all, we have game engine.
So the computer is supposed to choose randomly
a jewel, one single jewel from the list of existing jewels.
That's the game engine, very simple thing.
But I do the notes literally like that, right?
At the beginning, of course we should do the proper thing
like brainstorming, sit with the client, developers,
managers together, do the scrimming, maybe UML stuff,
and then we decide what's supposed to be mapped
as the minimum application.
But here we have a simple example.
So then I need to think how to provide interaction
with the user.
So we're gonna have some input field,
other behaviors like tracking the number of tries,
which is dynamic, it will happen automatically.
How many times I tried to guess the jewel, right?
Which will do the magic from angular perspective,
it will react, I do something, it will show me something
in the other place in the form, that is usual.
Then giving the user some hints maybe,
if there is a winning or failing the game, also success.
So we're gonna cover that with one thing in the same time.
So that's the minimum of functionalities.
Now I know the functionalities.
Now I need to determine how to map them into proper code.
So I need to name things.
And this is, as you probably know,
the hardest part in coding in programming,
naming, naming variables, naming globals,
so naming constants, naming the functions, et cetera.
But of course, angular helps us a lot with that,
with some prefixes and its own meanings
because angular is a framework, not just library.
That's why we have to spend like a lot of time to learn it.
If you compare it, let's say with the React.js,
if you have any experience with React, you know what I mean.
We don't have to learn too much, we just need to know
HTML, JavaScript, maybe a bit of CSS, that's it.
Well, maybe a bit of JSX and today, code.
That's the absolute minimum in React.
In React.js, we have a lot of creatures,
built-in stuff, Lego to play with, toys,
but then we have to read a lot of documentation for that.
So naming, this will be my engine part,
guessing by the user, reflecting the changes dynamically,
and then communication with the user, hinting.
Now, now we know what the application is supposed to do
from the business perspective.
Let's look at the code.
Let's look at the code.
And code is hidden in this surprise surprise FTJ folder,
shorter name of find the dual name of the application.
And here we have angular.
Well, in SRC, we have some already existing components.
We have even one service already.
And we have additional subcomponents.
We're gonna start with components.
This is our topic to start with.
We're gonna talk about how to properly create them.
I'm gonna show you some good practices
and we're gonna hop straight away into that.
That's our first job.
So before we do that, of course,
we should run the application.
Actually, let me maybe do it from this perspective.
I didn't enable any big extensions to Visual Studio yet
to make things a bit faster
because it's a remote environment
and you might be used to different extensions.
So I decided not to do anything more than,
let's say this one, angular language service.
I know there are other extensions in Visual Studio
that could speed up things,
but they also hide what understanding.
If you have a lot of shortcuts,
you just use things without properly understanding them.
So at least at the beginning, I'm not gonna use them.
I'm gonna show you the whole thing from scratch
to have better understanding.
This is my goal.
If you understand, I'm happy.
Then if you understand, you'll never need me again.
You can extend your knowledge by yourself.
We have the code.
Let's run it.
I'm gonna maybe run it here from this perspective,
built in terminal in Visual Studio code.
It's a good one, but it's yet another emulator of terminal.
So it might behave sometimes.
And I observed plenty of times behaving
of Visual Studio code in this terminal thingy.
So if you struggle with it,
just go straight away to the usual terminal
and avoid this one.
Because in some cases, in some scenarios, it hangs.
So I think I made a mistake in the code,
but the problem was with Visual Studio code.
So be careful with that, all right?
But I'm gonna at least try today to use this one too.
So I'm gonna open the terminal directly here.
And then of course, we're gonna do ng-serve.
We're gonna do ng-serve minus O,
so it will open automatically in the browser,
the application itself.
And we're gonna use the default port for it,
and no other switches.
So ng-serve minus O.
Now, this is the moment you should finally
go and repeat my steps.
If you didn't open Visual Studio code yet, please do it.
That's the first, all right?
In FDJ, open the terminal,
either in this built-in terminal
or separate one is up to you, all right?
If you use separate one, don't bother with CD,
just go straight away to Midnight Commander,
which I've prepared for you.
If you use Linux, as you know what I mean.
And then you can use nice shortcuts if you know them,
you can just use mouse straight away in the command line.
It's a useful improvement.
And we go to FDJ, left-control-O,
ng-serve minus O.
And the same thing, right?
I'm just gonna keep it in hand, just in case.
Because your machines are exact terms of mine,
you should have compiled successfully.
If you didn't spoil anything yet in the code,
you should have compiled successfully, of course, all right?
Let me check on your screens, if it really does.
If it was too fast, I'm gonna repeat the steps,
let me know if you lost.
All right, most of you did it.
Or getting there.
Ariel, can I hop in into your case?
You don't have to open anything in this way.
Please close it, all right?
Just go back to Visual Studio Code,
and I can see you have two sessions for some reason.
Can you close one, because it will slow down everything.
On the left side, on the bar,
you have two sessions of Visual Studio Code.
See?
Kill one, I mean, yeah, good.
Now, good, yeah, stay there, and then...
Let me actually maximize your screen.
Go to the Explorer directly, don't go for the Git guy.
On the left side, you have this, yeah, exactly,
and yeah, this is the one.
And then right mouse button on FTJ,
right mouse button on FTJ, open in the integrated terminal,
awesome, and you are almost there.
ngServe minus O, you will be there in a sec.
Great, the rest of you are in the proper place,
straight away, if you need my help, just shout.
I'm gonna help you.
Right, now let's go back to my machine.
Yes?
So, can you repeat this?
So, it doesn't work on your side?
Unwit yourself again and tell me,
because I can't hear you.
Ariod Edwin, okay, let me check your screen quickly.
Oh, okay, probably you didn't follow my steps.
So, first of all, we have to make sure we use non-JS.
So, nvm use 18, let me show you again.
nvm use 18, and then you should be able to use it straight.
If you do it like this, then like you said, ngServe,
all that aside, you can double check.
Yeah, it's supposed to work.
Let me go back to your screen.
So, Ariod, can you type nvm use 18?
No, no, exactly the same as I did.
Well, you have to restart this command line
in the Visual Studio Code 2.
I'm afraid, because it's yet under emulate.
So, close it and open it again.
That's the command line.
Oh, you can do it the same.
Good, and now it's supposed to work.
Yeah, you need one empty space between serve and minus O.
You were too fast.
Empty space and then minus O, good.
And it's proceeding, awesome.
You will be set in a moment.
All right, triple check.
Everyone else is probably on the proper moment,
I believe, yeah, looks like you are.
All the machines, yes.
All right, let's go back to my machine.
And we're gonna start with the browser, of course.
So, we have a business perspective,
and then we go to code.
That's the approach guys.
Always start with the business perspective,
and then do the code.
Never the opposite.
You know it, but always we forget, right?
So, I'm just reminding you.
Now, because I asked you about proper working environment,
would be good idea to have in hand
a plugin to the web browser.
And maybe all of you know it, maybe some of you not,
so I'm just gonna inspect.
And here in the DevTools,
I'm gonna say Angular.
I did install plugin to the browser,
both Firefox and Chrome.
And now, sacramental question.
Is there anyone in the group who didn't use it before?
Angular plugin.
Yeah, there are some people who didn't use it before.
So, I'm glad I'm showing you that,
because it's a very, very important extension,
very important thing which will help your life,
make your life way easier when you code with Angular.
So, I'm just gonna very shortly explain it.
You don't need me to get the whole thing.
It's quite simple.
You just do it as the usual extension to the browser.
Most of the popular browsers have it.
I did it before the training just in case,
well, just to make things faster.
So, I have an application.
I use Angular DevTool, which is especially DevTool
for the Angular only.
In the past, it was Batarang.
There were a lot of other applications,
but they are abandoned now.
Just forget about them, okay?
Today, Angular is the one.
And then, we can look at our components
and all the elements directly here.
It's like going through HTML elements,
but from Angular perspective, right?
So, I have my Angular,
and instead of going through HTML directly,
I go for my components.
So, I can look at the router.
I can look at my specific component.
And if it does something,
and if it has some interactions,
I'm gonna play with it, right?
So, during the exercise,
I'm gonna show you what does it mean,
how can we play with it precisely,
and then what we can do with it.
Our simple application has a couple of elements.
Simple form with playing the game, right?
Playing the game.
In the console, we already have a cheat sheet,
so we can cheat the game and win quickly.
So, I know for sure that Pearl was chosen.
But first of all, I'm gonna do the failure.
So, I'm not gonna win the game.
Let's say I'm gonna say Diamond.
Let's play it at least once, all right?
I'm gonna verify, and it says, nope, not that one.
I've failed the game.
As I said, very simple one.
I'm gonna improve it through time in these two days, all right?
Now, I can restart the game,
which means the computer, the engine,
game engine will choose another one randomly.
This time it's Diamond.
I'm cheating, of course, the game.
So, I'm gonna say Diamond again.
If I don't do the typo, of course,
I'm gonna win the game.
So, winning is different than failing the game, of course.
And as you can see, we have a counter,
which dynamically changes.
As many times as I try to win the game,
it will be bigger, very simple thing.
It happens dynamically thanks to Angular,
built-in dependency injection plus chain detection.
Below, we have a list of jewels,
just to make things easier for the gamers.
And then I can also, I have yet another component
which allows me to add another jewel
because I'm lack of ideas, I'm gonna say south, right?
I'm just a simple man.
I don't know colors like girls
and that I don't know too many jewels, I'm afraid.
So, it's working, right?
So, I add here and I dynamically see the change
in the list of jewels.
And thanks to Angular, it happens nicely,
in like, straight away, without binding too many things
into your JavaScript, and you already know it.
Now, let's focus on components.
Now, we know the application, we know the tool
which we're gonna use to play with it properly.
Yeah, see, sometimes it behaves because it's Google,
so, you know, anything you have from Google can behave.
I had to refresh it because it didn't work
at the very beginning, but still we have it.
They did it for us, I mean, it's a nice tool.
So, if I click on the component,
I can see on the right side,
everything which this component has in it.
So, I'm gonna look at that one,
it has some jewels array here,
it has some service injected, right?
And I can see what is the jewels in the service itself.
And I can play with it dynamically.
Even if I like, I can say,
find the jewel from this perspective and say diamond.
See, and I'm gonna pretend to play the whole thing.
I could just type it here, right?
And I'm winning again.
So, I can play with the interface
from this extension perspective.
And it's like improvement of debugging,
playing with the structure,
designing better structure of the components,
looking at the router, looking at the dependency injections,
the observables results.
It's like a big helper.
And it does a lot of other things
which I'm not gonna explain now,
but it can also, I'm just gonna say,
it can profile your application,
which means check how fast it is,
so it can improve the, let's say,
performance of it, thanks to this tool.
Okay, so it's must to know.
I would say even have to.
All right.
Now, we will do yet another component in a moment,
but first let's look at the examples of components.
Before we hop into exercise, we should look examples first.
The first thing will be always like that
because I have to explain my materials, all right?
But don't worry, sooner or later you will hope
and you will do a lot of things.
First, I have to talk a bit, at least.
So, the second thing which I prepared for you
is like big application with bunch of examples.
They are working, okay?
We don't have to fix it, it will work.
We don't have to struggle with it.
So they are just like that.
And they are already in Angular 16.
And tomorrow we will look at the version of Angular 17
of it, just to compare, right?
We will see, maybe it will be useful.
So, in this ng-train, you don't have to follow my steps now.
I'm just gonna show examples, all right?
And I'm gonna keep them on the screen
when you do the exercise.
So it will speed up things.
But if you like, you can run it too.
So here we have another SRC,
and then in app we have like plenty of components.
Some of them are part of modules.
Some of them are just separate components.
We have main, big component as usually.
So I'm gonna open it now.
And here I have couple of components
called in the inline template,
just to show examples and play with them.
The structure of the components can be flat,
can be organized in sort of similar way,
like in MVC in the past we did,
so model, view, controller maybe, right?
But instead of controller, we have what?
In Angular, component.
That component has the control now.
Not just simple controller, like in backend,
let's say maybe we would with Node.js.
Now, these are examples of components,
and we never create them manually,
like create the folder, create the file,
manually type it, no.
We do it with command line.
We do it with available tools, ng-client.
Now ng-client is very powerful.
So always consider to do things with ng-client.
In some cases, you can do it manually,
but these are very raw, okay?
Let me start this one.
Sorry.
And then we will see what I mean.
You will see what I mean exactly.
Don't do it, you don't have to.
I'm gonna do it on my trainer's machine,
just to show you examples.
I believe that one we're gonna have different port
by default, let me check.
Not really, so yeah, I'm just gonna use different one.
And of course, I'm gonna do the same.
So here I'm gonna go for Angular.
And we have very simple component, two components.
So far, the relationship between these two components
is very simple, all right?
We have a parent component and the child component.
And we know there can be different relationships,
like siblings or ancestors deeper in the path,
in the structure, all right?
And it has a meaning.
What is one of the best practices in Angular
in case of that?
How should we structure our components?
What do you know about it, guys?
Tell me that.
Anyway, I need a volunteer, of course.
And it should not be Sarah, I'm afraid.
Someone else, please.
All right, so I need volunteers,
I'm gonna find the victim, John.
You have two John's or one John?
Yeah, we have two John's, I knew it, I knew it.
All right, so John, Ronny, maybe.
Thank you.
Okay, so sibling components.
Why do you like sibling components instead of parent-child?
What's better?
How is it better than bigger structure
and children of children, et cetera?
Why sibling?
So, okay.
So if I understand properly, you are saying
both solutions are good and none of them is better.
Am I right or not?
Exactly, very good.
The question was tricky.
Thank you.
Now I know you are aware of some good practices already.
Of course, there is no one great way to do the components.
Of course, there is not such thing.
We always supposed to do what?
Do the proper mapping from the business perspective,
again, to the Angular.
And Angular will follow, right?
Later on, maybe we're gonna end up
with too slow application because we exaggerated
with parenting or maybe exaggerated with siblings too.
We will see, but we have to test it.
Okay, dynamically on the fly during the process.
We will never know before, as long as we have
existing application is easier,
but if we prototype from scratch,
it's not easy to find out the best way.
So we have to refactor often, but that's okay.
So there is no one best way,
one best golden hammer to do the components.
But of course, there are some good practices still.
And one of them is like this.
We should actually avoid too many
nested levels of parenting, all right?
Siblings will always win even if we have to use services
because of the shaking the tree of components.
I know we have lazy loading today,
we have a lot of other things,
but still, if I exaggerate with the structure,
the performance will be lower
and nothing will make it better, I'm afraid.
Well, Angular guys, Google guys,
they are trying to do it better each half of the year.
They have two goals only when they improve Angular,
speed and mobile friendly, all right?
These two are the main goals.
And then they improve the thing
according to the community,
like improving the, let's say, the structure, the flow,
standalone setup.
Now, all right, we can see the example is working.
This one is very simple component, I'm not gonna run it.
I'm gonna use a couple of them later on.
I just wanted to show you the bunch of examples.
And we're gonna hop straight away into exercise.
This will be your job, of course.
So yeah, I have the application running
in the Visual Studio Code.
So I'm gonna keep it like this.
But I'm gonna use terminal here, another one for FTJ.
And I strongly suggest to do the same in your machines.
So open additional terminal, it's up to you.
You can use Visual Studio Code or separate one.
I prefer a separate one.
It's just my way.
Go to FTJ and make it visible like this.
We're gonna use ng-client, of course.
Before we do this exercise, let's talk about ng-command.
We're gonna do generate component.
But of course, it's a longish name.
No one likes to type too much.
True, true.
So they provided us with shortcuts.
Of course, it's supposed to follow,
it's supposed to be followed by the name of the component.
So name of component.
And then we can have some switchers in the command line.
I'm gonna explain a couple of them.
The most important to show you some good practices
in the same time.
But of course, we don't like long commands.
We're gonna say ng-g, just c.
So it's the same, ng-generate-component.
And if I want to create anything new in Angular
from the structure perspective,
I should use this command, ng-g and then module,
so m, service, so s, et cetera, right?
Type p and everything else, same way.
Now, I could say ng-g, c like this,
and then double hyphen, if you install Angular,
when you do installation,
you will be asked to make a choice.
Do you want auto-completion or not?
I don't remember if it's already enabled on Windows 2.
I hope it is.
I'm working most of the time in Linuxes.
Windows might not have it yet, but Linux has it.
So even if you work with Windows,
try to do it from bash perspective,
or maybe embed it, or won't, in Windows,
and you will have it straight away.
Why is it important?
Because I don't have to remember.
If I hit tabulate twice now,
I'm gonna see all the possible options.
And as a good practice is, I'm using a couple of them.
One of the best practices is like this.
Always do the dry run first, okay?
Always do the dry run first.
Why?
It's quite simple.
Because then I don't have to do it again,
remove things, right?
So I'm gonna say dry run straight away.
Because I have auto-completion in Linux,
I can just use tabulator.
So I'm gonna be faster.
Now, another option which I use oftenly is like skip.
And then, if I don't remember,
I can again do tabulator twice,
and I'm gonna skip tests in this case.
I want to skip tests.
For some reason, I don't want to do it now.
But I can always do it again later on.
Or maybe I'm prototyping only,
and I don't want to do the tests yet.
If I don't follow the full TDD, for example,
test-driven development,
which means I should start always with the test,
and there is no exception from that, then I can.
And most of the people omit that at the beginning
because it's faster, because we want to prototype.
We want to have something working.
Unless you, I'm just saying,
unless you follow strongly TDD or other methodologies,
try with this one.
Now, another one which is useful is like,
in this case, maybe we're gonna say inline style only.
Not style, sorry, inline template, inline template.
And here comes another question.
This time it will be a question to you.
Why I would like to have inline template
instead of separate file, and when?
What is the good practice here?
And to that, maybe the other job,
don't they beat the last quiz?
Yes, very good.
And that means when I debug, when I develop,
when I improve it later, I have to open only,
I have to open one file less,
which means my mind will be faster.
Because often, thank you, thank you, John.
Because often when I work with Angular,
I have to open like plenty of files at the same time.
Yes, I can follow the, you know, the IntelliSense
and then just do it this way, but still,
I have to be very multi-threaded
when I do coding with the Angular.
All right.
We could also do the inline style.
Inline style, if I need, this is not that often.
I can do it interactive, I can make it standalone
from this perspective.
We're gonna talk about standalones later.
Do some other steps like importing, et cetera.
For now, I'm just gonna run it like this.
It will ask me about the name of the component.
I did it on purpose.
Because also this is crucial part, not easy.
Again, naming.
Well, I can do it, rename it later,
but it's like factoring and can be problematic.
So here I should stay for a while with my mind
and ask myself what would be the best name
for the component?
Of course, we can use custom prefixes or some fixes.
I skipped, I stay with the default one
because this is my way.
You can also set it up for yourself.
So you have, you know, different prefix, right,
when you do the name for the selector
and the name for the class itself.
So I'm just gonna say maybe
Jlist because so far we have list of jewels
inside of the main component.
I'm gonna separate it in a moment as an exercise.
Stuff will do your job.
But for now we do the dry run
and it will tell you what we're gonna do.
Now you know why dry run.
If I do the dry run each time, always as a good habit,
I will never do the mistake
because I will triple check it.
Oh, okay, I see it's the wrong place.
Oh, I forgot.
I was building a good structure
and I forgot to put it in the folder.
Now I know I have to refer to it
or let's say try to do it in visual code.
So just drag and drop it.
And then I'm gonna hit enter too quickly
and I'm gonna spoil it again and I'm in a mess, right?
So dry run is important.
Let me explain the exercise.
So far in our application,
oh, I did it in the Chrome in this case.
Yes, I did.
We have this list as a part of the main component.
Your job would be to create a component.
Of course, follow my example.
So do it this way.
Make a good habit straight away.
All right?
And I want you to do the inline template, of course.
I want you to skip tests.
So do exactly the same way.
Create a component, name it this way, JList
and migrate existing functionality into new component.
That's your job.
Try to do it now.
I'm not gonna explain anything else.
This is the first exercise which will tell me
about something about you guys,
about your speed, about how should I proceed
with the next example of exercises.
So try to do this thing.
I explained the application already,
but of course, if you have questions, just let me know.
We want this functionality,
which is just listing all the tools,
to be separated into additional components.
Look at the code, learn how it works
and do it properly, all right?
Let's say five minutes for now.
We will see if necessarily extended.
Oh, actually I planned the break in one minute, so okay.
So we're gonna do it after the break.
Is it clear what's supposed to be done to everyone?
No questions?
Yes?
Yes, yes.
And then we want to migrate existing functionality,
which is just showing the list of tools.
In our user interface, this one.
We want to migrate that into newly created component.
So from the code perspective,
from the code perspective, we have it like this.
We have a component,
and this component has the code, template,
and also the class itself.
So the whole functionality, all necessary methods,
variables, and the template itself,
supposed to go to the new component.
Yeah, I decided to do the short break, quarter break.
Now, if you don't do it now,
the next part will be too short, I believe.
So let's do it now,
and then we will continue the exercise after the break.
Or if you like, you can stay here,
but I strongly suggest not to.
Take a break, refresh yourself.
We are back in 15 minutes, all right guys?
First hour and a half behind us.
15 minutes break.
See you in a moment.
One, two, three, four, hello again.
Back in progress, can you hear me guys?
Great, so please continue with the exercise.
Say it like I said, five minutes,
and then we will see if necessary to extend or not,
and then we will discuss together.
If you have questions, do not hesitate to ask Sarah.
Of course, you should ask John.
Just as a reminder, just as a reminder,
we are supposed to create new component, JList,
and it should have one,
and only one functionality in it so far,
showing the list of jewels.
We have this functionality already,
somewhere in the code,
and the model is also somewhere in the code.
So double-check where,
combine all the bits together,
and then we should end up with
another component.
I can see you did start it well, and I'm proud of you.
Ariel, Agda, can you hear me?
So Ariel, Edwin.
If I say your name properly,
if I say your name in the wrong way, just tell me.
Try to pronounce it properly.
So far so good, but I believe you pasted too much,
could be pasted too much.
We want to make some kind of separation of concern,
isolate only this small functionality,
which is responsible for showing the list.
And in our case, in here, in your case, on your screen,
these are only the lines 28 to 32.
Only that should stay here.
The rest of it should go.
In my opinion.
Okay, I'm adding three more minutes,
and then we will discuss together.
All right, anyone else need my help?
Any nice error messages or anything?
Yes.
Yes.
How do you understand this error message?
Well, you're supposed to.
You're supposed to, yeah.
Well, we will focus on that later on
when we discuss the solution.
Why not?
You can do it.
I plan to do it later, but yeah,
this is like interesting fix me exercise,
which I found it happened to be there,
straight away when I migrated my angular examples
into newest value.
And then things like that can happen,
and they might not be in the dogs,
or they might just be hidden somewhere,
and then you have to struggle to do it.
And of course we will look at that again.
But good point.
I was waiting for anyone, for someone to point this out.
So you are the winner, thank you.
We will discuss it of course.
One additional extension, two more minutes,
and then we will finally discuss, I promise.
That end, I believe now we can delete one.
You don't need both, do you?
Good, good.
Jesse, how is it going?
Do you need my help?
Is it finished?
Do you need my help or pointing out or what's stopping you?
Reading the code.
I mean, okay.
Which part of the code is not understandable then?
So we can explain together.
So it's like we have to be able to use it.
We have to inject this service
in our newly created components.
Because otherwise, well, we don't have to.
We could pass something by input, output, et cetera.
But we would like to use the service in this case actually
because we have it, so why not, right?
Or maybe not.
We will see, we will discuss it in a moment.
This exercise is designed for that.
You can have plenty of different solutions
and we will look at them and we will think about it
from the business perspective of course.
Okay, I'm afraid we have to proceed guys.
So even if you didn't finish or if you're still testing
or in the process, don't worry.
I have a solution for that.
We have only two days, so we have to go further.
But don't worry, if you don't finish exercise
at the end of the training, probably Saturday morning,
or no, sorry, it will be my Friday afternoon.
I will send all the solutions so you will have it.
Also today and tomorrow, when we didn't,
when any of you will not be able to finish the exercise,
I have a solution for that.
That is just solution so we can, you know,
everyone will have the same point.
Everyone will be in the same level
before we proceed to the next exercise.
So don't worry, I'm gonna show you.
So please focus on my machine now.
I'm gonna do some small live coding together with you.
So I did the same with you.
I created the component following the good practice.
First, driver and then just remove driver
inline templates, skip the tests.
So the ng command line created for me
and the whole folder, right?
The whole folder.
I could also skip that and keep all the components
in one big folder.
Well, if it's a small application, it's okay.
But sooner or later, it might be too chaotic
and it's not the best idea, not the best practice.
For small projects, yes, but.
So I have a folder, whole folder.
I did run this command in the main root folder
of our application, which means by default,
the newly created component,
we're gonna end up in app.
If I don't want that, right?
If I don't want that, the simplest way is to
tell the name of the component
and the proceeding path.
This is the simplest way to do it.
If I want to do it somewhere in some of the subfolders
because of some reasons,
maybe from the business perspective,
maybe from convention, which company has
always drives proper structure, right?
Or maybe just dependency from the business perspective
from the process, all of the business processes
will tell me, oh, it's supposed to be part of something else,
something bigger.
So the simplest thing is to provide the path.
So let's say if I have
add,
add j component, I could say,
do it there, right?
And then the name of the newly creating component.
Another way, which some people prefer,
is like to go there.
So go into the place in which you want to do the
creation of new Angular creature.
I call them creatures because they are nasty
and they behave.
So, but yeah, I'm not just saying,
this is one of the ways.
Now, I have a folder and inside I have couple of files.
Actually only two at the moment,
empty CSS file and then TS plus Inland style, this works.
What should be my next step now?
How should I proceed now?
Tell me guys, what would you do now?
I created a component, what's the next best practice?
Come on,
data.
Good.
Okay, thank you.
So you've just described the whole thing
and I'm happy because you know what to do.
But of course, my question was regarding the first step.
So divide into smaller steps, repeat the steps if necessary,
keep it simple still with all the practices.
So first of all, I want to connect the components.
So I need to think how should I connect them?
That's the first step.
Do I need siblings?
Do I want to make parent, child?
Where should this component go?
Do I have the routing involved?
Do I need the menu or not, et cetera?
So of course, discussion with myself
or maybe if I do pair programming with the other guy
or girl, you know what I mean, right?
So before we do any coding on Angular,
it's always good to think about it.
If you do the coding without thinking,
sooner or later you're gonna end up with some code,
you're gonna have to refactor unnecessarily
because if you thought before, you know what I mean,
that's the approach in Angular.
It's not just letter, it's a framework.
And in this framework, we have plenty of tricky traps,
which can revenge in the future after a couple of months
or years even in something really, really bad,
unpredictable behavior, difficult refactoring, et cetera.
So I'm gonna do a very simple thing now.
Where's my list?
Here is my list.
So below, below the list, I'm just gonna say,
I'm gonna call this component.
So, right?
Just like this.
Now, I'm gonna have a question to you.
In the same time, see, we do the live coding,
we do some discussions, we talk about best practices.
What's the difference between these two calls?
Is there any?
Really?
Are you sure?
What kind of, tell me.
Exactly.
So, very simple.
It looks like it's exactly the same, but it's not.
And in some cases, I'm gonna need children.
So I should write it this way.
And in some cases, not.
So again, I need to think.
Will I'm gonna use anything inside in this moment?
Maybe in the future.
I have some issues to do.
Maybe another issue will make me to do.
So I can, you know, straight away do it.
Trying to predict, not necessarily stochastically,
but try to predict the next steps.
Or maybe you already have the process somewhere,
the business process, and you know what to do.
So you will be sure.
For now, I'm sure I don't need any children here.
So I'm gonna use the second one.
Was it always like that?
I mean, was this bit always available
in Angular templates or not?
You remember?
See, wow, how precise.
You have a great memory, come on.
I didn't remember which version, but okay.
I just wanted to ask you if you know
what happens between versions.
Yes, not every goodie is available straight away.
It wasn't always like that.
Good, thank you.
So I'm gonna save the code.
A lot of people, of course, do the auto saving.
I don't, because I do git command line.
I prefer command lining the git way,
git arising the application.
And if I say auto save, sometimes I commit
to early something which I didn't want to.
So auto saving is not my way, but if you like,
you can do it now, so it will speed up things
for the sake of the training, which I'm gonna do now.
My daily practice, daily basis, I don't,
but in the training, it's always faster.
So I have this new component called.
I go back to browser, and it's supposed to be there.
It's working.
Now I have a connection.
I decided about the connections, I have a connection,
so now I can proceed actually improving the component.
If I do a couple of things in the same time,
like I move already all the code, or I write new code,
and then I call it, it might be problematic.
Small steps, this is my practice.
Of course, it's up to you, you don't have to follow that.
All right, and now, of course I'm gonna replace
the template here with something better.
And I told you only this functionality, only this thing.
Now, if I save it now, if I save it now, it will complain.
Does not exist on type-t list component.
Straight away, yeah?
Of course I'm gonna see the same thing.
Sorry.
I'm supposed to see the same thing here in the command line,
also in the browser, but still, it's just overlay,
so I can hide it and go back to the whole thing,
and play here.
Oh, yeah, true, it's empty.
There are some errors.
Also I have this.
So plenty of moments and slightly different points of view
how to debug it.
Just straight away, like this.
All right?
Okay, so let's go back.
And now I do need, do I need something here or not?
And how should I proceed?
Maybe, give me a moment, I'm gonna work maybe with,
Darren, would you like to work with me on my screen?
Yeah, mm-hmm.
Well, I can go and try if I can have quick fixes.
I have no quick fixes here, so I could do it manually.
Now I have it, yes?
Sorry?
Someone else, oh.
Really, interesting, okay.
Wait a second, wait a second,
because I think maybe I misled you with someone else.
I think I was looking at someone else's screen.
Was it you?
I was talking to you, you didn't finish the,
who didn't finish the exercise?
Tell me, the group is big and sorry, I forgot.
I was looking at someone's screen.
Don't worry guys, this is like,
if you work together with me, you will learn better,
more, faster, more efficient way.
So if someone didn't finish the exercise, just tell me
and I'm gonna, you know, you will do it with me on my screen.
Sorry, Darren.
The boss says no.
Everyone did finish it?
All right, okay.
But including Darren?
All right, okay, so maybe Joe.
One Joe only, I think yes.
Okay, mm-hmm.
How should we proceed now?
What should I do?
Where?
In the jelly's component, right?
Yeah, so I'm gonna do it like this.
Now it's the same one like before.
So let's maybe do it this way.
How would you like to do it then?
So I can keep the same and it's not a problem.
True or not?
I can keep the same name.
I don't have to change it.
I copy paste it from the previous component.
But do I have to?
Why do you think so?
Please explain.
All right, so I'm gonna ask differently.
Is this component separated from the previous one?
So I will not gonna pollute the global namespace
in any way as long as I don't export anything else.
Does it really matter if I change the name or not?
And how?
Someone else was speaking?
Please do.
So I can keep the same name, right?
No issues with that, very good.
And it, mm-hmm, yeah.
Please, yeah, please continue.
Exactly, very good.
Okay, Joe, can we go back to you?
So what about CSS file here in line 12?
Can I use the same names for CSS rules
as in the previous component?
Is it also separated or not?
Yes, in JList component.
So far it's empty, but if I put some rules here,
can they be exactly the same names as,
this one?
This one is also empty for now,
but let's say we would like to have.
Exactly, Angular will add its own prefixes dynamically.
So it's yet another advantage.
Okay, another question.
Joe, stay with me.
What should I do now?
Oh, you did it this way.
You don't want the service.
No, no, let's stop, let's stop, let's stop.
Let's talk about it, because it's a good idea, I believe.
Why would you use output here?
Okay, does this child provide any new data to the parent?
So if we think about, let's say, doing data binding,
or if we think about just communication, talking,
okay, differently.
I have three kids, right?
Eight, five, one.
When I want to see all of them present on the dinner,
do I need any feedback from them,
or just want to see them all of them in my table
when I provide the dinner for them?
Well, yeah, probably input would be better than output.
First of all, very good idea, nice.
Now, but if you look at the application,
you see there is always the service there.
Let's open it on the side.
All right, guys, this discussion is necessary
because I want to make sure everyone
will be on the same level.
So designing Angular is like this.
Think a lot, do less.
You know what I mean?
It might be weird for such simple application
like this one at the beginning for some of you,
for those of you who have, let's say,
a lot of experience, a couple of years with Angular maybe,
but believe me, if you go this way, this practice,
it will be easier later on to debug your application.
It will be more predictable, more maintainable,
extendable, reusable, all right?
So now we agree, I hope, Joe, do you agree
that input will be better than output here?
Now, okay, we think about it now still,
and we see, oh, we look at the application.
Someone else already created the service.
I mean, the service we see that is already get jewels.
And the jewels are not available
in the parent component, are they?
Not directly.
Parent component is using the service.
Now, the question is, what would be better,
to use the service here or just use input?
And in what circumstances,
which of those approaches will be better?
Joe, stay with me.
Now, can you explain why?
Why would you like not to use the service then?
Why is it better or worse?
Okay, so we agree to that.
It's better, but why?
This is important to understand,
because if you do it just without understanding,
you might mislead it in other processes
when you map different functional.
Okay, anyone else?
Might be, yes, last time.
Okay, very good.
And behind that, there are some consequences
which can be good or bad.
One of them will be speed, performance.
That's the final bit.
If I do input, it will be faster than service, right?
Because I don't have to inject it.
Every injection will slightly slow down the thing.
Very good, thank you, Lester.
So it's about speed and also reusability.
So I have a list which takes jewels.
And then if I decide to remap it later on
and maybe do use this component
as listing for something else,
it will be also easier because then I just need to pass
something different via input.
Name can stay or I can even rename it in more general way.
So reusability will be better than just service.
Or will it not?
If I use service, it's still reusable, right?
Even more.
But then maybe slower.
Things like that, we have to always think about it.
Which way will be better from the bigger structure,
bigger picture perspective?
Okay, guys, thank you very much for this discussion.
Good, let us proceed further.
Unless you have questions, we can proceed further.
You have questions about this example?
This exercise, anyone?
Let's go further then.
We're gonna do another exercise, I think in a moment.
Let's first look at the example.
Let me check my list.
All right.
Yeah, we're gonna do even stronger migration.
We create another component.
We stay with components so far.
Because component is the most important bit.
Now, we know there is
game here happening.
It has some user interface.
And let's say we are improving this application
or we want to prepare it in a stronger environment,
stronger background.
Imagine that we have a shop which will be selling jewelry.
All right, and part of this shop selling jewelry
would be only this game.
So our FTJ will become something stronger,
not just the game itself.
Which means we have to separate, migrate the whole engine
into new component.
All right, so the whole engine of the game.
And that's your job.
Try to do that.
We have to create another component.
All right.
And find out which bits are necessary for the game itself.
Only looking at the user interface.
And yeah, that's it.
Maybe for now I'm gonna stop it today.
So in our browser, we see,
we will see it still the same way probably,
but then we will separate again functionalities.
And then the whole application will be able
to do something more for us.
Good.
Another component, don't forget about dry run.
This time we want to keep the HTML file available,
probably, all right.
So not inline style, but the whole thing.
And yeah.
Oh, we have a task today here, nice.
So maybe five minutes for that too, we will see.
Engine, just engine.
I don't know, you have to find by yourself.
Think about it.
No, no, I'm gonna, if you, well, let's make it simpler a bit.
The whole game is like this.
We provide the dual name, we verify,
we restart the game, all right.
We already separated this and adding new dual,
and we separate those into new components.
So number of tries, the field here, right.
And I believe that's it.
So both buttons, field, number of tries,
maybe this and maybe title too.
The rest of it is already separated.
Okay.
I think a couple of more minutes.
Please continue.
Question, did anyone finish already?
No rush, I'm just checking.
Sorry, can you repeat?
I couldn't hear you probably.
Who was that?
Sorry, because I couldn't map you from the area, right.
Done, okay, sorry.
Thanks.
I see, do you need my help?
And it works.
Okay, good.
So please continue.
Thank you, please continue.
Any questions then?
Doubts?
If you create engine, then we don't need the previous one.
It will be like part of something bigger.
So the main root, I will add component,
will serve for the bigger project.
And the whole game will be like smaller part of it.
So that's why we need only the new one.
So we can remove the previous one.
Gerard or Gerard?
I'm not sure if I spell your name properly.
How is it going, do you need my help?
Okay, thank you.
Thank you.
Efraim, how is it going, do you need my help?
Show me your main component HTML, please.
The code, main component HTML, app component, the root one.
The very first one, yeah.
Oh, okay, yeah, so now the engine component HTML, please.
Thank you.
So we have a title, yeah.
That's probably most of what we needed.
But then,
do you have this tracker also here?
If you don't move the tracker,
you're gonna have to pass it in a different way.
We want to make it fully separated.
So, you know, go to browser, I'm gonna show you.
This bit, this bit is missing, I believe.
Probably, that's it.
Thank you.
Here comes the adventure for me.
Thor, you need my help.
I'm producing a lot.
Yes, and okay, show me the code then, please.
Can you start with the main app component HTML?
Okay.
All right, nice implementation.
Thank you very much.
I'm afraid you are the chosen one
and we're gonna discuss the solution together with you
in a moment.
Guys, last two minutes and then we will discuss together.
I would like to proceed, but I don't want to rush too much.
Someone is still working.
I'm looking at your screens, but,
let's speed up this with someone else.
Let's continue.
We're gonna talk with Thor and I'm gonna share my screen.
So, Thor will be able to show you his,
Thor, you will be able to show the others your solution.
I chose you because you have something
which I wanted to discuss
and actually it's interesting to compare.
But before that, I'm gonna show my solution first
and then we're gonna compare these two solutions.
And if someone else, anyone else,
will have something totally different maybe
from different structure perspective
and other advantages from business perspective,
let us know, okay?
Please shout, brag, because it's okay to compare solutions.
Each of them will be good
and they can be applied in different scenarios,
business cases.
So this is important to compare such things.
Now, please focus on my machine for a sec.
Even if you didn't finish, don't worry,
you will have a chance to do it
during the Thor's explanation in the meantime.
Or if you will still struggle,
then we can do the gitterizing
and then you can have the solution from my side,
if necessary.
So, yeah, let's start with the code.
I created the component same way like you did.
This time we need the file.
So I'm gonna open it here
and then close everything else.
And then I'm gonna keep it like this.
So I decided to move everything here,
including the hinting part.
The main component is like this.
Straight away, simply like this.
I keep the title, I keep the description
and then call the App Engine component.
As simple as possible.
Now the component itself
looks like this.
So I moved almost everything from the main component.
And of course I did it on the purpose.
Right now my main component,
App component is like this.
Really, really simple.
Almost empty.
If not the template itself.
Now, why would I do this like that?
I made my main component totally empty.
Now JEngine has everything.
The template JEngine component HTML has the whole thing.
Right?
And the final bit which we're supposed to look at
also at the same time would be nice to see this bit.
So one, two, three, four, five files in the same time.
I think this amount would be good enough.
So App component still looks like this
and then just App Engine like that.
Do I have something twice?
Actually I do, so I don't need this bit four.
Okay, sorry.
Let's keep the flow the same way.
Good.
What do you think?
Why I did it in that way?
We will compare in a moment with other solutions.
So from the business perspective, this is important.
Well, we agreed, or I told you to do it like this actually
because we wanted to clean up the main component
and keep it available for something bigger.
Application is growing, we are improving.
Now we are ready for creating the whole shop maybe
or something else which will keep the game
as just smaller part of it.
Which means, well, I could keep things like Foldit
and we're gonna compare it through the input as them.
But that is slightly different approach.
All right.
Now let's compare with Tor solution.
So I'm gonna show your machine right in the share screen
in the teams because at the moment
this is the only way I can do that.
Window.
Guys, can you see my screen share on the teams?
I'm so used to Zoom.
So we go for Thor screen.
Now Thor, please brag about your solution.
And can you start with explanation?
Why did you decide to do it this way?
Can you show the same way as I did?
So main component, class, then main component HTML,
then JEngine, I think you named it this way,
class and then JEngine template, four files.
But can you show it in the same time, please?
And then fight the explorer.
That would speed up things.
Thank you very much.
Thor, I'm gonna stop you.
Sorry, sorry, I'm gonna stop you.
Can you split the screen into four sections
and show the same as I did?
Because it will speed up things
and then everyone else will have a chance
to understand what you do.
Thank you.
Sorry for interrupting so many times.
Very good.
Yeah, if you can also hide the terminal just for a moment.
Yeah.
Yes, perfect.
Now you can proceed with the explanation.
Thank you very much.
Why do you think so?
Why are you unhappy with your code if you compare with mine?
I'm not saying it's wrong.
All right, guys, do you agree with Thor with his conclusions?
Maybe, wait a sec, let me choose someone.
Because I want to talk with everyone today.
Berna, Berna, Berna, yes.
Wow.
The question is, do you agree with Thor's conclusion, actually?
Because Thor, I believe, wants to refactor the code
because it's not maybe that reusable as we expected
or maybe because of some other reasons, right?
Do we agree with that or would you proceed with this one?
And if you would proceed with this one,
with the Thor's solution instead of mine,
in what business case it would be better, if you could tell?
Okay, thank you very much.
So another question to you, Berna.
Stay with me if you don't mind.
What would be the business case, scenario or circumstances
in which we could keep this solution like Thor did?
Different than I wanted from you from this exercise, of course.
But what would be this scenario
in which it would be good to have it like that?
If you think about this from the business perspective.
The other guys also please think in the same time
because this is the discussion.
We started with Berna, but you know.
So the question is, could that solution of Thor's
would be useful or in what business case?
What circumstances?
Please do.
Any other ideas, guys?
Thank you.
Sara.
Same question.
Should I repeat the question?
Yes.
Because?
So let's look at your solution then, if you don't mind.
I'm connecting to your screen.
In a moment we'll be there, guys.
Please focus again on the shared screen in Teams.
Now we're gonna look at the bosses solution.
The bosses solutions are always the best,
so please focus, okay.
Of course, joking a bit, of course,
but something true is in that.
So can you show us your solution
and then what do you mean by the connections?
No, no, I'm already doing it, so you don't have to.
So can you show us?
Maybe the template, the HTML template, maybe first.
So can you show us main component template too
in the same time, that'd be nice.
So two templates, main component and engine component
in the same time, thank you.
All right.
Now can you explain why, again, can you explain shortly why?
Thank you very much for that,
because this is crucial, I believe.
Can you explain why did you keep add component
and list component together in the, wait a sec, app.
Oh, so I was wrong.
It's okay, it's similar.
So we have in main component template,
main component template, right?
You have app engine, app list and app dual
as siblings together, right?
Good, so this is actually the same.
I thought you did it inside of engine component.
I'm always mistaken by myself, sorry.
So again, can you say why this is better
than a source solution in your opinion?
Uh-huh.
So if I understand properly, it's about communication,
reusability and speed, right?
And effectively we're gonna have business logic
gathered in the proper place.
Okay guys, thank you very much, Sarah.
Thank you, Thor, thank you everyone.
Before we do the lunch break,
let us summarize this example.
I'm gonna stop sharing the screen for now.
I make a better quality maybe of the video
and sound of it.
Let's look at my screen maybe.
For one more couple of sentences.
My question was actually not answered
because I was curious,
how do you deal with the business perspective?
And most of the time programmers
doesn't like business perspective.
They like to code.
And I thought that I understand
because I started with the same thing.
But my boss taught me and I really appreciate him for that,
that business is the most important part.
If I understand the business properly,
then the code would be just simple, right?
Now the question was in what circumstances
maybe I'm gonna show the Thor solution.
Okay, this is Thor, yes.
Thank you Thor.
So I'm gonna still share it because this is important.
Thor, I believe your solution would be also very good one,
but in a different business perspective.
If we decide to,
can you see the Thor screen one more time guys?
If we decide to keep the whole application
as a game only, not as a part of bigger project,
then this solution is still okay.
Because the main component
is supposed to serve the whole game,
which means we can play with the logic in a different ways.
It's supposed to be always about the business.
Why business?
Because in Angular we create user interfaces.
That's the main thing.
Of course Angular is big and then we can do a lot of things,
not only using interface, okay, but that's the main point.
So it always depends on the business process.
So there's no bad solution.
In this case also,
we have input output instead of service
in this engine component, which is okay.
As long as we don't want to make it more generic
and let's say more reusable.
In this case is less generic, more specific,
less reusable and that's okay if the business won't start.
So never think about your code in the wrong way.
It's a bad one.
But think about the business.
Does it really, really reflect the business process?
Maybe I'm exaggerating with that,
but believe me, if you do it this way,
later on you will have more monies
with less amount of work and time for this.
Okay guys, thank you for staying with me
a bit longer before the break.
Thank you for this nice discussion,
final exercise before the break
and then let's say do the lunch break,
45 minutes, so we continue in 45 minutes.
In your case, it will be 12.50, right?
12.50.
Enjoy your meal, refresh yourself,
just start walking, maybe open the window.
See you in a bit.
The boss is out.
We can have some stronger jokes, right?
I'm joking, of course.
It's recording so I cannot do any nasty stuff.
So let's continue with the topics.
I'm gonna just double check.
Thor, did you manage to rewrite it
or I thought you planned to refactor it?
Oh, so you have now the whole thing in the component
separate from the main one, right?
Okay, anyone else need me to speed up things
because we can go to the proper git revision
and then we don't have to do anything else.
I think most of, yes?
Uh-huh.
Show thing, are you looking at my screen?
Oh, come on.
Give me a sec.
IntelliSense is tight for a moment, I don't know why.
We want to see, oh, let's say we wanna show both, why not?
So here it is, the component, here is the template.
Yes, yes, I made it simpler in this case.
Well, if you think about it, services are not that bad.
If we properly separate everything into smaller elements
later on with modules also, then,
and we provide services from proper levels of abstraction,
then they are not that dramatically slowing down
anything actually.
So this is my example of the solution.
Good, let me check my notes.
Yeah, Tremann also had to leave us
because he was gonna drive yet another training
between nine and five CET time, so he had to go.
Let's see if she says good luck and yeah, we'll see.
Now, before we do another exercise,
let's look at a couple of things.
First of all, I promised that we were gonna refer
at least couple of times to something real,
which means my production organism application.
So let's look from the component's perspective
at this example.
If you are not there yet, please focus on my machine
or my trainer virtual machine.
Now I'm gonna make it slightly bigger in my case
because it's already double virtualized.
And I'm gonna show you some structure.
First of all, let's start with a big picture.
This very application is huge.
It has a lot of components, not from the Angular perspective,
but only but from the whole business perspective.
And it was not easy to maintain it,
to prepare it with different languages.
So we decided to keep everything in one language, JavaScript.
Initially, we started with PHP as a backend size.
And it was okay, but it was too slow
and too difficult to maintain improving the future.
We also experimented with AmberJS library.
Yeah, and that one was our initial choice.
Then it become also not the best option
from the state handling, et cetera.
So we left that one.
And it observed, this application observed
a lot of migrations, not from Angular perspective only,
I'm afraid.
So the whole thing is quite big, huge.
We have the whole thing in one place.
We have server, which is not JS based.
We have ExpressJS.
Also, it's doable to deploy the whole thing with Coa.
So we maintain different scripts for that.
As you can see, we have plenty of scripts
inside of the whole application,
which can do different flavors of stages of our application.
It's not just only production, development,
and maybe one stage between.
Plenty of them, I'm afraid.
And that's only because it's supposed to serve each country
from different perspectives,
so translations, et cetera, et cetera.
Now, in the main SRC, of course,
we have my Angular application,
and then we have some components
gathered together into modules, et cetera.
Main component, I believe I'm showing it now, good.
And then main template, maybe, let's start with this.
It's always good to compare with something bigger.
What you will follow later.
Then just examples from the training.
So as you can see, sorry.
I think I got something else nasty from my kiddo.
Another of my kiddos is sick,
but today I managed to have some babysitters,
so I'm happy about it.
So see, the whole component is less than 600 lines.
There are some good practices about that, too.
You might be surprised.
So let's say no more than 700 lines per component,
and the template itself should be small, too.
This D, let's say 70.
Well, in my case, it's slightly bigger, 150,
but only because we have a big project.
We are thinking about now to migrate bits of it
into React, keep Angular as the main core.
And actually, a couple of elements are already done
in React instead of Angular.
For example, if we go here, I believe,
I hope it will gonna work like this.
Oh, it is, nice, it's working, at least.
Not precisely, but that's okay.
So as you can see, this bit, it's another view,
we call it room, and this room in separate
is actually as a combination of Angular plus React.js.
Why we did so?
Because just Angular was not good enough for that.
A lot of streaming, a lot of,
it can be even more than 15 people in one view.
So this particular sub-page happens to be done by a React.js.
As you can see, combination of,
I close too much, sorry.
Combination of couple of techniques, JavaScript libraries
can also coexist in a perfect way.
Well, not perfect, but not ideal of perfect,
but they do not struggle with themselves together.
They can cooperate.
Now, again, the first component,
the very first component, root component,
serves as a whole project, of course.
And as you can see, you have a lot of dependencies
from the outside world and our custom components.
Also, observables are involved,
which is one of the next topics today.
We have plenty of services.
Division between different countries, languages,
different franchises, lot of filters, actually.
But the structure of components is like this.
We have the main one.
Then we do a couple of filterings, of course, securities.
Here comes the first example of what, what's that?
Line 106.
Can you read it?
Is it big enough for everyone?
So 106 line.
What does it do?
Anyone knew?
No?
What is ng-init?
Did you see that before?
But what exactly is this function?
Is it my custom one, or is it something
which Angular provides me with, or what?
Exactly, very good.
Thank you, Lester.
It's a life cycle hook.
There are plenty of them.
We're gonna go deeper later on.
I'm just describing the first one.
This is something which will happen just after constructor,
not in the same time.
And in plenty of occasions in businesses,
different business processes,
it's good to have access to the life of the component.
Component will be mounted.
It will be alive, and it will be unmounted
at some point in time.
It might.
It doesn't have to, but usually we remove components
also from the picture.
So to all of those moments,
or most of them, we have access,
which means we can interrupt, we can delay,
we can do some logging of data
in between informations, either from user perspective
or from database perspective.
And the difference will be also
between the execution of the code.
So the code will be executed in slightly different moments
during the component life.
All right.
Now, on the right side, we have the main template.
And in this template,
we have a couple of additional elements.
First of all, we see an example of different way of
controlling the flow of logic.
I'm gonna show more of this later on,
but for now just one,
just to mention what Angular 16 plus 17 improvements
gives to us.
So this is like better control flow.
Instead of ng-if, ng-switch,
ng-select, ng-for, we have better constructs now.
And then we're gonna talk about that probably tomorrow.
Translations, so internationalization,
18 characters between the usual.
As you can see, we can coexist with
all the elements together.
Sometimes it was better for us,
that side, for me and my team,
to keep the old way together with the big one,
just for the sake of readability.
So you can see the mixture of those.
Now, one more thing which I wanted to show you here was,
where is it?
Should I do it now or maybe later?
Yeah, later, not too much at the time.
Now,
let's look at example, which is
doing the da, maybe.
As you can see, we have a module,
which is like a huge one related to administration.
And plenty of components are hidden here.
As you can see, it's a long and long and again,
long structure of components.
Sooner or later, we're gonna end up
with a project which has hundreds of them.
And some people say, on my courses,
they have thousands of components, not just hundreds.
All right, and it's okay.
Angular is so powerful, it still can handle it.
It's doable.
But for such big variants,
I would probably switch to React or Vue because of speed.
Sooner or later, Angular will not be able to handle it.
So these are the reasons that,
no, it's still not the biggest one I'm showing you, right?
But yeah, like a lot of bad boys.
And as you can see, the structure is,
most of the time, siblings.
In our case, that was the only way
because of a lot of surrounding wrappers.
Again, first wrapper is like country.
I know I'm describing to you my business,
but this is really important.
Proper mapping of business into components.
If you do it properly from the very beginning,
if you think about it, like couple of hours,
and then you write the code half an hour,
it will be always better than the opposite, right?
Then it also means you don't have to even test it.
And of course, if you do test,
it's a different story, right?
I'm just saying.
Now, in our case, it was better
because we have first of all countries,
then one country can have master franchisee,
and then other franchisees,
which means another differentiation.
Like USA, for example, is huge.
Most of the states, sooner or later,
will have their own franchisees.
In Poland, we have couple of franchisees,
even if it's a small country.
Then the third level will be
if it's service both from us, from Nobleprog,
or if someone wants to buy the whole thing.
There are companies buying the whole infrastructure only,
not the courses.
They want to use our desktop, right?
So it is yet another module.
You want to handle it in one application for now
because it's easier.
Way simpler to maintain and improve.
And of course, from the programmer's perspective,
it's also more efficient in this case.
All right, I'm gonna stop discussing this.
I just wanted to show you one of the nice structures
we decided to follow with,
and it's also a good practice in the same time.
Now, let's go back to our examples and exercises locally.
Let me think, should we talk from the slides perspective?
Well, we should talk about component three,
which is actually something we will do
in a moment even more.
But then,
let's slowly proceed to improvements.
We're gonna go slowly into observables
because this is a very important topic too.
Most of the time, we have to
maintain data in asynchronous way.
I forgot that the links, that doesn't work.
Cool, I need to fix it.
Oh, I forgot to type to the guy.
I was sleeping.
Sorry guys, I'm gonna do it in the next break.
I promise.
So this is point seven.
This is really many of yours, come on.
Yeah, all right.
Good.
And now let's go bigger.
Hopefully, readable enough.
So in Angular, we have
plenty of choices where to put
functionalities, how to organize them,
and then improve later on.
So, so far we talked about components.
We saw templates in action, service,
directives, it's something which is happening
all the time and then we will see that in action more,
but this is something you already know.
And you don't have to cover that more.
We saw data binding already.
We're gonna talk about it more with forms, of course,
and reactivity later on.
And we saw in action dependency injection
connected to services.
These are the most important elements.
Now,
as long as data is simple and small,
I can even keep it in the browser straight away.
Of course, if it's,
if it either can be public enough data or,
so I don't have to make it hidden or secured,
or I can use even the built-in browser elements like this.
I'm not gonna show you what I mean precisely.
So I could use
cookies obviously, I could use local storage
and session storage, which is very common thing
to do the securities, for example, like with JWT,
which is an example I'm gonna show you later on.
Also we could use index DB,
and of course cache storage.
In Chrome, we have a couple of more elements, actually.
We have WebSQL index DB, right?
So this is also useful,
and we can have something really, really fast efficient.
Even if I have database somewhere,
I can do session storage or local storage in between
and keep the data available here,
which means speeding things up even for the Angular,
because it will happen to be in a memory if it's small.
If we have big stuff, then of course we should do it
in portions like pagination,
levelizing the loading with asynchronous behaviors, etc.
And this is something we're gonna focus now on.
First of all, examples.
Let me think, how can I work with it?
Will Visual Studio Code allow me to play with that this way?
Probably it will,
because I want to keep exercise in a separate portion,
and then examples in a separate one,
so it will be easier for me to move.
Yeah, this would do.
Let's try.
I'm gonna open only.
Ftj here.
Yeah, that would be good.
You don't have to do it, all right?
You don't have to.
This is only for me as a trainer to make things simpler.
And then here I'm gonna use everything else.
Yay, solved.
All right.
Here in this ng-train application,
which is the second thing I wanted to show you,
the most important one,
because it has most of the examples, sorry,
most of the examples,
we have simple example of observable facts.
What is observable?
Actually, before we start,
quick question, is there anyone in the group
who never touch it or has very little experience
with observable facts?
All right.
So I'm gonna do it this way.
Please focus on my screen, my machine,
stay with me there.
This is very simple example,
which shows one of the ways in observables,
which is part of RxJS library.
We can do it in actually both ways,
synchronous and asynchronous.
When synchronous way is useful, actually,
Jesse,
oh, yes, sir.
How do I, how should I pronounce your name, sorry?
Jesse, okay, Jesse.
So if I, when can I use,
in what business circumstances, business cases,
synchronous observables would be useful?
What about if I do, for example, pagination?
Simple review with pages.
If I have data already loaded, of course,
asynchronously, if it's not too big,
I can manage switching between pages in synchronous way
to make it faster.
I load it once and then I play with the existing data.
So I don't need additional queries.
As long as I know I don't,
the flow is really like fast, fast.
I know that people are adding new content
like each minute, literally.
And probably I should keep all the time asynchronous.
But if the flow is smaller, let's say slower,
I can go this way, which means again,
what, performance, speed.
That's why our USGS library guys,
they decided to provide both ways,
synchronous and asynchronous, which is great.
Actually, in my opinion, because I have a choice, right?
Well, for example, in the case of Google guys,
well, we still have a choice,
but writing Angular without TypeScript would be difficult.
We could, but it's not the best approach.
All right.
Now, here we have a very simple example.
So we have new observable,
and it's just doing the data together in one component.
We have definition of it, we subscribe,
and we love something.
I'm not gonna run it because this one is too simple.
Of course, we're gonna look at something better.
And in this case,
we're gonna look at component called list posts.
I'm gonna show this one because your job as an exercise
will be improve our existing service,
duals service, of course, with observables.
All right.
We're gonna stay with this topic a bit longer,
so don't worry, there will be plenty of time
to play with it.
It's one of the most important elements.
Why?
Because Angular is using that like a lot,
it's a preferable way of asynchronous calls.
We still can use promises.
Of course we can, no problem with that.
Right?
So Angular doesn't, let's say restrict me
only to observables.
It even allows me to use the whole RUJS libraries
I can remap them from observable go to promise
Of course I would not advise to go the opposite way.
Usually the most common way is like,
I have something by observables
and then I make it as promise, right?
Mapp it into promise locally.
Well, of course, I believe everyone knows what promise is.
Right?
Is there anyone who have no experience with promises
here in the group?
JavaScript promises, everyone is aware of that.
Now, let's look at this bit.
We start with the component
and we look at the template of course,
just in case I keep the solution with the promise too,
just to compare.
And of course we need the post service itself.
And then it's called explorer.
Most of the time we're gonna need additional element,
the service.
Now, why should we use service for that
instead of keeping the whole thing in the component?
Is it okay to actually do everything in the component?
You know, define the whole observable,
subscribe to it in the same place.
What do you think?
Maybe let me check the list
because I want to talk with everyone during this training
at least once.
Ramzes?
So reusability, that's the first thing.
What else is important?
Besides that, Ramzes.
Guys, can you help?
What do you think?
Reusability is one thing.
If I would keep it there in one component,
everything there,
what would be, not necessarily maybe problematic,
but also important.
Which means what precisely?
How does it help if we use dependency injection
instead of that?
Back to reusability exactly.
But that's okay.
We are discussing together.
Okay, I'm not gonna tell you now.
We're gonna do some examples and then maybe exercises
and then we will see by yourself, hopefully.
All right, let's maybe explain the code together
before we look at other examples
and then before I may proceed to the exercise.
Thank you, Ramzes.
I'm gonna choose someone else now.
Let's go from the top
because we have two RDLs.
So, okay, I'm gonna go from downstairs.
REL Edwin, REL Edwin.
Would you like to work with me for a moment?
Thank you.
So if you look at the very right file
on the very right side of the screen on my machine,
if you look at this bit here, lines from 12 to 22.
Please tell me, do you understand the whole code?
If yes, please try to explain in your own words.
So everyone else can also enjoy the understanding too.
Yeah, we can hear you now, good.
And then happens what?
What's this bit here?
Yeah, array of posts, okay.
And the whole thing is like casting the type, right?
Good, please continue.
Okay.
Let's make that one smaller
so we can see the whole thing at the same time.
And we have some data locally.
It happens to be on the same server
for the sake of simplicity
and a couple of days training, right?
So we have it still here locally.
And then happens what? Line 14.
What does this guy do?
Pipe function.
Okay, maybe someone else then.
John, John Ronil.
In one go without stepping them, right?
Otherwise I have to do chain of steps
and it's not easy to maintain problematic,
like with promises, right?
All right, good.
Next one.
What does the switch map do?
John David.
Yeah, so we can, all the maps from RxJS
are similar to just map, the pure map in JavaScript.
Pure RxJS.
They differ because they have additional goodies
like this one, for example, can already redirect me
to the element which I need, right?
From the list of elements.
All right.
Is this interval from JavaScript
or is it from RxJS too?
PureJS or RxJS, what do you think?
Yeah, of course.
It's part of observables,
it's part of observables,
which is implementation of observable
actually in RxJS library
because this is just one implementation
of observable pattern.
It's not always the same, right?
But in this case, it's exactly like this.
And then we have another pipe.
Why do I need this pipe here also?
Joe?
Joe?
Yeah, if I don't need more steps,
let's say I don't need take,
I just want, I'm gonna map finally
or do something else, maybe filter, right?
Then I don't need pipe at all.
You could actually do the whole thing without pipes at all,
but then, you know, it might be problematic to maintain,
like I said, and improve later.
Also test and debug.
All right, what does the take do?
Remember, this question is to Lester.
Please unmute yourself, don't forget to unmute yourself.
Lester, are you there?
Guys, can you hear Lester?
Because I can't.
Oh, fine, yeah, we can hear you now.
Good, awesome.
Yeah, do you remember what take does?
Oh, okay, how long were you absent?
Because I couldn't see any message, so sorry.
Five minutes longer?
Okay, so we are just in case.
We are looking at the example
which is using observables, all right?
It will list a bunch of posts from external URL.
So we do the simple web service with RESTful API.
In this case, we make a client of it, HTTP client.
We use built-in Angular HTTP request server,
which is awesome to have, so it simplifies things.
And on top of that, we say get.
This thing will be returning an observable,
or a couple of other things if I need.
So it's awesome, so I can already await the answer
in a better way than in promises.
And the question was, in this structure,
which we used to actually filter data properly,
and we have this take guy, line 17.
What does it do?
Do you remember?
So, yeah, good.
I have some data here.
It will come to me in portions.
Well, it will come to me the whole thing,
and then I make portions with this
asynchronous behavior, of course.
But then I have the whole thing, and I can decide,
well, maybe give me five only.
The first 10 maybe.
I might have, like in my case,
I might have, let's say, thousands of elements
behind the scenes.
And then first, when I design application,
I should avoid taking everything,
take the sample of it only, and then see what happens.
Then take the whole thing, actually, as a second step,
and see what happens, and then decide,
should I paginate, what should I do?
This is the usual approach.
Okay, in this case, we say take everything.
It happens to be 500, actually, element.
So not that small.
I made it bigger to make it more interesting.
And finally, we have map, which is actually,
what exactly?
Final filter.
Final filter, which will give me maybe one thing at a time,
and then I can reuse it somehow.
And it's also, I'll say, it's not the simple thing
from JavaScript.
All right, now we know the way.
Of course, we inject, as a dependency injection, HTTP client.
It's not good enough to just call it
from the import perspective.
We also use dependency injection for passing it.
It's like a service.
Good.
Let's look at the behavior,
and then we'll go back to component HTML for a sec.
Yes, of course.
Yeah, mm-hmm.
Yeah, because it's quite simple,
because I wanted to show the example with hazard.
If I take the everything, if I take the everything,
well, then I don't need to restrict it.
But it's always good to consider
just for the sake of testing, debugging,
checking the elements to keep it.
And later on, let's say this is still prototyping stage.
Later on, I'm gonna remove it if I truly need everything.
This might be also just small sample,
just small sample of the bigger thing,
just to speed up my prototyping and testing,
because it might be on the other side of the globe,
the real data, or it might be even distributed
in a couple of instances or replicated databases,
and here comes the problem, right?
How to handle it properly.
So, take is very oftenly used in big data environments,
so I'm just showing it.
But it's, of course, a good question.
We don't need it.
See, you have a good intuition.
You will already want to improve the code,
refactor it, and make it as simple as possible.
So it means you really love to kiss.
All right.
Good.
Any other questions, remarks, doubts before we proceed?
Of course it is.
Of course it is.
Now, but you can tell me yourself.
I believe you already know it.
Why this order, or let's say, why is it significant?
And how we should approach to that?
Okay, wait a sec.
Maybe we should talk with John Ronil,
if you don't mind.
Is the, is the, okay, can you repeat the question?
Please continue, yeah, please, please, yeah.
I'm gonna just open the file at the same time.
Anything you would like to add, John Ronil?
Okay, thank you very much.
Are you happy with the answer?
You are colleagues, right?
You will save yourself together.
I'm not fully happy with the answer.
I like it, but I could, I would like to, you know,
extend it because it's important question.
I really, I'm very happy you asked about that
because this is something I usually explain
during the process, but yeah.
The order or the sequence
of those RXJS operators has a crucial meaning
from two, actually three perspectives.
The first one is like John explained,
which is the data itself.
So where is the data?
How does it look like?
And what I would like to take from it
and where I would like to show it?
Lot of questions, right?
Lot of questions.
Which means simply again, business process will tell me
if I look carefully at the business process,
if I just, let's say pretend to be one of my final users,
like I'm gonna show you maybe this way.
This is important.
I'm happy you asked this question
because I know you are very open
to proper designing, Angela, not just coding it,
which is really important in my opinion.
And I learned that from creators of Angela,
from books, from my daily basis experience.
It's more important than just writing the code itself.
Crucial, it's easier to use React in this perspective.
Yeah, let's look at that one.
But maybe the application first.
So if I'm a franchisee,
if I'm a franchisee, an actor in the process,
franchisee, so I'm the owner of the business.
And I would like to see everything.
I would like to see everything, which means by default,
even by default when I log in as a franchisee,
I would like to see all things related to me.
If there is differentiated to that.
If I'm a training coordinator, again, active,
and only related to me, which is my special organization.
If I'm a master franchisee,
I would like to see the whole thing.
And of course, this is done by a filter, it's like that.
But if it's simple, I could do it
in the different sequences through just RGIS operators.
Let's say I don't want to allow people
to see those filters, not everyone can see that.
Only some roles from users can see that.
So things like that can tell me
how should I proceed with the data?
If I scroll down, I'm gonna see something.
And then at the beginning, we were using
just the whole thing, one list,
and it was loading and loading and loading.
Now we have pages.
Well, it's not that big today at this very moment,
I'm not a franchisee, I'm just admin here.
I don't want to spam myself with too many things.
But yeah, so again, business will always tell you
how you should proceed with the specific switches,
or let's say specific RGIS operators
to say it in more general.
Now, let me actually maybe go one time there.
Because it would be nice to mention,
maybe the whole thing first,
then overview, and operators.
Now, the sequence of the things of the operators
in your code will depend on the business.
But you can differentiate it like this by categories.
We create, we concatenate somehow,
then we manipulate with data.
So we transform it before we show it,
or we just search it in a proper way.
And then if you go through those categories,
and if you carefully look at your business perspective,
you will know which ones will be first.
Never do it just with guessing, please don't.
Because it will revenge either with this low performance
or missing data or bad things.
Not from the code perspective,
but from the logic perspective, business logic perspective.
So I will answer to that this way.
So it's not only about data,
it's about the whole thing, the whole user interface.
One more thing, final thing I promise.
Maybe not now, to-be code should be avoided at one go.
Let's do something,
and then we will proceed to more stronger examples.
All right, let's go to the code here.
Which one should I look at?
This is the one we wanted.
Let's run this one first, and we will see how it goes.
It's not easy to know it better.
Okay, if you want to run the examples,
you just need to go to the main component here.
You don't have to, just maybe stay with me,
but later on when you have this after the training,
so most of it is like this.
We have this main component,
and then I want to show this
observable example with list post component.
This component is just app list post, I have it there.
Really, there are plenty of them,
I didn't mention all of them, so.
Let's type it manually here.
Yeah, good, I have auto-save now,
so it's supposed to work.
Did I run it?
Yes, I did.
And now of course we're gonna see something wrong there.
Straight away.
What's wrong with it?
How to fix it?
What do you think?
Let me make this guy bigger.
How do you understand this error message?
How Angular helps me with that?
Well, you are partially right, the data is not available.
It doesn't necessarily mean it doesn't exist.
We have to be careful with that
because these are two different things,
but that's right, good conclusion,
something is wrong with the data itself,
not with Angular yet.
Angular is not getting data.
And it's quite simple because we didn't run any server yet.
No RESTful API is running yet.
This is separate link, separate stuff,
so I'm gonna do it now.
Let me do it again, okay, this one is for FTJ.
No, this one is for running the
ng-training, that one is for...
Actually, let me fix it.
I'm gonna do some order here, sorry.
Did I keep everything here?
Otherwise, I'm gonna become chaotic myself.
All right, so here I'm gonna go to the proper place
and then run the whole thing what I need.
On this level, I need any RESTful server to be executed.
And it happens to be simple with the filo,
so I'm just gonna do it this way.
Just in case to handle the course.
Now it's running, so I should be able to reach it.
But I did it without touching the code in Angular,
so I'm gonna manually refresh it,
and now it's supposed to work.
And it will give me some answers each two seconds,
500 of them, so it will take a while.
I can go back to Angular, look at this
extension in the browser and play with it.
See, it will dynamically change.
I can see precisely what is happening.
It will refresh itself, which is useful.
And this is how it works in this case.
Let's go back to the code for a moment.
All right, one more thing.
We say that our custom function
our custom function will return an observable.
So I'm returning an observable,
which means I'm using or I'm mapping the data this way
via observable.
There are different ways to do that in RUJS world.
We can create subjects, we can create behaviorals,
we can do a lot of ways.
We're gonna solve most of them during this training.
I'm gonna show you a couple of ways later on.
I'm just saying it's not the only way.
Right, you have to be aware of a couple of other ways.
Good.
I believe we could proceed with the exercise.
One more thing, when we use it,
so we subscribe to observable, here is the moment.
And I just take one post at a time,
and then I improve my local data.
Thanks to the proper, just to finalize your question,
the sequence of operators,
and let's say amount of them, not only sequence.
The more I do here,
the easier and simpler data will be there.
So as a good practice rule of thumb,
we should do the most of the filtering, switching,
concatenating, searching on this part.
That's why we separate it into service,
which means the component itself will be faster.
It will just await the data,
which means speed, better organization of the code,
better communication between components,
and reusability too, right, at the same time.
All right, I think we're ready to do the exercise.
Your exercise will be to improve
duals list service with observables.
All right, so let me go to this bit.
We have our FTJ application,
and we have our service.
So far it's quite simple.
We have local array of strings,
and then we have just two methods, schedules, addJewel.
I want you to redo it with observables.
You can create new service or change this one,
and then just make a revision,
maybe if you'd like to keep your code there.
The whole thing is working like this, guys.
I think, I'm not sure if I mentioned it properly,
but I'm gonna show you just in case I didn't.
We are, I am at engine component now.
I did this revision before,
and we are also in the branch called engine build.
I named it like this.
You might have a different name, just,
I don't remember how did I name it initially.
I already forgot, sorry for that.
So if you want to keep your solutions, do the commit now.
Make a git commit, okay?
You have my shortcut here if you like.
So the simpler commit with just providing the message,
git log, nicely formatted, status just g,
adding everything if you need nice shortcuts.
Just look at the elicits.
If you like, of course, you don't have to.
I'm just saying, if you want to keep your own solutions,
and if you opted to keep the whole machine
after the training, just keep it.
Don't override it with my solutions, all right?
You will still have it when I send it later
after the training.
Now, so if you didn't finish the previous exercise
for some reason or it's messy, you can always go this way.
Git reset hard head.
I should do the script for that, yeah.
Then we say git clean minus F to 40.
And then we say, of course, remove all files.
If they don't disappear, do it manually,
then git checkout.
Darren, you have a question?
As I said, it's up to you because, I don't know,
what's your preference?
We have git here, so you can make this as a commit
and then just do the changes in the existing service.
Or you can say jopt maybe or j-o,
create a new one, make it with observables
and keep it totally separate.
It's up to you.
There are different conventions, I'm just saying.
Probably it would be easier if you just change
the existing one, it will be faster and then commit it,
you keep your own solutions if you like.
Because later on, if you proceed
and then if the code is too messy,
I have the only way I have is resetting it
and then I have my solution, which is there
in the main line, in master.
So yeah, just in case I keep it like this.
I never know how many people I have on the training,
what is their experience, how fast they are.
So if I were you, I'd probably change the existing one
and do the commit, simply.
Good.
Let's say we start with another fiver.
If necessary, I'm gonna extend this time.
So five minutes initially.
Sorry John, can you repeat?
I couldn't hear you properly.
Well, I didn't run it.
I just showed you how to do it if you want.
Because if you...
No worries, no worries.
You don't have to do it
if you don't bother with your own solutions.
If you want to keep your own solutions
from the whole training, your custom best ever solutions,
it would be nice to do the committing
and then you can keep it as a branch.
So you don't have to reset it.
If you don't, don't bother.
If you have messy code,
I'm gonna show you how to reset it and then that's okay.
I was just explaining the backup plan
just in case you have problems, Houston.
Okay, so you can proceed and then if you want
your own solution to be saved in this machine
for the later goods,
so you can take it with you after the training,
you know what I mean?
Then do the commit.
And I was just saying all that.
Thanks.
Yes.
Could you say your name?
Sorry, who is it?
Okay, you cannot type anything.
Let me check.
Yeah, it looks like it doesn't, let me check.
It doesn't respond to me.
It does respond to me,
which means either your internet connection slowed down
or you didn't do much and the session was restarted.
Try to close the tab and open it again.
Or if you use room, close the tab with the room
and open it again,
which means you have to just go to desktops again
and then training room again.
If that doesn't work, let me know.
I'm gonna try to help in other ways,
other ways to fix it.
Guys, I'm gonna be back in very short moment.
Just click delete.
Interesting.
Okay, I'm gonna stay with me.
I'm gonna fix it for you from my side.
At least I'm gonna try.
What was the last thing you did?
Oh, so you've lost the internet connection.
Okay.
Okay, I see.
So maybe the session was keeping some key
but it was interrupted and it's just hanging on the key
because the keys from the keyboard
are mapped into this remote session.
So yeah, let me restart the server for you.
Of course, this is something that you, yeah,
in the moment it's supposed to be there,
but I'm afraid it will have to restart the whole thing.
So I mean, we are restarting the Linux machine.
If you had any unsafe data, it might be gone.
Actually guys, it might happen to any of you.
Your internet connection can spoil it.
So make sure you have auto-save in Visual Studio.
It's just in file, auto-save ticket
and it will save it all the time.
So even if something bad will happen,
you will still have the changes, hopefully.
Yeah, this one will take a bit.
Let's see.
Stay with me Thor, in a moment it will be up.
Give me a sec, I'm going to your screen.
In a moment we'll be there.
John Davy, yeah, I'm looking at your screen.
Show me, can you show me the command line?
Don't worry, show me the command line.
Show me the command line, don't worry.
Don't worry, show me the command line.
I'm gonna help you.
I know what's wrong probably.
Say GO and enter.
Type GO and enter.
Type GO and enter, good.
Yeah, so now we have the whole thing.
So let me help you manually.
I'm gonna make it interactive.
Can I click on your screen for a sec?
So in this case we need,
actually, let me check this way.
Where are we now?
We are there, okay.
So, it might be slightly slower for me
because you are far from me.
So just hit switch and then we need this one.
User B, that was your thing.
And if you had any changes there,
they should be there now again.
So we have your engine, JLSG.
We are back on progress.
But if you want to do the service again,
you know what I mean, yeah?
So then we have to start from scratch, right?
Good, good, so additional Fiverr then, thank you.
Thor, is it better now?
Did it restart?
Awesome, okay.
Make sure you do this auto-save in Visual Studio Code,
right, so hopefully no more code will disappear.
But maybe you need some help
or you have some interesting questions or error messages.
F alarm, Ramzes, done?
Need my help?
Are you back?
Is your speaker muted?
Okay, John Ronil, how is it going?
But does it work for you?
I mean, so can you show me?
And why do you have doubts?
Why do you have doubts about it?
Well, you have a service now.
Now it serves as an observable, okay?
And then does it still work?
Then you subscribe instead of just calling.
Mm-hmm, good, good.
And if you add mutual, it will also suck it, right?
It does, awesome.
And then if you play, in the console you have cheating.
If it's the winning one,
you can check in the console the winnings also,
but that looks like it's working for you.
Okay, good.
Or maybe not.
Oh, this is just your console log probably, right?
It's not the one I prepared, the cheating thing.
Not really, okay.
But it looks like it's working
and you chose specific operator for that, awesome.
So it's done, it's exactly what we wanted, right?
Our service is behaving with observables now,
not just simple thing.
All right, good, very good, very good.
Gerard, thank you.
Don, how is it going?
All right, good, it's working, awesome.
Okay, thank you.
Some of you disappeared for a moment, but that's okay.
Bernath, okay, but I believe you finished
and it's working, right, good.
Okay, guys, some of you will be back in a moment,
some of you are back already.
Let's discuss the solution, potential solution.
Oh, let me, wait a second.
Thor, how is it going?
I'm not rushing, just double check.
Okay, so please come to me.
Couple of more minutes, couple of more minutes
and then we will discuss together.
Not too long, but still, we have the time.
Ramzes, we have an interesting error message.
How do you understand it?
You there?
I'll mute yourself, please.
Well, this, well, maybe my screen didn't refresh.
It didn't work for you, I mean, did you finish?
So what's the problem here?
You have some, is it the final result or am I wrong?
Oh, it's compiled successfully now, sorry.
I was looking at the wrong moments, throw that, okay, good.
All right, good, thank you.
Okay.
All right, let's discuss together the solutions.
Let me, big sparse to nine.
All right.
Then,
FTJ, I believe is there.
It is refreshed, actually.
Yeah.
So let's just show it to you there.
I decided to do it this way.
Then we will compare with your solutions.
Most of you did it similar.
Now let's make me look at Ramzes.
What do you think, Ramzes?
Can we look at your solution first?
No, no, I'm gonna do it
because I'm gonna share not only yours,
and then I will be able to quickly show,
switch between all the screens.
Window, yeah, guys, do you see the screen search?
I'm just double checking.
Okay.
So,
tell us how did you do it
and why did you decide to use this particular
I use the AS operator?
Good, and you decided to
wrap into observables so far only jewels list.
So get jewels, right, only that one.
Why only that one?
I mean, you decided to wrap only get jewels into observable.
Only one function so far, right?
Which means you wrapped the array itself in line 10.
Good, and then the function itself just subscribes to that
and then sends the data.
So you subscribe here on the same level
we are looking at the service, yeah,
you subscribe in the service itself.
Why this way?
Can you explain the approach?
I'm not saying it's wrong.
I'm just interested in your convention
you are following now.
Oh, so you did it like second one and then, okay, all right.
But why?
Okay, I see.
So you have, you still have some bits
in the main component, right?
Then you moved not everything to engine
because it's spread it now you have to separate it
into two different functions, right?
See, exactly.
So I'm happy we are looking at this solution
because it's a good one, but still a bit over complicated.
Now we know how, now it's an exact proof, right?
How can the previous decision revenge on me
if I do it in not maybe the best approach way, right?
I'm not saying it's wrong.
It might be also good, still good
if we have some other business circumstances.
But in this case, now we see we had to
we over complicated at the first step.
Now we have to follow this over complication
which means we are going deeper into not the best thing.
Sooner or later to revenge in the future
with stronger refactorization and improvements
which we could avoid at the very beginning.
That's why I do the discussions guys
because this is very, very important designing Angular.
So it's a good solution, but now you see precisely
the first step was actually involving other problems here.
All right, good, thank you very much.
Now Thor, can you show us your solution?
Did you manage to finish it?
Good, we will compare it.
So I'm gonna keep this one, these two connected.
Guys, can you still see my screen shared properly?
All good, no delays, okay.
Thor, can you show us your solution
and explain why did you decide to do it this way?
Good, can you show the previous, yeah, exactly.
And then can you also show us the
the dual slip component template, please.
In the split view, if you know what I mean.
So split the view and show both files at the same time.
Ideally it would be great because we can compare.
Yeah, can you show also the
the service in the same time?
You can drag and drop it or just, yeah, exactly.
Very good, all right.
Nice, now guys, let's stop for,
I chose Thor's solution because it's a different one.
It provides, it moves actually
things to be happen in a different moment, right?
Do you see it guys?
The difference between the two solutions.
The one from,
before, sorry, between mine and then for example Ramzes says,
what is the most advantage,
most important advantage of such approach?
It's a good one.
But what does it give me if I do it this way?
If I move this filtering here to the pipe,
through the pipe, angular pipe, right?
Inside of the HTML template.
So I use the observable there,
not in the component, not in the controller, let's say.
Good, very good, anything else?
Exactly, so yeah, see, so it's like
improving the performance, also short cutting it, right?
A lot of goodies comes from that.
Very good, very good.
Now question, does anyone else did it
in a yet different way, third different way
than we observed so far together?
The silence means you didn't,
or with the second if you check the chat,
you forgot to unmute.
Some people are back, good.
Everyone, all of you have off
and some combination of subscribing or, yeah.
Did anyone else did this,
did anyone else did do, sorry,
have this async pipe and dollar syntax like Thor?
Someone else also having this?
Daren, yeah, you explained it, so obviously you do, okay.
Okay guys, thank you for this example.
Now we can see, first of all,
we can have different approaches.
We work with observables and,
well, using async is probably the best one,
but not always the most useful one, okay.
Sometimes we have to go in the smaller steps.
We'll see other examples also in a moment.
Let me check one more thing on my screen.
So I'm gonna close those guys, speed up things.
All right, I believe we can look at another example now.
Yeah, we will go to my production organism
and that would be a nice one too.
I think I opened it there, yes, so I see, good.
Okay.
Yeah, probably only here.
Okay, this one is
sex via.
Anything new here, not ready.
Mm-hmm.
Yeah, well, this is Putin, so this is slightly different,
but we have this error handling also in the same time.
So an example how to combine in one file, of course, mapping.
So the data which will be extracted from the REST API
endpoint, as you can see, it's parameterized
because we have plenty of them,
depending on the different countries and branches, et cetera.
Sometimes even translations are involved.
And then we catch error on this level,
so we handle the usual with a proper type of message.
And one more thing.
Okay.
Good.
Yeah, I'm gonna go back to that later on.
Not too much in one go.
Okay, I believe we can do the last break for today.
I want a half, I want a 40, yeah.
And then we'll have to our REST.
That will do.
Last short break for today, guys, a quarter.
So we continue.
It will be, now I'm lost.
What time is it now in your case?
2.30, so 2.45, we go back to 2.45.
See you in a bit.
Before, before came on.
No, finally, okay.
The things didn't want to let me in for some reason.
I don't know why.
Good.
Starting the recordings.
So before the break, we were talking about observables.
So far we touched observable type itself.
I wanted to go deeper with another example first.
And then we will leave observables for a moment.
We'll go back to them later on.
To them later on with more interesting elements.
Please focus on my machine, my screen.
I want to maximize it because it's too small for me.
Now it's better.
Before we look at the code.
Before we look at the code.
Does behavior subject tell you something?
Does it say anything to you?
Did you use it before?
Some of you yes.
Okay.
Well, this one is useful,
especially if I want to do something, for example,
either synchronous or a combination of synchronous
plus asynchronous.
And I'm going to show you an example,
which is quite difficult,
but very useful from our perspective.
We have plenty of them,
but I decided to use that one because it's,
well, it shows the whole thing, let's say.
So first of all, we start with the service.
Most of the time we put our observables into,
or let's say we match something as an observable
inside of angular service.
That's the common practice.
And here in that one, we have behavior subject,
which is like another object,
another thing available to us from our AWS library.
Let me hide the explorer.
And now it might be slightly bigger.
Yeah.
This chat connection service we use to log things,
measure things from the user perspective.
It will actually help to do those.
Yeah, not here, not here, not here.
I mean inside, so outside.
Yeah, so for example, when I'm connected,
thank you for letting us know, Joe.
No worries.
So for example, if I look at our training now,
we will have things like this.
Well, I'm not sure if you are able to see it
as a simple user.
I don't remember if it's accessible,
but I can, for example, see measurements
from the connection to each machine.
And that, the whole thing actually is done together
with dialog box from angular extension,
service, angular service,
observable, of course, strongly involved.
And this service, special of mine,
which checks the connection.
I can measure the latency,
I can check how many times people were connecting,
lot of things.
That's useful for,
not only for the admin perspective,
but for the franchisees themselves,
because they have some statistics,
thanks to that later on.
And all those statistics are also gathered here
in the separate section of the whole application,
which is huge, actually.
And the whole thing is also done as another service,
angular service.
And it shows that later on in the big picture,
like how many courses used, how many resources,
we can map the, in a better way, monies,
we got that because everything costs, right?
Even our custom servers has to be somehow
measured properly.
So this is the business perspective, right?
And why behavior subject is useful for that?
Exactly because of this,
because it's changing,
but not necessarily asking for mostly, right?
Oh, I'm not showing the proper thing.
Yeah, two levels of remoteness is sometimes overwhelming.
I will show this browser.
And I need this code, yes.
Yeah, probably one of the only minuses
from working remotely is I try to show something,
I have to go deeper in too many levels.
So I say events related to courses,
I map them as behavior subject,
and then I say it's supposed to be cast
with this type of map.
Let's say, and then I say behavior subject
and default values supposed to be null.
Behavior subjects take some values as an initial values.
And this is something we can use later for paging,
for counting rows, it helps to measure simply.
So behavior subject is exactly for that.
Any behavior which is related to something happening
dynamically in my user interface
can erupt into this type of observable.
It's still observable, right?
But in a different context, slightly different context.
Then this service,
check connection service will be used somewhere.
First in the main component,
in the main component.
So I have to, I can test speed of each connections.
This is exactly what I showed you
in the business perspective a moment ago, right?
Then I go deeper and for example,
well, this business case scenario is like that.
We have read-only desktops,
which we don't allow by default to enter.
And it might happen if we give some demo
to people who want to buy desktop services,
not courses, but remote services like this.
Or if you want to make sure the training room
will not by default allow me to interrupt your work.
Like this.
Which is, yeah, training room.
So by default, I cannot,
if I accidentally click, nothing bad will happen.
All right?
Because I say view only.
So this is behind the scenes,
how does this read-only part?
If I want to help one of you,
I just click interactive, it refreshes for me
and I can just maximize and quickly go
and help someone with the access.
So as you can see, thanks to this behavior subject,
we improve a couple of different things,
which is really, really, really,
well, nice way to solve things.
Believe me, we struggled with this training room
like a lot, couple of last years.
And thanks to Angular and this combination of observables,
previously we were using promises
and it was a nightmare to handle.
Now it's way easier.
All right.
That's ops, code.
Yeah, good.
So initial setup and then additional elements
according to the different business functionalities.
All right, now your turn.
Do you remember any behavior subject
you have in your application,
which is doing something interesting for you?
How did you decide to use it?
Sarah, maybe you don't know.
He muted.
Yeah, that might be, yeah.
But I was asking, yeah, actually good, yeah.
Of course, thank you, thank you, good.
All right.
Any questions regarding this example?
Doubts, remarks, anyone else?
Thank you, sorry.
All clear?
Let's proceed.
We'll go back to observables later on with more examples
and partially in some exercises too.
Next topic will be routing.
Yes, this is on my list.
All right.
So in our
bunch of examples,
this is the post service.
Stay on my machine for a bit longer.
We have the router there.
We start with something simple
then we go deeper with parameters
and then of course later on
when we talk about modules too,
we will do the Z loading.
Yeah, now I need to clean a bit.
Do we really need routing at all
in our Angular application?
First question.
Lamses.
Is it truly necessary?
Could explain why do you think so?
Well, but it's, well, we can,
there are other ways to do it.
We don't have to use any menu for that.
We don't need any path actually.
Our application might not necessarily have to be like
fully qualified single-phase application, right?
SBA.
And then we really need it.
Mm-hmm.
So routing is not only for menus, right?
We don't use it only for providing navigation
in the website.
We can do other things behind the scenes,
but still it's not a have to.
That's why, for example,
when we create Angular application with ng command
from scratch, it will ask us at the beginning,
do you really need routing?
Because, well, it's a huge thing, I'm afraid.
It's built in.
Yes, we have a nice similar to Angular modules,
but it's a huge thing.
Okay.
If you look at this example,
we have first level router.
When we talk about routing,
we need a couple of elements.
First of all, we need the module.
And this is the first,
so second type of the module we were gonna talk about.
The first module was like main root module.
We have to have it.
Angular doesn't exist without the first very root module.
So actually in Angular,
everything must be either component
or directive or module.
These are the main three elements, right?
The rest of it is like part of them.
Or,
simply expansions to them.
So the very first root module
is here, right?
This is type of Angular module.
In the same time, of course,
it's a JavaScript module, TypeScript module.
And to differentiate it properly,
think about it like bootstrap Angular module,
the main one which wraps everything.
Must be there.
We have to use it.
There is no other way.
All right?
Now,
routing module is another type of modules
which simply has different meaning.
It's still a module,
but then we say together with the router,
it becomes something special.
So it's like
second type of Angular module.
Right?
We need configuration.
We need to say which level we are coming for.
And then somewhere we need to point or not, right?
How should we see it?
When will be the final observation of routes, of paths,
the changes to history, going back, et cetera.
And in this example, empty train,
I have it done as another component, actually.
Now,
let's look at it.
Yeah, first of all, the simple way.
This is crucial.
And we have it by default when we say yes,
when we create Angular application
from scratch the whole thing.
And another crucial part is this bit.
Now, that supposed to be the corresponding element
with the path in the configuration.
The order of objects in this array
in the config has a meaning.
First is, first comes to the user
if we treat it as a menu, for example.
So in some special places in Angular,
the order of elements has a meaning.
For example, here.
In imports.
It's good to keep in mind that best practices
like keeping either reactive forms
or routing module at the very end of it.
As long as we don't use any external
Angular community libraries, right?
Because they have their different approaches.
So the order of modules here has also meaning in imports.
Good, so it's similar here.
Let me think.
Okay, we have links, we have that bit.
Actually, a quick question.
Just to double check your understanding.
Argyr nullut maybe.
Argyr nullut.
Sorry.
If you look at this code on my screen, live 18,
what exactly actually does this component?
What is it for?
The out that one.
And the what, sorry, can you say again?
Yes, it handles the routes.
And finally it tells where we will see the result.
So if I go through some path in my route,
or if I go through my route,
I'm gonna finally end up somewhere.
I can be directly straight away somewhere
or I can be redirected one or couple of times.
And then I'm gonna finally end up with maybe a subpage
or pretending to be a subpage in Angular
somewhere in the user interface.
Or I'm gonna be just redirected by the role maybe
from the user's perspective.
Like it can be passed through the roles, not visible.
Not something visible straight away.
But this is the most important thing.
It's a pointer.
It points out where should I see the final result.
Okay, now I'm gonna run it in the browser.
First I need to call it,
which is the main component thingy again.
Yeah, I do have it there already.
So let me remove that one.
We don't need this.
Let's do some cleaning.
Good.
Well, that one is way too big.
We can make it smaller.
Refresh it.
All right.
See, so we have this router outlet.
And it's like you said exactly, it handles things.
But look how it works actually.
Thanks to this Angular plugin, sorry,
extension to the web browser,
I can have a better understanding of the whole thing.
All right.
Because as you can see, we have some inputs,
outputs and properties, not just properties themselves.
So it looks like router outlet is already using
the binding and automatic
from Angular core perspective.
It's not something weird, additionally defined.
It uses the same stuff, input outputs, as you can see.
So we have additional things related to the route
because when I click something can happen.
It doesn't have to be necessarily the
refreshing the final result.
Not really, it can be differently handled.
But yeah.
So here, this guy is implemented through inputs and outputs.
So it's very similar to the usual input output decorators.
Now, simply because it's there,
because it's there, yes, I thought it was a question.
Okay.
Because it's there,
I can just click and have something working.
The first one is working.
The second one is working too.
The fourth one is also working
because we fixed the rest of the API.
Then we have some admin dashboard, couple of components.
But one is not working now.
NGIF example is not working.
If I go to the console,
I'm gonna see something interesting.
First, let me clean it.
Start from the beginning.
So far, so good.
So far, so good.
And the third one we're gonna die.
And we see something locked.
All guard can activate hold.
Which means what?
I have no access to this thing.
It's guarded.
And it's another creature in Angular.
But we do it together with services.
A lot of things in Angular happens with the services,
isn't it, right?
So I can go there and see directly how is it implemented.
So we stop now and do the simpler one.
And then we're,
okay, we're gonna finalize this one
and then we do the exercise.
Too much talking will give you like love.
So we just need from the same library.
Can I wrap it here?
No, I can just open it there.
Why not?
Let's open it to the side.
Good.
Yeah.
Here I say my guard,
which is also like a service,
but different type of it,
supposed to behave.
And of course I take it from the router from Angular.
So I activate the route snapshot,
and the router is data snapshot.
This is the minimum.
Usually we use those guys to cooperate together.
And sometimes something more.
I mean, from this router library.
The whole thing we start as a service.
So we do the usual ngg, s,
and then I say my name,
and then I just do it this way.
The proper thing.
Of course I can go through the whole thing
like via observables.
And most of the time I would like to,
because I need to make a decision.
If I invented here,
then it will not be reusable,
and it will have to be really specific
per component of a module.
Later on I'm gonna show you a stronger example with
JWT secured application.
So login user,
we're gonna have users, et cetera.
But for now this one is simple.
But of course we could proceed with promises too.
So if I want to do the full,
I don't have to, but it's a good idea to
just map it like this.
So I use this, can I activate?
And then I say it can be observable or promise
or just believe.
Because sometimes I make it really simple local.
So the decision can come from what places?
User, user role.
In the case of our application,
the big guy, the big one,
we have not only user role, but also dependencies.
Like does this user depend on special franchisee
because coordinator can, let's say work for a couple of them.
That's interesting scenario guys.
Well, when the first crisis,
financial crisis came a couple of years ago,
guys in Poland decided to share
the courses because there were only public courses.
Not much people wanted to do the private courses.
So they simply shared their workers
between franchisees like training coordinators
have to be assigned to different people,
depending on the story,
depending on the business process,
the client bookings.
And that was really difficult to maintain in Avilar.
And thanks to the guards,
it was really easy to improve.
But before we didn't have Avilar,
we started with PHP and GQuery obviously at the beginning.
So prototyping and mapping, it was really difficult.
So guarding in Avilar is like really,
really interesting solution.
Very useful for a lot of business cases.
You should always consider it not only because of security,
but to differentiate for filtering accesses,
not data but access.
All right, good.
First, I want you to make FTJ,
our 5D dual as an exercise,
working with the router.
So as the minimum we would like to have,
let's say, three links, or let's say two links,
we would like to see the game,
the engine and the list of jewels.
Later on we can make it better.
That's a minimum.
If you like, you can do more.
So your job is to improve,
find the jewel application with routing.
The routing module is already there,
but it's empty and we need a couple of links.
And later on I'm gonna show more best practices
regarding routing.
Let's say first five minutes, we will see.
By the way, don't do the guarding yet, all right?
Let's make it simple first
and then we're gonna improve it with guard.
But yet.
Well, we have to have something at the homepage,
usually.
So you can decide one of those two or maybe something else.
You can say add jewel if you like.
Something supposed to be the homepage maybe.
You know what I mean?
And then we have a list of things.
So now we have it twice, right?
So,
okay, please continue.
Good, good, yeah.
Try to fix it.
Thank you.
Jesse, how is it going?
Do you need my help?
Don?
Okay.
Do you have any issues struggling with something?
But sorry, I couldn't properly hear you.
Something was breaking.
What's the issue?
Can you say again?
Oh, no issues.
It's working for you, I mean, right?
If you click the links, they actually don't.
Okay, so,
in uncast error in promise.
Okay, so yeah.
Make sure the paths are exactly the corresponding ones.
Don't forget about leading slash.
Okay.
That might be the reason in your case, maybe.
Okay, good.
Get out.
How is it going?
It would be nice to clean it, right?
Because now we have too many of them.
All right.
So it would be nice to remove something.
Well, what I mean is this.
We would like to see,
in the end of the day,
we would like to see something like this, at least.
Now I have a mixture
because I wanted to show you something interesting.
So by default, I have a list straight away.
If I want to play, it will be replaced.
Net High Jewel is like the same.
This is my homepage,
and it redirects me to the JList because I want it to.
So it's like I have a third thing
which is doing nothing interesting yet.
But I did it on purpose
because I wanted to show you some interesting trap
which routing can have,
and some of you already trapped into it
precisely as I wanted.
But there are a couple of ways to fix it, easy ways.
Some of you created new components,
make it home page, let's say.
Some of you moved the main router outlet
to different place, et cetera.
So we will compare it.
Last maybe three minutes, yeah, last three minutes,
and then we will discuss together.
Why not?
Time.
Thanks.
Right, in the meantime, I wrote to my colleagues in my team
to fix the links in the presentation.
Hopefully, it will be done today.
We will see.
After the training, I have a scrum, daily scrum.
So later I'm gonna hop to the scrum.
Yay, I'm gonna pretend to listen.
Nice.
All right, let's discuss this solution together.
I believe we can start with mine,
and then we will look at one or two of yours,
and then we will look at the example how to fix it.
Yeah.
So.
This is FDJ, okay.
Now I want to see the routing module.
Let's keep it on the left side like we had in the example,
and on the right side, I'm gonna look at the
main component HTML, because that one is responsible
for pointing out the paths and the results
from paths, from routes.
So.
Of course, it's not the best approach,
because we could end up also in double something
instead of this.
So it's a workaround, that's not the best one.
But the simplest thing we could do,
I can just say this,
then path would be empty because it's empty,
and I say redirect.
If I know there is a website,
which supposed to be like this,
the default thing, but I don't have any homepage in mind
because of some business reasons,
that's a good approach.
It also might be a sub-many, not the main many.
So, right.
We'll look at that later on, of course.
Now.
The rest is the usual, I can say component,
and that's it.
So.
Let me look at one of your results quickly.
Actually.
Aryar Nulut, would you like to show us your solution?
Did you fix it already or not yet?
The double one.
Okay, so please continue.
In the meantime, I'm gonna ask someone else, maybe.
Don't worry, just continue, okay?
Or did I misheard you?
Sorry.
Aryar, you were saying something,
and I think you broke, you were breaking.
Different machine, you mean not locally?
Oh, two machines, that's interesting.
You mean you hacked DoublePro,
and you used second machine in DoublePro, or?
Oh, okay, I see.
Okay, so please do search the screen,
because then I have no access to that, of course.
I hope you will be able to do it, I think.
Yeah.
Shaman prepared the setup so everyone can share some good.
Guys, please look at the screenshot by Aryar.
Thank you.
Okay, so the routes themselves are working,
and you have one at a time, good.
Well, now, well, you have, oh, because you have list here,
also in the same time, right, in the J engine, okay.
Okay, it's somehow yet another solution,
but still not what we exactly wanted, but good.
Yeah, we're progressing, very good, very good.
Sara, your turn.
Maybe you can show your screen now,
maybe it could be easier.
Yeah, I can, other guys, can you see, yeah.
All right, and the links, awesome.
Oh, okay, okay, I see, I see, all right, all right, good, good.
Of course, of course, that would be probably better.
All right, thank you very much.
Now, does anyone else has different solution?
Let me check with you guys.
I think someone did the homepage, additional component.
Thor, was it you?
Oh, so you ended up without it, actually.
So, but do you have a different solution,
which is showing something else, or?
All right, okay.
Good, let's look at the example together then on my screen.
Thank you guys.
Now, I'm gonna reuse one of the examples I prepared,
which is also the exercise, but not for now,
but it has already router, which I wanted to show you.
Yet another example of router.
Please go back to my machine for a sec,
and then I'm gonna switch to the examples.
This time I'm gonna go out of the engine train.
You don't have to follow my steps.
I'm gonna show it on the screen,
so you don't have to waste the time,
but this will be, yeah, actually,
we can look at that one, why not?
Good.
So here on the left side,
I'm gonna go for the routing module, of course,
and then on the right side,
we're gonna look at the component which handles the links,
which I believe in that one is this, yeah, good.
All right, now, in this example,
we have slightly different setup.
Still, we have the first level for route only,
and then we have some redirection also at the same time.
We have addition of something, we have listing, of course,
and then we have something more,
the path with the parameter,
so single item from the list, all right?
Something stronger.
And the magic happens by this weird,
small character column here.
It's very similar in other libraries or frameworks
like ReactJS, you do it in a similar way, actually.
The limitations are similar.
Now, how does it work?
Well, before I explain the other elements,
I just wanted to show you the better way to fix it.
First, let me start the application.
You don't have to do it yet.
Just stay with me.
But to do it, I have to do a couple of things.
So just observe for a moment,
I'm gonna do a couple of additional elements.
This one is bigger, so I'm gonna need,
first of all, backend for it,
which is that one.
Then this is FTJ, this is what,
this one is the whole thing, okay?
Let's keep it running.
This is FTJ again, so I don't need it.
And this one is running FTJ, so I'm gonna need it.
Good, I need to do some order now.
Backend, open it, frontend, let's go for the frontend.
Yeah, that one is installed already, good.
So I'm gonna keep it like this,
and the final step will be database.
Let's make it a little bigger.
Because cloning machines not always behave
like we would like to them,
so I need to check a couple of things.
First of all,
the status of the database.
I don't need the full name, obviously it's sleeping.
As I said, don't repeat my steps for now, you don't have to.
Good, database is alive,
which means I can monitor it from its own shell.
Okay.
All right, so far so good.
So we have a database, we have a frontend,
and we have a backend.
I'm gonna start the backend.
Oh, obviously because I'm running this guy at 80, 80,
so let me kill it, I no longer need it for now.
One more time.
Connected to the database, okay, working.
Now the frontend part, final bit.
Hopefully that one will work.
This one will take a moment.
Let's go back to the code, not to waste the time.
Oh, actually that was fast.
Okay, good, I'm happy.
This machine is quite strong.
Good processor, yeah.
You have a nice server in Philippines.
Noblepro prepared one for you,
which is really, really fast now.
Nice, I love it.
So we go, of course, to the Angular bits
to make some use of it.
And then we have some routes.
Same old, same old.
Okay, I don't have anything because I was fixing the machine
so I need to create something quickly.
That's a shame.
There was some nice examples, but yeah.
It behaves, actually.
Oh, obviously because I run it with the wrong port.
Sorry for that, I just forgot.
Well, I have habits of making things too secure
even on development side,
even when I do courses only.
So wrong port.
My backend is listening only to one of the ports,
which is only 8081.
It's also a good practice to secure things
even on the backend server side.
I just forgot.
Nice, and finally we have access.
I was surprised because I was almost kind of just
in the same way I did some data already.
Now it's working properly, good.
All right, now it's too big.
Slightly better.
We have substain and my, actually I have two elements.
First level is here, so I have list of tutorials, let's say,
and I can add.
And we have two elements there.
So this menu is like that.
By default, when I go to the homepage,
it will redirect me to tutorials.
So actually we have the same thing,
but now it makes sense because the whole thing
is designed in a different way
from the main component perspective.
So usually that's the best approach to speed up things.
I don't need any homepage if I know something
supposed to be the homepage itself.
Just to compare,
maybe with this one, this one is bigger.
Look, here we have plenty of them, actually.
This is separate one, this is separate one.
Yet another one for the user.
Your look, if you use it as a participant,
simple participant, no trainer, no coordinator,
no franchisee, no admin, you'll see less.
But I have still also this bit for tasks.
I can also go to another system, subsystem format.
And then of course it will redirect me
to the different things.
So plenty of elements, moments.
They themselves provide some special,
maybe sub-menus, et cetera.
Now, the code behind the scenes,
well, I'm gonna show later because it's too strong.
For now we don't need it for the sake of the next exercise,
actually.
But here we need to play with that at least.
So,
one more thing.
I usually forget about it and I realized,
today I will not, so I'm really happy
because there is something like
page.found component.
Maybe you heard about it, very common technique.
Page.found component.
We create almost empty component only for that.
And then we make it as the last one.
Now, the page.found component will have a special path.
Did you use this technique in your environment?
Or maybe you didn't have to.
Did you hear about this from an Angular perspective?
Yeah, so usually we make it as the last one.
We do the special path.
And then any different URL than the allowed URLs
will drive me to this special path, right?
Page.found.
Good.
Other approaches will follow.
Let's focus on the exercise now.
Next exercise will be like this.
We want
to have a router with children.
So not just component will be a child,
but the router will have sub-menu.
So one menu will have another sub-menu
when we click in the links in the first level.
Of course, in the same time,
we want to make the whole thing better.
So we want to have parameters
and we want to make single item.
So we're gonna improve our application
because maybe later someone will gonna choose from jewels
and then someone will be able to buy jewelry, for example.
So single jewel supposed to have its own description.
How to achieve that?
What would you do?
We need to show the list of jewels.
When I click at one jewel,
when I click at one jewel below,
I should see description of one single jewel.
How to achieve that?
There are plenty of approaches.
Which one is maybe not the best,
but one of the best approaches in algorithm.
Maybe we can start discussion with Chessy.
What do you think Chessy?
So new comp, mm-hmm, mm-hmm.
Sorry, that's new, apologies.
Very good.
Yes, this is one of the best approaches.
Thank you.
What are the other approaches?
Do we really need new component?
Will we do it differently
without additional components?
And when would be better
than this solution proposed by Tune?
Think about it.
That it maybe.
Very good, very good.
So similar to Chessy, thank you.
I'm gonna give you a hint.
Gerard, actually Gerard.
Maybe you have in mind a different solution
without additional components.
Good.
See guys, we don't need another component.
We can just show it in conditionals
or let's say in conditional way.
And we have control flows for that.
For example, NG if, NG switch, things like that.
And then we can make the result
depending on some conditions.
Accordingly to filters, maybe some observables
can come in mind together.
Now, which approach would be best?
Maybe in such scenario,
I'm gonna ask you something about the environment
I'm pretty sure I know about, which is mine.
So I know how it's designed, right?
What would you do?
Which of those two approaches would you apply
maybe to this view?
We have all the training machines.
Trainer is the user and trainer sees all the machines.
Would it be, which row would be single machine,
single component in Angular, single machine,
single remote desktop would be subcomponent
or just a row directing to some image
in the LXC containers?
What do you think?
What would be the better approach?
And from what perspective?
This is crucial guys, because that's one of the most
common things people do with Angular.
They list something, they do items
and then they have to decide.
Should we make it stronger and then componentize it
or simpler and, yeah, I'm already hinting too much.
Sara, you were laughing, which means you already know
the answer, I'm pretty sure.
Okay, okay, so Joe, Joe, what do you think Joe?
Thank you, Sara, thank you.
See guys, this is great approach of both.
I would love to have such boss because this boss
will make sure I will definitely learn something new.
Joe.
Yeah.
Subcomponent or just simple logic?
Okay, item component, can you explain why?
Very good, exactly, thank you.
This is huge, it's not just something to show.
It has its own plenty of options.
For example, if I want to reconnect,
I have these three buttons and then I
sorry, I keep too many times now.
I'll have some options also, right?
So the options itself, the options itself list
is like a huge thing because it can,
you don't see all of those because you are not admin
but I can use them to improve the training on the fly
just because I'm insider in Novelproc.
Not every trainer in Novelproc can fix it this way,
which means I can react faster.
That's a side advantage.
The most important thing here is like
lot of additional functionalities means,
well, better to do the component again.
Okay, so if I go,
second one last question.
Yeah, probably that will do it.
What about this one?
This is course role.
We use it if someone needs to,
sometimes clients wants to see the list
of truly present participants on the training
so they know who is cheating
and didn't come to the training, right?
There we say role.
Yeah, Bramzes, what do you think?
Each role supposed to be a component or just logic?
And then data, this one is tricky, be careful.
Yes, my question was to you.
Of course, take your time, no worries,
but don't forget to unmute yourself
when you will try to answer.
Looks like simple list of users
participating special event in the list of events.
So we have the role, we have the name,
if you have any first name, last name, email,
and when it was, let's say, created, started, the whole thing.
Well, the viewer has a mystery show all history button.
If I do that, I might see something more,
it will just filter it.
So that doesn't necessarily mean
each role is something special.
Well, this one is done without subcomponents,
it's a simple list because it's not too complicated one.
But of course, we could consider making each role
also a subcomponent when it's somehow meaningful
from the other perspectives.
Like it could have been, for example, a public course.
In this case, it's a private course, all right.
Sarah, if you speak, you are muted.
Wait, if you speak to us, not to us, okay, sorry.
So imagine that we talk about public training,
which happens like a lot today, those days.
And we have, let's say, five people,
and each participant comes from different company,
not from one like you.
And then to provide better statistics
and keep the track of changes from noble perspective,
it would be better to keep each role as a component.
And actually we cover both scenarios.
See, I said it would be tricky one, right?
Always think about proper best possible
mapping of business into Angular.
Business is the first step and then we do the code.
And Angular has creatures to help you, right?
Okay, quick question, quiz.
What is the difference between directive and component?
Angular directive and Angular component.
We have a list, so Lester, maybe in Angular, yes.
Okay, okay, so can I stop you for a sec?
Everything you said is true, I'm proud of you.
But last question to you, Lester.
If I say that component is a directive, am I right or not?
Good, exactly, guys.
Component is like special case of directive.
It looks bigger, it looks, let's say, less specific,
more general, but it's not true actually.
Directive, even if it looks smaller,
and even if you think directive does less,
it's not true because this actually creature in Angular
is more generic and bigger than just component.
Component is just a special case scenario of directive.
Full stop.
And it just happens to be B
because it has plenty of surroundings like template,
like CSS, like injection, like a lot of stuff, right?
So yeah, now thanks to this description,
this small discussion, which I needed to prove something,
we can clearly see that it's not only about business,
but component can become bigger,
even if directive is bigger from the, let's say,
types of using of it perspective,
but component will be always bigger
from the size perspective, performance perspective,
which means if I can solve some functionality
for my business process with directive and not component,
I should always consider that
because usually directives are simpler, faster, smaller.
I mean, directive is different than components,
to be precise, right?
Now, good.
Thank you for this.
I hope that showed you most important
that I wanted to present.
All right, now I believe we're ready
to proceed with the exercise.
So we want to do a router with children.
And then of course,
we're gonna go with single item dual component.
So please create single item dual component.
And we want to connect existing jewels list component with it
somehow with the router.
The example is here.
You can do it like here.
Of course, you can make it simpler
because this one is slightly bigger.
So this is the front end with example, full stack PX.
The one more thing which I'm supposed to show you is of course,
should we do it in the same time
or separate into two exercises?
Well, we could do it in the same time.
Doesn't really matter that much.
Yeah.
Okay.
So yeah, components first.
So we have tutorial detail.
That one will be tricky
because it involves like a lot from router,
angular router.
One would think, come on,
such a simple thing like parameter
to be easy to implement, right?
But in angular, I'm afraid it's not.
We need a lot of things to cover that.
So this will be detailed component in HTML just to show.
You can look at that on your local machines,
sorry, on your own machines
or just use my screen as an example.
I'm gonna try to show the most important bits.
Okay, we need that one.
We need this one.
Do we really need that one?
No, we don't need this main one.
So let me close the other things.
For sure we use the, we need this bit.
Details and its template
and the view which is using it,
which is the tutorial list.
Also the list will have to be changed.
So guys, this exercise will be slightly stronger, all right?
Not that easy to achieve.
I'm afraid, but I believe still doable for you.
So don't worry.
I'm gonna explain
and then we'll try to achieve something similar.
Let's do this thing first.
Two steps actually, sorry.
Single jewel and then map it through the links.
Later on we'll improve it.
Later on we're gonna improve it with the subrouting.
It's too much.
I believe this is details.
This is the list.
Actually, well, this is simple.
So I can hide that one too to make things easier.
Hopefully one day I'm gonna have
better tools for showing you presentations.
Maybe one day DRs will be just the default stuff
and then there's no restriction to VR, right?
Okay, first two is like the detail, smaller one.
So class plus view and then the list plus view.
Let's start with the view.
Here I'm using some additional methods.
So I say, show me single thing through some clicking
on the right side.
So I say activity.
This one is designed with activity.
Of course we could make it simpler
and I want you to try to make it simpler
but just to see how it can be done.
Now,
the child component.
This one will have some details from the tutorial
and of course we don't have same thing
from the dual perspective yet.
We have just one property so it will be simple.
Just the name of dual maybe by itself
and then you can use index which is starting from zero
part of the array, right?
That should be simple.
I think it's too weak.
We could do it simpler.
Other case, you still have an example
you can simplify by yourself.
Now the components, the classes.
This one is using like a lot of things behind the scene
but if I want to show one thing,
I have this method that active tutorial.
This one is doing one at a time, right?
So this one is like very simple thing
and then from the detail component,
this one would be the biggest one.
The toughest one actually.
We don't,
well, we usually at the minimum,
we usually need this activated route.
Not just router, right?
We need also this activated route
and then on top of that,
we're gonna play with the thing, right?
Now,
we make it like this.
So we have this bit, which is the most important part.
That will be corresponding to the router itself.
Actually, it would be nice to have it.
Okay, I'm gonna open here.
Well, now we don't need the view.
That part will be the simplest one
from the detail perspective.
So this bit,
is corresponding precisely to that part.
There are different ways to achieve it,
but this is one of the simplest.
We say route, we say snapshot,
and then we say parents,
and we say ID because we can have plenty of them
for different paths, right?
So we differentiate it by name
and of course, this would be only one at a time.
In the browser, it looks like this.
If I go for the,
this bit,
and I closed the wrong one.
So, yeah, if I click, I see below details.
So I'm clicking on the list itself like this.
That's the simplest thing we can do.
So I'm treating this as a menu,
but it's not the routing by itself yet.
Can you prove it later if necessary?
It's just part of it.
Just different way of passing it.
When I edit the tutorial,
this is the moment when I do the single thing.
I see tutorials and then I see the ID from the database.
In this case, it is from MongoDB.
In our case, we have way simpler thing to do, okay?
All right, let's go back to the exercise.
From your point of view, this would be crucial actually.
That bit.
And then calling it from the list component.
That one doesn't have anything too strong here.
So I can close it.
Actually, let's simplify the visibility of the sample.
Yeah, only three files should do.
So routing module.
This bit will be important.
So we need to activate the route.
And the list itself,
which will be pointing to the single view.
Let's say 10 minutes for that,
because this one is stronger.
I hope you need more time.
So, how is it going?
And does anyone need my help, maybe?
I'm going to give you some direction.
Do you struggle with anything?
Any questions, remarks, doubts?
Berna, you have a nice,
I saw a nice error message on the screen in the browser.
Am I right?
So somehow the path doesn't reflect the result.
And it happens when you click what?
Show me the links.
Oh, okay, you did it this way.
So it complains.
Can you show the process one more time?
Sorry, can you click again?
Refresh and click again, so we will see what was that.
Yeah.
Cannot match any routes.
For some reason, it doesn't see this parameter.
Yeah.
Well, it's okay, but we could,
I believe we could make it slightly simpler.
Okay, show me your,
oh, because in details component,
you are not using the params yet, are you?
Yeah, that's fine.
That one must be finished
and then it will follow the path hopefully properly.
We will see.
Good, good, continue, sorry.
Yeah, good.
Welcome.
John David, David.
Getting there?
Okay, good, good, good.
Please continue, thank you.
All right, please continue.
I believe I'm gonna add five more minutes
and then we will try to at least look together
at some beginning of this.
And if not, if necessary, we're gonna extend
maybe two or three and we will see.
So far five more minutes
and we will try to discuss it.
At least start the whole thing.
Time is going by.
Time is going by, I'm afraid.
So let's continue a bit.
Actually, let's discuss the solution.
Yeah, most of you finished already
and you have, yeah, see?
Now it's my machine actually doing something nasty.
My session like hanged on the C key.
Nice.
Yeah.
Yeah, I'm gonna definitely have to, oops.
Did I match too much?
Right.
Actually, let me close this slide for now
because I don't really need it, sorry.
Just ask people to fix the thing quickly.
Okay.
So I do it actually according to the example
which I showed to you on my screen
and just let me go there straight quickly.
This is MGTRAIN, this is FTI, yes.
Oops.
Okay.
This is FTI, good.
I did two ways.
One is commented out.
We're gonna go back to the second later on.
So we need routing module.
Actually, that one is not necessary
so we don't have to show it.
Let's do it from the top to down.
So this and then that.
And also in the same time,
detail component.
And then here,
tell you detail HTML, yes.
Now the same one to be faster.
Good.
I believe we have everything we needed.
Do we?
Yeah, looks good so far.
If something is necessary, I'm gonna open it.
So this is yet another way
to show something in the same time
without replacing the list.
Sibling will replace it in my setup of my menu.
So let's start with the list component.
Because I'm using service, so I just get it this way.
This one is the one we did before,
so the observable waste one.
And I have a very simple function,
which dual will be active one.
And I need to do two semaphores.
One for the name of the dual,
second for the choice, which dual.
Here I'm using both to simply show it.
And this is the list component.
Instead of U, L and Li, I still have divs.
So I'm starting to do it like this.
Set active will take both.
And of course I do it through the looping.
So I take both from the array straight away.
As simple as that.
Now look what I have here.
Another router outlet component.
Just to show you that I didn't remove anything
from the main one.
See, it has its own router outlet component.
So it looks like I have two different menus.
All right.
But I'm pretending to.
The sub-menu has its own pointer.
All right, the sub-menu has its own pointer.
So in the browser it will look like this.
And then I can make it pretty,
like some of you did already.
So colorizing the clicked one, et cetera.
So I can keep the list visible
and then I below show something different.
And then if I go back, I can play
and then replace the whole thing.
If I would change this routing to that instead.
I mean this code.
And I say dual detail component,
it would be on the same level.
And then it might replace the whole thing
instead of this of course.
It's also a good approach if I want it.
So going for the list, if I click one,
it should replace the whole list.
I'm not gonna rearrange the code.
I just wanted to show it another way.
And in some cases, business cases of course,
it's better to do it this way
because sometimes the list is less important
than the final item of it.
Okay.
One application, we should look at the Angular here.
So we have two router outlets
and they talk together, they are communicating.
But this is my approach here.
Some of you did it in slightly different way.
Let me check because I saw some interesting,
slightly different solutions in your screens.
Do we still have time?
Yeah, we still have time.
Let's start with maybe
Lester.
I'm gonna show your screen to everyone, all right?
Yes, give me a sec.
Okay, but you started it
and you have some bits of it already, right?
Okay.
Don't worry if you want to keep your progress,
you can just do the commit, keep it on this branch
which I prepared for you guys.
And then if you want to go back to some,
if you want to do other exercises on top of that one,
it might not work with your solution
so you can always switch to the master
and then work with my solution.
No problem with that.
I'm just saying.
Thank you, okay.
Thor.
I'm already screen sharing your machine
so it will be there in a sec.
Yeah, aha, hello.
Yes.
And now we got.
Guys, can you hear Thor?
Thor was too fast.
Yeah, we can hear you back.
Great, can you also show us the link itself
from the list,
JList component perspective?
So it's like basically the direct built-in directive
available to routers so we don't have to invent it, right?
Which is great.
Very good, thank you.
Exactly.
So, and then the router library in Angular
has plenty of things like that.
We have interceptors so we can interrupt
in between the going between paths, right?
Later on I'm gonna show you this example
on my production website in the code too
because this might be useful.
Before you go between the paths or somewhere
we can intercept with some behaviors,
additional filtering, maybe logging,
maybe waiting for some data from another web service, right?
Or even the chain of web services.
So plenty of things can happen before we go
finally to the result.
And both, asynchronous, asynchronous.
Thank you Thor, very nice solution.
Nice, yeah, and then, well, thank you.
Berna, I think you were achieving something different
as far as I remember.
Did you manage to make it work?
It works, but we can see your approach at least, yeah.
Can you show us the dual-slip component HTML
because that's the crucial,
because we did it in a different way, yeah.
See?
Exactly, look guys.
Sorry, can I, I'm gonna say just one sentence
and you drive it again.
Look at line four, this is different.
Now we can drive.
Can you explain to us why did you choose this one?
It will work, but eventually,
but it's a slightly different approach, right?
Okay, so yet another directive, right?
Yet, if I compare with this one,
here I'm using just router link
and then I do my custom activity function, right?
Thor did, sorry, where is the screen?
Thor, can you show us the JList component HTML also, please?
Just to compare, yeah?
So you also did use router link
plus additionally router link active
and you have just, oh, you did remove it.
Why did you remove it?
No, no worries, no worries.
Okay, this is still good,
but that involves yet another approach
in the component class itself,
but also yet another directive,
which is like this one gives faster access to the parents,
slightly faster than the usual, right?
So yeah.
Okay.
Let me think.
One last example may be Argyle,
Argyle Edwin, sorry, Argyle Edwin.
Yeah, can you show us your solution
and explain what was your approach shortly?
So similar to the previous solutions, right?
Selecting with the function, okay, good.
No worries, no worries.
You can actually, I'm gonna give you a couple of,
no, we should slowly proceed to the summarizing.
Okay.
Okay, is there anyone else who didn't finish yet?
So far three people, I believe.
Okay, so I'm gonna give you five more minutes,
try to finish this one, all right?
And then we will do a summary of the day.
And tomorrow we will continue with other things, of course,
but yeah, later, not now.
I'm not going to spoil your work.
Okay, last five minutes,
and then we will discuss finally the whole thing.
I'm gonna stop sharing this thing for now, maybe.
This was better now.
Okay, so yeah.
Okay, it works, okay.
All right, yeah, if you're happy with the solution,
I'm happy too, awesome.
And it works, right?
If you click a single guy, yeah,
as a sibling it replaces the thing, nice.
Very good, very good.
Thank you.
All right, guys, even if you didn't finish, don't worry.
You can always go back to the,
I mean, get the proper solution,
and on top of that work tomorrow.
Let me summarize this part of the topic.
We will see more routing later on,
even a couple of different examples.
There are plenty of ways of routing in Angular,
but I wanted to show you one of my,
again, something stronger bit.
We were searching for a way to,
I mean, in Nobleproc to have sort of more manageable way
of routing, all right?
And we found this useful from Angular perspective.
I was thinking on the wrong screen, sorry.
Or someone else's.
And it's like this.
What is the thing?
Yeah, it's called strategy.
And it's very, very interesting solution
because later on I can use it through module perspective.
Actually, I should show you together with the module.
Yeah, my module.
Right, so on the right side we have something
which we're gonna use the left one.
Left file is like router configuration,
but it's not, it's stronger than routing module, all right?
We use strategy and then we do map routes
accordingly to something.
So I just do this.
Sorry, where is it?
Where are you?
Come on, come on.
Oh, that one has no installation.
So it's not the right one, but okay,
it's not that necessary.
So it's like, it's similar to Redux or NGRX
because of complexity of this application.
Plenty of filters, plenty of scenarios
and factors which has to be included.
That was the only way we found.
Sorry, to properly handle it.
So I have a strategy and then I can say
which part of my dependencies we're gonna use this strategy.
So, well, this one is also related to additional modules,
but it's like on this level, see, I have my module
and I say on this level, use configuration
together with up routing module
for some special parts of it.
And the strategy is like on top of that.
Probably it might, you might never have to use it
if you have simpler structure,
but I just thought it would be interesting to see this
in action at least once.
I believe you don't need that in your application,
but yeah, maybe in the future, if you will improve it,
you might consider this strategy bits from route.
This is like yet another extension to router
which allows me to manipulate with routes
on yet another level of abstraction.
Okay, guys, I have a scrub in a sec.
Thank you for the first day.
I can be late on the scrubs, so don't worry.
Give me some feedback, come on, hit me.
Was it okay, proper amount of theory versus exercises?
Was it fast enough or maybe too slow, maybe too fast?
Should I slow down, go faster?
What do you think?
Things like that.
Or anything which comes to your mind, tell me.
Sara, can you be the last one?
Please, thank you.
Thank you.
Anyone else?
Awesome, thank you.
Guys, complain about something.
Please do.
Thank you very much.
Guys, I'm gonna have to really go.
Sara, can you sum it up if you like, of course.
Thank you very much, Sara.
Thank you very much, guys.
So tomorrow we're gonna do just like matching the list.
Everyone will say something
and I'm gonna do the repeated loop.
I'm gonna loop it.
All right, thanks again.
Sleep with this, let's say,
rest with a while in the afternoon.
Forget about Angular, all right?
We'll have plenty of homework tomorrow.
And see you tomorrow.
I mean, I believe we don't have to change the time, right?
10 to five is still okay for everyone
because I can adjust if you need some changes.
Sometimes you have to drive kids or something.
Yeah.
Oh, Shaman is back.
Hey, I'm just double checking
because sometimes people have something really difficult
to move and then we can adjust.
So nine to five stays, right?
Okay, thank you.
Shaman, would you like to say something more?
Thank you, Shaman.
Bless us, bless us.
Thank you, guys.
See you tomorrow then.                

on 2024-02-29

language: EN

                  WEBVTT
And I'm connected.
Alright.
Good. I believe we finished
the
router exercise yesterday.
Today we will continue
in a moment with the forms
and we will hop into reactive forms straight away.
As far as I remember you are not
using template driven forms a lot.
Most of the time you do reactive forms, right?
Good.
Okay. Now my notes.
Timer.
Okay.
Just in case my phone...
I'm gonna... Well no one will call me at this time. Hopefully.
Probably. Better. Less probability.
But just in case I'm gonna mute it.
And the timer.
Good.
Alright.
We will look at the
example.
And we start with engine training.
So please focus on my machine.
Can you see me doing somewhat something there?
I'm just closing this module.
Alright. Just one file.
Okay. Yeah. You can see it. Good.
I just need to double check always. If you can see me
doing something so the changes are reflecting.
Yeah. Reminder for the software later. For now we don't need it.
Okay.
So in engine training...
Sorry. One more thing. I need to double check if
the server is up.
Because yesterday, after the day
I was checking and it didn't for some reason.
And that wasn't from I think because yeah. It still
doesn't. That's not good.
Yeah. My git server is not responding. Awesome.
Ah. Yeah. Why now?
Okay. I can still survive without that. Then you will not have
all the examples. But okay.
We can survive with me having them on my screen. Yeah. That should do.
Yeah. My server is dead. Well, not my server.
My service provider. Okay. So I'm going to have to survive
with my example only. Should be sufficient
at least for now.
Good. So in engine
training. I'm afraid my server,
git server is not responding at the moment. So
you will have to look at the example only from my screen perspective.
From my machine.
I cannot access it at all. SSH says connect.
Connection timed out. I need to double check with my service
provider. I don't know what's happening. So at least we have
examples on my screen so that should be fine.
Less comfortable at least but we will add it.
So in the folder called forms,
we have forms component.
Then corresponding HTML.
Here we have simple example
of template driven form. We can then
replace it with straight away with reactive form.
So let's look at the forms
model driven component. We call it also like that.
And on the right side I'm going to look at
HTML straight away.
Now before we proceed let me start with some
slides very shortly.
Yeah, form builder.
The most important difference between template
driven and model driven or reactive forms, we can call it in a couple
of ways. This is one of them. Is that we
have access to
validation to data from the form, usually from the user
perspective. So we take it from the user
in component class.
So we do not manage, let's say not
or let's say only small bits of it, business logic
in the template itself in the view. Instead
we use component class.
And that scenario
is great if we really have some
special customizations to validations. If we
have very
complex structure from business perspective of our user interface.
And it's changing dynamically like a lot.
Well in my case at the moment in my
production environments we use both
actually. A lot of people are, I'm afraid, exaggerating.
Companies are exaggerating. They decide to use one and they
use only one at a time because they like it or because someone
in the team likes it.
And that's not the best approach.
Probably you already tested both
ways of handling forms in Angular and you know React it is better
for you. For some reason, I don't know
precisely why do you decide to use it. I'm just saying
make sure you do not exaggerate with it because nothing, literally
nothing in Angular is supposed to be treated like a
golden hammer for everything, to do everything with it.
But of course maybe you already tested both and you know React
it is better for you. I'm just saying. So at the moment we use both
in MobileProg because we have plenty of ASN IOS in which
template driven is more efficient.
It's about speed most of the time, performance.
We have plenty of smaller components which
doesn't have to be handled in such strong way.
From the validation, from form itself perspective
we have a lot of levels of users, of roles.
So for the sake of speed
performance it's good to have a mixture of both
approaches. Now
in model driven template, sorry, model driven reactive forms
two ways, most of popular ways to name it.
We have a lot of built in
Angular directives and
special classes. Now
the syntax in template itself in the view
in HTML view, we call it Angular template
thanks to that approach is way simpler and the template itself looks
better. The logic
there is less logic in the template itself so people think
most of the time it's better because everyone says today
avoid the logic in your templates.
Well, that was true for the past
applications. Today we have very strong processors, we have very strong
RAM memories, SSD disks and it's less appropriate.
But still, let's say it
stays as a good practice to some extent.
Thanks to those built in elements
we gather
all the control in one go
per each field. We have plenty of choices
so we can use form control directive and we can do it
one at a time, one field at a time.
And again, I strongly advise to do
so if you really don't have to manage plenty of fields in the same
time. It might happen that you have component which has
just couple of fields and in some business cases
it's better to handle one field at a time, not all in the same
go. I'm just saying, always double check, always
test which solution, which approach will be faster for you.
In my case, like I showed you yesterday, we have
hundreds of components depending on the user's story.
So in such case scenario you can have really, really
like a lot of components and you want to properly
handle the state of application and you don't
want to go for huge cows like
Redux or Mobix
or maybe just simple
smaller extensions from Angular community. You should
consider simplification on that level. I'm just saying
this is one of the best practices. So actually
same scenario here. First think
then do in Angular. Design before coding
as always. Now
let's look at the example, let's go
back to example.
Triple check the server one more time, one last time.
You can still do it locally
just in case I can also clone
the first start again for you but then you will lose your own solutions.
Just in case we have a last resort solution. It's still not responding.
Yeah, that's the problem with cloud.
If I have some, I have a local copy
let me check maybe if I have a local copy I can just spread it via
Google Drive. It's still a sort of a solution
right? Yeah.
The minus of the cloud is what if it doesn't work.
Then if you don't have a local copy you screw it up.
This is my case scenario now. I'm not complaining
I'm just laughing at it. It always happens on Fridays.
If not Monday then Friday for sure.
Okay, what would be life without at least one
complaint a day per day?
But seriously, look at this example.
We're going to do it in smaller steps. And then of course you will do
the exercise.
Let me maybe do it like this.
This is the setup first. Of course we need
a couple of additional directives. So in the constructor
we use dependency injection for that and we use as a minimum
we need a phone builder.
And why I'm showing you phone builders straight away?
Because you wanted to. Because we talked about that before the training
and this is the most used thing by you
probably. And also by me myself because this is straight away
sort of
very efficient wrapper in Angular
which gives me access to all the fields in one go. It's a shortcut.
I could go manually with each of the elements and then
define them one field by
one at a time. But I can have a shortcut
and as programmers we love shortcuts, right? We love to do
shorter code to do them all
so we can do some evil things. Oops. Of course
great things, sorry.
Should we start with the form?
Yeah, we should start with the form.
So let me
hide each, fold
all the elements. So we're gonna have a big picture
and then we start with the form. What's the most
important difference between reactive and template driven?
First of all we use form group.
Form group is a directive, Angular directive.
It's a very strong one. It binds
the class together with the view.
And here comes the most important element in reactive
forms which says I tell my
Angular core that from now on the whole form
will be handled by a class in my component. So the control
will happen here. And I say precisely at this very moment
about my custom name.
So this register form for example, supposed
to be special, supposed to be my custom name and it's supposed to be defined
in my component which is exactly here
on the left side. Now it's supposed to be of
type form group and there are a couple of ways to define it
because we use TypeScript and we cannot avoid it in Angular.
We have to either initialize it here or
in the constructor or in ng-on-init or any life cycle form would do.
And then we just assign it like an anchor
here on the right side of equation in the form itself.
So this is third step. Connection, binding,
controller which is our component in Angular
with the view itself.
When we do have that then we proceed to other elements.
Now we have to think carefully about each
single form field
which is supposed to participate in
managing the control. Do not
put control to all the fields
in a form like, you know, a habit.
Why? What do you think?
Ariel Edwin. I promised
to do the discussions in the loop so I will fulfill my promise.
Hopefully it will work. So Ariel Edwin.
What do you think? Why should we avoid assigning control to everything
in our form?
Yes, we really, really have to. We should. Why?
Sorry, your
voice was breaking to me. Can you say again please?
Of course not.
It's recorded. You can listen to the records.
Let's keep it. Let's go further.
Okay.
Let's say 20 fields, different fields like
inputs, radio boxes, chat boxes, a lot of things
are happening in our form. Why should we avoid
assigning the control
Angular directives to all of them? As long as we don't really need
all, why should we avoid them? It's a good
practice but I just want to make sure you have it. Maybe
most of you know it or maybe not yet. Let's discuss it. Why should we avoid
it? Ariel.
Different functionalities. I'm not sure if I
get you properly. Can you explain it?
Can you paraphrase it to me? To us?
Not really. That's the point. Exactly.
Each particular form
control, each particular form element
if you really need it, you're supposed to have the same
directive. And that's the second thing. The second step
we do when we go with reactive forms. And we call it
form control name. Without it
I have no control. And that's the
point. If I don't have to have it, I should avoid it.
So that's the question. This bit, this yet
another built in Angular directive called
form control name, right, says
to Angular core that field supposed to
be controlled. I could have input or any
special field in the form without this assignment
and then it will not participate in the
flow, in the control of the form. So again
the question is if I
if the business case, business perspective, business process doesn't tell me to
to rule them all, I should avoid assigning all of them. Why?
Ariel Nullut maybe.
Better not ask them. Thank you. No worries. We will manage.
Sooner or later.
Bye.
Yeah, you could say that too. Also this way.
That's the question.
Yeah, good. It's a good direction. Yes.
See, we are progressing. Thank you.
Shaman. Why should we avoid that in Angular?
I promised to not omit anyone.
Joking, joking.
Of course, please, please forget about my question. We are going to omit
Darren. Obviously Darren knows a frame. Joking, Darren.
Maybe you can try.
Okay. Thank you very much.
I totally
agree with the last two or three sentences.
But I have a question because I'm not sure if I understand properly
what you mean. You said ngModel.
So please correct me if I'm wrong. I'm going to show you something.
Darren, if I understand properly
you are saying that if we don't
necessarily need, we don't have to put
fault control to every input in reactive forms. And instead
we can use ngModel.
So, okay.
So let's say I'm going to pretend to do that for maybe
this.
Give me a sec. Maybe
this one, the last one. City.
And here I'm just going to
hide some code.
I'm going to copy it.
Paste it there.
Remove the fault control line.
And maybe I'm just going to do it this way. ngModel.
Like you want it. Now
is that correct? Is this something you were saying about?
So banana in the box should also be participating
here in the party. Right? No body,
no crime. No banana in the
box. No fun. That's the usual.
I believe you. I love two-way data binding.
Now it complains straight away. Let's see what does it complain about.
It says, does not exist on type of.
The beautiful error message is back. The one from yesterday, which I
promised to explain to you. So far no one asked me again about it.
I was surprised. People like to solve issues and this one is still
there. So I'm going to explain it now.
Surprisingly this is not related to our code.
Our code is sort of okay-ish.
But this is the problem with surprise, surprise
plugin to Visual Studio Code.
So one beautiful day when I was updating
my Angular, it happened that I was updating
Angular between versions and then I didn't
double check updates
from the plugins in Visual Studio Code perspective.
And I ended up with plenty of errors like that. I was debugging
like a couple of hours of course because I was eager strongly to
fix my code before I go to production stage.
And then after of wasting, seriously, literally wasting
couple of hours, I found out that the problem is with
the bloody extension. Sorry for bad words. So I go here.
It's not the problem with Angular.
It's not the problem with my code. My code is okay. Angular is
okay. Drugs are bad and good. The alcohol is
bad and good. And of course the plugin in Visual Studio Code
is bad. He was bad, bad boy. So I can
again blame who? Microsoft! Yay!
Now the way to solve it
to not to spoil my working environment
is simply like this. You go to install another version
and the only way to fix it for now is to downgrade it. I'm afraid.
Alright. Which is weird.
I know. Which is double weird because it happens to be
back again. It was here in version 17.00.
They fixed it in version 17.1.
And it's back again in 17.2.
Which means it should not happen. Come on.
We learn from our mistakes, don't we?
Not happens with Microsoft, I'm afraid. I'm not a mic hater
of course. I love Microsoft. So I love
partying with Microsoft and solving issues, you know
blank issues, wasting hours of debugging because of
not myself and my errors because of Microsoft.
So that's supposed to do it. So let me reload it.
And hopefully it will be back without complaints.
Yes. It's not complaining any longer about this ugly issue.
Good. But it still complains about something else.
Of course it does not exist on time because I didn't manage
to connect it yet. But I'm gonna stop doing it now because it's wrong.
And I'm afraid, Darren, if you do it that way
it's like hacking, Angela. Please don't.
Now I'm gonna ask another person because I promise I'm not gonna
spend too much time with Darren today. Sorry Darren.
Efraim. Of course I'm gonna be back with you later on
with the next loop. So Efraim.
Why should we... What's wrong with this approach?
I'm using reactive forms. So I use
form group. I use form control name.
And then in the same time I'm using ng-model here.
So what exactly is wrong with that approach? Do you know what exactly is wrong here?
Efraim.
Can you say it again louder a bit? Sorry.
I'm gonna make my
speakers louder. Can you repeat it please?
I couldn't hear you properly.
Oh, I can hear you now. Good. Thank you.
Should I repeat the question or...
Let's forget about error. This is just
because I didn't set up CT on this side in the component.
So that's okay. If I set it up here it will stop complaining about that.
But again, the whole thing is wrong.
For some reason this line is wrong.
Don't worry. Get out.
Do you know the answer to that?
No, no, no. Okay. I'm gonna
explain again. Forget about this error message. We know how to fix it.
That's not the problem. The problem is different. The whole thing now
is wrong. The whole line is wrong. The approach
is wrong. Can you say why?
Nope, that's not the reason. Jesse.
Joe.
John.
John David.
I love you John. We have a winner guys.
It wasn't a competition of course. I'm joking. It's like I was
double checking how much do you know about Unreal R because you know
everyone has different experience with it, slightly different approaches
and you have some practices, you have your own habits. And my job
is to show you the best practices too.
Of course all the practices I know I can share with you
as I remember them. And John, you are right.
We shouldn't mixture both approaches
in one solution. And later on
I'm not gonna do that but later on if we fix this error, so I define
the city on the left side, Angular will tell me straight away.
If not here then in the web browser. Well
it will be a warning. It will not stop me of hacking
with it of course because why should it?
If I really want to hack it, it will allow me to. Because this is
Google guys, not Microsoft.
But yeah, we shouldn't combine
together template driven and reactive forms in one
solution in one form. Inside of the same
form, tag, HTML tag.
The reasons are simple.
The code will become unpredictable in the future. So it will revenge like a lot
lot later on. That's the first thing. Then
second will be significant
performance downgrade. As
sooner or later we will fight with that too. And it will be difficult
to find out. It will be like
tough to debug and find bottleneck. And there are
other smaller reasons too. So please don't.
Alright guys, thank you very much
for this discussion. I think that one was really important.
So now we know we should avoid that.
Yes we can but please don't. So I've been
a bad bad boy. I'm going to remove it.
Uncomment this bit again. And we go
back to explanations. Good. Now we
solved and settled. One of the
most important best practices. Let's go back to top.
And then from the big picture we're going to go deeper.
In the meantime I'm going to check again
with my server what's happening.
Just in case during the break I'm going to write to my
cloud provider. hosting provider please fix it.
It still doesn't work.
Okay. Let's leave it Lucas.
If I talk to myself too much let me know. I just included
myself into loop. So I'm going to ask myself too. Why not?
So two things. Form group
binding. My custom transistor form
property. It's supposed to be of form group type
of course. And then we have to initialize it any way we do.
Sometimes I do it here with a new keyword.
Sometimes I do it in the constructor. And
in some case scenarios I do it in ng-unit.
I'm going to show you later a real life example so you will see what I mean.
Second step is form
control. I omitted ng-submit
on purpose. This is the last bit.
Second step is form control. Each field I want to
make participating in
handling the form. Not necessarily
validation straight away but just handling to participate in
passing data through. I should
provide form control like this. That's supposed to be unique for each
field. Usually I do the same as name.
Sometimes I also use id to improve it from the CSS
and other elements, other
techniques perspective.
Alright.
So let's look at the register form here. How I define it.
So I say it's supposed to be of type form group. I initialize
it with empty stuff. So as you can see we have
form group here. And then we have form control there.
So actually
if you want to memorize it or if you want to learn
it properly you will see a lot of references in the
Angular documentation and a lot of examples which are
available today in the world in communities and
books and in examples from Angular
developers on Angular blog
that corresponding
directive name, sorry, directive names related
to reactive forms will have corresponding classes like this.
So form control name will have form control
corresponding class. Alright. And this thing
will be like
usually either interface or declaration or some extension
to previous classes, more generic classes
in Angular core. And actually
maybe you tried that already or not. I'm not sure I'm going to show you.
When I was learning Angular and I still do it sometimes
after migrating between bigger versions of Angular
I go like this.
And I see oh it's an interface
true. And then I go downstairs and I see oh it extends
something actually and it says abstract control. Oh.
So I go for this abstract control to another definition.
Alright.
And I see this is one of the first things in this index
on forms Angular module. See?
So we are in the proper place directly. And then I can learn from
that. And I see that abstract control is actually something
which is the pure first thing
which we use all the time to actually control
the form. And I can use it in different scenarios, different
contexts. Most of the time
I'm going to just use it to get the value from the form. Secondly I'm going
to validate it. Alright. And thanks to this
going in the chain of connections
through the IntelliSense I'm going to have better understanding.
So I strongly suggest to you if you really want to learn
Angular in a deeper, stronger, proper way
just go like I did. Go through the connections
via checking the
right mouse button, go to definition
and then you will see what happens exactly from
from Angular perspective.
Alright. Let me go back then.
It was out of control minus.
One. Yeah, actually
that was just two steps but it
made a shortcut for me. Nice. So now you know what exactly that means.
Okay. So my first name has its
form control name. I named it with my custom name which will be reflected
here. So if I configure
reactive form and I do it as a
group to make it more efficient it will always
take such object. It will be an object of my set of fields.
And as we said at the beginning and agreed
I don't have to put all of them here.
Well, just in case for the sake of
the training example I have all of them here.
God bless you Bernadette.
So I have all of them here. See I'm spying on you.
Yeah, just in case because I'm prototyping now.
Okay. The whole application ng-train, the whole application
ng-train is like one big prototype
continuously being in design mode. Why? Because it's
a training material. It will never be on production level actually.
So, you know, I can. Why not? But of course in
production level we should avoid assigning everything as long as we don't
need some of those. We should just skip them totally
from the picture. But we know that already. That's a good practice.
Good.
So, again, first
step is to use form group binded with my custom element.
Then each of the necessary fields supposed to have form control name.
We initialize them
and then next very important step will be to use
form builder. And form builder
is like a wrapper
special class which is quite big
and it provides a lot of nice
methods. See,
it doesn't extend anything so by itself it stands.
And it's one of the crucial classes in Angular forms
from the reactive perspective. So this is like
very important shortcut.
Alright, let me go back.
Now, how and why we need this form builder?
In nglm.init
I'm actually
providing the proper value. So I'm assigning the proper
value to my register form. It was initialized
with empty controls. Now I'm going to use the real controls
to create a new form connected with my template, with my component.
So,
even if I don't need them yet, like
cities, street, last name, I keep them here. As I said,
only for the sake of prototyping. I'm designing them.
Later on when I go for production level, so before maybe pushing
or even before maybe committing depends on the flow and stages
we have in the conventions,
then before that I'm going to remove those if I don't need them.
But for now I'm prototyping so I keep them.
So don't think I do it on some purpose. The only purpose is like this.
I'm prototyping and designing my application.
So just in case I keep it because maybe it will change through time
in the next couple of days or weeks.
Alright, let's look at the first element.
So FormBuilder will have its own methods.
One of them will be group. A group is the most popular one.
Most often we use Dartman.
There are some overloads of it from TypeScript perspective
which will be deprecated soon.
So in some cases you might see if you go for it, if you use it
in a special way in your component you might see deprecation.
Don't worry it will not disappear yet but sooner or later we're going to have to rewrite it
in a slightly different way. They will tell us how.
They will show us in the documentation.
So don't worry, I'm just saying you might observe some deprecation here on this level.
This field is important to me.
So I provide configuration for it.
And if I want to control
from data perspective, from validation perspective,
from either synchronous validation or asynchronous validation
perspectives, maybe some connections with users,
web services related to my chain of processes,
each field will have its own configuration.
And we wrap it into square brackets like this. So it's an array
of options. And this is crucial to understand
properly. The very first one will be always what?
We stopped at John David.
John Ronil. What is the first element in this config?
Do you remember?
What kind of value?
Default value.
It's like placeholder. Well it's not a fully full placeholder yet but if I type
something here it will be visible straight away to the user.
So we often use it as some simple
documentation of the field. Instead of providing long foundational description
below or upstairs of the field, in some surroundings
of the field, we save the default value. Maybe we make
a CSS size properly so it tends to be a placeholder. And you know
it's easier for the programmer and faster for the user to
manage. Oh, now I know what's supposed to be provided here. I'm going to put
my content. I have a placeholder. I see the fake data.
So it's easier for me to understand the form. So from the
user interactivity perspective, interactivity perspective,
it's good, it's better, easier to handle.
That's why they called it reactive forms. I prefer model driven
name because it tells me more. Because I have
my model somewhere and I handle it in the component
and does the flow, not just component itself. So I like
the model driven name better than reactive because reactive says only about
communication and user. But okay, both are
good. Now, thank you.
Lester,
second argument. What does it do and
how do we understand it?
Good. So in general, if we could say
this second argument to the config
for each particular field will be always what?
Validator. And it's supposed to be what?
Synchronous validator, either one or
an array of them. Look at this example.
Yeah, I provide similar config like for the first name,
but I have more than one validator. So because of
that, Angular expects from me here on this position,
an array of them. And it's crucial to remember it's supposed to be
an array. If you do it like separate
something else, then array, it will complain. So it's supposed to be
an array. Non-associative array in JavaScript
perspective and TypeScript perspective. So I have couple of
them. And I use built-in. And this
is awesome. Most of people love it because, well,
this actually is shared between template driven and reactive forms,
so it's okay, right? It's not only available
in reactive forms. It's also available in template driven. But
yet, it's a great thing because I have plenty of built-in validators.
So we have
all the most important like minimum, maximum, pattern,
required, all the goodies related to HTML itself.
As a rule of thumb,
and sort of good practice too, even if we don't need it,
from the code perspective, we should keep
the native stuff, native required, the required attribute
in HTML. For the sake of
debugging, maintainability,
we should keep them in the
code. You will find that in AngularDocs that it's
okay to keep them. A lot of people remove it and then
when they migrate, when they refactor it, it becomes inconsistent
when they remove some control. Things are changing
through time. Sometimes we redesign the forms accordingly
to different users. Maybe we use the same environment
application project for different clients. So
in one version, 1.2, 1.3, we're going to give it to that
client, 1.2.4, sorry, 1.3.
something we're going to give to another client. And then both clients have different needs.
One will need the control in the field, second not.
Let's make it simpler. And then if I remove the
simple required, it will stop working the whole
thing. So that's just one of the business case scenarios
in which we should just keep it.
What's the difference between
required and required true? Required
and required true. Do you remember? Did you use the second
one, required true before? Any of you? Dara maybe.
I know, Darren, you did use it.
Dara, did you use it? Daren?
Exactly. So let's say, we can, thank you very much. That's
the point. I want to know as much as possible about us. And it's not
like, you know, exaggerating, exaggeration is true.
But okay.
Good. And
obviously, email is very important one.
We have some maximum, minimum. We have also pattern, which is
very important one. I'm going to show you the later
real life example of this one, actually. And I think
I have one also in my, here in this NG train.
Hanging nulls.
Not often used, but people should know about this
one too. And then of course we have compose async, which is also
nice, but just in case we can use that one too. Alright, let's
go back to the flow.
Good.
Alright.
Yeah, here is example of the pattern, for example. I have a zip
code. And this one is actually
not exactly the same as we have in Poland,
but we have five digits. So we want to have
exactly five digits. And it's supposed to be digits, not
letters. Only numbers from zero to nine. So we use regular
expressions here. Yes? A question?
I'm going to explain that in a moment. It's a different scenario.
I promise I will explain that. Good question, good point, of course.
I didn't forget about this one. It's like next topic.
It's a next topic. But I'm happy
you are conscious and you keep your
attention in detail, because it's important, of course.
It's one example to rule them all. So I have couple of
topics actually included in this one example, just for the sake of
speed, because sometimes I have only one day course about Angular,
because a lot of companies have smaller budgets and they buy
one day course about Angular. Then I have to have everything in one place, you know,
just in case, because there is not enough time. Of course, there is never enough
time, so... But you know what I mean. So,
we are compressing like a lot of knowledge in two days.
So, yeah. Good.
So, this is built in validators for us.
Good. I think
now we can proceed to another example, which is like
multi-field cross-field validation.
And it happens to be slightly different. So far
I told you that in this group method, on top
of FormBuilder, each of the fields
supposed to have its own configuration and its
own validators. And that's true. But
if I want to combine more than one field
somehow together in any type of computation
in my validation process,
then there is another approach, which means
look, this first config starts here
and ends there. 42. After a
comma, I create another object, which is second argument,
second argument to the group method.
Alright? Do not mislead it with
different arguments to the first object, which are per field.
But one at a time only. So, it's a
second argument to the group method.
This is crucial. And the whole thing is like validators
related. So, the rest of it is similar.
It's an array of validators, right? If I have more than one. But by default
even if I have one, we should use array. That's the approach.
So, slightly different. Previously if I had one,
I didn't have to wrap it into square brackets. In this case I have to.
The reason is simple because it's about the whole form.
Cross-field, multi-field validation.
So, it has its own name even.
It has its own prefix called validators like this.
This is not my name. This is built-in thing, which I always have to use.
As you can see it says abstract control options. So, it's part of the flow,
part of options definitions
per reactive forms handling.
A lot of talking, I know. But we have to have understanding first,
then we will do the exercise, right? Now, as I promised,
another element. This bit
is like injected validation. And that's
okay. This one is asynchronous.
That one is asynchronous. Asynchronous validator.
And it's supposed to be always,
bit quantificator, always, as a third
argument in this array.
For each field. Now, why?
The reason is simple. First is the default value. Second is
synchronous validator or group of validators.
And the third one always supposed to be async validator or group of
asynchronous validators.
The reason is simple. It's like about, again, everything is about
most of everything. If I say everything,
I'm going to be wrong. But if I say most of everything, it's appropriate,
I think. So, most of everything in Angular is about speed.
Performance.
Google guys, they promise, they made a promise
to themselves and to us, usual, simple people,
struggling, fighting with Angular.
We're going to make it fast and mobile friendly. I told you that yesterday,
I know. But in this case it's also true. So, what do you
think, why? Why asynchronous supposed to be
third, not second, let's say. Not the opposite.
Why asynchronous supposed to be the first one and asynchronous supposed to be the third one.
The question is to...
We finished with Lester, I believe. Ramzes.
What do you think?
You were very quiet. Can you
somehow put your microphone closer to you? Because I couldn't hear you. Sorry.
Much better. Thank you very much.
Okay, don't worry, you will today, because I have a nasty
exercise for you. So, next one is Sarah.
I'm afraid you are next in line. Are you there?
Someone said something on the chat. Sorry, I missed that.
Very good.
That's not the question.
You are right, of course. Synchronous is usually faster than asynchronous.
But that's not the point. The point is why do we
put it on the third position, the asynchronous one,
not the opposite. The second one is synchronous, the third one
is asynchronous, why this way? Why I cannot change it?
Maybe that was the reason I would like to, from business perspective, but they say
no. Why?
Yes, because order has a meaning.
This one will be handled.
This one, or this group will be handled first, and then
that one. Not the opposite.
Yes. Good. But why?
The question is why is that this way? Why is the design
like that?
Don't worry, I'm going to explain. I just want to
discuss it. Please do, please do.
That's the point.
And that means what? To the user, maybe?
Final human being? Yes, yes, yes.
Exactly. It's like about speed. I'm going to show you
the business perspective, maybe, now.
Let me check if I have this one running.
It's not running.
This is NG train. Yes, this is the one.
I see I have nothing running, but this one I prepared.
Good, good, good. I stopped everything because
yeah.
At the moment it's nice, but see? Oh, you don't see that what I'm showing.
I'm going to show you my screen just for a second.
At the end of the day, yesterday I observed
a lot of RAM memory was used in the machine.
It was red, so I was scared that something would be spoiled during the training
and we would have slowed down just because of the environment.
I didn't want that, so I'm going to show you what I mean
shortly. Do you see my screen share?
It's happening for some of your machines. It's okay.
So far it's stable. It's stable
but it might behave if we open yet couple of more NG serve
commands and then it will hang. So we have to be careful
with that. NG command is like really resourceful.
It's resource eater. So you can see this green, sorry,
red guy. RAM memory 83%. So far it's okay. If it's above
90% we should consider to do something. So it was like that
in my case and then I stopped everything. As you can see, our environment is
very useful also from this perspective. And that thing,
this statistic is done by a what in Angular?
It's not a quiz for you. What do you think? How this is done in Angular?
See, I can click on it. I can refresh it. Also I have a
connection. I told you that one already. How is it
done? What about this one? What do you think? Yes, exactly.
Behavior subject, some of the elements also are
done with the subject itself. Just subject from observable perspective.
And some of them also are as like combination
of promise and observable together.
We listen to observable. The whole thing we make a promise.
We wrap it into promise and then we listen to the promise from our perspective.
From Noblethub's insiders, staff members
perspective. Okay, I'm gonna stop sharing now.
Now you know why I did disable
everything in my screen. But now I can go back.
Sorry, I apologize
for my aura. I'm afraid I'm gonna be sick.
It's because of my keto. I can blame my keto.
I'm gonna survive. I apologize for my
voice. It's like different now. I'm really sorry.
So now it's working. Let me refresh it. Good.
Inspect. And then we go straight away
for Angular extension.
Then we go for this forms component.
So let's finalize this discussion
and explanation of this.
The order here in this config has
a meaning. So always first we'll go default value.
Then we'll go bug data, synchronous bug data.
Because it's faster. And then asynchronous.
Even if from my business perspective, for some reason
this one is more important than that one
I cannot change the order.
Why? Because Google guys really, really want me to have
speed instead of my business functionality.
So they will not allow me to do so. Of course I can try to hack it.
I can extend Fall Builder with my custom class.
I can create my custom Fall Builder, extend it with my class.
Use the super and then I can change
the order if I like. But please don't. Because it will slow down
the application. It's like very nasty hacking. Don't do it.
It's doable but please don't. We tried that in the fast
in Ombuprock and it revenge like a lot. We observed a lot of slowing
down in place of this environment. And we can't avoid
we can't allow to happen like that.
Because for example we have trainer in Canada and
participants in Australia. From Canada to Australia
it's like a lot of way. And then if something slows down
because of the tax it's not good. So that's why we decided
to not. We work around it in a different
way. With promises and observables together.
Alright. Now you know why. But from the business perspective
of course if I
start doing something in the user interface
and if the order was different, if they allowed us to use the asynchronous
first I might wait too long or it might hang
even the whole thing. So instead of having something
working I'm going to mislead my users. They were going to have
to wait longer than usually. Not the best approach.
So actually Google guys are right and we should trust them.
Wow that sounds really really weird.
Trust the Google guys. Come on.
It's like saying that
we should trust Putin or we should trust
Baidu. Do you know Baidu?
It's like ten times bigger search engine but it works
in China only. But it works in Europe too but it's really slow.
Then you have to know Chinese language.
Okay. Let's go back to code. I hope
you see it now. Is it clarified properly Sarah? Is it
clear? What's the purpose of it?
Not sure. Not really. Okay don't worry.
Okay I'm going to show you the...
Sorry. You don't...
Good. Now it's running and it's supposed to work the whole thing.
The example will be big. So we're going to start with
smaller steps of course. Not to mislead you,
not to mess with your heads. And then we're going to do
not one but two or three exercises because this one
is very important. Reactive forms.
That's one of the most important actually topics in Angular.
The whole thing. Now by default
the form is invalid straight away. And straight away
I'm telling to my users something. It might be
good approach or not necessarily. Depends on the business perspective.
As usually. In some case scenarios we want to
shout at users straight away when they load the form to the
web browser and they straight away see precisely
what's supposed to be required or not. What are the problems with
the form straight away. So we make it idiot proof straight away.
Or at least we try. There are different scenarios like
for bragging to the new clients about the environment.
And then we show no validation at all. It's supposed to be pretty with
fireworks. Nice animations. And then we don't validate
at all because it's supposed to be pretty.
If you want to... If you search for new clients
then we show them the beautiful picture. And then when they buy
the product then we do validation. Then we don't care any longer.
I'm joking a bit but it's very common actually.
So we have scenarios only for new clients.
So yeah. In this case it's straight away invalid.
And actually I'm following a couple of good practices in this
example because at the very bottom you don't have to but at the very
bottom I always do it. I always do it because it helps me like
a lot. It speeds things up. So I state
form status invalid. I show it here instead of continuously
console logging it. So it's a good common practice to do so.
And in the code it's quite simple.
At the very bottom of my template I just say this thing.
See? My register form, the binded
name at the top with the
form group has it.
So I say status. Sometimes I say even the whole form.
Alright. Something nasty is happening to my machine now.
Sorry.
Oh, okay. Everything is fine. I was just...
It was just lagging. Okay.
So it's a good practice
to show the whole thing. Sometimes I show
the whole register form for other
testing. Sometimes I stringify it from the JSON perspective.
Things like that.
Good. Let's play with it. So we're going to
try to submit it. Of course it will complain.
And in this case I'm allowing
the submit button to be clicked. So I'm not disabling it.
It's a very common thing to not
to disable submit button in reactive forms.
Again, why? When I do template
driven, I don't care. I always disable submit button.
If I do reactive forms I oftenly
don't. What do you think? Why is that so?
Now we were talking with Sara. The next one is Thor.
Exactly.
And if we disable it we will not be able to test it.
The reason is really simple. But you might not be... Exactly.
For the sake of human beings
simplicity, user experience,
we should avoid that. In some cases it's still okay.
Just in case in my code I keep this
line here.
That one. Just a simple example.
So this is the way to disable it. But then of course I will not be able to test it
properly. Of course the final
version of it
can be disabled, of course, when I give it to my
final users. The real users, not just me when I test it.
So it can be of course that.
But for the sake of better flow and then development perspective
it's good to not use it yet.
Alright. So let's go back to the business perspective again.
Now we see some of the things were not passing the validation.
So I'm gonna try to fulfill it now.
Now you can see the asynchronous
validator was happening. I'm gonna do it again.
See, status is pending, slightly different. We have some
weird progress bar provided by Lucas.
And then it says okay. Of course the other fields are participating
so it's still not valid, but the first one is fine.
Now, password. This is part
of the cross validation. So multi-field validation. First
I'm gonna type the password. I clicked
the submit button already at least once, so it will keep
validating for me. So it says, content password is required.
Which means I have to put again the same password. If I just
do the wrong thing, I made a mistake, it will tell me again
well, does not match, different message now. Alright.
And finally if I do the proper one
it's supposed to disappear. And then the
final is the zip code. If I say numbers, but not
five digits, it will complain. If I say five, it's okay.
If I say one more, it's not good again. And then
if I say letters, it doesn't like it
at all, even if it's five. So strong pattern here.
Let's fulfill the whole thing and finally, finally we have a valid
form so we can submit it and then in the console we see the whole
thing. Of course, usually we do
something with that, with the data taken from the user.
So either we output it to the parent component or we just
straight away do the query via service to the database or to
chain of web services, etc. etc. You name it.
Depending on the business flow. Alright.
My reminder says, look this.
Stop talking. Do the break.
So hour and a half behind us. Let's do
the first short break guys. Ten minutes break this time.
I decided to do it like that because I observed
yesterday that you were very tired at the end of the day
and a lot of you were like, be right back, going back, be right
back, going back. So I think it would be better if you do ten minutes now
and twenty minutes later. What do you think?
So
we continue ten forty.
See you in a bit.
Some of you are back. Good.
We will proceed in a moment.
In my case it's like twenty to four am.
I feel sick. My kiddo, one of the
youngest one, will probably wake up soon and I'm going to hear it, hear him.
So if I'm going to
do crazy things today, please forgive me.
Because I might behave. I might have like
stupid faces and things like that. It's almost the end of the week,
working week. So I straight away apologize for myself,
for my misbehaving trainer.
Good.
We saw the business perspective.
We saw the first example,
the most important bits. Let's do the exercise.
And first exercise will be
like this. I want you to
go to your add dual component and make it
reactive. The model driven, sorry,
with reactive forced approach.
And from that perspective
let's make it simple so far.
Let me think.
In my presentation I have, what do I have in my presentation?
Yeah, we're going to make it slightly different.
And later on we're going to improve it
precisely with those steps, but not too much
at the time. So first of all, make sure it's required.
And it's supposed to be
no shorter than
four characters, many characters.
Such two simple bindations.
So let me go for our...
That's interesting. It doesn't react
to my second...
When I hover it, it's supposed to show me both.
And it doesn't. Interesting. Which means second visual studio code is
hanging for sure.
Maybe it's not. Let's check.
Doesn't react to me. Oh, it does. So it's working. Okay.
It's just Ubuntu Unity not responding well.
Okay. Alright, so...
I believe all of you have add dual, because
we started with in the middle of the
process of the progress. So in dual, add dual
component, right? In add dual component
I want you to redesign this form into a reactive form.
And the only input we have here is supposed to be
validated with required. Alright?
Required. And
as I said, at least four
characters, no shorter. And it can be
numbers or letters. Anything. But at least four
characters, no shorter. Or actually it's supposed to be only numbers
and letters. Let's say this way. To be precise.
Let me close everything else for now, maybe.
And I'm gonna keep example on my screen, because I'm afraid
my GIT server doesn't work, so...
So, you know what to do. Which component is supposed to be changed.
Add dual component. And then I'm gonna show you the
example on the screen. That's not the
thing. That's the one.
Yeah, not everything is on the screen visible.
So I'm gonna scroll up. And now it's supposed to be
clean, hopefully. Yeah, we need that.
Of course we need this.
And that too.
Let's start with five minutes, we will see.
How is it going? How is it going?
Okay, I can see you have a nice error message.
Do you know how to fix it? Or maybe I can step in and
just hint you a bit.
Okay, so look at the error message
first. What does it say to you?
It's not and is not definitely assigned
in the constructor. Okay, so far so good.
Save the file, save the file, because sometimes Visual Studio Code
is not refreshing itself.
Well, we still have the same, I'm afraid, error message, even if we say
properly the name there. But if you hover the line seven,
please hover the line seven with your mouse.
Seven. Look at that.
It's not visible in the command line, but it's also meaningful.
Can you hover again, please?
How do you understand this message?
Which means something. Wait a sec, I'm going to share the screen so everyone else
can see the same, because probably you know what to do, but let me share
the screen so everyone else will see what's supposed to be done, because it's a common mistake.
Common error message, which everyone sees at the beginning,
including me myself, a long time ago, and then I was confused.
Because I started using Reacting Forms, obviously,
without reading the documentation, because I was so
convinced about my power, and then I had to go back,
because Angular is like this. You think you like it, and then you hate it.
Alright, so let me share the screen.
That's the one, and then we go for Bernadette's machine.
For your machine, Bernadette.
Actually, you said
Berna here. Is Berna a proper shortcut for your name? Do you like this
way, if someone says that?
Okay, so thank you.
Connecting to your machine. Guys, please
focus on the screen shared in Teams, because we have an interesting
case.
Some of you probably know it, but yeah.
Can you see the screen shared, guys? I'm just double checking.
So, Bernadette,
can you hover again?
Finish it, finish this, finish this.
Use the IntelliSense, because it helps you.
Okay, it would be probably better if you...
You don't have to, but it would be better if you follow
a good practice, which says, if you name your input,
and you say, add jewel, then full control name is supposed
to be the same. It doesn't have to be, but it's a common good
practice. Because later on it will have consistency with naming
simpler to test, simpler to debug,
also your colleagues will like your code if you do it this way.
So, you know what I mean? Use the IntelliSense, just use add jewel
from the top. Just hit, use the mouse, because
the IntelliSense is showing it to you now, if you know what I mean.
Can I write on the screen for a moment? I'm gonna show you.
So, when I'm here,
in this form group, and I start typing,
it will hint me with the first thing.
And I should actually follow that. Of course,
it will be wrong, because it will think I want to do
this add jewel.
And from now on, actually I don't need it.
We are redesigning it, so I'm not gonna need this guy at all.
This line. Which means I'm supposed to hide it.
I'm not gonna need it.
I'm not gonna need it. Now, because
I told you, or I told you guys that it's a good practice to
name this anchor, this binding, same way
like we named the field. So I'm just gonna do this. Copy that.
And paste here. And from now on,
I give the mouse back to you, because it's your exercise, not mine.
So, but please hover,
please hover the line seven again. And
read us, read carefully aloud this message.
How do you understand this?
What does it mean? How do we
understand that? What Angular through TypeScript
message actually tells us?
Show it again? Hover it again?
Let's keep it in front of our eyes.
Isn't a known property of a form?
Hmm.
Angular doesn't see,
doesn't know this directive. Angular
is not understanding this directive, which means this directive is not visible
probably to Angular, which means what? It's somewhere, not
somehow missed. We miss it. It's missed.
Probably there is dependency missing. How do we
provide dependencies in Angular? Berna.
You have two examples
at the top. Import.
This is the main way. But this is JavaScript way. What is the way of
Angular?
How do we provide dependencies in Angular?
Yes, but
this is, the import is JavaScript. Angular way is
what? I can do, use dependency injection in constructor.
We have example in line 25. You provided for builder.
This is dependency injection. Secondly, we can have providers.
And providers can be, we're going to talk about that today later on.
When we go for modules strongly.
Providers can be in the components, also in different places.
When Angular 16 started to have
I think it was even in 15 standalone
ways, right, etc. We're going to look at that today.
Also, we have modules. Or let's say the
main common way of
driving dependencies in Angular is Angular module.
Which is built on top of JavaScript module, of course, yes. But we should think about
modules from Angular perspective first.
So Angular has a framework, has a lot of creatures.
Where is the main module? Please open it. Main Angular
module.
Look at imports section.
We have forms module. So far so good.
But that doesn't have reactive forms.
So
do the comma here. Go downstairs.
Start typing reactive.
Save it. Go back to your component.
And it should stop complaining. See? Done.
Very good. I'm proud of you. Guys, this is important.
Oftenly we forget about it. If you create project from scratch.
If you hop into existing project, probably
99% comma 99, it will be already
there. But when we prototype, when we design new application from scratch
it might not yet. So be aware of this.
Good. Now we can continue.
Alright. Welcome. Guys, do you have any questions?
Can I stop sharing the screen for now?
Anyone?
No questions. I'm stopping
sharing the screen. I stop sharing the screen and then discontinue.
I'm adding, let's say,
three more minutes. Three more minutes and then
we're going to start to get the solution.
Again, if you have
any errors which stops you for longer than one minute
tell me. I'm here for that. I'm here for you. I can help you.
I'm not going to tell you what to do. I'm going to hint you. So it will be still
proper exercise for you. Don't worry. Brag about mistakes.
You guys can teach us.
Okay. I'm going to start.
Guys, you have, well, you don't see
it on my screen. So let me maybe do it this way. I'm going to
fault a couple of things for now.
And then you will see what I mean. Don't forget about this
small but still useful practice
which I showed to you, which is
this bit.
That last line. Show your status of the
form continuously. Of course
at the level of designing it before you go for production.
And before, if you're ready
for production level, just remove it or hide it.
But please add it now. It will help you
a lot, lot to play with the exercises.
So this last line, 68. Just show such P element
at the very bottom of your actual template.
HTML template. And show register form that status.
It will speed up things with this simple interpolation.
Two more minutes. And then we will finally discuss.
I just want to make sure everyone will have at least this minimum
because on top of that we're going to extend this
solution with another exercise.
Ramses, we have a question. Is it about my new cap?
Do you like my cap by the way?
I love this. I love this.
Form controls. Why do you want to talk about
form controls? Let's talk about caps. Come on.
Alright. So what's the question? I'm going to go to your screen.
Show me. Ramses.
Okay.
Add and remove
form controls. What do you mean by that?
If you have a dynamic form, which means probably
you mean something which has decisions in it.
Like if I click the check box or radio box,
part of the form will appear. It was hidden by default.
And then I need validation. Do you mean such scenario?
For example?
Well,
for dynamic forms, yeah.
That depends on the validations of course.
If it's asynchronous, then yes. If it's asynchronous, then we have to be careful
of course. Because
obviously from asynchronous perspective it might be problematic.
If something is hidden and it will be visible to angular
to dependency injection after decision,
which usually is related to
the choice from the user.
Well, if you wrap it into ng-if, for example,
or ng-switch, that would still be appropriate, I believe.
But for asynchronous validators
only. Asynchronous, we have to work around
it, I'm afraid. I don't have
exercise with dynamic forms. I have an example. So let me think.
If there will be time we can look at the dynamic forms example
and then we will see.
But I need to prepare it. So, yeah, thank you. I'm gonna make a note.
Because it's on my production level.
Because I believe time's up. I'm afraid
we have to proceed slowly. So
how many of you didn't finish yet?
Just tell me now. Don't worry.
You can raise your hand up. You can do it in silent
private message. You don't have to tell everyone.
One, two, three, four
people. Okay, guys,
those of you who didn't finish, there's like six people. Okay, so let's
give... I'm gonna give you more time. But of course, if you struggle
with something, please let me know. I can help.
Not necessarily speed up things, but just use me.
I want to be used.
Thank you. So three more minutes
and we will see. But of course, please use me.
Jesse, I'm gonna go to your screen. We'll be there in a sec.
What are you up to? What's the problem in your case?
Show me your error message.
Does not exist on type string.
So, if you look at
my example, which I believe still is visible, hopefully.
Oh, it's not. I hit everything. Sorry. Because
I wanted to show this, I folded things out.
Yeah, this is the shortcut. So you might not... I didn't show
that one yet. So let's look at something which is not shortened.
By any shortcuts. Which means
it will be downstairs here.
Yeah, look at this. This is how we do it.
This is how we do it.
Try to fix it this way.
Yeah. Can you see the
line 53 on my screen? I think that might be useful for your case.
Am I right? Let me check. Jesse, you are
making the diff with error message. So, yeah. Try this way.
If it was not gonna work, let me know. I'm gonna show you another way.
Who else? There were six people still finishing the
exercise. Let me know. Who was that again?
Joe, Joe. Okay, Joe. I'm going into your screen.
Show me. I'm looking
at your machine. Look. Look at the message carefully.
Hover it again and look at the message carefully.
Try to change it with the array.
Oh, what kind of setup do you have?
Is it Windows 11? Windows 10? Mac?
Windows 11. Yeah. We observed lastly
like last couple of days, it's a fresh
bag. Windows 11 guys sometimes have
issues with keyboard. For example, on Monday,
previous week, sorry, this week on Monday, one of the delegates on
my training, they couldn't do the shortcut, Linux shortcut
like shift, insert, control, insert, shift, insert
in the command line. It didn't work. Wait a sec.
This is, this is, who was that? Sorry, can you say
again? It was Joe, right? It was Joe? Okay.
Go to your screen. I'm gonna try to help you. Let me make it interactive.
Joe, Russell, interactive, going to your screen.
Now I will be able to click on it. So can I click
on it a bit? Let me check. If it's only on your side,
it means
it's probably because of Windows 11 or maybe your internet connection.
It works for me. It works for me. I'm on Windows 10 still.
I didn't migrate yet. So probably it's because of Windows 11 or
it might be also your internet connection slowing down and the session keeps
what kind of keyboard do you have? What's the layout
of it?
Is it US, US, you know, US layout?
Is it American English or
it doesn't work?
Wait a sec. Well, it's not good
that you cannot type properly. You can also try
to refresh, I mean, reload the connection. If you reload the connection
it might be bug. Windows 11 behaves, I'm afraid.
Oh, so you had the same
issue yesterday, right? Okay, I see. Yeah, so definitely it's
something on your local setup. Might be Windows 11 or might be
just, I don't know, the keyboard itself. Which browser, web browser
are you using? Is it Chrome, Firefox?
It's Chrome. Try with Firefox. If it behaves
the same way it means it's probably your Windows 11 issue. I'm going to
make a note. So thank you for this feedback.
We will try to work on that too. We have a
separate team which I participate in. We'll try to fix it.
Thank you. Sorry for that.
Guys, sorry for making it online, but
maybe some of you might have the same issue. So
how is it going? Everyone finished?
Even if you didn't finish, don't worry, we can, you know, make it
from my solution, from the Git perspective.
I can show you how and then you can have the solution finally if you...
So question is, is someone still working on it?
Raise your hand. One at a time.
Gerard, okay.
Wait a sec, Gerard, I'm going to your screen. I need to see it so
I will help you in a faster way.
Has no initializer and is not definitely assigned.
Yeah, what does that mean? How do you understand this?
Yes, but wait a sec, scroll up. Guys, actually
I'm going to share the screen because it's also another common mistake in
reactive forms.
And it's good to know how to fix it for everyone.
So just stay with me a moment.
I'm sharing the screen. Gerard
will be with you in a sec. Let me just connect separately to your machine and then
everyone else will be able to see how we're supposed to
fix error message like that.
Guys, can you see my screen shirt?
By the way, Gerard, I love your background. I believe you are a lover, cat lover.
I'm not a cat lover but I also have
a cat but my cat lives outside because I live in the
village. But I love my cat. She's with me seven years
already. From the very beginning when I built this
house. Alright, small talk behind us. Now we can focus
on job, right? Stop.
Guys, can you see the screen?
Gerard,
please hover line 25 with this underlining, red underlining
and keep it like that. How do you understand
Gerard this error message?
Yes, so it means basically that just empty brackets
is not enough. If you look at my machine
you can see I initialized it this way.
This is one of the ways. You can also ignore it from TypeScript
perspective. Do you know how?
Okay, save it. Save it and then
make sure you save the file.
Still failed to compile. Not all code paths
return a value and this is dual component.
Line 51.
Oh, you did it this way. Okay.
Very nice, but too much.
There is obviously easier way, but okay.
I'm proud that you already did the custom value data which is the next exercise.
Great. Now it's working. Show us the business perspective in the browser.
If it's truly working.
State is invalid.
It says still invalid.
So something is not good.
It's still invalid.
Something is wrong with the logic, but okay. Don't worry. We will fix it later.
Guys, now you see how to fix this problem with initialization.
It's a common thing with reactive fonts in Angular.
We have plenty of things. Questions?
Before we continue.
Get out. Thank you. I'm gonna be back with your screen later on
because you have a nice solution so we're gonna compare with mine.
I'm gonna stop sharing the screen. Anyone else is still fighting this?
Thor, did you finish?
Jesse?
Okay. So again, anyone else is still
doing it? Either we're gonna fix it together or I'm gonna
we're gonna get a rise and then we will have proper solution because we have to
receive it, don't worry.
No one? Okay. I believe everyone has it. All of you must have it
because next exercise will be improvement of that so it must work.
So if you for some reason didn't finish and you don't want to tell me
or by any means, just please do it now.
Don't bother. Forget about your boss being here. Even if you didn't
exercise properly, that's not a problem. You are learning.
Come on. Good. Please look at my machine guys.
And I'm gonna
Where is my code?
Here is my code.
This is for the full stack exercise. I'm gonna keep it.
This is for
ng-train. I need to run my ftj first.
I don't have to observe any longer so I'm gonna quit
page top and
I'm gonna double check where am I. Yeah, I'm in the wrong
positions. I have to go to the proper one which is
this.
Now I'm in the proper
position.
This is
the one we need. Alright, so
I decided to do it this way.
In my training video.
First of all, we use form group.
And of course, when we use that, we have to have it
available. And it will be available only and only if
I improve my module which we saw with Berna.
So I'm just gonna open it to the side and we will have
shown us yes, Lucas also added reactive forms module here.
Good. Secondly,
and now I realized
I've just realized that
I didn't explain something to you before the exercise. I forgot to explain
some bit. But okay, I'm gonna do it now.
Sorry for that. Wake up, Lucas. Wake up.
Oh my gosh, it's recording. Oh my gosh, it's recording.
Deep breath. First of all,
form group directive. My custom name
for the whole control in the whole form. So I named it dual reg
f. And then
I just define it here. Look, this is yet another way I wanted to show you.
So far we saw couple of them. We can ignore with
typescript casting. When the initializer
is complaining, we can do it with
like I did in the example.
Here, so the full initialization with form control
and form group
classes. Or we could do it
this way.
So straight away, when I
define the class, my custom property in this
class, I assign the form builder. So it's like
yet another shortcut. Okay, very useful.
Now
here I have my, the only input which I'm gonna handle.
So I added id just in case I'm gonna need it.
If I have id, I don't need name. At least
one of them supposed to be there just in case. And then of course, next
step is to add form control name directive inside.
And then I use the same name here as I told you. As another
good practice. Just to compare,
I had a previous solution with click at j without
reactive forms. Now
I provide
default value. So
we can
see it in the business perspective later on as a
user interface. And then I say validators required.
And get art. Do not
invent the wheel if you don't have to. You know what I mean?
If you look at my solution, isn't it simpler
and shorter? Yeah, I'm joking a bit but of course we should
always consider what? Always
consider built in validators first.
If they don't do the job for you, then and only
then do the customer. Why? Speed.
Performance. It's always better to do something built in. It's always
better if you follow best practices in Angular, which means use ngClient
like a lot. They made it this way.
Best practices are hidden in ngClient, in modules,
in components, interactives. Just use them
in a proper way and then you will have speed. I mean good performance application.
Alright. So
if I want also numbers, I can just, you know,
add another range here in this array.
Simply regular expressions. So pattern is very, very useful one.
I use it like a lot all the time. As long as
I, if I don't need anything really specific and
let's say if I compare with speed when I do some
load tests, that my custom validator
will be faster than regular expression pattern, then I should
focus only on that one. Good.
...
...
One more thing.
...
Either we do it this way.
Right? Either we do it this way. Or
we can use the shortcut. There are plenty of shortcuts and I'm about
to explain some of them because you're supposed to know them.
You will see them like a lot in documentation. If you have
advanced Angular users in your team, in your company,
they will probably already, they are probably already using it. So I'm going to
explain that too. But for now we have full
let's say paths, full path and
the shortcut. So this one is simple
because we can set just straight away valid or invalid.
So this is the way. This is how we use
validation actually to give
some interactivity to our form.
Let me double check.
...
Well, what time is it now in your case? Is it 11.30?
Almost? Okay. So
I was scared. I forgot about the lunch break.
Sorry. Let me set the reminder because I will
definitely forget instead.
Good. So I believe you want it at 12 today.
Same time, right? I didn't ask. Sorry, I forgot.
So this is the simplest one. This is the longer one because
it looks at the one field at
a time, one field at a time
through controls property.
Or object, let's say. This is a shortcut
and this, if you look at the form through
errors, then each field, or each
type of error is supposed to be mapped like this. And it's something new.
It wasn't like that in previous versions of Angular, I'm afraid.
In previous versions like 14.13, it was simpler.
We were able to access this like this, same way.
But today, no, we have to do it like that.
So it's a weird syntax, I know, but that's the way.
And I wanted to, this exercise is designed in such a way.
I wanted you to see and struggle a bit with this because
this is how you can learn in the best way. If you struggle with
something, if you learn from mistakes, you will obviously
and for sure remember it, right? Because it's about emotions.
If emotions are involved in learning, we will remember better.
Of course, our job is to make them nice.
I mean, be happy about it.
Not, you know, shout at it.
Yeah, this is the common thing.
I believe I explained the whole
thing, hopefully. So far so good.
And of course, the final submit thingy, which I forgot to explain before.
This is actually simple. This is the final thing.
What do we do with the data taken from the user?
What do we do? Well, it's up to us. In this case, I just console a log.
And also, I do the proper thing.
Because in this component, usually, such components
like forms have parents. And usually we need data in the parent, not in the component itself.
That's the common business scenario, which means I have to somehow
give it back. And the common way to give it back is both output.
But you know that one already.
Okay. Do you have
questions regarding this solution before you compare with some of your solutions?
No questions.
Yes?
Try the behind the scenes coughing to death.
Alright, guys.
Let's proceed to another example.
And then we will do another exercise.
I still have plenty of time, so I'm happy.
Let's look at my engine training.
I promise that I'm gonna show you some shortcuts for handling
the validation in the template.
So this is the moment now. Let me unfold it.
So I'm just gonna open it again. We don't need that one.
By the way, can you hear me well?
No delays?
We need
this one.
We explained
this shortcut already. Now
let's look at another one. Instead of driving
the long name to controls, to errors, to all the
parts, participants of validation form control
class, the final bit we can map it
into custom function like this.
I named it F, as simple as possible, because it doesn't
have to have meaningful name, it's just a shortcut. And of course
we do it as a getter.
So now I'm gonna unfold this one. And you can clearly see what is happening now.
I make a shortcut. I'm making a shortcut.
Usually we do such things as
reusable functions in the class,
which we put somewhere else like utils, which I'm gonna show you later on
in the real life example in a moment.
Here I have it like this, just a getter at this one.
To make it simple. So it's participating in the component, so it's part of the component.
If I want to make it reusable, obviously I'll go outside.
So instead of typing the whole long name
like this, I make a shortcut. I make it
as a getter, and then I'm able to use it directly in the
template. Why do I have
to make it as a getter? What do you think?
Why not just custom methods in the class?
The question would be to
randomly chosen wheel,
driving, driving, driving, driving. Oh yeah, that will.
If I joke too much, let me know.
Please unmute yourself, you're still muted.
Who are you? Edwin, are you there? Hello?
Knock, knock, who's there?
You were not listening, come on!
Should I shout at you now?
I'm like a British push guy.
So the question is why we have to use
getter? Do you know getters and setters in
JS and TypeScript?
So why should I have to use getter instead of just simple method?
To have access to this template here.
Are you nullut then?
Okay, so the question is open to everyone.
Does anyone know why? Because it's important.
Come on guys, you should know it already.
Very good. Yeah, this is
mostly the good explanation of it.
Instead, if we don't do it with getter, first of all
we're gonna have to work around it with either interpolation
or just calling the whole thing. So it's about speed,
it's about performance and then
reusability again. Very good, very good, thank you.
Another shortcut is like this.
Get first name.
Because I'm doing
here some
asynchronous validation,
I needed this getter and it's slightly different one.
Because it's an asynchronous, I have
another get here. And then register form, as you can see, because it's a
form group now, fully qualified form
group member.
It has access to couple of nice interesting methods, one of them is
just get.
This is very useful method and it's a common way, common technique when we use
when we do asynchronous validators.
But that is the next topic which we're gonna explain in a moment.
First of all, I want you to do the custom validator as
the next exercise. But let me check that I explained everything from the
template perspective which I wanted to.
This is the full syntax.
Actually no, I didn't explain everything.
I forgot about the reset thingy.
Oftenly when I debug, when I test, when I design
prototype my reactive forms in Angular, I need to
reset it quickly, easily. Also if I want to make sure
that user, when he refreshes the form, randomly,
either randomly or on purpose, user supposed to have this
reset also. By some means, some circumstances
we should handle it. And reactive forms has its own reset method
like this. So it's a common practice
even if we don't need it, implement it, because probably sooner or later
it will be necessary to have.
And register form, again, form group class has it straight away.
It's just resetting. We can do it by default after
submitting, let's say, or we can make it with a button like I did
here. Which means
I typed already, so I reset
and we start from the beginning. Very useful
one. Alright,
now, let me think a moment.
Let me check my notes. And at the same time I...
Yes? Please do.
Well, the difference is I choose...
It's quite simple. I just choose which field, because
I have plenty of fields and each of them can have its own asynchronous
validator. So I'm just saying which one will be handled by that.
And then this first name will be used
here.
At the top, right?
I mean here.
And that one, these two.
Also that one.
And when I say pending, it's an ugly progress bar.
Without animation yet.
The difference is like this. Look, this is the previous
one which I explained and I have to directly say
which one. And this is even better shortcut, because
I have directly said it already with this get guy.
So instead of doing this
with parameter on this level in the template, I make my template
simpler and faster at the same time.
Clear now?
Good, good, thank you.
Nice question, good point.
Yes? Yes? Other questions?
Um,
mhm, mhm, mhm.
Good question.
Good question, yeah.
Recommendation, yeah, that's always the hardest
bit. There is no one
the best rule for that.
I think. At least I didn't find one, right? I didn't find one
in docs, I didn't find one in books.
I would answer to that this way. Look at your business perspective
and make sure it's the fastest one.
But of course I'm gonna extend it a bit just to make sure you
know what I mean. You will know what I mean. I would use
a line 48 for
asynchronous validations.
Okay? Synchronous
validations. And
a line 52 for asynchronous. Because I saw
that like a lot of times everywhere. When people were using
asynchronous validators they weren't using 48, they were using
always 52. There is no explanation of that. I didn't find
any. When I was digging the code I saw that it's probably about
speed, right? Because if you compare it it will be slightly faster
and it will not gonna stop you. But both getters were not gonna stop you.
I mean the user interface from working because
that's not the point. But I couldn't
find anything more I'm afraid.
Actually, well it's a good question so I
could show you now my real life example.
Let me check if there is something similar so I can show you.
Oh I'm logged out. Okay.
Give me a sec.
Yeah. 42 years old and still making
a typo in my own name. Come on.
Alright.
Yeah, let's do a little bit of timing.
Now I'm gonna make it bigger from my side.
Yeah. See? This is an example
of the first one.
And I have validator here which is not my custom one which is not
asynchronous.
And I made the decision exactly as I told you.
Because I found it that way in documentation, in
books, in examples
which I searched through in the internet.
Most of the people were using that for synchronous.
And the other one for asynchronous.
I didn't find any proper
explanation for that. So I'm just using it this way.
So I would recommend that one. It didn't
spoil anything so far to me so I would
say this way. Alright. I know it's
not ideal answer but I don't have anymore. Sorry.
Good. Any other questions
before we continue?
We still have... Okay.
Good. We still have 10 minutes so we can at least start talking about the next
topic and exercise. Next topic is
I believe, let me check my notes, custom validator.
Right. Yeah, we did
that one. Custom validator. Yes. So
first example of course as usually. And then we will do the
exercise. We're gonna start with synchronous one
and then we're gonna proceed to asynchronous one probably after the break. Yeah.
After the lunch break.
Yeah.
Well, in the same time in this example I have
well this example is stronger. It's not the simplest one. Alright.
Because I'm doing in the same time cross-field validation. Because I wanted
I knew we were gonna have not enough time, just two days, so I cannot
cover everything. Right. So I just
combined two things in one. We are killing one
stone with two birds. If you know what I mean.
So I know it's mistaken.
I did it on purpose. I love to mix
sentences. Because it's funny. Now this is
cross-field validation. If we have simple custom
validator, okay, simple custom validator,
it will end up here on the second position
in the array of validators. And usually it's a good idea
to, the best practice to put them at the end.
All custom validators at the end. Why? Because built-in are
faster. The same reason. Speed.
So in the simplest possible scenario without cross-field
validation, so in between, right, you put them
here. By each field
on the second position because it's a synchronous example.
Now because we have more interesting example,
I'm doing this cross-field validation. And I say
use my custom class
which is somewhere, not inside of this component. And in
this class I have a method which is actually doing the job. And this example
is quite simple. So let me show you the
validation.
I'm afraid my git server doesn't work so it will not going to work
on your machines. You will have no physically this example. So I have to stick to my
screen for now. But you still will be able to see it.
So this file has couple of things.
So ignore the rest of them. Let's focus on this one. Actually I'm going to
hide them.
So they will not interrupt.
The crucial bit of this
when we do custom validations are like this.
We have to tell Angular
what will be the result. So it's supposed to be of type
validation function. Of course we need the dependency.
See, forms at the top. So it's supposed to return
always a function which will actually give me
the control.
So it will just map the validated
elements from the control perspective and it's supposed to return it.
That's why I say return and I
return function.
And this function is supposed to use
only, sorry, most of the time
arguments which supposed to be control. Which is abstract
control class. Now you know why I showed you
this class before. When we were digging the form group.
Remember? We were digging the form group in my example here.
I went to form group inside and we see abstract control here
straight away when I hover it. See? Abstract control. It's exactly the same one.
All those bits are connected together. We need that one.
When we use mute invalidators, it happens automatically
on the fly, behind the scenes. If I do my custom
one, well that's different. I need to tell precisely it's supposed
to be that. And then
from this argument which will be magically
fulfilled from Angular library, from
forms library, I'm going to have access to all the controls I need.
And because I did it as a cross-field validation
So on the right side we have a template. In the middle
we have a dependency library. Validations
as you can see is on the top level in my utils folder.
And here we go with the function
which has access to the controls. But because I
executed it in my
component, on my component level
from this second argument provided to
group method, not in the first one, in the second one
Angular is aware that I'm going to need probably more than
one field at a time. Multi-field validation.
Not just one at a time. So it gives me
access to controls and then in the controls I have all the fields. And then I use the usual
getter. See? This one is very similar
to that one. I also do the get inside.
But here I do it customly with a custom
data.
And of course I have my... because I do it with parameters
let me show you maybe this one.
I do the function with... the final
function has two parameters because I want to compare password and
matching password. So I need two of them. This one
and that one. And then the
rest of it is just logic. Simple logic. Pure logic.
Always remember that null means success.
Not the opposite. And then you will never be confused.
This can be very confusing.
You have an example on the screen. We have
roughly three minutes... Oh, sorry, I forgot to explain the form.
Because we are
talking about password here. Let's go downstairs.
So we have two fields. Password and confirm
password. From this perspective
nothing else
is necessary to be added as you can see.
We only use form control name as usually.
So nothing new. And then handling
the validation would be different because I'm using the shortcut.
And now we have a full picture.
Good. This, that and that. Supposed to give you
a hint how to do the exercise.
Let's start.
We have roughly two minutes. So just start and then we will continue after the lunch break.
Or should we start now? Let's start the lunch break now.
Let's not exaggerate. Come on, it's only two minutes.
45 minutes lunch break, guys.
After lunch we continue with this exercise.
So in your add jewel, sorry, in your jewel
well of course add jewel component, we would like to
create custom validation. But that I'm going to explain later
after the break. Enjoy your meal.
Rest well. See you in a bit.                

on 2024-02-29

language: EN

                  WEBVTT
interesting underlining. Can you hover it for me and we can discuss it shortly?
So, well, the red one. Read it carefully and tell me how do you
understand it.
Yeah, so you say validator function and you are returning function but this
function is not returning the proper thing for some reason. Now the function,
Can you show the function then? Sorry. Okay. Save the file because sometimes
Visual Studio complains about unsaved changes.
Jesse, can you save the file or enable auto saving? It will speed up things in
the file in the mini file. Auto save. Okay, now it's saved and it still
complains. Let me think about it. Well, you can do it like this but I'm afraid
it's supposed to be outside of the component. It shouldn't be part of the
component so it shouldn't be a member of the component class itself. Please
abstract it, subtract it, or abstract it there. And just export it without default.
Okay, anyone else need my help?
Any nice error messages?
Jesse, go into your screen, give me a sec.
Okay, so export.
I'm gonna connect on the side, it will be easier for me.
Getting there in a moment will be good.
Can I write on your screen? I want to double check something because this
might be related to the types themselves only. I'm just gonna type a bit on your
screen, we will see. You would like to return, I believe, that one or now.
Now it will complain about this. LagFax and lags ending return statement.
Oh yeah.
Check. Well, yeah, you do have it but you should have it with at least one without
if. You must have this return inside. This is why it complains.
It cannot be undefined. You have to fulfill all the other cases because otherwise
validation will be confused. This is two images for validation mechanism.
So redesign your if statement, make sure you return either result or null.
Anyone else need my help?
How is it going? Did anyone finish already?
I believe some of you did finish it and it's working. I hope. Sarah, did you finish this exercise?
Okay, thank you. Ariel, Aguilgulut.
Not yet. Please continue. Thank you. Darren.
Did you finish? Okay, thank you. Joe.
Good, please continue. Thor.
Okay, good. Ariel Edwin.
Do you need my help, Ariel?
Well, you don't have to use my help. If you are getting there, if you know what to do, that's okay.
If you are stopped by something longer than one minute, if something is, you know, continuously
stopping you, then I believe I should hop in. Is it like that scenario or are you getting there?
Okay, please continue. Thank you. Efrain.
Good. Okay, guys, let's say last three minutes, three minutes, and then we will
discuss together finally. No more extending. I'm afraid we have to continue slowly.
It's getting, it's getting lighter. So I'm gonna switch off the lights, be in a second.
Well, I have three kids, eight, five, one, and then the youngest one. Well, he's so, so
adorable and demanding. So, you know, you have to invent a lot of things to make him not cry,
for example, things like that. So because I'm a trainer, I invent ways to keep my kids happy.
Or let's say, not interrupting my work. So that's the tough job. So if you know what I mean,
if you have kids, I wish you will have because it's, you know, it's better than angular.
Yeah, so that's it.
And, you know, I'm going to be honest with you. A trainer's job is stressful. So if I can joke,
if I joke, I release my stress and hopefully I release some of the stresses of my participants
and then we can focus on the job, right? Emotions are tough creatures to maintain and manage. So,
half a minute and then we will discuss.
Hello. Is it Joe? So you mean you cannot control it at all, your desktop?
Interesting. Let me go there. I'm going to see if it's just your local stuff or if it's
the machine itself. Joe, I'm connecting to your machine.
Let me close a couple of others. So it's supposed to be faster.
Okay. Try now. See? So it was only Visual Studio Code. I believe Visual Studio Code is hanging.
But try again. Sometimes it hangs. You can use it again. Yeah. You know, Microsoft did it.
They opened dot net libraries. It's working in Linux, but something for something.
It will never be the same as like Windows. Same about Skype and everything they stole.
Okay. Hopefully it will work again for you. No issues. Good, good, good, good.
All right, guys. I believe we should proceed. Don't worry. Even if you didn't finish,
you will have a chance to do it now together with me on my screen. Let's look at the
proposition example of the solution.
So, yeah, I need to go for the proper easing, I believe.
So this is an example and then we have Ft day.
All right. Good. Let's make it slightly bigger. Better. And I'll do it this way.
Let's start with the business perspective, maybe.
Oh, this one twice. All right. Let's close. Let's do the cleanup in my browser.
It's always good to do the cleanups. My boss, who is the owner of the whole
Novelproc franchise, he always says he's only a cleaner. I'm just a cleaner here.
And it's true. He's removing a lot of things like old code, everything which is really old
or which is slowing down the business. And then everyone is complaining because he removed too
much. So I'm trying to be like him because he's my guru. So I'm a cleaner here. Right. So if I say,
add to all. Oh, something is wrong. No, it was the previous thing that we just refresh and be sure.
Oh, that's interesting.
Obviously, because I did it in 3000 different forms. And it works better, don't you think?
You didn't see that one. Oh, my see, ugly angular is asking me. Sorry, not angular. Google
goss about feedback. No. Wake up. Wake up. You need to make money like in the song, right? Oh,
plenty of error messages. Interesting. That's interesting. Now you can see precisely how
no, this environment is beautiful. Sometimes webpack is complaining, not angular.
Now, probably too many watches issue. Let me check because I have two instances of visual studio code.
Obviously, it doesn't complain from this side. Okay, I need to
finish it. I had the proper one. I'm supposed to be fine.
Let me run it differently then.
One more time. Yeah, webpack is a nasty creature. I'm happy that they will replace it
very soon. Okay, and still complaints in the command line, but it looks like it's working
in the browser. Let's check. Yeah, it does. Okay, so let's ignore the webpack for now. Very interesting.
And this is the one we wanted to observe.
All right, see? So you can look at all the additional stuff in the same time when you
just do it in the browser. So it's easier to debug tested. Now, I have a default value, which is
obviously not the thing I wanted. I'm gonna say look, and it's longer than, let's say,
three characters, so four or above. And it's valid now. So I'm happy. And it will be reflected also
here in this debugger. Now, let's spoil it. I have a custom validator in which I typed first
initially ASDF, not salt. So it still disables the button, it still says invalid. Let's look at the
code. I decided to do it this way. Slightly simpler one. Same way like John. So, John,
I'm proud of you, because you definitely know how to simplify things. So it's a good approach,
you have a good intuition. Yeah, so that's the function. I'm exporting this function,
so I don't even need the class yet. Later on, if I'm gonna provide more custom validators or
custom elements not related to Angular directly, like directives, components, pipes, etc., then I
could create separate class and then move that one out. But for now, it's simple. It's only related
to this component, so it's more fast, efficient. And I decided to do it with the regular expression
in JavaScript function, because I can play with it more. So later on I can say salt, for example,
easily. And now ASDF supposed to be fine, but obviously my web app is dead.
Let's see.
Yeah, Walter definitely is dead, so let me maybe do it this way. I'm gonna kill for now ng-train.
Do I have anything else alive? It's not about RAM memory this time, this is about
Visual Studio Code. I believe it's the problem with Visual Studio Code. Let me kill one session.
The other one for now, and we will see. Actually, let's kill them both.
Apologies for that. And maybe we should also clear the cache in this bash thingy.
And then I'm gonna double check also.
Other issues.
No, everything else is fine, or maybe just because I killed them. Definitely because I killed them.
So, okay. Let's try one more time. Please work. Or maybe I'm gonna do it in the simplest possible
way. Without minus O, we will see what will happen. No Visual Studio involved two web browsers in the
same time, but that shouldn't spoil it. Yeah, see, definitely. Bloody Visual Studio Code spoiling.
I hate tools. Come on. Tools supposed to make my life easier. Don't they? But they do the opposite,
oftenly, like all the time. Especially Mondays and Fridays. And definitely especially when I
provide the training. So what can I do? Maybe just restarting it. I'm gonna use just one instance of
what can I do? Stop using Visual Studio Code, yes? That would be probably grand. But so far,
I couldn't find anything else for free better than this one, I'm afraid. Maybe you know about any
greater new IDE, which is for free and better than Visual Studio Code. Any ideas? Come on,
give me something. No? Visual Studio Code lovers. Okay. I feel sorry for you. Okay, now it's working.
So I change salt. Let's check in the browser. What port am I now? Add, looking for the usual. Okay,
so this here. Refresh in the browser automatically because the water was not there.
Oops, not 0, 0. Better. No issues in the console. All right. Guys, sometimes Angular, this tool,
this extension to the browser also spoils things. I observed couple of times when I was testing my
bigger applications, when this tool was enabled, my application didn't work. And again, I was
debugging a couple of hours because I thought it's my code. Maybe some of my team colleagues from my
team members did something nasty, newbies, they did some commits without thinking too much.
And I didn't find, I couldn't find anything. Then I just simply, just, you know, accidentally
turned off this extension and it was working perfectly fine. So be careful with this guy.
Okay. Tools are great, but always consider starting testing the application with tools
and then your code. Okay. That's the order today. All right. Play. Good. It's back.
And salt is still complaining. Awesome. Let's do the final look at the code.
In this case, we don't even need another getter function because it's a simple one.
We use those getter functions for more complex validations like cross-field, dynamic forms,
asynchronous stuff.
Good. Any questions regarding this exercise?
We have a good timing. So next topic, next exercise, asynchronous validator,
which is the thing which every programmer loves the most. So spoiling the code, making it slow
and then going out to hang out with friends. Want to hang out with me with
asynchronous validator guys? All right. Now I'm going to use one Visual Studio Code at a time
because it was hanging before. So let's be careful now. And because I have only FDJ here,
let's open the home folder. Okay. Actually, everything is already on the screen.
This will be difficult. It's not easy. Okay. Asynchronous validation is not easy.
It takes a couple of steps, but still not that difficult yet. Let's look at the example.
Let's start with the business perspective, of course. Do some cleaning.
That one comes. Yeah, I'm going to use yet another one. Let's see if it will complain if I want
another ng-serve. Go away. Okay. By the way, maybe you noticed or maybe not, in my ng-training
I'm allowed to do nasty things because I didn't enable full restrictions in Angular application.
And I strongly advise to do the same. All right. I think it will... Visual Studio Code will
tell me if I go for it. Hopefully, let me open it again.
I'm going to show you what I mean. It's also important because
if I go for some form... Yeah, see this message? Some language features are not available to access
all features. Enable strict templates in Angular compiler options. It's a good idea
if you are about to go to production. So if you are just before deployment level. Yeah. But if
you just start developing Angular or let's say you hop in into project, you are new to... Yeah.
You didn't read too much documentation about it yet. They just gave you the issue and they told you
please do that like for yesterday. So you might consider not enabling all the restrictions. But
before the stage of deployment, please do go back to them because of course why? Prevention
solves problems before they happen. But of course if I... There's a link for documentation here.
What does it mean? Why they provided it? It's probably... I believe in your environment you
have everything enabled just in case because it's supposed to be the best way. Right? Do you,
Sara? Do you have any knowledge about it?
I made it too long or are you tired? I know it's a lot but yeah. Okay. So let...
No worries. I'm joking. I'm going to show you... Just to compare, I'm going to show you
Sorry. I usually do it at the beginning on the first day and I forgot. I should start with that.
It's part of the process. So from FTGA, which is the newer one, I'm going to show you this
US config.json and then we can compare and you will see what I mean. Because this one comes from my
training materials which I keep updating starting from, surprise surprise, Angular 2.
All right? So yes, I started teaching Angular when it was AngularJS 1 actually even.
Then I survived painful migration from 1 to 2 and then I migrated my presentation,
my training materials from 2 to 16 today. I didn't do it to 17 yet.
So as you can see, my TS config is slightly different. I didn't follow all the suggestions
yet. Just because I want to experiment with it, right? Then it helps me to play with the exercises,
make them better, to show something more to users, to delegates. Now, after this
too longish explanation, you can see that this one is way bigger and I mean this bit.
This is very important. Starting from Angular, I think it was 13 or 14,
not really precisely, they added those. And this is pain in the you know where, right? But very,
very useful. Very useful because it prevents me from doing nasty hackings and later it will revenge
positively in our application. So I'm just saying. Before you go for the deployment level,
you can disable those. But before deployment, sorry, when you start working, disable.
Before deployment, enable again. And then fix everything else which is happening to be shown
in the command line or in the browser overlay or in the console. Good. End of the regression.
Now we don't need that one, definitely. We need validation. We need this one and also we need
definitely the template itself. Yes. So I'm gonna do it like this. From that one, I'm gonna say open
to the side. And then validation will go. Yeah, let's make it in the middle. Is it readable enough?
And obviously I opened the wrong form. Oh my.
Yeah, my concentration is going down. Sorry for that. That's the problem.
Good. Asynchronous behavior.
Final bit.
Here we have an example of something which will not gonna work because I forgot to enable one
more server. Come on. So many things. Oh, actually I do have it. Sorry, my bad. I do have it.
So this server is running because I wanted to show you something more interesting,
not the easiest example. So I have two services. One service is calling the other one.
The lowest service, Angular service of course, is calling via HTTP request a real small database,
which is JSON file again. Second level service is calling the first level service and is preparing
it with searching for something. And then finally we compare and then we do the async validator in
reactive form. See, the process is not that easy, but that's the usual. Now we could make it easier
example, but I wanted to show you something more interesting because I know you have a lot of async
validators in your applications like Sara told me before the training. Thank you for that. So I was
able to adjust better and it's still simple because we don't touch the real database.
But of course as your homework, you will have an exercise in which you will have to
touch the real database. You'll have to connect, find the dual application to the real database,
which I prepared for you. But that would be your homework, not today, not enough time for that.
It's a big exercise. So in this case we have first name validator.
And as you can see I added it on the third position just after synchronous validators.
And I named it unamev. So unique name validator, just a shortcut. Not the best one, but still.
Unique name validator. Then the problem with asynchronous validators is like this. We have to
bind them. So it looks like we do the same twice. See, I say bind this unamev. It's on purpose
because it will happen not ahead of time, but after a while because behind the scenes of course I'm
going to use observable. So it will be asynchronously giving me data from the backend, from somewhere,
from the model. And because it's not in the same namespace by default we have to bind it.
Some of you have experience with React JGS. You told me that yesterday, React JGS library.
So you might know that when you handle forms in React JGS and if you want to simplify unit tests,
you avoid using arrow functions and you bind in the constructor.
Actually today we use React in a modern way, so we don't have to do that even. We do functions and
hooks. True. But previously we had to bind and it's a similar thing. Just to compare. For those of you
who know React, you will know what I mean. Good. For those of you who have no experience
with React, I'm going to explain again in a moment when I'm going to show you the whole picture.
Now let's look at the validators.
Let me hide that one. This is the synchronous one. And let's talk from the big picture first.
Good. I'm going to hide that one. And also this one. To make proper asynchronous validation
involved into RESTful APIs, this is the common approach. All right?
So most of the time we're going to do not exactly the same but very, very similar way.
Injectable. Two services. One service, one class. And that's the way. If I do asynchronous
validator, I do it as a class and I say ejectable.
So it behaves like service. It looks like service but it's not an ordinary service.
It's a special thing. Asynchronous validator.
Don't mislead it with the service itself. It's not the same. I'm calling it as a service because
it behaves like. It pretends to be. It happens to be similar only. And of course here I'm just using
it. This way. Invalid. Pending. And then errors. So three elements. Asynchronous validation because
it's awaiting for something. Sometimes it will take time. So it's a good idea to always show
this pending stuff. And then usually we map it to animations, either custom one in CSS or Angular
Animations Library. Just to show you a short example to compare with production level.
When I go to Standalens, for example, let me think. I have plenty of them. So I believe that one is
quite old. I can remove it. Observe what will happen, guys. I'm going to say delete. It will ask me
with the model overlay. It's a dialogue. Angular extension. And it will do this progress bar at the top.
And it happens exactly via asynchronous validator, which is awaiting for the machine to be deleted.
It's the whole image. I call it couple of gigabytes. Still, it was quite fast, right?
Right. So each of the machines have actually around 50 gigabytes. Actually, the compression is like
less than 10 gigabytes. Sometimes two or three gigabytes if you use 7Z compression.
So this is like progress bar animated together with asynchronous
validation, validator, custom one. Now let's look at the code properly.
I believe I can fly. I believe I can hide this forms model for now, okay, to make
more visibility for the stronger code. Now it's better. Because we have to look at the whole thing.
So maybe let me fold that one too.
All right. We don't need this one. We start in this moment. We validate. We bind validation.
So the whole function in this case is like class, actually. And then I use this
getter. I use this getter in this special way for this special field. And this
first name will be used in the template. That's easy. We explained that before. Let's start with
with the lowest level. So the first service, the real service.
I made it simple, of course, to make sure the whole picture will be not too big. All right. But
in a second we check the reminder. Yeah, we still have a couple of minutes for the next break.
Actually, wait a sec. That's not the proper reminder. We have hour to the next break.
Hour and five minutes. Sorry, I was looking at myself. I just need to double check the time.
Okay, good one. Good luck. We have a good one. Why was I explaining the lower service? Okay.
As you can see, I keep it in my custom class. So I'm not following the best practices yet.
Fully, in the full extent. Angular documentation says keep your services in separate files
and ideally in some shared module, if possible. But for the sake of example,
then I will have to show three files and then the screen will be divided, too many elements
split and then it will hide you, hide understanding from you. So I decided to do this. But of course,
in real life, we put it into additional file and keep it somewhere. Maybe as a dependency
to the component or maybe in the shared module, things like that. Feature module. We don't know
yet. Now, here comes the first problem. I need to call another service. The real one,
which is actually gathering data from HTTP request from RESTful API. This one is very simple. We
don't call the database. It's a file in our data folder. So actually, we have three services.
The main one, which is pretending to be the service, but it's just asking validator only.
And that one is called here. Then that one is calling this one, people service. And then people
service is doing something for me. Filtering, handling the data, maybe in between scenes,
something related to securities, checking if the user has access, what kind of access,
maybe searching another web service in the same time and comparing data, things like that.
So this middleman is necessary. Often we have stronger complex structure. If it's simple,
you can omit that and directly do it inside of this person service and then just call it here.
So another technique. But if it's stronger, I wanted to show you a strong example.
Now here, I just subscribe to the person service. So now I'm about to open it.
This one is very simple. For the sake of the asking validation, I just wanted to keep it simple.
So we have a simple web service, which is calling persons.js.
Data, persons. Well, we should always know our model before we ask it. So let's look at it at
once. This is also best practice. Do not query any model before getting to know it properly.
Please never forget about that. Otherwise, it was for your Angular 2.
So very simple. I have people, array of objects, ID, name, company, email, address,
birthday. And it's repeated a couple of times.
One of your homeworks will be to use this service together with post service and then create a
service which will use observable, merge map, and then compare both because there are same names
here. Some people from this list posted some data in another service, but that's your homework.
Another big exercise. Of course, I'm going to describe all the homeworks in the summary
email, so you don't have to remember this now. I'm just saying. Do we need anything else? Not yet.
Not too fast, not too much at one go. So I believe everything which we need is visible now.
Why do I have this one twice? We don't need that one. Yeah. Oh, and now why? Because we have
validation. It's supposed to be visible. I believe we can hide persons now. So we have this
an array of objects, okay? An array of objects. And we need actually this only. One prop at a time
from it. I'm going to close it. Person service. One last time to write. So this one is only getting
everything without filtering it anyway. We could also do something on this level, right?
Use some RxJS operators, do it one at a time, pipe, map, etc. But I decided to do it on that level
because this allows me to do more things in a better, more performant way. So here I just get
the whole data. If I want to compare with other stuff, it will be better to do it on this level
than that one. Again, from the performance perspective. Now, this is observable, so I'm
going to subscribe to it. And I do. And then I keep my local version of it. I assign the value
quickly, simply. And then I can search in it. Modern JavaScript has a great method which I love
about, which is called find. It wasn't like that before, right? We love this function, right?
Also, there is another great one which comes from, it's not that fresh. You might not know it.
So I'm going to show you that.
He will tell me if you know about that one or not.
Again, be right back. Come on. You drink too much, guys.
It happens that I also teach JavaScript vanilla. So I know there is something you definitely should
know about, and it's very useful in Angular 2. I use it like a lot all the time. And I think it was
2020. No, later on, I believe. I'm afraid it doesn't work, so...
This will be faster if I do it this way. Yes. What?
Come on, where are you?
Yeah, 2022. So not that old, as you can see. Do you know this function at?
From JS perspective. Or is it new to anyone?
Yes. So it simplifies things. Just one simple function. You don't have to bother with indexes
any longer. Write your custom code by custom functions. I love it. But not everyone knows
it's existing, so people still struggle with that. So I'm just saying. In Angular, it can be very
useful. All right, end of the question. Let's look at the behavior. And then we're going to go back
to code. So if I say, look, it will be happy about it. See? Pending validation. And four seconds
later, I made it faking the real long await. It says, okay. Well, it's still in vibe, but at
least this field is okay. But if I choose a name from... And now I forgot, so I have to open it
again. Sorry. From the list, like maybe this girl or guy. Sorry. And then we play with it.
It's supposed to complain. And after four seconds, it's complaining. Name is already there.
I'm afraid you cannot create an account like this because name is taken. All things like that. You
know. And we do it all the time like this. We need to check sometimes stronger things, but this is
crucial. When you create new accounts in any website, they will tell you nickname is taken or
you cannot use this email address or things like that. So this is very common scenario.
All right. Let's look at the code. Final bit.
This bit.
Please focus now because this is important and crucial bit. Okay. Previous elements were simple.
This one is also not that difficult, but yes, something new. Again, use abstract control.
Now I don't need those, so let's make it bigger. Bear.
I said it pretends to be like service. See, it's just class. But it's a special one.
It pretends to be service and it implements passing valid data. That's the crucial bit.
And inside, obviously I have to inject my people service, the above one.
And that's it. The rest of it is like validation. Similar like in the previous custom one.
I have this method which I invent. So this is my custom name. This is my custom name.
And then I say it's supposed to be used later on on top of my
validator pretending to be service. And I just need to bind it.
So here I'm using this is named there from the previous one.
And the usual flow. I have to return. I have to return errors.
So either this bit or all now. Similar way like with the previous custom validator.
What is also important here, I can provide unique
pointer to the control, to abstract control. And that's a good practice.
Supposed to be unique, supposed to be on this level. Now I'm going to show you why.
Because later on it will be easier to do it in the template itself.
So this name I'm going to use later on here. For example.
All right. I'm awaiting your questions. No? Okay. Let's do the exercise.
But seriously, if you have any questions, again, do not hesitate to ask Sarah.
Please do ask the question.
I can hear you well. Good.
Yeah. Good question. There are a couple of naming conventions.
And you don't need me for that. Angular.docs are straight away there.
It's just one nice page about it. But I'm just going to say like this.
If we do classes, we just follow the usual common case. We start with the big letter.
If we do something more local, then you start with small letter.
And then the rest of it is just like JavaScript rules. You cannot start with numbers.
From Angular perspective. Let me see. Which name? Which name precisely are you asking about?
Yeah. Yeah. Yeah. Yeah. Well, actually, if I were you guys, now I know what you mean. Thank you.
If I were you guys, I would follow this practice because I mean, this is stupid, right?
So this one. Validator. Service. Pipe. Component. Keep it. All right? Because it's easier to test
it later on. It's easier to even get some paid support if we have too big application, too messy,
too chaotic. And then we need Google guys to help. And they will never help you because
they support is like scarce for really. So yeah. But then there are other companies which can help
you with paying support. And then if you keep code conscious with such names, it will be easier for
them to find answers for you. And that's not the only reason. You yourself, a couple of months later,
when you look at your application and believe me, I know what I'm saying.
I already showed you. Let me show you one more time. Okay.
Hundreds of components. Yes. And then if you have no quick way to differentiate between component,
pipe, service, custom class, guard, enumeration of the creatures, you will struggle. It's about
speed. Right? Again, it speed ups not only application itself, but our approaches, our job.
But let me finish the example.
Well, I see that idea. I'm going to show you this guy probably.
Which one was it?
Yes.
Oh, oh, I didn't get that one. Okay. Thank you for explaining.
Good point. Yeah, I would, I would actually, well, I would actually add it. The nickname
I think by the data. Yeah, it would be better. Of course. Like this, for example, saying or asking.
Okay. Same. That would be better. Yeah, of course.
Sorry, I didn't, I didn't get the question. Yeah.
Of course it's a good point. This is better. This is better. Yes.
About the same reason, which I explained actually. Yeah. Sooner or later, we have plenty of those.
And if we have the easiest way to differentiate things is by the name. That's it.
So you don't have to, you know, write two big documentations for them.
The better name, the easier debugging, the easier learning, the easier sharing the code with your
colleagues, et cetera. So yeah. Thank you for keeping the conscience.
Attention to the questions, Sarah. That's great. I would love to have you guys on all of my courses
because it's easier for me to work. Thank you. Okay. Other questions before we proceed to exercise.
Okay. Thank you. Let me think.
Yeah, I believe we, you are ready to do bigger exercise.
So let's try, let's try. Let's try. Why not? I would be showed you another example,
which is exercise in the same time. I see, I keep a couple of exercises hidden in this example.
And your job would be to, to improve it with asynchronous validator.
Let me think. Do we have enough time for that? I believe we do. At least we can try. Yeah.
So we're going to skip FTJ for now. Sorry. We're going to switch from FTJ
to this. Sorry. Full stack EX. Full stack EX. So I'm going to close a couple of things.
I'm going to keep that one on the screen. And maybe also the,
the component. Yeah. Component would be nice to have
just in case you need it. And then
how to open it without second instance of Visual Studio. I want to show both things in the same time.
See? Trainer always struggles with best way to show something.
Okay. I'm going to, I'm going to risk, I'm going to risk another instance of it.
What the hell? We can, we can risk another webpack complaints.
This time I'm going to make it simpler. So I'm just going to open one folder. Maybe that will help to
not exaggerate with overwatched amount of files because there are thousands of them now here.
That's why probably this was to the good complaints. So only this bit. Yeah. That's what we'll see.
Not bad. Not bad.
In this exercise we have
tutorials. Not tools, but tutorials.
And we need database for that to be executed. See? I knew it, but at least I have a message.
So I'm going to follow the instructions and hopefully they, yeah, I know what to do.
Give me a sec.
No, copy paste doesn't work. Come on.
One more thing. Sorry. Yeah. Well, it's not that bad,
but I can make it bigger.
Probably I'm going to have to use it with sudo and I just need to put this line there. All right.
Is it transparent enough? Yes. So I can do it faster.
And at the end of this, I have to say, I notify
max underscore user watches
equals 524288. That's the maximum probably 524288. Let me check.
I notify max user watches. Good. Looks good to me.
This is cpl minus p when we started and hopefully it will not complain again. Let's see.
Refreshing. Okay. Not complaints. No complaints. Good. And then command line.
Well, this is the usual. No complaints by webpack. Yay. Back on progress. See? I knew it.
It has a solution straight away. See the bugging on the fly. Live example of the bugging.
Now I'm lost. Where were we? We were showing an example
which we have to run database for. So guys, please on your machines, open a terminal like I did.
Please do it now. Do it with me because otherwise you will not be able to do the exercise.
You are going to need at least three additional taps in terminal.
At least three. Okay. You already saw yesterday what I did. So I'm going to repeat the steps for you.
This is server. I'm going to make the font bigger slightly.
This is frontend. And here we're going to play with the database itself.
So all the commands will be on the screen. Please start with the backend server.
Now we're going to have full stack application. Okay. Fully qualified. Frontend plus backend plus
database plus RESTful API web service. Okay. The whole thing. And of course on the very top of it
will be Angular. We call it minstack. Okay. Minstack application. MongoDB, express, Node.js, Angular.
In one of your terminals, command line, go there. Go there. Documents,
and then run this command. Node server. Like I do now.
Well, in your case, it will gonna work because you don't have this
additional server running from my examples. I'm gonna fill it now.
And go back to the backend. Yes?
Okay. Going to your screen. Give me a sec. This is Joe, right?
Okay. Oh, left control O. Left control O. On your keyboard type left control key plus O.
Right. So be there. Run this command. It should give you such information. Servers running on
port 8080 connected to the database. If it doesn't, if it will fail running for some reason,
I know the reason. You'll have to start the database daemon. Sometimes after restarting
machines it doesn't stand up by itself. So in another terminal, doesn't matter where you are
in the path. Just look at the status of this MongoDB server. If I go too fast at the minute,
first try to run the backend server. If it will take a while, if it will fail,
then it means you need the database to be executed, which means check it first this way with status.
Again, go there.
Run this backend server.
Just do the same command with start instead of status.
If it was not green like mine, and probably it wasn't if you're checking, so just start it,
do status again, and it's supposed to be green like mine.
Good. Let me check with the other guys.
sudo systemctl status mongod. It will be grayed out and shorter. So start
supposed to be green, active running. After that, you can go back to the previous command line
and do again, not server.js.
Who's speaking? Sorry. It's me, which means what name? John. John. Okay, thank you.
John Ronil. Okay, let me look at your screen then. Yeah, so now
arrow up, change status with start, and you should be fine. No, no, this one, this command,
but instead of status, run start. So remove status type start, starting, like starting,
starter, and then it's supposed to be fine. Enter, arrow up twice, status, enter, and you
should see it's okay. It's okay. Now you can go back to the server. So left, just Q, Q.
And then node space server. It's working awesome. Anyone else need my help? Let me check your screens
in the training room. Looks good. Looks like almost everyone has it. Joe, you do have it. Okay,
no, no, it's okay. I obviously, it didn't refresh to me. I mean, the training room
properly. So I still was looking at your not working thing, but I can see it's working now.
Thank you. I leave everyone at the same moment. So in the second command line, second terminal,
go to,
now you have to use second one because you have to keep this one running. Okay.
So please use second command line. Go to this place, documents and view and underscore full
stack EX and then do precisely that command. And you start minus, minus, minus, minus port 8081.
Otherwise it will not going to work. I restricted the whole thing to one port 8081.
I'm going to run it together with you.
In my case, it was going to slow down because I already have three NG serves.
So I'm going to have to queue the previous
nice. Yeah, it's slowing down now. Come on, come on.
One would be surprised that this amount of RAM memory is not good enough for Angular, but yeah,
NG is better results. Actually, not bad, not bad. 67%. So something else is wrong in my case. What's wrong?
Terminal is hanging. No, my machine is hanging. Refresh it.
Okay, better.
Oh, my command line is hanging. I've killed the boss. Come on.
I cannot use my command line. Anything else is working.
Interesting. Oh, it's back. Okay. It's back.
Wow. See, Angular is really, really resourceful then.
Okay. I'm going to clean it a bit.
Yes, I'm sure. This is the guy. This is the empty one for database. So I'm going to open the third.
Now you need another third one. Terminal. And go for this command. Mongo SH.
We don't need it from Angular perspective, but it's nice to know what is happening on the database
when we do nasty things in Angular. So let's monitor that too. It's a good practice,
like monitoring the whole thing, right? So if you run this command in yet another
command line, Mongo SH, and if you say show db databases, very similar like in MySQL.
Here we have JavaScript interface. So I can type JavaScript here. Isn't it awesome?
Everywhere JavaScript. Even in the database. So I'm going to use
best coder underscore db. Just enter. And now in db variable, local built-in variable,
I'm going to have my database. On top of that, I'm going to have some collections.
The whole thing is like JSON documents. So database from JSON documents instead of tables,
right? No tables, no SQL, JSON, JavaScript. Show collections. I'm going to see tutorials.
This is the one we are entrusted with. So I'm going to say db because I'm in
JavaScript world.tutorials. And tabulator, autocompletion works fine so far. And I'm going
to say find. This is equivalent of select in SQL. And then I'm going to see that we have three so
far. And it's already prettified. We're going to have to make it pretty. It's formatted in a nice way.
So this is the database. This is the frontend.
Which is for some reason not sucking the database. What did I do wrong?
Interesting. It doesn't see the list. I did export something or
it is in the console. Does it work for you?
If you go to the browser, it does. Why mine is not working? Yet another thing. Come on.
I promised you that things are working. So exercises are. The code is there, but the
tools are not. Come on. At least on your case it's working. Oh, it's back to me. No, this is
Joe's machine. This is mine. Let's check with this one. Maybe this is exactly the case.
Okay, I'm going to try in Firefox. We will see. Nope.
What's happening here then? Everything looks fine.
It's like not connected to the database properly. Let's check that.
This is.
One more time.
Observable doesn't work. Okay, doesn't matter. It works for you. So you should be fine.
Maybe it will wake up in a moment for me. No errors. That's the hardest thing to do to debug.
No errors, no messages, nothing complains and it still doesn't work. Nightmare, right? Guys,
what what's supposed to do? You have to, of course, improve your add tutorial
with asynchronous validator and this form adding new tutorial should not allow you to add
already existing tutorial. Okay, that's your job.
I'm going to keep my async validator example on the screen.
And for that, well, I'm going to give you first.
Yeah, we're going to do the break in 25 minutes, actually. So I'm going to give you 15. Yeah.
Initially 15 minutes, a quarter for this exercise. If we need more, I'm going to extend.
So no rush. Take your time. Try to properly understand it. Play with it. Do it. First of
all, you have to understand the application itself. So go through it and find the proper
component which is responsible for adding new tutorial and play with it.
Just let me check if I can click on your machine. That's the simplest thing I can do.
Connecting to your machine.
Well, in your case is like
half past two. Right? Yeah. So it might be just peak of the service provider might
observe peak of the use of internet. This is common in Poland. Most of the people today work
online, like half of the world. It means all the internet connections are slowing down
between 2 p.m. and 5 p.m. usually. And especially in Friday because in Fridays,
everyone wants to do what? Deployment. At the very last moment. Right? Because otherwise,
boss will complain. So double check your internet connection because I can click on it. Visual
Studio Code is hanging, I believe. I cannot click in Visual Studio Code. Yeah. So that's
not the internet connection. Let me close your Visual Studio Code. I click on your screen for a
sec. I'm going to fix it for you, hopefully. Visual Studio Code is hanging. Let's run it again.
Sarah, let me look at your... Sorry, I forgot to unmute myself. See? I also do that.
After 12 years of doing remote courses, I still forget to unmute myself. Yeah. Awesome.
Where is your screen? I've lost your screen. Okay. Sarah, can you explain your error?
What do you mean? Oh, okay. I believe I know what's the problem. Show me your command line
in which you started the front. Yeah. Kill it. Press Ctrl C. Start it with port 8081.
It works only with 8081. Awesome.
I don't know. It's your exercise. I said it will be the hard one, all right?
One of the final exercises for the whole training, which I usually give to people.
Well, of course, I'm going to hint you. There is a backend which you are running. Okay? But first,
if I were you, I would look at the application, the front-end application. Let me actually show
you that. It will probably speed up things for you. So, this one. So, here we have front-end.
I'm opening only the front-end thing. You might not going to need the backend at all. You can
double-check. There is such thing. Of course, I'm going to tell you. There is such thing, of course.
But you already have the service in the front-end. Look here.
Get one. Get all. Get one. Create. Update. There are other exercises here, but this is
something different. So far, ignore that. Okay?
So, in this service, you can clearly see. Yes, you have one.
Then, of course, in the components, you go for our tutorial. You go for this guy.
And then you use this service here, as you can see, straight away.
The problem will be with the form, of course. But you know already what to do, right?
What do we have here? What do we have here? Template-driven. We have to rewrite it into
reactive forms, right? And then we can... Well, you could use template-driven and use async by data
also here, but then it's even more complicated, right? In template-driven approach,
not reactive forms, template-driven forms in Angular. Yet another way, when we want to do
asynchronous validator, we have to not only create those services which I showed to you,
but also directive, and then use it in the HTML as a directive, which is even more complicated.
That's why people prefer reactive forms, because it's easier to implement it.
So, as you can see, your job is to first rewrite it into reactive form,
then create this asynchronous guy. So, I'm going to show again the example,
because I'm afraid you don't have it locally.
This one, yeah. Let me think, what should you see in the same time?
Yeah, that's supposed to be good enough, I think.
Or not. Yeah, I think you should see also this service, just in case you need it.
Okay.
And now you should have full picture, hopefully.
One, two, three, four. Can you hear me, guys?
For some reason, teams kicked me out. I don't know why. Just like that.
So, how is it going? Done? Next exercise, then.
Any issues? Any struggling? Nice error messages? You need my help? Or if not, just say go away.
Stop bothering me, stop interrupting. I just want to code. Go away.
Okay.
In five minutes, we're going to have a last short 20 minutes of this time break for the day.
I'm just saying. Please continue.
Don't forget to remove NG model. All right? We are migrating to reactive forms, so all the
NG model references are supposed to be gone. We don't need them. We shouldn't mix it.
If you leave it, even if it will not complain straight away, it will show you warnings in the
browser. So, just not forget about that.
My reminder says, look to the break, otherwise they will hate you. So, 20 minutes break.
Forget about this exercise. Forget about Angular. Just try to think about something else. Totally.
Do something totally else. Different if you can. And be back with me and we will have a couple of
more interesting things to do in this adventure. Yay! Enjoy your break.
So, please continue with the exercise. Let's say next five minutes, even if you don't finish,
don't worry. Treat it as part of your homework. You will have three jobs for your homework.
This is one of them. We usually do like that if we don't manage to finish during the training.
So, five minutes more.
Five. Yeah, let's make it five because we have a couple of other things to cover.
All right, my reminder says we should continue. Okay.
So, again, even if you didn't finish, treat that one as your homework. Okay?
I will give you everything at the end of the day. Sorry. Yeah, today actually because it's my
morning, so I will be able to send you the materials in the same day. For me, it will be the same day.
Probably. It will be your nighttime. Okay.
Now, we're gonna leave.
We're gonna leave the reactive forms for a moment.
And we will proceed now.
I believe we should talk about modules because this is quite short topic.
Please look at my screen. Focus on my machine, guys.
And here I have my FDJ. Okay.
Now, I should start here.
Modules are quite simple in Angular. There's no big rocket science about it.
So, you just need to be aware of a couple of types of them. We already covered actually two.
Root module, routing module, and then next one will be feature module. And feature module can
be divided into different categories also. Usually we create one called shared, common,
and we keep everything which supposed to be exported available to other modules in that one.
And then reusability. We have to think about reusability. We have to think about
eventual additional routing modules if we need that bit.
But for that one, I mean, if it's a shared or common kind of feature module,
you don't have to build any routing for it most of the time. And simple example.
Again, I might relax a little.
Won't be like this.
Okay. We start with the root module.
And each module has a couple of sections. Declarations, imports, providers.
And of course, the very first one, Angular module, root module, will drive everything else.
As long as we don't go for the standalone mode. Standalone, this is next topic actually.
After the feature module. Here we can see a bit more complicated structure of elements.
So I don't only import. I do not only import, but I also import in a special way. I say do it
in the root context. And if I have some other, well, if I have some functionalities which
were already shared, somehow differently, it will prevent duplicating the same time.
This is like yet another module which is totally big. It's a feature module, but I say do it for
root and then filter it, configure it between different environments. So if we have a big
application with lots of modules and we want to organize it properly, it's a good idea to
filter it like this. Now, this is how we get dependencies into the whole Angular project.
Another section is providers. And this is important because that section means
any sub-level, any other sub-module to this one will have access to everything I provide.
Okay. In this case, we use app initializer. We have a special service factory. And then we need
user service. The first step of security. This one is huge. It has a lot of things in it. And
I cannot show you that, I'm afraid, for obvious security reasons. So I'm going to skip this bit.
And then regarding the environments. Because we have different stages, like our custom one,
noble proc, client's custom one, if client buys the whole thing, right? And then something really,
really fine if I really want to. And let's say demo also. Now, let's look at main up routing module
because I promised to show you a couple of other new things. And let's say we have to cover properly
modules too. This main up routing module for the whole application is quite simple because of the
previous example. And also most of the things are happening in sub-modules like
the interface itself, administrators, franchisees, inseparate, maintaining the payments for the
desktops, for the events. Each franchisee has to pay for each event. And it's per machine,
per amount of people and per amount of days. So it's not that easy to calculate properly
through the whole thing. There is also some system behind the scenes happening with percentage.
So different franchises in different countries, different currencies, a lot of
things happening behind the scenes. In the same time here, I'm showing you an example of so-called
lazy module. All right. Lazy module will not be called ahead of time. It will be called
when it's necessary. So if someone will usually do it via routes. So as you can see in this
router module, which is owned by main route application module, I'm calling another module.
It's called DA module. This one is also huge. And because it's really big,
I'm going to call it only if I need it. And I do it in a sort of lazy loading way. And in
JavaScript, we call it imports. Or let's say dynamic imports. And Angular is just implementing
that. It's not something Angular invented. And lazy loading means like this. I use routes for that
most of the time. And then I say that instead of going the usual child or children or
the siblings, I say load children. And the whole thing will be a function.
But it works as a, well, that's the hardest part to explain always. It looks like promise,
but it's not. It pretends to be a promise. Lazy loading is like import, like this import,
similar to this import, but it's not synchronous straight away ahead of time. All right. We
delay it. And this weird function definition also is not just function.
Dynamical import is not just function. It pretends to be. If you want to go deeper,
we don't have enough time today to go deeper for that. But for now, you have to just know that
Angular is using it and implementing it on the routing level. Now,
daModule, the one we call dynamically in a lazy way. I promise that I'm going to show you something
huge. And let's look at the right sidebar here. See this blue guys? These are
components, directives, everything which is owned by this module.
Now, this one doesn't export much because I do lazy load it. So I do it in a different way.
So even scrolling up, it will slow down the visuals to the code by itself because it's huge.
And then at the top also, we have all the imports. So it's like tremendously
big cow and we have to be careful. And surprisingly, it still works. After a couple of
years and after migrating to stronger Angular versions, it still works. Now, because this module
is a special type of Angular module, we call it feature module. It's not like only shared module
or common module. It's supposed to be everywhere. This one will be loaded on demand in a lazy
loading way. And this one has its own, surprise, surprise, routing module.
And that routing module, look at the right side again. I'm not going to scroll up. I don't want
to. No point. It has like hundreds of paths, literally, because this module is responsible
for administration of our application and it's really, really huge. So another routing module,
which is connected to the feature module. Okay. And that's the flow. Usually, we
connect business functionalities in projects together in such a way. That's why I told you
yesterday that we should follow one of the important best practices in Angular. Modularize
early. Okay. At the very beginning when you design it. Because later on, it will be tough.
Okay. It will be tough to refactor it. But still doable, of course. And my exercises are designed
in such a way in which we, of course, do not follow this best practice. And then we will see
precisely why we should avoid it. It would be not that dangerous and not that difficult because it's
a small FPGA application, but still. So in the exercise, you will see what I mean precisely.
Now, let me think. Did I show you everything what I wanted? Yes, I did. But I didn't explain
fully. So again, let's summarize it. We have root module, routing module, feature module,
and shared module. Four main types of Angular modules. These are Angular modules. Okay. Not just
JavaScript modules. This is different. They are served through JavaScript modules, Tabscript
modules, but it's not the same. How do we know? Most of them, all of them have this ngModule
directive. Sorry, decorator. Tabscript decorator. By the way, did you know that decorators are
fully, sorry, now they are no longer in experimental mode? It happened a couple of
months ago, I think. Finally, Microsoft did it after such a long time. It was continuously
in experimental mode. Angular was using it in production level, something which is in
experimental mode. Okay. And then finally, Microsoft released the safe version, which is
no longer in this mode of continuous experiments. All right. The only difference, the very important
difference between this routing module and that one is at the end of it. Look here. Line 752.
Module which has around thousand lines. Interesting, right? So, Fortile. In this
ngModule decorator, when we configure this special routing, which is owned by module,
but it's not the root ngModule, we say usually Fortile. Why? Because it will have its own
router outlet, probably some menus or couple of router outlets, couple of menus, couple of
navigations, and then they will be able to, they will be reachable. So we can reach them through
the main router. But of course, in a lazy way here.
So this is how we connect those two menus together. Where are the links? Doesn't matter,
because it's separated as a separation of concerns. Any component can keep it. We just need
router outlet and router links. But this is something you already saw in action before.
Now, as your exercise, I want you to do, let me think. Yeah, we're gonna do
first a very simple one. First, it's supposed to be simple, but we will see.
I want you to create that module. It's supposed to keep service,
all the services we have, directives and pipes, if you have any. All right?
And then of course, we're supposed to properly use it in our FTJ application.
All right? So your job is to create shared module on the root level, of course, and move
the services, directives, pipes, anything which is shareable. Now, don't forget, don't forget to
if module owns something, and if that is not already configured by an injectable
in root, then it's supposed to be exported. So be careful with this bit. Try. Let's say
five minutes for that is supposed to be enough, hopefully. Even if you don't finish, don't worry.
Clear what's supposed to be done? We need so-called shared module. This is a special
type of Angular module. For example, I have one here. See? I have shared module.
It has plenty of things in it, of course.
Right? It's called, surprise, surprise, shared module.
And then it's very simple here, as you can see. It doesn't have anything there. It's just shared
module. Mine doesn't have much providers regarding services, but it exports a lot of things.
Yeah? This is very important section, exports. Everything module owns,
and if it's a sub-module, like this, if you want to make it
available elsewhere, you have to export it. Don't forget about this section. Try.
Of course, every day. Yes.
Or not.
Yes. Okay.
Yes. We'll check if it's not visual studio code. Usually that's the most problem. Try to, try if
you can click on other things like browsers. If you can, it means it's only visual code. If you
cannot, let me know and then I'm going to fix it. Is it only visual studio code? Or?
Oh, yeah. Can you hear me? The browser works. All the programs work, right? They work. Okay. So,
I'm afraid you have to kill this one. I'm always scared about the new version of VSC code.
What now? What this time? Did you try to use WebStorm or IntelliJ programs?
Yeah, it's not. Well, if you want to use it in full, then we have to pay for it, but
it's a great alternative actually. I'm just saying. Okay. All right. Yeah.
Well, first of all, there is a support. So if something is wrong, they will help you to fix it.
There are plenty of plugins which extend, you know, they improve speed, they improve
efficiency, a lot of nice additions. So yeah, that's, I don't have big experience,
but a lot of people, my wife is working with outsourcing company. So she's an HR girl in the
big company which outsources the programmers. And then when they did some checking, most of the
coders are using IntelliJ, WebStorm, things like that. The rest of them uses the Visual Studio code,
Dini, some of them still are using like things like Aptana, maybe
other PHP related stuff. Most of the time they Java coders. So yeah. But okay.
I think we could try to compare our solutions
at the moment. Do I have this bit running? Yes, I do. So
Yes.
Is it less there?
Yes. Does it work for you? Does it work for you after those steps? Well, you did like a lot.
I just wanted to move things, migrate existing stuff, but okay. I'm proud of you.
Someone is still bothering me. Sorry. Let me hide it. Totally. I forgot to mute my phone.
Okay. So actually, let me show you what I meant by this exercise.
The purpose of this exercise was like to train the modules and also see that refactoring
sometimes is not that easy. If you do not follow the best practice, which is what modularize as
early as possible. So here
we have now an application, another module called shared. In this module, I have a couple of things
because this is from my usual flow on my training, which I drive like usually three or four days,
the full training. So I have a couple of things. I have five, I have directive, I have service,
another service, right? And the module itself. Module doesn't need that kind of module. It doesn't
need routing module. So no routing configuration is necessary because it's the shared one,
the main shared one for the whole application. It's just for the sake of organization of codes.
And sometimes about speed, if you want to go with another easy way to,
depending on the store. Now in the main module, of course,
in the main module, of course, we call it where in the import section, like this
shared module. Now the module itself, the module itself,
supposed to own things. All right. And then it's both export them.
Now look in the declaration section, I have a couple of things here, but only two in the
declaration section. Why? Because the rest of them are services and services are not owned.
Services different. We provide them. And we can say providers in this section.
And we put services there. So services, they have their own way of being shared between
all the elements in our application. Now let me go for that one.
As you can see, this one is not in, it has no injector configured here because we can also
inject on this level. We can also inject on this level. And then I don't need to say here in
providers at all. Then it will not go in there. I can put my service anywhere. I just
configure it in a different way. And actually that's the default approach today.
But I'm just saying you should be aware of both approaches.
And that was the thing I wanted from you. All right. So this is second type, sorry,
third type of module in Angular. If you didn't finish or if you struggle with refactoring,
if you have some issues with paths, if it's not clean result, okay, after this exercise, don't
worry. Just go to the command line somewhere, follow my steps because we need to proceed with
another exercise. So we have to check out master, do the git log, and then please make sure you
check out this bit. Oh, sorry. I have local stuff, which I'm supposed to remove. So I'm going to say
that this is staged, so I have to reset. I don't care for now. Now it's better. And then
we need this revision shared module. So you can go to that. Just check out this and you have it.
And on top of that, we're going to do another exercise, which is actually you don't have to
do it if you have, if you didn't finish the exercise problem. If you need me to repeat the
steps, let me know. Next exercise is our feature module. And this is the most important one,
probably, because in that one, later on, in the next step, smaller exercise, we're going to do
the same as you have, at least at the same moment.
So I'm going to go back.
Your second job regarding modules is to create separate modules for the game.
All right. So far we had only components, we had engine, but we have plenty of things which are
connected together. There is some relationship between them.
So our dual, dual detail, dual engine and dual list. Okay. They're supposed to end up in another
module. This is the fourth type of angular module. We call it feature module. Why feature? Because
it provides some functionality and it's not a root one. And usually business,
business processes can be divided into big steps. If the company is big, we have bigger steps in the
process. Each of them might be reflected into angular as such feature module. Again, one more
time from the real life example. This is feature module, DA module. It has its own
folder. It has its own routing. It has its own services. All right. It has a lot of components.
And it's like separate creature. Well, angular has not only modules. Angular has also libraries.
Did you know about that? Did you use it? Okay. So you are aware of it. Awesome.
Good. Another small exercise, five minutes. And then we're going to discuss again. Make your game
FTJ modularized properly now. Okay. We have a set module. Move the rest of the things like all the
components. So find the dual, sorry, the engine, which is actually JList, detail and actual,
all four into new feature module. Of course, please create it with NGG.
Don't do it manually. I'm just saying. So we have to do NGG module. And again, don't forget to do
the dry run. Like all the other options just to make sure you know what you're doing.
And of course, don't forget about the routing. Okay. So this feature module supposed to have
its own routing. So just say routing. This option will create a new module
of the same level as shared module. And it will add new module, routing module for it. And that's it.
And later on, this routing child module supposed to serve your links, right? JList, link, etc.
And actually that's it. That's the full story.
Why it keeps asking me for that? That's interesting.
They are more and more irritating. So for example, I could call it like this Gems module, right?
To make it slightly better, not just duals all the time.
And it will show me what to do. So it will create exactly as I said, older gems,
gems module, gems routing. And your job is to do that. So then we remove the dry run.
Make sure you remove all the components there. And Visual Studio Code, it will try to help you to
refactor the paths. So it's supposed to be faster. Try to do it faster.
I'm going to show you.
You can do it like this. Hit reset, hard head.
Hit checkout, master to see the history and then hit checkout.
The proper revision, which I'm going to give you now. You can just look at the history and then
you will know. You have to go to shared module with services. And on top of that, you can do the
access. This is the precise ref for the review.
Same on your terminal. Can you click elsewhere in your machine? Is it only terminal hanging?
So, oh, so this is this is Visual Studio Code spoiling. Yeah.
That's right. Let me look at your screen then. Wait a sec. I'm going to be with you in a moment.
Yeah, this is your screen.
Oh, yeah, because there is an overlay you have to decide. Say yes.
Can you click on you cannot click on this. Okay. Can I try?
I'm going to try. We'll see if it works for me. This is a friend. Okay.
Yeah. Visual Studio Code. Same old, same old. I cannot click too, which means the Visual Studio
Code is hanging. I'm afraid we have to kill it. On the left side of the bar, just close it and reopen.
Hopefully it will manage to stand up. If not, let me know. I'm going to try to help you. Wait.
Oh, interesting. So actually, you cannot click anywhere. Try to refresh. I mean the connection.
Yeah. So this is internet connection speed. This time it was speed.
Well, actually, maybe both because I can see that does. Can you use the Visual Studio Code? Is it back?
Okay. Sometimes if you use shortcut combination on your keyboard, it might not be mapped properly
because of slow internet connection. Right. And then the key might hang in the session
in the remote machine. It's a common thing which happens.
Like press C all the time yesterday for me happened. Right. I was continuously observing
like C was writing in my code. Right. Just let me see. Internet's not down for the moment.
I believe that was the reason.
Guys, I know it's Friday and you are probably already half-leg in the weekend.
Just stay with me a bit longer. I know it's tough and we did a lot. So just stay with me a bit longer.
Thank you. I believe I know this one. This is your internet is slowing down
and probably the shift key is keeping pressed in your session. Stay with me. I'm going to
try to undo it for you. Interactive mode. Oh, sorry. That's not the one. This is Lester. Right.
Okay. So getting there. Okay. I'm connected. Looks like it's... Oh, wait a sec. No, it's still not there.
Yeah. Shift is probably pressed all the time. Double shift. You did solved it.
Let's see in the browser.
Yeah. I cannot type here, which means the mouse is working.
Let me refresh connection. We will see if it helps.
Yeah. Make sure you have all the, if possible, other things which are using your internet connection
closed. All right. Other communicators, anything which can speed up things. Let's see if it works again.
Still doesn't work for me. Which means...                

on 2024-02-29

language: EN

                  WEBVTT
But in the meantime, we will look at this one again.
Alright, we have good timing, we still have to look at more things.
Alright, lazy loading.
Try to make it work in lazy loading, if you didn't yet.
The example.
So this is how we do it.
This is main routing module from the root perspective of Angular application.
And this is actually it.
Let me open that one on the side then.
We don't need this third one in the logup.
Then I have to go down, stir some of the phrase.
So, the A module by itself, which is dependency from now on, router, and of course the main module should import it.
But not this way, not any longer. See, there is no DA here.
So we improved that, we removed it from here and then we put it there in the routing module.
Does anyone have it? Did anyone make it already in the lazy way?
Anyone else?
The others, please try, three minutes for that, it's quite simple thing to do.
At least you should try once to do it.
And then we will proceed.
Now I will close this module then.
Let's keep that one.
Let's check if it refreshed.
Let's look at main router.
And here it goes.
I just add my gems module in this special way, load student by dynamic import from JavaScript perspective.
Angular just supports it.
No big wrappers around it, not in this context of course.
And then my gems routing module now will have all the necessary links instead of the previous one.
So here I just have the main path, let's say, home or just redirection.
And here I do for child and play with the other guys.
From the components perspective it looks like this.
I still keep in the main one the links.
But now only the links, everything else is in the module in different components.
So I call them through those links only.
Nothing as above like I had before, see? Everything disappeared.
Engine list, adding jewel, listing jewel is no longer here.
And now my main component is cleaner, simpler, smaller, more dynamic.
It's one of the best practices too.
And of course I have to have a component which will handle the rest of it.
So I decided to do it in...
I mean, yeah, we did have it in JList, sorry, we did have it in JList, I believe.
Yeah, this is the way we did it before.
So we have this router there, router outlet.
Here comes the submenu.
And actually that's it.
Gems module itself also.
In this case, because I do it this way, I don't need exports.
It will be fine.
It will be fine.
This is feature module.
In the set module I have to do exports because I do it in a different way.
So this is slightly different.
All right.
Any questions regarding this topic on the LAR modules?
Business perspective.
I already showed you the example.
This is my business perspective, precisely.
This is lazy loading.
This is administrator's module.
So from the business perspective, probably you mean this, from the user interface, right?
If I go there, admin, I have like hundreds of, literally hundreds of functionalities here.
And that should be loaded with the whole application together.
Only if I go there, right?
If that would be loaded with the whole application all the time,
then simple users like trainers, delegates, training coordinators, they will suffer slower, lower performance.
So slow application.
Because this module is like huge, tremendously huge.
See, we have plenty of sub elements here.
Types of templating, migration, different resources, a lot of testing, connections with Grafana, a lot of tests about the system.
Because we want to really make it efficient.
We make money from that, right?
So this is huge.
It will slow down the rest of the application.
So I load it only when I go through the menu.
When I click on admin, it will be loaded.
And it will be loaded ahead of time, in a lazy way.
Other business cases would be like this.
We know we have, for example, sorry, another one.
I'm going to show you another one.
Quickly.
Just one last example.
Maybe this one.
And now I need to change to English.
And for example, if I want to search, it will redirect me to another website.
I was here and I'm no longer there.
We have a centralized system which allows me to search.
And this one gathers all the data about training outlines, available public events from the whole Nobopro.
And then I can say that I'm going to filter it.
And behind the scenes is happening lazy loading.
Not everything is loaded by default.
Before I start, when I start searching here, the bits will be happening in a lazy way.
Because it's huge.
A big amount of data, which takes a lot of time to get.
Especially when we search for something.
Especially when we have social websites.
For example, Facebook is done with React.
But you know, if you have your own social website for the big company, like a really big one, you have departments in all the countries like we have, for example, it would probably be a good idea to use lazy loading.
Okay, end of story.
Good.
Now we can spend some time on comparing new stuff in Angular 16 and 7.
I'm just going to urge you, please be careful with Angular 17.
Don't go for everything which is there.
This is the newest version of it.
They say it's stable.
Don't believe that.
Just wait a couple of months and then maybe migrate.
Two or three months.
No more.
For example, when I was double checking how much do I know about 17 before this training, they happened to introduce 17.2 in the meantime.
And then I was drawn up.
For example, in 17.2, they provide, they improve signals.
I'm going to show you signals in a moment, but they improved signals.
Now we can use signals to communicate components.
All right.
You know about input decorator, right?
And we use it to easily in a fast, efficient way communicate parent and child via input decorator.
In 17.2, they introduced input signal, which is special type of signal, new Angular creature signal.
And it does the same, but instead of decorator, which means it's faster, more efficient.
The main advantages are like performance.
They brag, then it speeds things up like 30 to 40 percent as far as I remember.
So it's like a lot for big applications.
So it's a very, very dynamic environment, as you probably know already.
Now let's proceed to new goodies.
One of them will be standardization.
New goodies.
One of them will be standalone and signals.
I'm going to explain that in the same time.
So stay on my screen, please.
Oops, not that one.
This is my production stuff.
Do not touch it.
Look, just don't change it.
I have an example here.
We set a reminder.
I should not spend too much time on that because I promised to talk about tests too.
So, yeah, reminders are like blessings for me.
Here we have this example.
Signal EX, signal example.
Just to compare, I provide the usual good old RXJS observable solution.
And then just to compare, I provide a signal.
Let's first run it from the business perspective.
Some cleanup.
Actually, all of them.
We don't need you for now.
But I need to enable it.
Yeah, I'm going to enable one only because they do exactly the same.
But you can compare later on.
Without me?
Why it's not capitalizing?
Interesting.
OK, now it's working.
And browser.
Triple check if I didn't kill it in the meantime.
Probably I did.
Yeah, of course I did.
And that one has 80, I believe.
I think I closed all the guys.
No, the default one. OK.
Still good.
Back on progress.
Why don't you like me?
No, no changes. OK.
I give up. Can I use one of your screens?
Because mine doesn't respond properly.
I'm going to share the screen. Sorry.
Sarah, can I use your screen? Thank you.
I messed something with my example and it doesn't start.
So I'm going to use yours.
You have the same as me, I believe.
At least at this level.
So you try to run it, probably not.
Right. So I'm just going to go there.
We don't need that one.
Also not that one.
Let's clean it up a bit.
And then energy tray.
All right.
Please do not complain at me.
Check if you don't have anything else running in the behind the scenes.
This one, but this is only FTJ.
Let us kill it just in case.
This is not FTJ.
We need that one.
At least that one responds.
We need to call it properly.
I believe that one will... No, that one doesn't have it.
Okay, it responds. So I messed up with mine.
All right. Let's inspect.
Simple searching, simple paging.
I have only one hulk, so the paging we're going to suck it only once.
And then I can go a couple of steps with simple data.
Because I love movies and I love Marvel Universe.
So you see it here in example.
Now let's connect it with Angular a bit.
From this perspective, it doesn't say much, just say signal function.
So we are using signals.
The usual previous approach suggested from Angular documentation in previous Angular versions was observables in synchronous way.
If you have data already loaded.
So observables in synchronous way.
So look at the code I'm going to compare.
So on the left side, we're going to have good old way.
And on the right side, we're going to have new way.
Make font slightly bigger.
Good. So we have some small model like this in the variable just to make things faster.
I'm going to explain standalone in a moment.
We have some template.
We have some data which we play with it.
We use the same data.
Data which we play with it.
We use observables for that with behavior subject.
And then we do the usual piping, mapping and functions for searching.
You know, all the handlers.
The previous page, next page, etc.
Quite simple.
This one is using good old way with observables.
On the right side, we have.
Well, Angular suggest.
They suggest to replace your code with signals because it will be simpler to maintain and faster.
Especially performance.
Well, in this synchronous context, yes.
It does the job.
And as you can see, we do it like this.
First of all, we introduce signal function.
And then either we provide some default value or not.
In this case, we need this because it's a special way of telling major to go through or search field to find only the necessary demanded data.
When we create our properties through signals, then we have to play with them.
And I will provide it a couple of functions.
The most important one is computed.
So we can compute data which goes through signal.
And you have to think about signal like just sort of stem of for which keeps data like yet another type of constant.
We set it once with default value and then we cannot change it.
Instead, we compute data which comes initially from signals.
For those of you who know ReactJS and hooks modern ReactJS way, it might be similar.
When I first saw signals in Angular, my first impression was, oh, it's very similar to hooks.
It's not the same, of course, but it's similar.
I mean, ReactJS hooks.
The rest of it is very similar.
We just do the usual callbacks.
Because I didn't I have small experience of production with this with the signals.
We didn't we just experimented with them so far.
I didn't we didn't fully upgrade things yet.
In our case, we have huge environments.
So we have to be really careful with anything which is new from a VR perspective.
So we do it in small steps.
But I strongly suggest for you to try.
If you know you have a lot of paging, if you have you know, we have a lot of things happening in synchronous way after loaded previously, then signals is for you.
OK, this is this is a good approach.
Now, because I'm sharing my screen, maybe it would be a good idea if I just show you this way.
What does my reminder say?
Yeah, I still have four minutes.
Good.
Good timing.
Yeah.
News.
But links doesn't work.
So I'm going to have to search for it.
Yeah.
The bigger.
Can you see it well?
Readable enough.
OK, signals.
We just covered that bit.
Non destructive hydration in server side rendering.
Do you server side rendering with Angulo?
Do you have any knowledge about that?
Sara, Sara, I'm there.
I'm just disappeared.
Let me check the chart.
Maybe she had to go.
So I feel back.
Let's talk about this one.
I'm going to skip it for now.
It's important.
But if you don't use it, don't bother.
If you want to migrate into server side rendering, which is.
Well, it's a great thing.
It's a great improvement, but it has its own minuses.
Something for something.
But when Sara's back, I'm going to go back to this point.
Required inputs, router inputs.
Before input was like.
That's interesting.
They in 16, they introduced required inputs in 17.
They introduced input, which is signal based and probably it will sooner or later replace this input.
So just between two big versions, which is like one year, maybe even less right between them.
They just kill things in a very fast way.
It will be not deprecated, of course, but plenty of ideas.
I believe it's too fast.
They exaggerated.
They are so eager to make it better.
I think it's not the best approach, but OK, we will see.
We will see what happens.
I observed a lot of Google tools and programs and applications, which ended up in so-called Google Semantry.
If you know what I mean, which I hope I'll probably will never end up there, but it's still problematic.
Sara, are you back?
Because you were upset for some reason.
OK, I was we are talking about news, new goodies in Angular.
And I was asking about server side rendering.
Your your your guys told me you don't use it.
Are you sure?
You don't.
So, yeah, they improved it.
I'm just going to say they improved it in a way it provides like 30 to 40 percent speed from the performance perspective, which is one third better, which is like huge amount of resources resolved.
Now, I told you about that one.
Decorators are no longer experimental.
It comes from TypeScript 5.
So they included that in 16, of course, obviously.
ESBuild based build system.
Instead of Webpack, we can use that.
In my opinion, it's great.
It's really fast.
I'm going to show you today in a moment.
At least how does it work?
And it's like really, really, really speeds things up.
And I, for example, if I if I use this instead of Webpack, such run, many times, I can run it.
Such memory exhaustion like I observed in these machines today and yesterday will not happen.
It's really, really fast.
This is for developers only.
It doesn't make any significant changes to the not too big changes from from production perspective.
OK, but you should try that one.
Try that one.
Standalone.
Yeah.
The code, the code.
Let me go back to the code.
My reminder says I should proceed to testing, but let me finish at least that one.
What am I?
This is not Sarah.
This is Sarah.
OK.
Now, do you use standalone mode?
Did you try it already or not?
Are you happy with it?
Maybe yes, maybe not.
We don't know.
So how did you test it actually?
How did you how do you use it?
The standalone mode in what context?
If you can say.
But did you did you observe any advantages of it if you use it on your side?
Because that's the point of what I'm saying.
Angular provides new functionalities.
A lot of people are just.
This is great.
I have to use it.
But maybe even if it's not appropriate to my business perspective, I'm still going to use it because I really want to do.
You know what I mean?
OK.
All right.
Good.
Good. Yeah.
So it's like yet another sort of workaround for for doing Angular in embedded way, not the whole thing.
In the past, I was really struggling with Angular because of that.
I mean, I really wanted to use Angular as embedded part of my bigger application.
And it was problematic.
You know, instead of PHP, for example, React had it straight away.
It was embeddable just like that.
Angular didn't.
And they invented a couple of ways of doing that.
But it's still it was still not good enough.
And I believe standalone is sort of also not interesting solution which can do that for me.
OK.
Good.
Do you know you can use the whole thing in standalone mode from scratch?
The whole application.
Did you try that?
The main advantage is like everything is lazy.
If everything is lazy, it means the whole application can stop working.
But yeah, something for something.
Something for something.
We have tremendously fast, efficient, you know, like, I'm speed from the from the from the movie, right?
Cars movie.
Very efficient application.
But then problems are with dependencies.
So also we should be careful with that.
All right.
There are a couple of other things, but I'm going to skip it.
Let's focus on testing.
I don't have presentation separate presentation yet for just and I'm going to get it.
OK.
It happens that when we want to test and I would just you can still use the goodies from Angular core built in testing stuff like that.
Testbed mockups, dependency injection, all the necessary elements which were available in Carma plus Jasmine combo are still there, available to just.
Which is awesome.
I really like that because I have a I have a choice which is not often coming with with Google guys.
So I can use them or not.
So I can do pure just.
But I strongly advise not to.
OK.
And if you if you did test Angular in any way, I mean, you need test especially.
You will know what I mean.
Let's start with with this.
Those bits that we need.
We need we take from Angular core testbed fixtures some of other goodies, especially when we do the asynchronous stuff.
And we can wrap it together with just.
I'm going to show you the code in a moment, but it's quite simple.
If you if you prefer just instead of Carma and Jasmine together, you can use it straight away.
Just is better because it's faster.
It's more general.
And it doesn't need anything else.
When we use Jasmine, we have to use Carma.
So it is two things to do the job.
Now, in our unit testing was always not really you need testing.
It's like we there is a nice thing for it.
I forgot the name.
Raw testing, let's say dry testing, because we will never test just one thing at a time.
Angular is so dependent on a lot of things.
We have to include them always.
So there will be happening a lot of doubles, a lot of doubles, a lot of mocking.
And that's it.
So those guys will be there still.
And because I have I didn't manage to combine, I have separate presentation for just with react.
Separate presentation for Angular, but I didn't manage to combine them together.
I'm pretty sure I will probably never do it because there is no point.
It's quite simple.
So probably I'm going to always use examples now regarding that.
This is my site.
I'm going to have to do it here.
So they run it.
I promise you to solve the running.
OK, I'm going to run it.
Because my git server is still not up and I'm really worried about that now.
I have to do it manually as you saw probably in the meantime, but I managed to do it.
So I still have them.
Where are you?
Where are you?
I managed to put you here.
Yeah, you are here.
Let me check.
That's the one I wanted to show you.
Yeah, this is exactly the one I wanted to show you.
First of all, some bits from configuration perspective.
Actually question.
Do you already use already just in your environment or not yet with Angular?
Or are you about to migrate?
Oh, so you did the setup already.
OK, so I can skip that.
OK.
Example of the test straight away.
But OK, that one doesn't use the thing I wanted to show you.
Wait a sec.
Layout probably.
Not layout.
This one should be better.
Yeah, I'm going to use dot.
It's mockup.
OK, so.
This will be the main thing I wanted to show you.
That will be involved.
Yeah, I'm going to mockup that one.
Good.
Let's start with the simple one.
Body reminder.
Now my reminder says Lucas, summarize the training.
Let's just stay with me a bit more.
I can if you can stay with five minutes longer, please do because well, I can be late on my scrum.
They know I'm always late.
On the scrums.
Yeah, let's look at maybe that one.
Let's look at that one.
So as I told you, we can combine like the previous approaches from Angular perspective.
So I'm using test that from Angular core.
I can take all the Angular elements like we usually do.
And then I use I usually do the usual.
Well, I I I try to do the.
Pure testing of Angular with Jest without Angular extensions.
And I.
And I failed.
I'm going to be honest with you.
It was OK.
It was fast.
But too much work.
Too much work.
Too much code.
It's always easier to use something which is built in and always Angular guys were telling in their dogs.
Please follow best practices, which means use as much as possible built in stuff.
So I decided to leave it.
So I left the pure way and then I just went for this.
There are people who prefer pure way and then you will see a lot of examples in the internet and then they will they will say it's better.
For me, not all right.
Maybe because I have such a big environment, big application, hundreds of components and something for something.
So the usual describe.
We do the steps.
We do the mockups.
We prepare the test bed.
We do the dependency injection.
This this is something which came finally also to Angular 16.
I'm not sure if I mentioned that we can inject.
Services or all dependencies not through constructor in Angular from start starting from version 16, which also improves the testing.
All right.
Did you test Angular before with Jasmine and Karma or did you start straight away with just with just.
OK, so you can.
So you know what I mean.
You can compare.
Right.
And the best practices.
Well, one of them is from my opinion to use beauty and stuff.
This is the first thing I strongly suggest you do to people don't bother with the pure just way.
Second, use like a lot of mocking, a lot of test beds, a lot of doubles.
Right.
Because we have a lot of dependencies.
If we have standalone components, it's easier because.
They just stand by themselves, which is less dependencies, right.
Only the necessary stuff.
So this is another good practice.
It's like.
There are plenty of things in Angular I don't like.
It's too fast.
They approach, but it's going still in a good direction.
And they are also considering to.
Instead of.
Other others of test, the usual, which is also better web web web web load.
So for the best perspective, it will also speed up things.
It will be really, really nice change.
I hope they will make a decision and they will include it in the future versions.
So, so that's it.
Thank you for your time.
Versions.
And the rest of it is like, like, same old, right.
We inject the spice.
We saw we around at a certain usual way.
No big difference between the previous approaches.
Well, there will be there will be big difference.
If you'd go with a pure approach without that, without, you know, Angular core testing.
What's your choice?
What did you choose so far?
Are you following this approach with that bet or are you doing it with a pure way?
OK, good, good, very good.
Please continue that.
Don't leave it.
OK.
And running, running, running.
Running, running, running, running, running.
Let me run the application.
And to my immediate commander already.
Yes, I am.
Yeah, my reminder says go to Scrum.
In a moment, in a moment.
Oh, I didn't install this one yet.
So let me do it quickly.
Right.
Do you use the new Vita plus web?
You know, the the the the.
When you do the development or you do still do you still use webpack?
What's your approach?
You don't know.
So maybe maybe you didn't try the new guy yet.
I'm going to show you.
I'm going to show you.
Definitely worth to check.
OK, it finished its job.
Now I've lost my screen.
Come on.
Why now?
Now the screen sharing is not working for me.
I don't know.
It's not working for me.
Let me do it again.
If you use too many windows for Microsoft things in the same time, sooner or later it will revenge on you.
That's the wrong one.
At least it's back so I can share it.
Too many windows.
OK, that's the one.
Finally, I found it.
So far we need.
Do I need the server running to do the tests?
I think I don't.
So I'm just going to say NPM test.
I'm going to run all the tests.
Now I'm going to see if I need happy because I don't remember.
I don't need it.
Good.
So this is how we do it.
Well, you can do it in plenty of ways.
I prefer to use NPM and configuration will package that JSON.
Previously, of course, I was using just directly with some additional scripting.
Now the application itself.
That one is cute.
That one is.
This one.
That one.
Make it fast.
So you will see what I mean.
And you tell me if you use it.
Yes, build.
Yes, build.
Obviously, because I didn't run the API, which is behind the scenes like a JSON based server, but yes, build based browser from in 16.
In 16, it was in preview mode in 17 is part of the story.
As far as I remember.
So that was the question.
Do you use this or not?
Not yet.
It is built instead of Webpack.
It is built together with Vita.
I don't know how do you pronounce.
What pronunciation you prefer.
Sarah?
Can you hear me, guys?
One, two, three, four.
Uh huh.
Sorry.
Can you say again?
What are you using?
You use that or still the previous NX.
Oh, OK.
OK.
OK.
I see.
All right.
Guys, I believe we managed.
We managed.
Same.
We couldn't have more time.
I would like to spend more time with you.
I really like you.
I like to approach even as patients with my amount of exercises.
So thank you very much for staying with me, for learning together, exchanging the knowledge.
I hope you will use it properly later on.
I hope you did enjoy it.
And yeah.
Good luck with your adventure in Angela world.
I hope you're going to stick to that.
Chairman, are you there?
Thank you, guys.
Thank you.
Thank you very much.
Good luck with everything.
I'm so happy.
Thank you.
Thank you.                

on 2024-02-29