Frontend - Página web

En esta sección se presenta el análisis realizado mediante 7 factores de evaluación a 3 frameworks de Javascript muy populares (React, Angular y Vue). El equipo buscó compararlos entre sí para facilitar el proceso de toma de decisión de cuál utilizar.

Frameworks a evaluar

● React

Es una librería de Javascript para el desarrollo UI (Interfaz de usuario) en el que se busca facilitar la construcción de aplicaciones de una sola página. Está gestionado por Facebook y una comunidad de desarrolladores de código abierto [28] . Ayuda a diseñar vistas simples para cada estado de una aplicación y se encarga de actualizar y

renderizar de manera eficiente los componentes concretos cuando los datos cambian [29] .

● Angular

Es un framework de JavaScript de código abierto para desarrollo web. Está basado en TypeScript y está gestionado por el equipo de Angular de Google y la comunidad de desarrolladores de Angular [28] . Su objetivo principal es desarrollar aplicaciones de una sola página [30] .

● Vue.js

Es un marco de JavaScript progresivo de código abierto para crear interfaces de usuario (UI) y aplicaciones de una sola página, creado por Evan You. Este marco utiliza “alto desacoplamiento”, lo que permite a los desarrolladores crear

progresivamente interfaces de usuario (UI) [31] .

Cabe destacar que todos estos frameworks tienen algo en común y es que brindan la posibilidad de desarrollar una SPA ( Single-Page Application ). Una SPA es un tipo de

aplicación web que ejecuta todo su contenido en una sola página. Funciona cargando el contenido HTML, CSS y Javascript por completo al abrir la web. Al ir pasando de una sección a otra, solo necesita cargar el contenido nuevo de forma dinámica sin necesidad de cargar la página por completo [32] . Esto puede traer ventajas como mejorar los tiempos de respuesta al utilizar menos recursos del servidor y agilizar la navegación, lo que favorece la experiencia de usuario. También tiene sus desventajas, si el sitio web es muy grande la primera carga podría demorar mucho y sería más difícil el mantenimiento. Además, hay un inconveniente con respecto al SEO y es que este es más difícil de optimizar que en las MPA ( Multi-Page Application ) [32] .

Al analizar ventajas y desventajas del uso de las SPA, se decidió que era conveniente implementar este tipo de aplicación por las características del proyecto en el que se iba a trabajar. Hay dos razones principales para tomar esta decisión. En primer lugar, el sistema no es ni será tan grande como para experimentar demoras significativas. En segundo lugar, es fundamental priorizar la experiencia de usuario para fomentar el uso del sistema y motivar a los pacientes. Se hizo especial hincapié en que no se materialice el riesgo RPT3 - Los usuarios no se sienten motivados a usar el sistema . Además, el SEO, que es el

posicionamiento en los buscadores, no es de gran relevancia, ya que es un sistema que va a brindar la clínica a sus pacientes, es decir que no se espera que los usuarios lo conozcan mediante búsquedas.

Factores de evaluación y análisis

1. Disponibilidad de recursos de aprendizaje

Además de la documentación oficial de la tecnología a aprender, sería necesario contar con cursos, artículos, libros o tutoriales que complementen en el proceso de aprendizaje. Es decir, es necesario que haya buenos recursos para minimizar la curva de aprendizaje [33] .

Cuenta con gran cantidad de recursos, en la mayoría de los sitios web educativos orientados al frontend habrá un artículo sobre este framework [33] .

Tiene gran cantidad de recursos y hay artículos sobre este framework en la mayoría de los sitios educativos [33] . Hay buenos cursos para elegir [33] .

Tabla 8 - Comparación de recursos de aprendizaje entre los frameworks .

2. Popularidad y comunidad

Es importante que exista una comunidad a la cual acudir cuando uno se siente atascado con un problema. Si el conjunto de herramientas ya fue probado por más personas luego sería más sencillo trabajar en ellas debido a que más problemas

específicos ya fueron resueltos. Una forma de analizar la popularidad de un framework es observar cómo funciona el proyecto en Github o cuantas preguntas se hacen en sitios como StackOverflow vinculados a esa tecnología [33] . A continuación esas estadísticas:

Ilustración 40 - Comparación de la popularidad entre los frameworks [33] . 3. Funciones principales

También se tuvo en cuenta las características principales que brinda el framework , es

decir, verificar cómo se manejan ciertos temas en la documentación. Entre las características a revisar se encuentran: la creación de plantillas, administración de estado, comunicación HTTP, validación de formularios y enrutamiento [33] .

No es precisamente un framework , representa la capa de vista de la aplicación, las otras partes

(comunicación HTTP, validación de formularios, entre otras) dependen de uno [33] .

Es un framework que cuenta con muchas funciones, es decir tiene muchas

herramientas a su disposición. Está destinado a aplicaciones de gran tamaño, promueve TypeScript [33] .

No es precisamente un framework , representa la capa de vista de la

aplicación, las otras partes dependen de uno [33] .

Tabla 9 - Comparación de las funciones principales entre los frameworks .

Ilustración 41 - Verificación de qué funciones provee cada framework [33] .

