Presentación Frameworks Frontend 20200805

Ingeniería en Sistemas Computacionales Programación web Presenta: García Hernández Johan Omar Docente: Gonzalez Cerón Arturo No. Control: 20200805

10/07/23

Frameworks Frontend

Índice

Introducción

¿Que es Angular?

¿Que es React?

¿Qué es Vue.js?

¿Qué es Ember.js?

¿Qué es Dojo Toolkit?

Conclusiones

Referencias

Introducción

¿Qué es el desarrollo Frontend?

El Desarrollo Front End es aquel que da una estructura a los datos que aparecen en una interfaz gráfica, con el fin de optimizar la experiencia del usuario. Es el encargado de definir la jerarquía de la información que se visualiza y su distribución: los márgenes, los colores, los recursos audiovisuales, las animaciones, etc. El resultado es lo que todos conocemos: una página web.

Sus principales características son:

• Es con lo que el usuario interactua
• Es visualmente atractiva
• Se puede reforzar con frameworks
• Cuenta con tecnologias de parte visual

Angular

¿Que es Angular

Angular es un Framework de JavaScript de código abierto escrito en TypeScript. Su objetivo principal es desarrollar aplicaciones de una sola página. Google se encarga del mantenimiento y constantes actualizaciones de mejoras para este framework.

Características de Angular

• TypeScript: Se define un conjunto de tipos de JavaScript, lo que ayuda a los usuarios a escribir código JavaScript que es más fácil de entender.
• Data Binding (Enlace de datos): Es un proceso que permite a los usuarios manipular elementos de la página web a través de un navegador web.
• Document Object Model (DOM): Trata un documento XML o HTML como una estructura de árbol en la que cada nodo representa una parte del documento.

Ventajas y desventajas

Desventajas

1. Opciones de SEO limitadas2. Complejidad 3. Dificil migración 4. Opciones de SEO limitadas

1. Componentes personalizados 2. Enlace de datos 3. Inyección de dependencia 4. Compatibiñidad con navegadores

Ventajas

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Sitios famosos que lo utilizan

Phasellus at viverra risus. Vivamus vulputate consequat.

Phasellus at viverra risus. Vivamus vulputate consequat.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Phasellus at viverra risus. Vivamus vulputate consequat.

Phasellus at viverra risus. Vivamus vulputate consequat.

React

¿Que es React?

React es una biblioteca o librería de código abierto que está escrita en JavaScript. Fue desarrollada por Facebook en el 2013 con la finalidad de facilitar la creación de componentes reutilizables e interactivos para las interfaces de usuario.

Características de react

• Permite crear interfaces de usuario interactivas de modo declarativo y simple.
• Permite el uso de componentes, no programes lo mismo 2 veces, piensa bien una sola vez.
• Potencia el desarrollo de aplicaciones móviles con React Native.

Ventajas y desventajas

1. Falta de documentación oficial. 2. No hay un patrón de desarrollo 3. Se necesita mucho tiempo para dominarlo

1. Fácil de aprender. 2. Alto nivel de flexibilidad 3. Máxima capacidad de respuesta. 4. DOM virtual 5. Combinado con ES6/7 6. Biblioteca JavaScript 100% de código abierto

Desventajas

Ventajas

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Sitios famosos que lo utilizan

Phasellus at viverra risus. Vivamus vulputate consequat.

Phasellus at viverra risus. Vivamus vulputate consequat.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Phasellus at viverra risus. Vivamus vulputate consequat.

Phasellus at viverra risus. Vivamus vulputate consequat.

Vue.js

¿Que es Vue.js?

Vue.js es un marco JavaScript progresivo de código abierto para crear interfaces de usuario (UI) y aplicaciones de una sola página; se conoce comúnmente como Vue. Este marco utiliza "alto desacoplamiento", lo que permite a los desarrolladores crear progresivamente interfaces de usuario (UI).

Características de Vue.js

