So let's talk about full stack applications or web applications.
As we talk about them.
Initially, we are going to use this approach with a divided screen for this whole block.
But in the case of this lesson, I'm going to open the screen so we can focus on the slides.
I think it's going to be easier for you to follow this lesson in this manner.
So in this lesson we are going to talk about what it is a web application or a full stack application.
A what are the differences between web and mobile applications, the type of applications we may find
the development process a we will use an analogy that I think is very useful to think about a web application
like a Lego construction.
A we will talk about the keys to prevent a project, an application web application project from getting
out of control.
The main components of the application, the main processes.
We have the usual functionalities and a how we apply all the above in the LM web application development.
So when we say LM application development, in most cases it is going to mean LM web Application development.
We will see more about that in immediately.
So what is a web application or a full stack application.
So.
And I'm talking about what we usually know about a full stack application.
Don't take me like a like a university professor.
This is not the Bible.
This is how we speak, you know, in the daily, uh, activities of artificial intelligence engineers.
So a full stack application or, or what we call web application is a software program.
So see that we are not talking about a web page.
We are talking about a web application.
So a web application is a software program that runs in a web browser.
So a web browser like the one we are using here, we are using Chrome but you can use explorer, Firefox
etc..
So our application is a software program that runs in a web browser instead of being installed locally
on a device.
Remember years ago a software applications used to be installed locally in our computers.
It is accessible over the internet or an internal network and runs.
This is not very common today and runs on a web server, not on the user's device.
This means that you can use it from any device with a web browser and an internet connection, so you
can open a web application from your mobile, your tablet, etc..
Web applications are popular because they do not require specific installation and are automatically
updated on the server, ensuring that all users access the most recent version.
So.
Every application today is a web application.
A 30 years ago, software applications were installing in computers.
Today, every software application is a web application, so they are in the cloud and we don't need
to update them.
Difference between web applications and mobile applications.
So three areas, uh, that are is important to consider the platform access and the development process.
So mobile applications okay let's talk about both web applications the running web browsers and are
accessible from any device with an internet connection and web browser.
They do not require downloading or installation in the case of mobile applications.
They are specifically designed for mobile devices and are downloaded and installed from app stores like
Google Play Store or Apple App Store.
You are familiar with it.
It's different the platform and the access.
The development process is also different.
Web applications are generally developed with technologies like HTML, CSS, and JavaScript.
They are easier to maintain as they are updated directly on the server, and users always access the
latest version.
The mobile applications are developed using languages and frameworks specific to mobile platforms like
Switch or Kotlin.
They may require separate mainframe maintenance and updates for each platform.
So probably you are familiar with HTML, CSS, and JavaScript, but not so familiar with Swift and Kotlin.
And that's a reason for that, because mobile applications are minoritarian and web applications are
universal.
What kind of things can do?
Web applications.
Whatever.
Whatever you want.
The sky is the limit.
Your imagination is the limit.
So everything we could use, uh, 30 years ago in a computer, we can do today in the web.
So information, education, commerce, financial services, social networks, entertainment, productivity,
business communication, content management, health, wellness, whatever you think of, you can do
it with a web application.
What is the development process of a web application?
And when I say web application, you can also say full stack application because on a daily basis.
It.
They are the same for us.
So for a full stack application or a web application, we have a development process that you immediately
see.
It is more complex than the process.
We are used to a follow in the level one and level two applications.
So when we are talking about professional applications, what we what we what we mean, what we what
we identify by level three applications, we have many different stages.
So we have the initial planning and analysis stage.
We are not programming here.
We have the graphic design stage.
We are not programming.
We have the development stage.
Now we are programming.
Then we have the testing stage.
And we are not talking about testing the code.
This is testing the application.
Then we have the the deployment, the servers, the maintenance and, you know, production.
You can call it production stage.
And then what we can call the evolution.
So for example when you are working in a in a startup, a the main uh, time of the software engineers
is focused on this, uh, stage maintenance.
So the initial stage, the initial stages of the startup are focus on the development and testing,
you know, and deployment.
But once the product is in the market, the main job of the of the engineers is maintenance and evolution.
Okay.
A This is a very interesting concept, and I think these three ideas are very important now.
So a web application or a full stack application can be understood like a Lego construction.
I think most of us we have played with Lego constructions when we well this is called Lego in Spanish,
probably in English would be Lego, I don't know.
So don't be overwhelmed by the number of pieces of a full stack application.
Web development relies on many pre-designed packages.
This is very important.
So.
99%.
Of the times, a full stack application, or a web application.
It is not built from scratch.
It is going to use many parts that are already built for you.
So it's like for example, if you are a mechanic auto mechanic and you want to build a car, probably
you are not going to build every little piece.
You will buy the different parts of the car, the engine, the wheels, the whatever, and then you
will assemble all of them.
And in some cases you will customize or you would you would do some personal touch here and there.
It's the same thing with application development.
We are going to use a lot of parts that are already built for us.
We are going, we are going to assemble them.
And in some areas we are going to include some custom code or custom functionality.
So I say this because it is very important for you to understand immediately that no software engineer,
no artificial intelligence engineer, masters all the pieces of of an application before starting to
work on a project.
So it is very important for you to realize this, because this will help you to avoid what is called
the imposter syndrome.
The imposter syndrome is this stress that a new software engineer or a new artificial intelligence engineer
feels when they see a whole project, you know, in front of them and so many areas they are not familiar
with, that is the daily routine of a senior artificial intelligence engineer or a software engineer.
So don't worry about that.
That's the that's the normal a.
So it is important for you to understand this second point.
The essential thing is to understand the key concepts and the main skeleton of the application, the
empty house or the blueprint of the building we are going to build.
Okay.
And the decorative details are secondary okay.
So you need to understand the conceptual approach, the different parts, how they work, you know,
uh on a high level.
And then once you have to focus your attention in each on each of them, then you will go into the details.
Keys to prevent a project from getting out of control.
So usually full stack applications are complex applications.
They have many parts.
We will see now some of the usual parts they have.
And you will see, hey, this is something serious.
We are talking about authentication of users.
We are talking about security.
We are talking about some sensible areas.
So it is important for you to divide the application into small pieces and go one by one.
Usually you are going to work with.
One or more teams, so it will be more than you.
Uh, involved in the process.
But in some cases, if the application is small or for example, you are in a startup and you are the
first engineer in in a startup, you may be the one, the only one.
So it will be important for you, even if you are working by yourself to divide the application into
small pieces and then use testing to ensure that subsequent changes don't break what you have already
developed.
This is very, very, very, very important.
Very, very, very important.
And usually even when they are aware of that.
Many engineers don't apply this when they are working in the startup environment, and they need to
feel the pain.
In order to change a the bad habits is really surprising.
How many startups a start their development process without testing?
Testing is the way to build software, with security, with control, and with a reliability.
So I absolutely encourage you to work with testing, develop software and testing at the same time.
And with the testing, you will be sure that every piece you build is working.
When you finish it and one month later.
Because sometimes, many times if you don't use testing when you build new pieces, you may break the
previous ones.
So very important.
We will talk a little bit about testing is out of the range of the of the of this program.
But it's very important to launch this message now.
So.
What are the main components of a full stack application or a web application?
We have been talking about the front end, which is the part of the application that the users see and
interact with and also with the.
We have been talking about the back end, the back end.
We normally understand the back end as the main logic of the application.
So usually we say okay, a full stack application is front end plus back end.
In some cases, we call client to the front end and server to the back end.
But as you will see.
We are also going to use server for the front end.
So this is not exactly accurate, but let's call it front end and back end.
So here we tell you the front end includes everything related to the user interface such as web pages,
images and styles.
And it is developed using technologies like HTML, CSS and mostly JavaScript.
It's not exactly JavaScript.
It's a framework built with JavaScript, mostly react here.
And what we are going to use, which is next, is just a kind of react.
Then in the back end a it processes a.
When we say client request, we mean front end request, performs database operations and returns results
to the client.
The front end.
It is developed with programming languages.
Python like Python, Java, Ruby or Node.
Right now, the most popular backend language framework is node.
In the whole universe of web applications.
But if you go to the artificial intelligence full stack application is Python.
But the full stack applications are not just front end and back end.
They are also databases.
And you will see that we have the traditional databases and the vector databases.
We also have other elements like cron jobs, like APIs, like a hosting in the cloud, you know, like
Amazon Web Services, S3, etc., etc..
So as you can see from the development process and also the main components, this is a different league.
So we we used to say when we reach this point in the program, fasten your seat belts.
It's like you know going to the to the plane and listen to the, to the, to the crew telling you,
fasten your seat belts, your seat belts.
Now we are entering in a totally different, uh, phase of the program.
If you think of the demo applications we did in the level one applications or the demo we did in the
level two applications with the demo user interface.
Now we are in a totally different stage, and so you will see that this is a totally different stage.
Inside a full stack application we have.
These many components are more.
And we have also some main processes like page creation, dynamic URL creations, routing which is very
important.
And we will see more about that very soon.
Connected with connecting with data sources, mostly databases, connecting with APIs, authentication
and security and many others.
Okay, so a full stack application or a web application has a lot of functionalities like the ones you
have.
These are short list of some of them.
So how do you apply all this to the full stack LM applications.
The professional applications what we call the level three applications a so remember we have already
been talking about the proof of concept phase.
So when we are developing a professional application, the first thing we are going to do is a prototype.
And in most cases we will have a prototype as in level two application.
So with a user interface that we can present to the user the the customer, the manager, whatever,
just to get their feedback.
Once they provide feedback, we are ready to start working in the professional application.
And the professional application normally has two main phases.
For example, if you are in the startup world, in the second phase, you are not going to build the
whole application.
You are just going to build what we call the minimum minimum viable product or MVP.
So in the startup world, in this second phase, we are going to confirm that we are able to build a
minimum solution from the technical point of view.
And at the same time, we are going to be able to prove that we are able to get the.
Require investment.
So this is the the the phase where in the startup world we build the MVP and we raised the first round
of capital, the seed capital once you have this seed capital is when you start building your team of
engineers.
So it is very frequent that in this phase one and phase two, you have only one engineer.
That's why you as a full stack LM app engineer, can be working in a startup.
And this first engineer is the engineer that is going to become CTO.
Okay.
So he's the one that is going to hire the front end engineers, the back end engineers, etc..
Okay.
So in this initial lesson.
You realize how different it is this new, uh, stage we are right now?
Level three applications are a totally different world.
And that's why I was telling you at the beginning of the program that it was frustrating to go to so
many courses and, and, and articles and blog posts talking about demos and toy demos and toy user
interfaces that you cannot use in the real world.
So now we are entering in the real phase, in the professional phase.
Okay.
So next we are going to start talking about the key elements of the front end.