Angular 16 Bespoke

language: EN

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.
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.
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.
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.
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.
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?
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 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,
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?
Are you sure?
What kind of, tell me.
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.
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?
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?
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.
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.
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.
I see, do you need my help?
And it works.
Okay, good.
So please continue.
Thank you, please continue.
Any questions then?
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?
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.
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.
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.
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.
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.
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.
Same question.
Should I repeat the question?
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?
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?
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?
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?
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.
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.
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.
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,
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.
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.
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.
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.
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.
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?
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.
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.
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.
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.
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.
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.
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, 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.
All right, let's discuss together the solutions.
Let me, big sparse to nine.
All right.
FTJ, I believe is there.
It is refreshed, actually.
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.
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.
Yeah, probably only here.
Okay, this one is
sex via.
Anything new here, not ready.
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.
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.
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.
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.
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.
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?
And then we really need it.
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.
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.
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?
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.
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.
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.
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.
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.
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.
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,
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?
okay, please continue.
Good, good, yeah.
Try to fix it.
Thank you.
Jesse, how is it going?
Do you need my help?
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.
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?
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.
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.
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.
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.
The rest is the usual, I can say component,
and that's it.
Let me look at one of your results quickly.
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?
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.
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?
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.
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,
But here we need to play with that at least.
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?
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.
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.
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.
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.
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?
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.
Cannot match any routes.
For some reason, it doesn't see this parameter.
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.
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.
Yeah, I'm gonna definitely have to, oops.
Did I match too much?
Actually, let me close this slide for now
because I don't really need it, sorry.
Just ask people to fix the thing quickly.
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.
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.
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.
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
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?
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.
I'm already screen sharing your machine
so it will be there in a sec.
Yeah, aha, hello.
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.
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.
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.
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, 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.
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

Visit the Angular 16 Bespoke course recordings page

4 videos