Okay, so I want to make a little example with objects and also introduce some new features
in JavaScript 6, the new version in JavaScript.
Okay, so here we create some files here, for example, a car, no, this will be my program
or program.js, and just to load it, I will create an index and load this script from
here.
This is not a correct HTML, but it will work, it will load the program.js, and we'll
print start, samples, index, okay, so do you see it, start.
Actually, I will mostly work from here, from the console, so today the console is more
important than the website, and you can put here like OOP in JavaScript, okay, so I
want to review what's a class and an object, so this will be much, much simpler and easier
than what you saw before, that he was creating objects and passing objects all the way, and
classes that you don't know where they come from, but they are there, so what's a class
and what's an object, what's object-oriented programming, a class is a specification, an
idea of something, of some concept, for example, car is a good name for a class, and it would
be the idea of a car, okay, so a class specifies, in a class you specify the properties of the
objects of the cars, the properties that these objects have, and the actions that they can
do, for example, this could be a visual representation of a class, this is used in some diagrams
called UML, maybe you have seen them somewhere, and they have three sections, the first section
is the name of the class, these are the properties, and these are the actions, okay, the properties
are things or features that the car has, or the state of the car, for example, the brand
is always the same for a car, but the speed, if it's the current speed, it may change over
el tiempo, so this is the features or the state of an object, and these are the actions
that a car can do, can accelerate, brake, or stop, simple thing, and the object, an object
is the real thing, it's a specific instance of the idea of the class, sorry, this was
movie, because I made, first I made the movie class, and now it was car, so for example
Ford, a Ford is a specific car, not just the brand Ford, but just one specific Ford
with some matricula, the first Ford that was made, for example, an object has some specific
values for the properties that the class specifies, and can actually perform the actions, so for
example we can have a Ford car that is running at 50 kilometers per hour, a Ferrari that
is running faster, or a Toyota that's stopped, and it's not running, they have different
states, and they can, they could accelerate, and the speed could increase over time, they
can brake and reduce the speed, like now it's 20, now it's 10, or they can stop, and like
said, their speed to zero, okay, so how do you, how do you declare a class in a, in
javascript, in javascript 6, or in the latest versions of javascript they introduced this
keyword class, because before you could create some sort of classes using functions, but
it was a bit dirty, now they actually added the class keyword like in other languages,
so now I can create the class car, and I can define properties, in some languages you define
properties, like here you have, in most languages you can have the property section, the constructor
section that we will talk about, and the methods section, which are the actions, these are
like the state of the object, but in javascript you don't define the properties, because it's
quite flexible, you can set any property you want, you don't have to define them, like
for example in java, in java or other languages you need to define them, so actually you go
directly, so I would say in javascript you don't define them, I go directly to the constructor,
so the constructor is a special method, where you can send initial values that you can set
to the objects, like for example model, and store this data into the object, to store them
you say this, and you decide a name for the property, and I decide its model, so I assign
the model that I get from the constructor, and I also decide that the speed will be zero
by default, because when I create a car it will be stopped in the beginning, I could
also send the speed here but I won't do that, because I decided that, so if I have this
class car, I can create an object saying, I need a variable, like for example car1,
and I create an object with new car, and I pass here the arguments to the constructor,
I say that I am passing the model, so I say for here, so this way I will have an object,
like this one, I will have an object like this one, in the beginning it will be zero,
the speed, I am creating this object of the idea of class car, I can create other objects
like Ferrari, or Toyota, so I will name them Ford, Ferrari, and Toyota, so we remember
that this variable is holding the Toyota car, so now I have like three objects, three car
objects, and they all have speed zero, because they are stopped, now I can change the speed
property, I can, for example, accelerate or break the speed of each object, in JavaScript
I could access the properties of the object, like Ford dot model, because I set them here,
Ford dot speed, so I could set directly the speed to 100 here, so at that moment I would
have, this was a Ford, I would have 100 here, okay, I will have Ford with speed 100, and
the other with zero, because I didn't change it, but the problem with this is that I can
set anything like 1000 or minus 500, and it wouldn't make any sense to have here minus
500 kilometers per hour, so usually you don't set the values directly through the properties,
but you define some methods that modify the properties, for example I want these methods
like accelerate, break or stop, I can define them here, I can say I want accelerate, I want
a method called accelerate, and I want to say the increment, or the amount I want to
increment the speed, and I can say this speed at the amount that I say, so now I can say
Ford, no, no, any, I have added this method, so any object can do that, can do that action,
like dot accelerate, and add for example 100, and it will be more or less the same, but
I can, here I can check things like maybe I don't want the speed to increase too much,
and limit that, I can do that for example with a break thing, let's say I add another
method called break, and I break 200, so it will be more or less the same, so in this
case I'm reducing the speed, but when I reduce the speed, if the speed is below zero, it
doesn't make sense, so I set it to zero again, so it has a reasonable value, because if
I don't do that, if here I print the Ford speed, I will get Ford, thank you, so I will
get minus 100, which doesn't make sense for me, so I add a check here that if this speed
reaches below zero, I set it again to zero, so now the Ford doesn't run minus 100.
Un cool method is the two string method, this is an interesting method to add, it's a special
method that is implicitly called every time the object has to be converted into a string,
so for example here I could return this dot brand at this dot speed, another hour, so
this message will be printed when I lock this, I can say two string here, so the lock prints
all that information, thank you, for that zero, or if I don't reduce the speed for 100, but
I can also, it will be automatically called, if I, for example, concatenate it to a string
like car, car for that 100, it's called automatically, although I'm not calling the string method
here, if I don't concatenate one string, the console lock does a string thing, and it's
like printing the object in this way, this is done by the console lock, but sometimes I
don't want this, so I can concatenate a string or even an empty string, maybe with an empty
string, I just get the 4 at 100, okay, the cool thing with objects is when you use objects
that, when some objects use another object, I'm not going to stand today, because it's
too much maybe, and I prepared another thing, this is called inheritance, and it's a cool
thing about classes, but I didn't prepare that, I'm going just to use some objects from,
to do that, some objects use another object, for example, let's say I have a mechanic,
maybe, is this a correct word, mechanic, the mechanic is trying the car, so it's checking
if the car is working, okay, let's say it's like a robot that takes a car and tries it,
so the mechanic doesn't need anything, the constructor, maybe I can skip it, or I will
say it just needs the car here, okay, the mechanic gets the car in the constructor and
store it, so I can create, I can create a mechanic, let, mechanic, okay, and give it
a car, like 4, it will check the 4 car to see if it's working okay or not, and then
the mechanic, let's say it has an action that is a check car, for example, it's checking
the car, so I don't have that method, I will create it, this is a check car, it doesn't
have any arguments for now, and what it will do is try the car, maybe it takes the car,
this car accelerates, so it accelerates the car by 100, and checks that the car speed
is 100, let's say that this method returns true if the car works okay, or falls otherwise,
so for example, now if car speed is not 100, return falls, the mechanic knows already that
the car is not working correctly, now if he breaks the car by 50, he has to check that
the car is at 50, or if I reduce it by 60, now it should be 40, okay, if it's not 40,
return falls, it's already broken that car, and now if he breaks by 200, tries to stop
the car, it should be 0, no, oh yeah, thank you, I'm trying to break, yeah, so it accelerates
100, checks the speed, breaks, checks the speed, breaks again, too much, but the speed should
be 0, and finally, if everything was right, returns true, so now it checks the car, the
mechanic can check the car, and you can get the result, the car is okay, and finally print
something so you can see the result, the car for model is okay, and print that, that would
be a Boolean, like true or false, so let's say what the mechanic says, so the car for
is okay, true, it says that the car is okay, it's working fine, but what happen if I break
the car, if this is, I don't do this, okay, I'm not resetting the speed to 0 when it's
breaking too fast, but it's breaking too much, so now if I reload this, it will say that
the car is not okay, it's not working, okay, I could call it test car, instead of check
car, no, no, no, it will not work, it's the old one, I will, I thought it was full,
but, so I have renamed the check car to test car,
okay, the method, I have renamed it from check car to test car, do you know why, do you know
why I have named it test car, no, no, no, no, it's because, have you heard about testing
about testing a program.
You need testing or integration testing.
So this is like a test.
This is actually some kind of test that you could write
for your classes.
Usually when you write a lot of classes, you need to write
also tests for those classes to check that they're working
correctly.
And this is like a funny way, this is a mechanic, a funny
way to write a test.
But when you write real tests for your programs, you will do
something similar to this, very similar.
OK, so this is like a unit test.
It's called unit test when you are testing just one class.
If you're testing many classes at the same time, it's called
integration test.
But the idea is more or less the same, is to check your code.
And this is one idea.
And the other idea here is that there's one class using
another one.
So there's one object, in this case, this mechanic object
that I created here, that is using the fourth object, it's
manipulating it, doing something with it.
So using this idea of objects, using other objects, I
thought of this framework, because I was, a few days
ago I was reading that there are tons of JavaScript frameworks
and that every day a new one appears.
Maybe it's a joke, but almost every day a new JavaScript
framework appears.
So I thought of creating a new framework.
And in this case, it's a fake framework.
So I named it fakework.
It's my new framework, my contribution to the JavaScript
will, and it's a fake framework, just to learn object
orientation and to understand how most frameworks, or in this
case, full stack frameworks, are organized.
I made this simple diagram about how usually an
application is a structure.
It usually has four layers.
Not all applications are structured like this, but this
is really typical for many applications.
It has four layers, and these layers are groups of objects
that they work together.
They are communicating together.
Usually the objects from here communicate with objects from
here, like the database is not communicating directly with
the web components, but it's layered.
The message, the calls are passed through this chain.
These are the four layers.
This is a web or front-end layer, and the other ones are
called the back-end layers altogether.
Maybe I should group them, so this all together is the
back-end.
This is the components that are responsible of writing the
HTML, JavaScript, and CSS part, like, for example, View, or
Angular, or React, or all these components, or frameworks.
And this part, this API is responsible for receiving calls
from the front-end and passing them to the lower layers.
It's more like a gateway, getting requests from the web
and passing to the service.
Then the service is the most important part.
All the parts are important, but maybe this is the most
important, because it has the logic of your application.
It knows what to do in your application, depends on the
application that you have.
Maybe you have a cars application, so it knows
about the cars.
It does all the stuff with the cars, the repairing, or
adjusting the cars, and all the logic that you need for
your business.
Sometimes it's called the business layer also, the
business layer, or the service layer, or the business
logic.
OK.
This is where your algorithms are, or the computing.
And then this layer is the database.
It's just for storing data.
So usually when you are browsing, when you are using an
application, for example, the Google Slides is an
application, a really, really advanced application.
And when I do things here, and when I create objects and all
that, every time I do something here, like maybe
writing something here, every time I write here, it sends,
maybe not all the time, but after a couple of seconds, it
sends a request to the APIs saying, hey,
he changed something.
Then this API transfer the information to the service,
and the service knows what to do.
Maybe he has to update some data inside and do some
calculations, and then stores your
document on the database.
So that's why if I close this window and I open it at
home, it will stay the same.
Because the next time I will open this application, and it
will make a request for the API service, and we'll get the
data from the database, and it's stored there.
It's saved on database.
OK, so I made this fake.
I will show you, not in a lot of detail, but I made this
fake framework, so you can see that?
Or it's too small?
I don't know if I can.
Anybody knows how to make this bigger, or no?
It's getting bigger, but only this part.
Yeah, it's by the stars.
Maybe if I zoom in this way.
Let's see if I can do that.
¿Sí, mejor?
So here you have the front end and the back end, inside my
framework.
The back and half has the API, the data, and the service
layers that you saw before.
And also has another folder for the classes, the data that I
will handle in my application.
This will be an application of movies and directors.
So I have this class movie, you can see a simple class
director that has the name and the country of the director.
And an ID, and this is used for the database.
I will say it later.
And you can see that there are no methods here, just the
constructor.
This is because this is a dumb class, a simple class just to
store the data.
It doesn't have any actions.
So the other layers are the API, the data, and the service.
And in the front end, I have a controller that is more or
less like view or angular, but in a very simple way.
So I will show you first the data part of my application.
OK, this is simulating a database.
So you will actually, in a real application, you will have a
real database.
But here, I just create an array of movies and directors.
I'm creating new movie, new movie, new movie, creating four
objects with different data.
This is, if you remember the class, this was the idea of
the movie.
This is the idea of the director.
And it points to here.
So Pulp Fiction is made by Tarantino.
This is the name of the movie, the genre of the movie.
And this is, is classic or not, if the movie is a classic or
is not.
Just these two movies are classics, and the two are not
classics.
I will use that later.
What?
Oh, yeah.
Yes, thank you.
OK, so this is just static movies.
I want add more movies, so we can try that.
And here I have a method that can search for things inside my
fake database.
Usually, you will use some database language, like SQL,
or maybe some kind of driver with functions for your Mongo
database, or also your SQL database.
Sometimes you have some classes, some libraries that help
you find things.
But this will be really, really simple.
It takes a query object that has three properties.
One is the table that you want to query.
Maybe movies are directors.
The second one is the property that you want to look for.
Maybe you want to look for the genre of the movie.
Y then the value.
OK, so this just selects, maybe selects the movies, and then
maybe filters the movies from the property genre that are
comedies.
Pretty simple.
So I go to the service.
The service is the part that talks with the database.
So it may tell the database, tell me the movies that are
comedies.
So the service is this way.
OK, the service is creating an instance of the database.
It needs an instance of the database, so it can talk to
the database.
So in the methods of the movie service, it will use this
object, like the mechanic using the car.
In this case, this object is using the database to query
things to the database.
So for example, the service has methods like find movies by
genre, and it gets the genre that it wants to look for.
It builds a query that the database needs.
The table is movies, the property is genre, and the value
is the genre that I get from the argument.
So it tells the database, hey, database, find me this query
that I give you, and you know what to do with this query.
OK.
If you are using SQL, maybe this would be like select, select
everything from movies where genre equals genre.
And here I'm referring to this one, and this is the name of
the property.
So I'm faking this kind of query.
And the database gives me the movies.
I can also find classic movies.
So the query is more or less the same, but instead of genre, I
say, is classic, it's true.
So it looks for this property, and it's true.
And the rest is the same.
This is a slightly more complicated logic, and I made this
because these two methods are a bit stupid or a bit simple,
but the service can be more intelligent.
This is also very simple, but this is a bit more complex,
because this finds suggested movies by genre.
Returns an array of suggested movies, if you like that genre.
OK.
You tell the genre that you like, and it returns some movies
that you may like.
And what it does is it finds movies for the genre, because he
knows you like the genre, but it also finds classic movies
that you may like.
So it joins.
This concat is like putting together all the movies by genre
and all the movies that are classics together and gives you that.
Maybe it may get repeated, because some classic movies may be
also the ones by the genre.
So I made this, and this is all this.
This is removing repeated values using a set.
You can ask me later if you want what it does.
It's filtering the repeated ones using a set.
So finally, I have movies that are the genre that I want,
or that are classic and without repetitions.
Or it does the final movies.
It just queries the table movies and without any query.
Or it finds all the directors.
It's the same, but it queries the director's table.
Different methods that my movie service have.
Now comes the API part.
The API part, let's see.
The API part will use the service.
Each layer knows the one after that.
This layer knows this one.
So the same way the service knows the database,
the API will have an object of movie service.
So if I go to the API, it has an object of movie service.
This is mimicking, or this is simulating.
I didn't see that.
This method simulates that it gets a real HTTP request.
I have defined here below, I have defined two classes.
HTTP request and HTTP response.
An HTTP request, it's a request that goes through the internet.
So you cannot call this method directly.
The web part cannot call a method on the API.
It has to send through the internet a request.
The internet requests are usually the HTTP request,
which have three parts usually.
They have something called HTTP method
that maybe get, post, put, or delete.
It's just like a word.
Get, post, put, or delete.
It has a path, it's a string,
like, for example, slash movies,
because you want movies.
And it may have other data that you need for the request.
For example, if the request is a search request,
the data may be the query of the request,
the genre that you're looking for.
And if you're creating something,
maybe you're sending the data to store.
If you're creating a new movie,
you send the title, the director, and all that.
So here, I am simulating that I'm getting a request
from the internet.
And I want to build a response,
the result of this call.
Ok, if the HTTP method is get,
from the methods here that are get, post, put, and delete,
get is usually used for getting data.
And post is usually used for putting data,
to store data.
Ok, so in my examples,
or are querying data.
So I will use only get.
If the method is get, and the request path is
slash movies, it means that I'm looking for movies.
Maybe the request also comes with data,
general, ok, with the data general.
And I store it here.
If the genre is specified,
I call the find movies by general.
If the genre is not specified,
I call the final movies,
every movie, without filtering.
Finally, the movies,
I have the movies here,
maybe filter or not.
And now, this request method
returns a response.
So it's simulating,
I'm responding through the wire,
through the internet.
I'm getting a new HTTP response.
An HTTP response has two parts.
One is the status, the HTTP status code.
It's used for telling if the request path
was successful or not.
And then comes the data.
Ok, I'm going back here, down here.
An HTTP response has a status
code indicating if the request was ok or failed
for some reason.
Maybe you have seen some of these codes somewhere.
200 means ok,
401 means unauthorized,
you don't have access to that.
404 means that the object was not found,
maybe the movie was not found,
or something like that.
This is a wrong request,
maybe you didn't specify the right arguments
for the request.
500 usually means that there was some crash
on the server, some unexpected crash
on your server.
It usually means a bug on your server.
So here, if I got the movies correctly,
no problem, I say 200, ok.
And here I am converting the movies
into a stream, ok.
So this is like simulating that I'm
sending the data through the wires,
through the internet,
as a stream of characters,
not as an object,
because I cannot send the object directly.
I do the same if the HTTP method is get
and the path is movies requested,
this is the difference, ok.
If I just say slash movies,
search movies, by January maybe.
And if I say movies suggested,
I'm looking for suggested movies.
And it will call the other method,
the suggested movies by January.
That gets me some suggestions.
And it does the same,
return 200 and it's converting
the movies into a stream.
Then I have another method get
and the path directors,
and it returns the directors, ok.
If else,
if the request doesn't match
any of the known requests,
maybe I tell him for 12,
what that means, the request is bad.
It's wrong, ok.
I don't send any, this is the data,
the result, but I don't have data
to return, so I return no
for 12.
And finally,
in any case,
I return the response,
so the web request
is calling the API
and the API always returns something,
maybe 200, ok,
or maybe 400,
meaning something went wrong.
Ok, so now
I'll move to the web part.
Ok, and this is the frontend part.
The frontend has a controller,
usually views
are divided into parts.
One is the template,
the template is the HTML,
where you will write things,
and the other part is a controller.
This is related to the MBC,
the model view controller,
where the view is the template,
is the HTML template, like this one,
and the controller is an object
that controls the view.
The controller is responsible
for calling, in this case,
calling the API
or the service to get data
and to put it on the view, ok,
somehow.
And the template
is just the HTML template
with maybe some logic inside
to display things.
So, the controller here,
which is in the frontend side,
it has an instance
of the movie app, to call it, ok.
This is a simulation
because actually you don't have
an API object from the frontend.
You make HTTP requests
to the frontend
because the API is in the remote server.
You don't have an object of the API, ok.
Do you understand that?
You are now on the frontend.
You cannot say API.request,
but this is a simulation.
On the other side,
the other things that I did,
they are like quite real.
They are just making stupid things,
maybe, but the calls are not
so different from the real thing.
In this case, no.
The movie controller will call
the movie API.
So, in this case,
what I'm doing is
this is the web page.
I have an input
where I can say, for example,
I want to look for movies
that are thriller.
And if I click search,
I say it here in the...
If I click the button search,
this is the first one,
it will call the search by genre
in the controller.
Ok, so here I have the method
search by genre,
will be called.
What this will do is
it will get
the input value,
the value that I input,
the thriller input,
and it will simulate
an HTTP request,
like get slash movies
and the data with genre thriller.
So, this is doing
this fake Ajax call,
this HTTP call,
and it's using the movie API,
it's passing the get method
and the slash movie and data.
So, this way,
it will match this request.
I'm sending get slash movies
here in the controller,
get slash movies
and the data with the
genre to search
that I got from the input.
This fake Ajax call
is just doing this.
Ok, I'm creating an HTTP request
which is a fake request
with a method,
in this case get,
the path, in this case,
slash movies
and the data, the genre.
The API request,
with this request,
which will call this method,
request,
it will get the movies
with the genre
and then will return the response.
And this response
that is returning here,
I will get it here.
This is the response.
And it will check,
ok, the response is 200.
Ok, so it's ok.
If you remember,
the data that it returns,
it's passed to a string of characters
to a string, to a text.
In this case,
to simulate that is sent
through the internet.
So here I am parsing,
which is the opposite action.
It will get this data
as a string
and it will convert it
to an object again.
So here I will have the objects
and it will return them.
Otherwise,
if the status is not 200,
I just throw an error here
just to check that this is working, ok.
Index controller, ok.
So here I will have my movies.
If the fake Ajax code is working,
it just makes a request,
gets a response, blah, blah, blah,
and then gets the movies.
And I have the movies here.
This is like an indirect way
of accessing my backend.
I'm getting the movies from the backend
through an HTTP request.
And then I display them.
I have here a method.
They are objects.
It's an array of objects.
And each object has name, director.
So here I'm displaying the movies, ok.
This is an array.
It says this is a bit dirty.
It's much cleaner using a web framework
like Angular or Vue.
We will use a good web framework,
but I'm doing this manually
just to show you.
I'm using this.
I'm looping the movies.
Movies is an array.
And I'm using this loop.
This loop is a new loop
in the new version of JavaScript
that is just searching for it.
It's like for each movie in movies,
do this, ok.
The in doesn't work as expected.
It's not searching through the movies
to each movie in movies.
But it's getting the indexes of the array.
So the office is nicer.
They are creating new things
in the new JavaScript 6
because they realized
that there were many things broken.
For example, the bar keyword
does really nasty things.
So now you should just let
or even const if you want
alter the variable again
if you're just setting some value.
You just const.
So here I'm starting with an empty string
and creating paragraphs
with the title of each movie.
And finally, I'm putting the result
on the div that is here, this result.
So if I am searching thriller,
I see here the movies that are thrillers.
If I say suggest me,
it will tell me thrillers
but also movies that are classics
because maybe I like space odyssey
because it's a classic.
Ok, in that case,
this is the other button, the suggest by genera
and the movie controller
in suggest by genera is doing more or less the same.
It's getting the value from the input
and calling the Ajax call.
The only difference is the path here.
Ok, so this call
and this call is more or less the same.
The method is get, the data is the same
but the path is different
and because the path is different,
the API will do a different thing.
Movies will do this
and the suggested will do suggested by movies.
Suggested by genera.
In the end, it's calling the service,
accessing the database.
Ok, so, well, that was my example.
Do you have any question?
Do you understand everything I said?
It's my fake framework.
You can use it anywhere to make stupid applications.
But in the end, it's useful
because it's the structure of an application.
It's really like that.
It's only that they are really fake or simple.
I'm sure you have worked
or you will work with applications that are this way.