• Accesible, comience a construir cosas en poco tiempo si ya tiene conocimientos de HTML, CSS y JavaScript.
• Versátil, con un ecosistema de adopción incremental que escala entre una biblioteca y un marco con todas las funciones.
• Es un marco rápido de descargar y de instalar la biblioteca, impactando positivamente en el SEO y UX.
• Utiliza un DOM virtual, mejora el rendimiento de la aplicación y visualización de la página..

Ventajas y desventajas

Desventajas

1. La barrera del lenguaje2. No cuenta con apoyo para grandes proyectos

1. Desglosar componentes 2. Fácil de aprender y utilizar 3. Su pequeño tamaño

Ventajas

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Sitios famosos que lo utilizan

Phasellus at viverra risus. Vivamus vulputate consequat.

Phasellus at viverra risus. Vivamus vulputate consequat.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Phasellus at viverra risus. Vivamus vulputate consequat.

Phasellus at viverra risus. Vivamus vulputate consequat.

Ember.js

¿Que es Ember.js?

Ember.js es un framework JavaScript de código libre y está basado en la arquitectura MVC (Modelo-Vista-Controlador). Según sus autores el framework está diseñado “para crear aplicaciones web ambiciosas. No sólo para crear SPAs (Single-Page applications), sino también para crear aplicaciones de escritorio y móviles

Características de Ember.js

• Tiene filtrado de vista automático.
• Utiliza un motor de plantillas (templating)
• Soporta propiedades computadas.
• Utiliza JSX para crear plantillas.
• Prolonga HTML.
• Publicado bajo la licencia MIT.

Ventajas y desventajas

1. Curva de aprendizaje 2. Flexibilidad limitante 3. Tamaño y rendimiento

1. Convención sobre configuración 2. Orientación a la productividad 3. Comunidad activa y madura 4. Potente CLI ( interfaz de línea de comandos)

Desventajas

Ventajas

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Sitios famosos que lo utilizan

Phasellus at viverra risus. Vivamus vulputate consequat.

Phasellus at viverra risus. Vivamus vulputate consequat.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Phasellus at viverra risus. Vivamus vulputate consequat.

Phasellus at viverra risus. Vivamus vulputate consequat.

dojo toolkit

¿Que Dojo Toolkit?

Dojo Toolkit es una potente biblioteca JavaScript de código origen abierto que se puede utilizar para crear interfaces ricas y variadas en ejecución en un navegador. La biblioteca no requiere ningún plug-in de ejecución en el lado del navegador y se ejecuta de forma nativa en todos los navegadores principales. Es un gran beneficio para los desarrolladores de JavaScript puesto que les ayuda a abstraer rarezas de las diferentes implementaciones de navegadores.

Características de Dojo Toolkit

• Complementos.
• Comunicación asíncrona.
• Sistema de paquetes.
• Almacenamiento de datos en el cliente.
• Almacenamiento en el servidor.
• Soporte para Adobe Integrated Runtime (AIR)

Ventajas y desventajas

Desventajas

1. Progreso lento2. Difícil de aprender a usarla 3. Documentación limitada

1. Fácil de usar gracias a widgets 2. Asistencia de Ajax 3. Biblioteca amplia y modular

Ventajas

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Sitios famosos que lo utilizan

Phasellus at viverra risus. Vivamus vulputate consequat.

Phasellus at viverra risus. Vivamus vulputate consequat.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Phasellus at viverra risus. Vivamus vulputate consequat.

Phasellus at viverra risus. Vivamus vulputate consequat.

Conclusiones

