06 - Frameworks para Frontend

Frameworks para Frontend
Construcción de Software III
León Jaramillo
¿Qué es un framework?
• En el desarrollo de software, un framework es una estructura conceptual y
tecnológica de asistencia definida, normalmente, con artefactos o módulos
concretos de software, que puede servir de base para la organización y
desarrollo de software.
• Típicamente implementan patrones de desarrollo e incluyen diversos

componentes reutilizables de software.
• Dependiendo de sus enfoque pueden facilitar el desarrollo de la interfaz

gráfica de una aplicación (frontend), la estructuración del backend de la
misma (y de su proceso de desarrollo), proveer componentes útiles para un
dominio específico, entre otras tareas.
Frameworks para Frontend 2

Frameworks para frontend
• Existen múltiples frameworks para su uso en el frontend de un sitio
web
• Estos mayormente ayudan en el desarrollo con Javascript y CSS

• Los frameworks de Javascript buscan ayudar a organizar el código Javascript
para que sea más mantenible y para que se ajuste a buenas prácticas de
desarrollo, además que se pueda ejecutar sin problema en cualquier
navegador.
• Los frameworks de CSS buscan facilitar la gestión del, a veces, saturado
código CSS, además permite el desarrollo de aplicaciones responsive más
fácilmente.
Frameworks para frontend
Javascript CSS
• Angular.js • Bootstrap
(https://angularjs.org/) (http://getbootstrap.com/)
• React.js • Semantic UI (https://semantic-
(https://facebook.github.io/reac ui.com/)
t/) • Foundation
• Vue.js (https://vuejs.org/) (http://foundation.zurb.com/)
• Backbone.js • Material-UI
(http://backbonejs.org/) (http://www.material-ui.com/)
Y muchos más… Hay opciones para cada tipo de proyecto, por lo que conviene una revisión detallada

• jQuery no es un framework de Javascript
• jQuery es una librería de Javascript (https://jquery.com/)
• Simplifica enormemente la programación en Javascript
• Por lo tanto, facilita la manipulación de documentos HTML
• Lo anterior incluye: la manipulación del documento, el manejo de eventos, las

animaciones y el manejo de navegadores (así como el manejo de AJAX)
• Muchos frameworks de Javascript y de CSS usan jQuery “tras bambalinas”

¿Cómo puedo incluir jQuery en un proyecto
web?
Existen (al menos) dos formas:
1. Instalando jQuery localmente:

1. Se descarga la librería (https://code.jquery.com/jquery-3.6.0.min.js)
2. Se incluye el archivo .js en el documento HTML tal como lo haríamos con cualquier
otro archivo de Javascript
2. Usando un CDN:
1. En este caso no es necesario descargar el archivo .js, sino que se puede incluir en
el documento HTML directamente desde sitios CDN en internet
2. Por ejemplo, incluyendo el CDN de Google para jQuery:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jq
uery.min.js"></script>

Sintaxis de jQuery
jQuery está pensado para seleccionar uno o varios elementos de HTML
y realizar acciones sobre ellos. Esto da lugar a la siguiente sintaxis
básica:
$(selector).acción()
• $ permite el acceso de forma abreviada a jQuery

• El selector permite obtener la referencia a elementos HTML (tal
como en Javascript sin framework)
• La acción es el método que se va a ejecutar sobre el elemento
Sintaxis de jQuery
Por ejemplo:
• $(this).hide(): Oculta el element actual.

• $("p").hide(): Oculta todos los elementos <p>.
• $(".test").hide(): Oculta todos los elementos de clase test.
• $("#test").hide(): Oculta el element con el ID test.
• Y muchos selectores más
(https://www.w3schools.com/jquery/jquery_selectors.asp)
No olvidar que el código de jQuery es código Javascript, por lo que deberá

ubicarse donde escribimos normalmente el código Javascript, simplemente
estamos usando una librería

Los eventos en jQuery
El manejo de eventos en jQuery se realiza tal como se muestra a continuación:
$(document).ready(function(){
$("#miboton").click(function(){
$(".ocultable").hide();
alert("Adios Ocultable!");
});
});
Notar:
• El código va dentro del evento Document Ready
• Se asigna un procedimiento al evento click de un elemento de ID miboton
• Si se hace clic en dicho elemento, se ocultarán los elementos de clase ocultable y se
desplegará un alert

Más de jQuery
Algunos eventos Algunas acciones

• click • hide()
• dblclick • show()
• mouseenter • toggle()
• mouseleave • slideDown()
• keypress • slideUp()
• submit • slideToggle()
• change • html()
• Es un framework de Javascript para la creación de interfaces gráficas.
• Las vistas se definen de forma declarativa.
• Las aplicaciones desarrolladas con React están basadas en componentes.
• Además del frontend, React también puede ser usado en el backend

mediante Node y en desarrollo de aplicaciones móviles mediante React
Native.
• Para ver más, puede acceder a: https://es.reactjs.org/

• Es un framework de Javascript que permite el desarrollo de aplicaciones
web single page.
• Está escrito en Typescript y es mantenido por Google.
• Soporta Angular Universal, que permite correr aplicaciones de Angular en

servidores.
• La base del framework son los denominados componentes.
• Para ver más, puede acceder a: https://angular.io/

Vue.js
• Es un framework de Javascript progresivo, es decir, de adopción
incremental, y orientado a la creación de interfaces gráficas.
• Puede ser utilizado como una librería o como un framework en toda

su potencia.
• Busca ser un framework ligero.
• Para ver más, puede acceder a: https://vuejs.org/

Bootstrap
• Bootstrap es un framework de CSS (http://getbootstrap.com/)
• Permite el desarrollo de aplicaciones web listas para su visualización en

dispositivos móviles, entre otros
• Facilita el desarrollo de sitios web responsive, es decir, cuya interfaz gráfica se

adapta a cualquier tamaño de pantalla de manera fluida
• Incluye plantillas de diseño en HTML y CSS para diferentes componentes web

como tipografía, formularios, botones, entre otros componentes
• Actualmente goza de una enorme popularidad

¿Cómo puedo incluir Bootstrap en un
proyecto web?
Existen también, al menos, dos formas:
1. Instalándolo localmente:
1. Se descarga la librería (https://github.com/twbs/bootstrap/releases/download/v4.6.0/bootstrap-4.6.0-dist.zip)
2. Se descargan las librerías necesarias para el funcionamiento de Bootstrap: jQuery y Popper.js
3. Se incluyen los archivos .js y .css en el documento HTML
2. Usando el CDN:
1. Se incluyen los archivos necesarios usando el CDN de Bootstrap:
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"></script>
En este caso tampoco se debe olvidar incluir jQuery y Popper.js, ya sea mediante CDN o mediante los archivo.js descargados

¿Qué debe tener además la página que va a
usar Bootstrap?
• El DOCTYPE de HTML 5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
</head>
</html>

Ejemplo Básico
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor..</p>
<p>Ut enim ad..</p>
</div>
<h3>Column 2</h3>
<p>Ut enim ad..</p>
</div>
<h3>Column 3</h3>
<p>Ut enim ad..</p>
</div>
</div>
</div>

Recursos Extra
• Sitio oficial de jQuery: https://jquery.com/
• Sitio oficial de Bootstrap: http://getbootstrap.com/
• Tutoriales oficiales
• jQuery: http://learn.jquery.com/
• Bootstrap: https://getbootstrap.com/docs/4.6/getting-started/introduction/
• Cursos de W3Schools
• jQuery: https://www.w3schools.com/jquery/
• Bootstrap: https://www.w3schools.com/bootstrap/

06 - Frameworks para Frontend

Cargado por

Copyright:

Formatos disponibles

06 - Frameworks para Frontend

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

06 - Frameworks para Frontend

Cargado por

Copyright:

Formatos disponibles

Frameworks para Frontend

Construcción de Software III

• Típicamente implementan patrones de desarrollo e incluyen diversos

• Dependiendo de sus enfoque pueden facilitar el desarrollo de la interfaz

Frameworks para Frontend 2

• Estos mayormente ayudan en el desarrollo con Javascript y CSS

Frameworks para Frontend 4

• jQuery es una librería de Javascript (https://jquery.com/)

• Simplifica enormemente la programación en Javascript

• Por lo tanto, facilita la manipulación de documentos HTML

• Lo anterior incluye: la manipulación del documento, el manejo de eventos, las

• Muchos frameworks de Javascript y de CSS usan jQuery “tras bambalinas”

Frameworks para Frontend 5

1. Instalando jQuery localmente:

Frameworks para Frontend 6

• $ permite el acceso de forma abreviada a jQuery

• $(this).hide(): Oculta el element actual.

No olvidar que el código de jQuery es código Javascript, por lo que deberá

Frameworks para Frontend 8

Frameworks para Frontend 9

Algunos eventos Algunas acciones

• Las vistas se definen de forma declarativa.

• Las aplicaciones desarrolladas con React están basadas en componentes.

• Además del frontend, React también puede ser usado en el backend

• Para ver más, puede acceder a: https://es.reactjs.org/

Frameworks para Frontend 11

• Está escrito en Typescript y es mantenido por Google.

• Soporta Angular Universal, que permite correr aplicaciones de Angular en

• La base del framework son los denominados componentes.

• Para ver más, puede acceder a: https://angular.io/

Frameworks para Frontend 12

• Puede ser utilizado como una librería o como un framework en toda

• Busca ser un framework ligero.

• Para ver más, puede acceder a: https://vuejs.org/

• Permite el desarrollo de aplicaciones web listas para su visualización en

• Facilita el desarrollo de sitios web responsive, es decir, cuya interfaz gráfica se

• Incluye plantillas de diseño en HTML y CSS para diferentes componentes web

• Actualmente goza de una enorme popularidad

Frameworks para Frontend 14

Frameworks para Frontend 15

Frameworks para Frontend 16

Frameworks para Frontend 17

Frameworks para Frontend 18

También podría gustarte