Want to create interactive content? It’s easy in Genially!

Get started free

U3 FRAMEWORKS FRONTEND

HERNANDEZ QUINTANA JESUS INGENIER�A EN TECNOLOG�AS DE LA INFORMACI�N Y COMUNICACIONES

Created on July 10, 2023

Start designing with a free template

Discover more than 1500 professional designs like these:

Audio tutorial

Pechakucha Presentation

Desktop Workspace

Decades Presentation

Psychology Presentation

Medical Dna Presentation

Geometric Project Presentation

Transcript

Tecnológico Nacional de México Instituto Tecnológico de Pachuca

Ingenierías en Tecnologías de la Información y Comunicación

PROGRAMACIÓN WEB

U3 FRAMEWORKS FRONTEND

Alumno: Jesús Hernández Quintana No. Control. 18200764 Profesor: Dr. Arturo González Cerón Fecha: 10 de julio de 2023

Introducción

El frontend, también conocido como desarrollo frontend o desarrollo del lado del cliente, se refiere a la parte de la creación de sitios web o aplicaciones que se enfoca en la interfaz de usuario y la experiencia visual. Es el encargado de diseñar, desarrollar y implementar los elementos visuales con los que interactúan los usuarios. La importancia del frontend radica en que es la cara visible de un sitio web o una aplicación. Es la primera impresión que los usuarios tienen al visitar un sitio y juega un papel crucial en la forma en que perciben y utilizan una plataforma en línea. Un frontend bien diseñado y fácil de usar mejora la experiencia del usuario, aumenta la retención de visitantes y contribuye al éxito de un proyecto en línea.

01.Bootstrap

Bootstrap es un framework de CSS y JavaScript que facilita la creación de sitios web receptivos y móviles. Ofrece una amplia gama de componentes y estilos predefinidos.

Características

Componentes utilizables, unidireccionalidad de datos, Virtual DOM, enfoque basado en JavaScript, gran ecosistema de librerías y herramientas.

vENtajas

Desventajas

  • Fácil de usar.
  • Desarrollo rápido.
  • Diseño receptivo.
  • Gran comunidad de usuarios.
  • Compatibilidad entre navegadores.
  • Diseños genéricos.
  • Dificultad para personalizar completamente.
  • Dependencia de clases de utilidad.

Sitios famosos que lo utilizan

Airbnb

Spotify

LinkedIn

Netflix

02.React

React.js es un framework de JavaScript de código abierto que permite construir interfaces de usuario interactivas y reutilizables.

Características

Grid system, componentes predefinidos, tipografía, utilidades CSS, soporte receptivo, documentación completa.

vENtajas

Desventajas

  • Eficiente rendimiento gracias al Virtual DOM.
  • Desarrollo rápido.
  • Amplia comunidad y soporte.
  • Capacidad de construir aplicaciones nativas (React Native).
  • Curva de aprendizaje empinada para principiantes.
  • Gestión compleja del estado en aplicaciones grandes.

Sitios famosos que lo utilizan

Facebook

Instagram

WhatsApp

Airbnb

03.Angular

Angular es un framework completo de JavaScript para la construcción de aplicaciones web. Utiliza TypeScript y ofrece una arquitectura basada en componentes.

Características

TypeScript, arquitectura MVVM, enlace de datos bidireccional, inyección de dependencias, CLI integrado, pruebas unitarias incorporadas.

vENtajas

Desventajas

  • Potente para aplicaciones complejas.
  • Estructura bien definida.
  • Mantenimiento fácil.
  • Gran ecosistema.
  • Alta escalabilidad.
  • Curva de aprendizaje pronunciada.
  • Archivos grandes.
  • Rendimiento ligeramente más bajo en comparación con otros frameworks.

Sitios famosos que lo utilizan

Google

YouTube

Microsoft

IBM

04.Ember.js

Ember.js es un framework de JavaScript que se centra en la creación de aplicaciones web ambiciosas.

Características

Convenciones sobre configuración, arquitectura basada en componentes, herramientas integradas, enfoque en la productividad del desarrollador.

vENtajas

Desventajas

  • Productividad.
  • Estructura bien definida.
  • Gran comunidad.
  • Herramientas incorporadas.
  • Escalabilidad.
  • Curva de aprendizaje empinada.
  • Curva de rendimiento al principio.
  • Menor popularidad en comparación con otros frameworks.

Sitios famosos que lo utilizan

Apple Music

Twitch

LinkedIn

Netflix

05.Vue.js

Vue.js es un framework progresivo de JavaScript para construir interfaces de usuario interactivas.

Características

Enfoque basado en componentes, Virtual DOM, curva de aprendizaje suave, fácil integración con proyectos existentes.

vENtajas

Desventajas

  • Fácil de aprender y usar.
  • Tamaño pequeño.
  • Rendimiento rápido.
  • Buena documentación,
  • Comunidad activa.
  • Menor cantidad de recursos y bibliotecas en comparación con React y Angular.

Sitios famosos que lo utilizan

Xiaomi

Alibaba

Nintendo

Adobe

Conclusiones

En esta actividad se ha analizado el desarrollo front-end y su importancia a la hora de crear un sitio web o una aplicación. Se entiende que el front-end es la cara visible de un sitio web y se encarga de diseñar la interfaz de usuario y proporcionar un entorno visualmente atractivo y funcional. El desarrollo front-end es esencial para crear un entorno web atractivo y funcional. Los frameworks presentados en esta actividad proporcionan potentes herramientas para el desarrollo front-end, cada uno con sus propias características, ventajas y desventajas. Como desarrollador, es importante mantenerse al día de las últimas tendencias y tecnologías en desarrollo front-end para crear aplicaciones web modernas y de alta calidad. Aprendiendo y experimentando constantemente con distintos frameworks, podemos ampliar nuestras habilidades y ofrecer soluciones innovadoras en un mundo digital en constante evolución.

Bibliografía

Referencias bibliográficas

  • Ivan. (2018, 8 agosto). Qué es y cuál es la importancia del Frontend en los desarrollos web. Webit Studios. https://www.webit.cl/por-que-es-importante-el-frontend/
  • Logica7web. (2022, 2 mayo). Los mejores frameworks frontend de 2023 para desarrollo web 2023 | Logica7web. Logica7web. https://logica7web.es/apps/mejores-frameworks-frontend-para-desarrollo-web
  • UskoKruM2010. (2021, 27 agosto). ¿Qué es FRONTEND y BACKEND? Explicación Sencilla ¿En qué consisten? Tecnologías Backend - Frontend [Vídeo]. YouTube. https://www.youtube.com/watch?v=aKAg5FI9aJw