2021 Año de homenaje
al premio Nobel de medicina
Dr. César Milstein
Módulo 3 – Desarrollo Front End dinámico 1
Módulo 3 – Desarrollo Front End dinámico
Índice
Introducción
Framework vs Librería 3
¿Qué es Back-end? 5
¿Qué es Front-end? 6
Single Web Applications
Single Web Applications 7
Modelo Vista Controlador (MVC) 14
Presentación de Angular
¿Por qué Angular? 18
Instalación de Angular 19
Estructura de un proyecto Angular 20
Explorando las piezas de Angular
Arquitectura Angular 23
Módulos en Angular 24
Componentes en Angular 26
Templates, Plantillas o Vistas en Angular 31
Expresiones y Pipes en Angular 33
Directivas en Angular 34
Databinding en Angular 38
Servicios en Angular 41
Sistema de Routing en Angular 44
Trabajando con Angular
Sesión de Usuario con Angular 52
2021 Año de homenaje
al premio Nobel de medicina
Dr. César Milstein
Módulo 3 – Desarrollo Front End dinámico 2
Formularios en Angular 59
Testing en Angular 66
Primera app con Angular
Crear Aplicación con Angular CLI 75
2021 Año de homenaje
al premio Nobel de medicina
Dr. César Milstein
Módulo 3 – Desarrollo Front End dinámico 3
Framework vs Libreria
En este módulo veremos las diferencias entre una librería y un framework ya que
es importante entender porque a veces se habla de una cosa o la otra, y qué
alcances tienen en cada caso para nuestro trabajo como desarrolladores. Es
importante de aclarar que, si googleas, es común encontrar en este contexto, la
Biblioteca como sinónimo de Librería
¿Qué es una librería?
Una librería normalmente proporciona una serie de funciones y métodos muy
concretos para simplificar tareas complejas. Estas funciones y métodos se pueden
utilizar sin necesidad de adaptar/modificar nuestra estructura de aplicación.
Un ejemplo podría ser una librería matemática que ofrece funciones avanzadas
para cálculos estadísticos. JQuery es otro ejemplo, es una librería que proporciona
funciones sencillas para manejo del DOM, para comunicación AJAX y algunas
otras utilidades.
Otro ejemplo con jQuery sería si se quisiera realizar un efecto de fade
(desvanecer) sobre un elemento del DOM en vez de desarrollar un código en CSS
y/o javascript para lograr el objetivo, simplemente podemos usar el método
ofrecido por la librería
$(selector).fadeIn(velocidad, función de callback);
¿Qué es un Framework?
Los frameworks son la base sobre la cual los desarrolladores crean programas
para plataformas específicas. Estos están diseñados para disminuir la cantidad de
problemas que enfrenta un programador durante el desarrollo. Los framework
pueden tener funciones y objetos definidos o no definidos que el programador
puede usar o sobrescribir para crear una aplicación. La tarea principal de un
framework es proporcionar un código y metodología de trabajo
estandarizado que se pueda aplicar a una variedad de proyectos de
aplicaciones. Los Framework tienen un alcance más amplio e incluyen casi todo
lo necesario para hacer una aplicación. Algunos de los framework populares en
Javascript son Node.js y AngularJS.
Libreria vs Framework: la diferencia clave
Tanto la librería como el framework desempeñan un papel vital en el desarrollo de
software. Una librería realiza una operación específica o bien definida, mientras
2021 Año de homenaje
al premio Nobel de medicina
Dr. César Milstein
Módulo 3 – Desarrollo Front End dinámico 4
que un framework proporciona un esqueleto donde los desarrolladores definen el
contenido de la aplicación de la operación.
Una de las diferencias clave es la Inversión de control. Cuando llamamos a una
función o un método desde una librería, se tiene el control. Con un framework se
invierte la situación. En la mayoría de los casos, el framework solo proporciona el
concepto. El trabajo de la aplicación es definir mejor la funcionalidad para los
usuarios finales.
En una librería el código del desarrollador es el que está al mando y utiliza las
funciones de la librería cuándo y cómo quiere. En un framework, éste es el que
está al mando y el código desarrollado debe encajarse en su estructura y normas.
Otra gran diferencia es que un framework utiliza librerías para facilitar las tareas de
desarrollo y las propias funcionalidades que nos ofrece el framework.
En resumen
2021 Año de homenaje
al premio Nobel de medicina
Dr. César Milstein
Módulo 3 – Desarrollo Front End dinámico 5
Libreria vs framework. (2021).
¿Que es Back-end?
Backend
El Backend es aquello que se encuentra del lado del servidor y se encarga
de interactuar con bases de datos, verificar maniobras de sesiones de usuarios,
montar la página en un servidor y servir todas las vistas creadas por el
desarrollador frontend.
En este caso el número de tecnologías es mucho menos limitado, puesto que la
programación backend puede alcanzar lenguajes como PHP, Python, .NET, Java,
etc., y las bases de datos sobre las que se trabaja pueden ser SQL, MongoDB,
MySQL, entre otras.
2021 Año de homenaje
al premio Nobel de medicina
Dr. César Milstein
Módulo 3 – Desarrollo Front End dinámico 6
La idea de esta abstracción es mantener separadas las diferentes partes de un
sistema web o software para tener un mejor control. En pocas palabras, el objetivo
es que el frontend recoja los datos y el backend los procese.
Estas dos capas que forman una aplicación web son independientes entre sí (no
comparten código), pero intercambian información. Esta división permite que el
acceso a las bases de datos solo se haga desde el backend y el usuario no tenga
acceso al código de la aplicación, mientras que la programación del lado del cliente
permite que el navegador pueda, por ejemplo, controlar dónde el usuario hace clic
o acceder a sus ficheros.
Con esta separación de entornos el usuario de una aplicación web lo que hace es,
por ejemplo, iniciar sesión escribiendo su usuario y contraseña en un formulario; a
continuación, los datos se envían y el backend toma esta información que viene
desde el HTML y busca las coincidencias de usuario en la base de datos con una
serie de procesos invisibles para el usuario. En este punto, el servidor mandaría un
mensaje al frontend dándole acceso (o no) a la aplicación.
Lenguajes Web Backend
Encontramos varios, por ejemplo, PHP, Python, Rails, Go, C#, Java, Node JS
(JavaScript) entre otros. Como vemos, mientras que para el frontend se
acostumbra a trabajar solo con tres lenguajes, en el backend hay unos cuantos
más. Por suerte, un desarrollador backend no necesita saberlos todos.
Quizás notaste que tenemos JavaScript tanto por el lado del cliente como por el
lado del servidor. JavaScript se creó originalmente como lenguaje para el frontend,
pero en los últimos años se ha creado su lugar dentro del backend con NodeJS, un
motor que interpreta JavaScript en el servidor sin necesidad de un navegador. Esto
no quiere decir que el JavaScript que tenemos en el cliente tenga alguna conexión
con el que se encuentra en el servidor: cada uno corre por su parte de manera
independiente. El JavaScript del cliente corre en el navegador y no tiene ningún
enlace ni ninguna conexión con el que hay en el servidor y no le interesa saber
cómo está montada la arquitectura del servidor ni cómo se conecta a la base de
datos.
Ahora se puede utilizar el mismo lenguaje en todos los contextos del desarrollo:
JavaScript en el cliente de escritorio (DOM), en el cliente móvil (Cordova, React
Native), en el servidor (Node.js) o en la BBDD (MongoDB). La posibilidad de
trabajar frontend y backend con un mismo lenguaje desde el punto de vista del
desarrollador es muy cómoda, especialmente para aquellos que trabajan ambos
mundos.
En cuanto a la tecnología, las herramientas que se utilizan en el backend son:
editores de código, compiladores, algunos depuradores para revisar errores y
seguridad, gestores de bases de datos entre otras cosas.
2021 Año de homenaje
al premio Nobel de medicina
Dr. César Milstein
Módulo 3 – Desarrollo Front End dinámico 7
¿Qué es Front-end?
Introducción
Ya se ha mencionado que un desarrollador Full Stack es un perfil híbrido que
puede desenvolverse tanto en el front-end (parte visual) como en el back-end
(parte lógica) de un desarrollo web. Un Full Stack Developer cuenta con una faceta
integral y posee conocimientos y herramientas que le permiten afrontar cualquiera
de las etapas de un proyecto web. Los desarrolladores web lo hacen a través de
diversos lenguajes de programación. El lenguaje que usan en cada momento
depende del tipo de tarea que están haciendo. Pero ¿qué es exactamente
Frontend?
Frontend
El Frontend son aquellas tecnologías de desarrollo web del lado del cliente, es
decir, las que corren en el navegador del usuario y que son básicamente tres las
que veremos: HTML, CSS y JavaScript. El Desarrollador Frontend es responsable
de la interacción directa del usuario, por lo que se desarrolla cuidando el lado más
visual de las aplicaciones, como el cuidado de colores, botones, enlaces, menús y
todo lo que vemos en una página cuando estamos accediendo. Precisamente, un
profesional frontend necesita tener un ojo constante para la mejor experiencia de
usuario
El frontend se enfoca en el usuario, en todo con lo que puede interactuar y lo que
ve mientras navega. Una buena experiencia de usuario, inmersión y usabilidad son
algunos de los objetivos que busca un buen desarrollador frontend, y hoy en día
hay una gran variedad de Frameworks, preprocesadores y librerías que ayudan
en esta tarea.
Lenguajes Web Frontend
A pesar de que hay varios lenguajes que se usan en el frontend, nosotros nos
basaremos en tres, HTML, CSS y JavaScript, aunque HTML y CSS no son
lenguajes de programación, no se debe confundir lenguajes de programación
como ejemplo JavaScript, ActionScript o Java, con lenguajes de marcado como
HTML o lenguaje de hojas de estilo cómo CSS. También existen otros lenguajes
frontend, como por ejemplo ActionScript, Java, Silverlight, VBScript u otros
lenguajes XML, pero se usan poco en comparación con HTML, CSS y JavaScript.
HTML es un lenguaje de marcado de los contenidos de un sitio web, es decir, para
designar la función de cada elemento dentro de la página: titulares, párrafos, listas,
tablas, etc. Es el esqueleto de la web y la base de todo el frontend.
CSS es un lenguaje de hojas de estilo creado para controlar la presentación de la
página definiendo colores, tamaños, tipos de letras, posiciones, espaciados, etc.
2021 Año de homenaje
al premio Nobel de medicina
Dr. César Milstein
Módulo 3 – Desarrollo Front End dinámico 8
También existen frameworks para CSS muy famosos como Bootstrap y foundation,
los cuales aportan mucho para la creación de UI (interfaz de usuario).
JavaScript es un lenguaje de programación interpretado que se encarga del
comportamiento de una página web y de la interactividad con el usuario.
Aparte, junto al cliente también tenemos los frameworks (Angular o React), las
librerías, los preprocesadores, los plugins... pero todo gira alrededor de HTML,
CSS y JavaScript.
Single Web Applications
Conoceremos las dos arquitecturas más usadas para el desarrollo de páginas
webs a fin de entender el nuevo paradigma de las aplicaciones webs. La evolución
de la tecnología y los dispositivos desde los cuales nos conectamos a internet han
marcado un punto de inflexión, abriendo paso a una nueva forma de construir e
interactuar con las páginas webs.
¿Qué es una aplicación SPA?
Las Multi Page Application o MPA hacen referencia a Arquitecturas Web Clásicas
en donde uno dispone de múltiples páginas HTML y cada una carga diferentes
contenidos apoyándose en la navegación contra el servidor. Es decir, cada página
muestra su contenido y se conecta mediante links con las demás y todas son
generadas desde el servidor.
A diferencia de las tradicionales MPA (múltiple page application), las aplicaciones
SPA (single page application) consisten en aplicaciones de una sola página por lo
que todas vistas de la misma se generan dinámicamente gracias a la capacidad de
javascript para manipular el DOM. De esta manera, no recarga el navegador cada
vez que el usuario hace una petición lo que permite que ésta sea óptima en
rendimiento, mantenimiento y escalabilidad.
2021 Año de homenaje
al premio Nobel de medicina
Dr. César Milstein
Módulo 3 – Desarrollo Front End dinámico 9
SPA vs MPA. (2021).
Es decir, que en las aplicaciones SPA, encuentras toda la funcionalidad que hace
a una aplicación completa y en una única página web (index.html). Esto es
posible, gracias al sistema de ruteo que propone tanto Angular como otros
frameworks de desarrollo Frontend, el cual permite la generación dinámica de la
página web.
Spa content update. (n.d.).
En dicha imagen, podemos observar la generación dinámica de la página
index.html dónde dashboard, customer y orders, que son secciones dentro del
DOM, son generados dinámicamente según la petición del usuario.
En la siguiente imagen podemos clarificar un poco más cómo funciona la lógica de
consultas en cada caso. Observemos que en el caso de la MPA luego de recibir el
HTML se generan consultas POST que también podrían ser GET, y el servidor
retorna un nuevo HTML. Mientras que, en la SPA al llegar el primer HTML desde el
2021 Año de homenaje
al premio Nobel de medicina
Dr. César Milstein
Módulo 3 – Desarrollo Front End dinámico 10
servidor, las siguientes llamadas se realizan mediante AJAX y que el servidor
retorna un JSON. Eso se refleja del lado del cliente, como se dijo antes, en que no
haya un refresco de la web completa sino de algún componente en específico.
Spa content update. (n.d.)
En la imagen, podemos observar la generación dinámica de la página index.html
dónde dashboard, customer y orders, que son secciones dentro del DOM,
generados dinámicamente según la petición del usuario.
Características funcionales de una SPA:
Las SPA tiene 3 detalles funcionales que las caracterizan y son:
1. Punto de entrada central: Un punto de entrada único que se genera
dinámicamente según la petición del usuario.
2. Página fija, Vistas cambiantes: Como en el caso de una aplicación de
escritorio, nos mantenemos en un “marco único” y fijo, mientras que “vistas
dinámicas” van ofreciéndonos las distintas posibilidades del uso y
navegación.
3. Página fija, no URL fija: Es posible que la dirección URL sufra cambios en
base a las actividades de uso de la plataforma y vaya modificándose,
aunque ese “marco único” se mantenga fijado. Esto es un tanto
2021 Año de homenaje
al premio Nobel de medicina
Dr. César Milstein
Módulo 3 – Desarrollo Front End dinámico 11
reduccionista (existen SPA que no transforman sus direcciones), pero es
útil para comprender su mecánica.
Viajar ligera de equipaje
En las SPA, las peticiones cliente-servidor tienden a ser más laxas y livianas que
en las aplicaciones tradicionales MPA dado que sólo consisten en la transmisión
de datos, sólo datos. Es importante agregar en este punto, que muchos procesos
quedan del lado del cliente (navegador web) gracias a herramientas que provee
Angular tales como el LocalStorage.
No todos es color de rosas, algunas desventajas del enfoque SPA son:
● Se pierde el SEO, aunque hay formas de evitarlo pero no es algo natural en
un SPA ya que los robots no leen o interpretan contenido cargado en
segundo plano.
● La primera carga puede tardar un poco ya que el peso del proyecto estará
en función al tamaño de este y también existen estrategias para resolver
este problema.
● Curva de aprendizaje, nos obliga aprender nuevos frameworks o librerías
para evaluar la más adecuada para nuestros proyectos.
MPA Híbridas
En muchas ocasiones también nos podemos encontrar con situaciones de
hibridación en la cual disponemos de una aplicación MPA. Pero que contiene
características de SPA cómo puede ser la construcción de componentes con
React.js aunque mantiene el enfoque multipágina.
Varias vistas, no varias páginas
Las aplicaciones SPA consisten de un único documento HTML y muchas vistas ya
que existen distintas partes o componentes, que controlan y definen una parte en
pantalla o vista. Por ejemplo, en la siguiente imagen, los componentes
individuales definen y controlan cada una de las vistas como sigue:
Spa content update. (n.d.).
2021 Año de homenaje
al premio Nobel de medicina
Dr. César Milstein
Módulo 3 – Desarrollo Front End dinámico 12
Entonces del ejemplo anterior podemos inferir que existe una jerarquía de
componentes tal y como se muestra en la siguiente imagen:
Plantillas y vistas
Ahora los componentes requieren de un template o plantilla html para que las
vistas puedan ser interpretadas por el navegador web. Un template es un
bloque HTML que le dice al framework, en este caso Angular, cómo renderizar o
dibujar el componente definiendo así la vista. El template es código HTML dotado
de la capacidad de interpretar o agregar sintaxis propia de cada framework, en
Angular, por ejemplo la inclusión de lógica y bucles (ifs y fors), el sistema de
binding que veremos más adelante y que permite enlazar las variables al código
HTML.
2021 Año de homenaje
al premio Nobel de medicina
Dr. César Milstein
Módulo 3 – Desarrollo Front End dinámico 13
Angular Template. (n.d.).
Como se dijo antes, si tenemos una jerarquía de componentes, también podemos
pensar que existe una jerarquía de vistas, las cuales contienen vistas embebidas o
anidadas, o incluso dentro de otros componentes. Es importante empezar a pensar
cómo un proyecto es un árbol de componentes y vistas que se relacionan entre sí.
Luego veremos que, a su vez, podemos agrupar estos componentes y vistas en
módulos para su reutilización gracias al uso de Angular.
Árbol de componentes. (n.d.).
¿En qué lenguaje de programación se hacen las SPA?
Una SPA se creará siempre en Javascript. Ya que, al ser una aplicación web
ejecutada del lado del cliente, no hay otro lenguaje que pueda hacer eso. A esto
habrá que sumarle, lógicamente, el HTML y CSS.
2021 Año de homenaje
al premio Nobel de medicina
Dr. César Milstein
Módulo 3 – Desarrollo Front End dinámico 14
Dentro de Javascript, contaremos con multitud de librerías y frameworks que nos
facilitarán el desarrollo de las SPA. Algunas de las más usadas son:
● AngularJS
● Angular
● VUE
● React
● EmberJS
● Polymer
Este listado son las librerías y frameworks más comunes, aunque hay muchos
otros. Escoger una librería y un framework dependerá, básicamente, de tus gustos,
la experiencia que tengas con los mismos, el tamaño de la aplicación a
desarrollar…
De todos modos, esto sólo aplica al front-end. Si queremos ampliar la pregunta al
lado del back-end, es decir, del servidor, nos serviría cualquier lenguaje de back-
end para producir la parte del servidor. Lo que tendríamos que hacer es crear un
API REST que devuelve el JSON necesario para alimentar de datos a la SPA. Es
decir, la SPA nos dará igual cómo esté desarrollada del lado del back-end, es
totalmente independiente a este.
Ventajas de las páginas web SPA
● Desarrollar una página web SPA tiene muchas ventajas frente al MPA.
Algunas de ellas son:
● Se tratan de aplicaciones fáciles de desarrollar, desplegar y depurar. Al
contar con infinitos frameworks y librerías, será muy sencillo de desarrollar.
● Nos muestran el contenido de forma sencilla y elegante al cargar todo el
contenido en una única página.
● Además, ejecutando la lógica del lado del navegador, hace que las
interacciones del usuario se ejecuten más rápido.
● La analítica de la web es mucho más sencilla puesto que sólo analiza una
única página.
● Muy útiles para la creación de landing page
Desventajas de las páginas web SPA
● El SEO no es tan fácil como en una MPA, aunque esto es cada vez más
sencillo de optimizar y no supone tanto problema como hace un tiempo.
● En sitios muy grandes, el mantenimiento del código puede ser algo
complicado y hay que tener desde el principio muy clara la estructura de la
página.
● Al tener el código fuente directamente en el navegador, si no seguimos
buenas prácticas, la seguridad del sitio se podría ver expuesta.
● Aunque las SPA son muy rápidas, al cargar la página por primera vez de
forma completa, esto hace que esta carga sea algo lenta, lo que puede
ahuyentar posibles clientes. De todos modos, actualmente, hay métodos
para mejorar esta velocidad de carga, que veremos en otro post.
2021 Año de homenaje
al premio Nobel de medicina
Dr. César Milstein
Módulo 3 – Desarrollo Front End dinámico 15
Conclusiones sobre las SPA
En conclusión, una MPA consiste en que cada vez que visitemos una página
específica de una web se cargará desde cero. Mientras que, en las SPA, al visitar
la página por primera vez se cargará completamente su estructura y, cada vez que
hagamos click en un enlace interno, sólo solicitaremos al servidor el contenido ya
que HTML, CSS y JS están ya cargados. La gran diferencia, entonces, entre una
multipage application y una single page application es a la hora de navegar por la
página web. Mientras que, con una SPA, por cada enlace dentro de la web solo se
cargará el contenido, que es lo que nos envía el servidor vía ajax; con una MPA se
cargará todo desde cero.
Modelo Vista Controlador (MVC)
El modo MVC (Model-View-Controller) es un modo de arquitectura de software en
ingeniería de software que divide el sistema de software en tres partes básicas:
Modelo, Vista y Controlador.
El propósito del modo MVC es lograr un diseño de programa dinámico, simplificar
la posterior modificación y expansión del programa y hacer posible la reutilización
de una determinada parte del programa. Además, el modo MVC hace que la
estructura del programa sea más intuitiva al simplificar la complejidad. Si bien el
sistema de software separa sus propias partes básicas, también le da a cada parte
básica sus funciones. Los profesionales pueden utilizar su propia experiencia para
agrupar grupos relacionados: Modelo: Las funciones que deben tener los
programadores al escribir programas (para lograr algoritmos, etc.), y los expertos
en bases de datos realizan la gestión de datos y el diseño de bases de datos (que
pueden lograr funciones específicas); Controlador: Responsable de reenviar
solicitudes y procesar solicitudes; Vista: los diseñadores de interfaces llevan a
cabo el diseño de interfaces gráficas.
El patrón de diseño Model-View-Controller (MVC) asigna a los objetos de una
aplicación uno de los tres roles: modelo, vista o controlador. El patrón define no
solo los roles que desempeñan los objetos en la aplicación, sino que también
define la forma en que los objetos se comunican entre sí. Cada uno de los tres
tipos de objetos está separado de los demás por límites abstractos y se comunica
con objetos de los otros tipos a través de esos límites. La colección de objetos de
un determinado tipo MVC en una aplicación a veces se denomina capa,por
ejemplo, capa de modelo.
MVC es fundamental para un buen diseño para una aplicación. Los beneficios de
adoptar este patrón son numerosos. Muchos objetos en estas aplicaciones tienden
a ser más reutilizables, y sus interfaces tienden a estar mejor definidas. Las
aplicaciones que tienen un diseño MVC también son más fácilmente extensibles
que otras aplicaciones. Además, muchas tecnologías y arquitecturas se basan en
MVC y requieren que sus objetos personalizados desempeñen uno de los roles de
MVC.
Este documento contiene más páginas...
Descargar Completo
mod3arg.pdf
Estamos procesando este archivo...
Lamentablemente la previsualización de este archivo no está disponible. De todas maneras puedes descargarlo y ver si te es útil.
Descargar
Estamos procesando este archivo...
Lamentablemente la previsualización de este archivo no está disponible. De todas maneras puedes descargarlo y ver si te es útil.