Desarrollo de Aplicaciones

Web
Daniel Sánchez Ruiz
Unidad Profesional Interdisciplinaria de Ingeniería campus Tlaxcala
Front end
Development
The front end, also called “client-side”
programming, is what happens in the
browser. It’s everything the user sees and
interacts with.
Front-end is all about the visual aspects
of the website that a user can see and
experience
Front end Development
Back-end development can be much more varied than front-end
development, which is largely driven by JavaScript, HTML, CSS, and
various front-end frameworks using these languages.

To simplify things, we’ll break the server-side down into four main
components of a “software stack”: the server, the database, the operating
system, and the software.
Introduction to Vue
Vue is a modern JavaScript framework that provides useful facilities for
progressive enhancement — unlike many other frameworks, you can
use Vue to enhance existing HTML. This lets you use Vue as a drop-in
replacement for a library like jQuery.
you can also use Vue to write entire Single Page Applications (SPAs).
This allows you to create markup managed entirely by Vue, which can
improve developer experience and performance when dealing with
complex applications.
Introduction to Vue
If we want to build a storefront module like what we see on Amazon, we
can divide it into three components. The search bar component, sidebar
component and products component.
Introduction to Vue
Components can also contain other components. For example, in products
component where we display a list of products, we do so using multiple
product components. Also, in each product component, we can have a rating
component.

The benefit of such an architecture helps us to break up a large application

into smaller manageable components. Plus, we can reuse components within
the application or even in a different application. For example, we can reuse
the rating component in a different application.
Introduction to Vue
A Vue component consists of a HTML template section, a script section
that has its own data and logic to control the HTML template, and a
style section to add custom CSS.
When the values of its data change, Vue will update the concerned
portion.
Installing Vue CLI
The Vue CLI is a Command Line Interface tool that makes creating a
Vue project, managing plugins, and other ongoing development tasks
easier.
To install Vue CLI from the command line, type
npm install -g @vue/cli
Creating a New Project with Vue CLI
First, let ’ s go to our movie-reviews directory. In it, we will create our
initial Vue project by running the CLI command ‘vue create’ and
provide the
project name:
vue create <project name>
In our case, our project will be called frontend. So run the command:
vue create frontend
Creating a New Project with Vue CLI
A quick recap of the project creation:
• We create a custom Vue project
• We select some specific features, including:
• Babel, a JavaScript compiler
• Router, the official Vue router, and will allow us to navigate easily between the Vue
pages
• Vuex, a state management pattern, we will use it for our login system
• Linter/Formatter, specifically ESLint + Airbnb config. ESLint is a pluggable and
configurable linter tool for identifying patterns in JavaScript. This helps to maintain
code quality with ease; Airbnb is one of the most popular JavaScript style guides.
Creating a New Project with Vue CLI
A quick recap of the project creation:
• We select to create a Vue 3.x project and the recommended history
mode, which will make the URL look “normal”, for example,
https://movieapp.com/user/id.
• After completing the project setup, Vue CLI will create your project
folder and install the necessary Vue npm packages and other
dependencies to create your Vue application.
Creating a New Project with Vue CLI
The npm run serve command executes a script command defined in the
package.json file. This script executes vue-cli-service serve which
launches the server, watches your files and rebuilds the app as you make
changes to those files.
The vue-cli-service serve includes some options such as –open which
automatically opens your browser to http://localhost:8080/.
Project File Review
Now let’s look at the project files created
for us. When you open the movie-
reviews/frontend project folder in
VScode editor, you will find a couple of
files.
Our app lives in the src folder. All Vue
components, views, styles, images, and
anything else our app needs go here.
Other files outside of this folder are
meant to support building your app.
Project File Review
In the public folder, we have index.html,
our initial HTML template, and our entry
point to the application. This template
will be processed when we run the npm
run serve command, by a html-webpack-
plugin included by Vue.
Additionally, the Vue CLI will inject
some JavaScript and CSS links (which
are produced during the build process).
The key element of the index.html file is
a div with an id with value app. Here, the
Vue application will be mounted.
Project File Review
In the src folder, we have main.js that
run all the code needed to create our Vue
app.
It bootstraps the application’s root Vue
component App to run in the browser
(mounted over the index.html div app).
Creating a New Project with Vue CLI
A Vue Single File Component (SFC) has the following structure.