4. Ritmo de delivery

Es importante poder familiarizarse rápidamente con el framework elegido y entender cuál es la forma más eficiente de utilizarlo con el objetivo de ser más productivo. Hay que poder identificar qué tan fácil es lograr el resultado deseado, si es necesario buscar bibliotecas externas o si existe alguna CLI para acelerar el proceso de desarrollo [33] .

Tiene un CLI para generar el proyecto inicial pero no mucho más que eso ya que representa una capa de vista. Sirve para trabajo personalizado y mayor flexibilidad [33] .

Viene con un CLI que puede generar componentes, directivas, servicios, entre otras cosas [33] .

Solamente cuenta con el CLI para generar el proyecto inicial, hace que se experimente más y haya distintas estructuras en los diferentes proyectos [33] . La simplicidad y flexibilidad de Vue puede hacer que el código no sea

perfecto y se dificulte la depuración y prueba [34] .

Tabla 10 - Comparación del ritmo de delivery entre los frameworks . 5. Facilidad de integración con otras bibliotecas

Más allá de las funcionalidades que ofrece el framework elegido, siempre van a aparecer problemas donde será necesario contar con herramientas adicionales. Hay bibliotecas específicas para diversos problemas como procesamiento de datos, formateo de tiempo, entre otros. Por lo que su integración debe ser sencilla para que no demande tanto tiempo [33] .

Uno es responsable del uso de la biblioteca, se pueden consultar las instaladas mediante NPM. Se integra con gran facilidad a otras bibliotecas para manejar partes que no hagan referencia a la vista como el manejo del estado [33] .

No todas las bibliotecas admiten Typescript, puede ser más difícil la integración [33] .

Uno es responsable del uso de las bibliotecas, se integra fácilmente con estas [33] .

Tabla 11 - Comparación de la facilidad en la integración con bibliotecas entre los frameworks .

6. Curva de aprendizaje

Más allá de la popularidad del framework y la comunidad con la que cuenta es importante hacer foco en que tan rápido es aprender a utilizar todos esos conceptos.

Cabe mencionar que este punto puede ser subjetivo según la velocidad de aprendizaje

de cada uno, pero hay algunos factores que ayudan a darse cuenta si la curva de aprendizaje podría ser menor o mayor [35] .

No tiene funciones complicadas y es bastante sencilla de entender si se conoce Javascript. De cualquier manera como no existe una estructura de proyecto definida va a ser necesario dedicar tiempo a aprender a configurar el proyecto. Además, hay que aprender a utilizar la librería Redux que se encarga de la gestión del estado [28] .

Al ser Angular una librería enorme aprender todos los conceptos asociados puede llevar más tiempo que con otros frameworks . Es más complejo de entender. Además, utiliza TypeScript que puede llevar un tiempo aprenderlo [28] .

Es sencillo de aprender si uno ya tiene conocimientos básicos de Javascript y HTML. Cuenta con un código breve, claro y limpio [36] .

Tabla 12 - Comparación de la curva de aprendizaje entre los frameworks . 7. Componentes de la interfaz de usuario

Es importante hacer hincapié en entender cuáles herramientas brinda cada framework para la interfaz de usuario, ya que al fin y al cabo lo que se busca es un atractivo visual.

Hay componentes de UI gratuitos en el portal de React, la comunidad también desarrolla herramientas para la UI. Para usar componentes de Material Design en React hay que instalar una librería [28] .

Angular ya cuenta con un Material Design pre construido, es por eso que la configuración de la UI se vuelve más sencilla [28] .

Existen distintas librerías que se pueden usar en conjunto con este framework como BootstrapVue o Vuetify [37] . Tabla 13 - Comparación de los componentes de la interfaz de usuario entre los frameworks .

Luego de la evaluación realizada el equipo decide inclinarse por React y elegir este

framework para el desarrollo del frontend . De este análisis se pudieron sacar las siguientes conclusiones:

● En primer lugar, su curva de aprendizaje es menor que la de Angular y Vue.js, es un framework sencillo y fácil de entender lo que lleva al siguiente punto que es el ritmo de delivery , lograr el resultado deseado no va a suponer grandes complicaciones, el ambiente de desarrollo se puede configurar rápidamente. Junto con esto no es un dato menor que uno de los integrantes del equipo ya había trabajado con esta tecnología, mientras que de las otras se tenía poco o nada de conocimiento.

● Otra de las ventajas que presenta React es su gran comunidad por lo que hay mucho conocimiento sobre este framework y uno tiene a dónde acudir si lo precisa. De esta manera va a ser más sencillo encontrar respuestas a las preguntas por ejemplo con StackOverflow. Además, hay gran cantidad de cursos y material para consultar si uno está iniciando por primera vez.

● Acerca de sus funcionalidades, representa solamente la capa de vista de la aplicación, por lo que es necesario utilizarlo junto con librerías. Lo mismo sucede con los

componentes de la interfaz de usuario, cuenta con un abanico de posibilidades una vez que se integren las librerías necesarias. Como último punto la integración de las bibliotecas es sencilla.