Al hacer esta actividad aprendí sobre lo que es un framework los cuales van a ser importantísimos para nosotros como desarrolladores, siendo que estos nos van a ayudar y a facilitar el trabajo enormemente siendo que podremos organizar los datos de manera estructurada, haciendo que nosotros podamos desarrollar sitios bonitos, estéticos y funcionales para que el usuario no cuente con problemas o situaciones raras al momento de acceder al sitio web que estamos desarrollando. Para estos sitios web si que hay muchas herramientas de frameworks cada uno de estos frameworks ofrecen muchas cosas como el sistema de paquetes, comunicación asíncronas entre muchas otras las cuales nos ayudan a hacer una página pragmática para los usuarios.También se nota lo práctico que es al ver que tantos sitios web famosos usan los frameworks incluyendo que funcionen como inspiración para nosotros como los desarrolladores con lo que podemos ver sitios que estéticamente son muy estéticos como linkedin, Amazon, Google, Nintendo, entre otras Como conclusión personal esta actividad me hizo reflexionar sobre el uso y para qué existen los frameworks los cuales ayudan mucho tanto para la experiencia del usuario y para ayudarnos a nosotros como desarrolladores los cuales haremos sitios web y aplicaciones web que no sean pobres estéticamente y que sobretodo eviten no ser funcionales

Referencias

De Souza, I. (2021). Entiende las diferencias entre Front-End y Back-end en el ambiente de los sitios web. Rock Content - ES. https://rockcontent.com/es/blog/front-end-y-back-end/

KeepCoding, R. (2023, March 7). ¿Qué es el desarrollo front end? | KeepCoding Bootcamps. KeepCoding Bootcamps. https://keepcoding.io/blog/que-es-el-desarrollo-front-end/

Solution, C. (2023). Qué es el Frontend y Backend y sus características. cocosolution.com. https://cocosolution.com/que-es-frontend-y-backend/

UskoKruM2010. (2021, August 27). ¿Qué es FRONTEND y BACKEND? Explicación Sencilla ¿En qué consisten? Tecnologías Backend - Frontend ✅ [Video]. YouTube. https://www.youtube.com/watch?v=aKAg5FI9aJw

Gonçalves, M. J. (2022, October 6). ¿Qué es Angular y para qué sirve? - Blog de Hiberus Tecnología. Blog De Hiberus Tecnología. https://www.hiberus.com/crecemos-contigo/que-es-angular-y-para-que-sirve/

Next U. (2022, September 15). ¿Qué es React JS y cómo funciona? Blog | NextU LATAM. https://www.nextu.com/blog/que-es-react-js-como-funciona-rc22/

Rootstack. (n.d.). VueJS: Ventajas y desventajas de este framework. Rootstack. https://rootstack.com/es/blog/vuejs-ventajas-desventajas

Tápanes, Y., & Tápanes, Y. (2022). Los 6 mejores framework frontend. Saasradar. https://saasradar.net/mejores-framework-frontend/

Bernal, F. (2020, August 10). EMBER.JS | EL FRAMEWORK - Fernando Bernal - Medium. Medium. https://statefull.medium.com/ember-js-el-framework-8d77b43b10b2

Bernal, F. (2020, August 10). EMBER.JS | EL FRAMEWORK - Fernando Bernal - Medium. Medium. https://statefull.medium.com/ember-js-el-framework-8d77b43b10b2

IBM Documentation. (2021, March 15). https://www.ibm.com/docs/es/radfws/9.6.1?topic=SSRTLW_9.6.1/com.ibm.etools.webtoolscore.doc/topics/cdojotoolkit.html

Lorem ipsum dolor

Consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

• Lorem ipsum dolor sit amet.
• Consectetur adipiscing elit.
• Sed do eiusmod tempor incididunt ut.

Lorem ipsum dolor

Consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

• Lorem ipsum dolor sit amet.
• Consectetur adipiscing elit.
• Sed do eiusmod tempor incididunt ut.

Lorem ipsum dolor

Consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

• Lorem ipsum dolor sit amet.
• Consectetur adipiscing elit.
• Sed do eiusmod tempor incididunt ut.

Lorem ipsum dolor

Consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

• Lorem ipsum dolor sit amet.
• Consectetur adipiscing elit.
• Sed do eiusmod tempor incididunt ut.