<template>
…
</template>
<script>
…
</script>
<style>
…
</style>
Creating a New Project with Vue CLI
As we can see, Vue SFC is a natural extension of the classic trio of
HTML, CSS, and JavaScript. Each *.vue file consists of three types of
top-level language blocks: <template>, <script>, and <style>:
• The <template> section defines the component's template. Here you
place HTML-based syntax
• The <script> section is a standard JavaScript module. It should export
a Vue component definition as its default export. Here you place your
component logic.
• The <style> section defines CSS associated with the component.
Creating a New
Project with Vue CLI
Vue components are basic building
blocks of Vue applications. Here is an
example of an SFC:
App.vue
Let’s check the App component.
The App component includes navigation (to the home page and the about page) in
the template section.
This navigation was included by default because we added the Vue Router library in
our initial project configuration.
At the end of the template, the App component uses the <router-view/> which
mounts different Vue views, based on the browser URL. The default route (“/”) is
linked to the Vue Home view (this link can be found in the src/router/index.js file).
The Home view can be found in the src/views/Home.vue file. Vue views are simply
SFCs linked to browser URLs by the Vue Router.
App.vue
The App component does not include a script section but contains a style section
which includes some custom CSS.
To recap, when you run the Vue application, src/main.ts will mount the App root
component (src/App.vue) in the public/index.html file.
The default route (“/”) will mount Home.vue view in <router-view/> of src/App.vue;
and you will get the welcome message.
Home.vue
The Home view displays a Vue logo and injects a HelloWorld component
(src/components/HelloWorld.vue). The HelloWorld component displays a welcome
message and some Vue documentation links.
Vue files located in src/components/* are reusable components that can be included
into one or several Vue views. Commonly, they represent a specific part of a Vue
view. All of them are considered Vue SFCs.
Add Bootstrap framework
We can use Bootstrap to make our UI look more professional.
Bootstrap (https://getbootstrap.com – fig. 5) is a library of reusable frontend
components that contain HTML, CSS, and JavaScript-based templates to help build
user interface components (like forms, buttons, icons) for web applications.
Add Bootstrap framework
To get started with Bootstrap, we need to reference bootstrap.css in our
public/index.html. Go to getbootstrap.com and click ‘Get started’, then copy the
bootstrap.min.css stylesheet link.
Paste the bootstrap.min.css link into your <head> of index.html. Besides, copy and
paste the link of the bootstrap.bundle.min.js Bootstrap JS bundle before the body
closing tag </body>.
Add Bootstrap framework
Let ’ s add a navigation header bar which allows a user to select different routes to
access different component views in the main part of the page. We will start by
creating some Vue component views and our router will load the different
components depending on the URL route a user selects.
Add Bootstrap framework
Bootstrap has different components that you can use. To use a component, go to the
Bootstrap documentation (getbootstrap.com), copy the component ’s markup and
edit it for your own purposes.
We will grab as a base a navbar component from Bootstrap
https://getbootstrap.com/docs/5.1/components/navbar/
Add Bootstrap framework
In the current navbar, we have four links (as shown in the below code). These links
use a predefined Vue Router component called router-link which enables user
navigation. The target location is specified with the to prop.
Add Bootstrap framework
The first link is the ( ‘ / ’ ) route with the Home view; the second is the (‘ /movies’)
route with the Movies view; the third is ( ‘ /about ’ ) route with the About view; and
the fourth is the ( ‘ /login ’ ) route with the Login view.
We will see how to connect these routes with their respective Vue views.
Defining our Routes
To enable routing between Vue views, we need to define our routes. We define our
routes in the src/router/index.js file. src/router/index.js should be existing because
we selected ‘Router’ to the question“ Check the features needed for your project:”
when we created our Vue project.
Even if we did not select ‘Router’, we can manually install the Vue Router library
and add src/router/index.js to our project.
src/router/index.js imports the Home and About views and establish the paths for
these routes:
• ‘/’ for the Home view,
• ‘/about’ for the About view.
Defining our Routes
We import createRouter and createWebHistory
from the Vue Router library which provides the
essential routing functionalities.
We then define an array of Routes definition
object called routes. Each route definition has at
least two properties, path - the unique path we
assign to our route and component which
specifies the associated component (commonly,
Vue views). Each route can also contain a name
which is a convenient way to identify a specific
route.
In our route definition, we specify our four
components (Vue views), Home, About, Movies
and Login.
Defining our Routes
Our route definition tells Vue that:
• if the path changes to ‘ / ’ , or ‘ /movies ’ , Vue should create an instance of
Movies view and render it in the DOM. E.g.: <router-link to="/movies"
class="nav-link active">Movies</router-link>
• if the path changes to ‘ /about ’ , Vue should create an instance of About view
and render it in the DOM. E.g.: <router-link to="/about" class="nav-link
active">About</router-link>
Defining our Routes
We pass in the routes array into the createRouter method. By default, we also pass
a createWebHistory method which will allow the URLs to look normal (remember
when we answer ‘ y ’ to the “Use history mode for router?” question in the Vue
project creation).

export default router;

We export Router so that we can import it in main.js. Note that routes array is
declared as a const which is a good practice so that no one will modify our routes
making our application more reliable.
Defining our Routes
Router View

To specify where we want Vue to render our requested component when the user
clicks on a router-link, we specify <router-view/> in the DOM. In our case, we
want to render the component below the navbar.

That is the reason why we have the <router-view/> in src/App.vue, below </nav>
‘About’ View and Linter
‘About’ View and Linter
In the script section, we added data(). The ‘data’ is an option for a component in
the form of a function. Vue calls this function as part of creating a new component
instance. It should return an object with properties, which Vue then wraps in its
reactivity system. The properties are then available in the component template
section. We can access these properties using the "Mustache" syntax (double curly
braces). E.g.:
{{ title }}
The mustache tag will be replaced with the value of the title property ‘About Us’.
It will also be updated whenever title changes (this feature is handy, and we will
take advantage of it in upcoming chapters).
Movie and Review Services: Connecting to
The Backend
To retrieve the list of movies and reviews from the database, we need to connect
to our backend server.
We will create two service classes for that.
A service is a class with a well-defined specific function your app needs. In our
case, our service is responsible for talking to the backend to get and save data.
Service classes provide their functionality to be consumed by components.
Movie and Review Services: Connecting to
The Backend
Vue views and components should be lightweight, mainly rendering views
supported by application logic.
They don’t fetch data from the server but rather delegate such tasks to services.
Before creating our services, we need to add a new project dependency called
Axios.
Axios is a very popular, promise-based HTTP client that sports an easy-to-use API
and can be used in both the browser and Node.js. With Axios, we will easily
consume our backend APIs. To install it, go to the frontend directory in the
Terminal and run:
npm install axios
Movie and Review Services: Connecting to
The Backend
Movie and Review Services: Connecting to
The Backend
We import the axios class to make requests to the server. The axios class
provides the get() method for getting a resource, post() for creating it,
put() for updating it, and delete() for deleting a resource.
The MovieService class contains functions which make the API calls to
the backend endpoints (we implemented earlier) and return the results.
Movie and Review Services: Connecting to
The Backend
Movies View
Let’s now implement the Movies view.
Remember that Vue views are meant to mainly render views supported
by application logic for better user experience.
They don’t fetch data from the backend but rather delegate such tasks to
services.
Movies View
Movies View
In the previous code, we used a Vue directive called v-model. v-model
create two-way data bindings on form input, textarea, and select
elements.
If we modify the input text (typing a value), that value will be
automatically associated with the titleToSearch property.
It also means if titleTosearch is modified, it will automatically show
in the input text. This is two-way data binding.
The same will happen for ratingToSearch property.
Movies View
Next, we have the ‘Select by Rating’ element, the dropdown field to
select a movie rating.
The select element uses another Vue directive called v-for.
We use the v-for directive to render a list of items based on an array.
v-for will iterate over the ratings and generate three select options.
Inside each select option, we use another Vue directive called v-bind
(shorthand is :attribute=‘value’). v-bind is used to bind attributes on
an element dynamically.
Movies View
<a v-on:click="filterMovies('rated')" class="btn btn-primary ms-4">
Filter
</a>
Next, we have the v-on directive. v-on attaches an event listener to the
element.
The event type is denoted by the argument. The expression can be a
method name.
The next code executes the filterMovies() method (defined previously)
when we click the ‘Filter’ link.
Movies View
We use the v-if directive to display the img element only if there is a
poster image. We do the same for the p element if it contains the movie
rating.