Se presentó como trabajo de investigación de la asignatura Programación Web de la carrera Ingeniería en Sistemas de la Universidad de Cuenca, realizar un documento en el cual se detallen las métricas y demás aspectos necesarios para poder elaborar un trade-off sobre las diferentes tecnologías web en la actualidad.

1. UNIVERSIDAD DE CUENCA
EDUCAMOS PARA EL DESARROLLO
FACULTAD DE INGENIERÍA 15 de julio de 2017.
Miguel Ángel Macías N. Programación Web.
Trade-Off sobre Tecnologías Web.
Análisis de Frameworks utilizados en el desarrollo web.
Miguel Ángel Macías Narváez.
Facultad de Ingeniería, Escuela de Informática
Universidad de Cuenca
Cuenca, Ecuador
mangel.maciasn@ucuenca.ec
I. RESUMEN
Se presentó como trabajo de investigación realizar un documento en el cual se detallen las métricas y
demás aspectos necesarios para poder elaborar un trade-off sobre las diferentes tecnologías web en la
actualidad. Como objeto de estudio se tomaron Frameworks utilizados en el desarrollo de aplicaciones web.
Se realizó un estudio sobre la literatura actual y de las diferentes características de los Frameworks
escogidos: AngularJs, Laravel, PrimeFaces y SmartGWT.
Fueron 9 los criterios utilizados para evaluar a cada una de los Frameworks. La elaboración de estas
métricas se basó en la experiencia que tiene la comunidad detrás de cada una de estas herramientas, así
como toda la información disponible en la documentación y páginas oficiales de los mismos. Tamb ién se
tomaron en cuenta los conocimientos alcanzados dentro del curso de Programación Web de la carrera
Ingeniería en Sistemas de la Universidad de Cuenca. Debido a que no existe una receta mágica que resuelva
estos problemas y nos diga qué herramienta es la mejor, el saber qué framework elegir al momento de
desarrollar un proyecto en la web dependerá de las necesidades del equipo de desarrollo así como la
experiencia y el conocimiento que se pueda hallar dentro de la comunidad que apoya cada una de las
diferentes herramientas. Este documento fue hecho para dar un acercamiento al lector de sobre cómo se
debería hacer un trade-off de lo que sea que se necesite usar ya sea en un proyecto o alguna otra actividad.
La práctica es la mejor opción que se recomienda para desarrollar un pensamiento crítico al momento de
tomar alguna decisión importante dentro de cualquier trabajo que sea realice.
II. INTRODUCCIÓN
El método por el cual las computadoras se comunican entre sí es a través de lenguajes de marcado y
paquetes multimedia conocido como Tecnologías Web (Study.com, n.d.). Existen dos tipos de enfoque en
el campo del desarrollo web: Front-End y Back-End. Serprogramador.es (2014) define al Front-End como
aquellas tecnologías que corren del lado del navegador web, siendo los lenguajes más comunes: HTML,
CSS y Javascript. El Front-End se encarga de estilizar la página de tal manera que la experiencia de usuario
sea buena para la persona que viste el sitio Web.
El Back-End es todo aquello que se encuentra del lado del servidor, con lenguajes como PHP, Python,
.Net, y Java. Se encarga de interactuar con bases de datos,manejo de sesiones de usuario, y montar el sitio
web.
Al momento de desarrollar una aplicación en la web, los desarrolladores tienen a su disposición un sin
número de herramientas que pueden utilizar. Estas herramientas comúnmente son conocidas como
Frameworks. Los Frameworks están presentes en todo elciclo de desarrollo, porlo tanto es muy importante
sabercuál escogerpara llevar a cabo un proyecto en específico. Escoger el framework ideal para el trabajo
que se está realizando puede representar una gran ventaja así como también puede convertirse en un dolor
de cabeza si no se escoge el adecuado.

2. UNIVERSIDAD DE CUENCA
EDUCAMOS PARA EL DESARROLLO
FACULTAD DE INGENIERÍA 15 de julio de 2017.
Miguel Ángel Macías N. Programación Web.
III. PROBLEMÁTICA
A. Pregunta de Investigación.
¿Qué métricas utilizar para identificar cuál Framework es el adecuado para un proyecto puntual?
B. Hipótesis.
Saber qué framework utilizar para el desarrollo de un proyecto puede convertirse en un reto,sin embargo,
se deben tomar en cuenta puntos importantes como la longevidad, curva de aprendizaje, escalabilidad y
consumo de SOAP/REST API. Estos factores permitirán tener un enfoque más adecuado sobre qué
framework utilizar en un proyecto.
C. Objetivo General.
Conocer qué métricas usar al momento de elegir un Framework para el desarrollo de un proyecto.
D. Objetivos Específicos.
 Conocer las características de un Framework
 Aprender a realizar un Trade-Off entre varios Frameworks.
 Estimular el interés sobre estas herramientas al momento de emprender un proyecto.
IV. MARCO TEÓRICO
A. Tipo de Investigación.
La investigación realizada en este trabajo es de revisión.
B. Análisis de la literatura actual.
Es necesario saber ciertos conceptos antes de seguir avanzando en lo que viene del documento.
1) ¿Qué es una Aplicación Web?
Programación Web (n.d.) nos dice que una aplicación web es similar a un programa tradicional pero con
la diferencia que este se puede ejecutar desde cualquier computadora con acceso a internet o en una red
local. El usuario puede acceder a la aplicación a través de un navegador sin requerir algún otro programa
de terceros para su ejecución.
2) ¿Qué es un Framework Web?
Un framework puede definirse de muchas maneras, pues se lo utiliza en muchos campos como el
desarrollo de aplicaciones médicas, desarrollo de juegos,y demás. En lo que concierne a Tecnologías Web,
un framework se considera una aplicación genérica a la cual le podemos añadir componentes que forman
un diseño reutilizable que facilita y agiliza el desarrollo de un sistema Web.
La mayoría de Frameworks Web se encargan de ofrecer una capa de controladores de acuerdo con el
patrón MVC o con el modelo 2 de Servlets y JSP, ofreciendo mecanismos para facilitar la integración con
otras herramientas para la implementación de las capas de negocio y presentación (Gutiérrez, n.d.).
Están diseñados para apoyar el diseño de sitios web dinámicos, aplicaciones web y servicios web.
Intentan agilizar actividades comunes usadas en el desarrollo web proporcionando bibliotecas para acceder
a bases de datos, estructuras para plantillas, gestión de sesiones y la reutilización de código.
3) ¿Qué es PrimeFaces?
Pech-May, Gómez & De la Cruz (n.d.) define a PrimeFaces como una librería de componentes visuales
de código abierto para el conjunto JavaServer Faces, desarrollada y mantenida por Prime Technology. Su
objetivo principal es ofrecer un conjunto de componentes para facilitar la creación y diseño de aplicaciones
web. Los componentes de PrimeFaces cuentan con soporte nativo de Ajax, pero no se encuentra implícito,
de tal manera que se tiene que especificar que componentes se deben actualizar al realizar una petición
proporcionando así mayor control sobre los eventos.
Sus principales características son:

3. UNIVERSIDAD DE CUENCA
EDUCAMOS PARA EL DESARROLLO
FACULTAD DE INGENIERÍA 15 de julio de 2017.
Miguel Ángel Macías N. Programación Web.
 Soporte nativo de Ajax, incluyendo Push/Coment.
 Kit para crear aplicaciones web móviles.
 Es compatible con otras librerías de componentes como JBoss RichFaces.
 Uso de JavaScript no intrusivo.
 Es un proyecto open source, activo y estable.
4) ¿Qué es SmartGwt?
Jaen (2014), nos habla que SmartGWT es una variación de GWT, implementa todos los widgets
disponibles en la librería de JavaScript SmartClient. Ofrece un set de grillas, formularios, y demás
componentes con una muy buena presentación.Cuenta con funcionalidades que se resuelven dentro de los
mismos widgets, evitando así que se tenga que lidiar con detalles que podrían resultar complejos para
usuarios poco experimentados.
Las ventajas que podemos encontrar al momento de usar SmartGWT son:
 Se obtiene un Look and Feel profesional, amigable con las empresas.
 Se evita lidiar con cambios y renderizaciones de JavaScript y CSS en las diferentes versiones
de ciertos navegadores como Internet Explorer.
 Posee un showcase que nos brinda ejemplos de todos los widgets disponibles.
Sus desventajas:
 La versión LGPL, no habilita el uso del lado del servidor.
 El tiempo de compilación es largo comparado con la compilación de aplicaciones nativas como
JavaScript, HTML y CSS.
 El HTML generado que representa los componentes es complejo y difícil de seguir.
5) ¿Qué es Laravel?
Laravel es un framework de desarrollo web MVC escrito en PHP. Ha sido diseñado para mejorar la
calidad del software al reducir tanto el costo del desarrollo inicial como los costos de mantenimiento
continuo y mejorar la experiencia de trabajar con sus aplicaciones, proporcionando una clara sintaxis
expresiva y un conjunto básico de funcionalidades que ahorra horas de tiempo de implementación (McCool,
2012).
Las ventajas de usar Laravel son las siguientes:
 Reducción de costos de tiempos en el desarrollo y mantenimiento.
 Curva de aprendizaje relativamente baja.
 Flexible y adaptable no solo al MVC, sino que propone también usar “Routes with clousures”.
 Es modular con un amplio sistema de paquetes y drivers con el que se puede extender la
funcionalidad de forma fácil, robusta y segura.
Entra las desventajas encontramos:
 En lo que concierne a capacidad, debido a los vendors se hace un poco grande como tal el
framework.
6) ¿Qué es AngularJs?
Williamson (2015) nos dice que Angular es un framework MVC de Javascript para el desarrollo web del
Front-End. Permite crear aplicaciones Single-Page Applications.AngularJs es mantenido porGoogle y con
una comunidad muy grande detrás de ella. Permite extender el vocabulario HTML con directivas y
atributos, manteniendo la semántica y sin necesidad librerías externas para que funcione.
Blasco (2016) nos presenta las siguientes ventajas al momento de usar AngularJs:
 Usa un sistema en el que vista y modelo están en relación constante,conocido como “Single-
Source-of-Truth”. Todo cambio visual se actualiza en tiempo real en el modelo y viceversa.
 Presenta las “Directivas”, consisten en marcadores en un elemento del DOM que indican al
compilador de Angular que dicho elemento tiene un comportamiento específico.
 La comunidad de desarrolladores han dado gran soporte a este framework, por lo tanto existe
una gran cantidad de módulos disponibles.
Las desventajas de usar AngularJs:
 El rendimiento se ve afectado debido a que el “Two-way-data-binding” debe evaluar cada
variable de las usadas por Angular.

4. UNIVERSIDAD DE CUENCA
EDUCAMOS PARA EL DESARROLLO
FACULTAD DE INGENIERÍA 15 de julio de 2017.
Miguel Ángel Macías N. Programación Web.
 El sistema de inyección de dependencias de Angular carga todos los módulos necesarios al
cargar la aplicación, esto implica un volumen de tráfico mayor al necesario.
 Angular se encuentra en estado compartido debido a los llamados “Scopes”, evitando que se
puedan reusar componentes en la aplicación debido a que el estado de este podría influenciar
en la creación o aparición de dichos componentes.Una solución a este problema es el “Isolated
Scope”, mediante el uso de directivas.
V. METODOLOGÍA
A. Categorización de la técnica de Trade-Off.
Basándonos en la información hallada en Anon (n.d.), la técnica que se utilizará para el trade-off de los
Frameworks es la del Modelo Basado. Se expresan por el uso de formas de modelo ilustrativo, excluyendo
un poco el modelo matemático. Es posible repetir el trade-off, además la ilustración de relaciones permite
documentar y comunicar de mejor manera los trade-off proporcionando una justificación y motivación para
los resultados.
Habiendo explicado el método que se utilizará se procede a dar más detalles de este.Se utilizarán valores
del 0 al 1 para medir el grado de los atributos de cada framework. Siendo 0 nulo, 0.5 la mitad y 1.0 cumple
totalmente con la característica. Luego de haber terminado la primera tabla de grados (0-1), se procederá a
sumar los pesos de cada atributo para dar una medida cuantitativa de los frameworks en cada atributo.
B. Definición de criterios a comparar.
Recopilando la información de KiPoint Solutions (2014), Online (2013), y Zuasti (2012) se
seleccionaron los siguientes criterios:
1) Curva de Aprendizaje.
Los desarrolladores involucrados en el proyecto deben ser capaces de dominar la tecnología que se
va a implementar en poco tiempo y sin complicaciones. Si esto les toma demasiado tiempo y es
dificultoso, se verá reflejado en una aplicación mala y exhaustiva.
2) Comunidad y Soporte.
Es un aspecto importante, toda la comunidad se apoya de manera interna, genera esquemas de
colaboración que permiten contar con un soporte a casi cualquier duda que surja durante el
transcurso del proyecto.
3) Longevidad.
Es importante saber cuánto tiempo de vida lleva el framework y cuánto tiempo seguirá existiendo.
Esto puede presentar problemas al momento de contratar nuevos desarrolladores en su proyecto. Si
en algunos años queda el framework en desuso, nadie querrá usarlo.
4) Seguridad.
Siempre es mejor seleccionar un framework capaz de garantizar las funciones de seguridad (gestión
de XSS, inyección porSQL, etc.). Contando con la comunidad y muchos desarrolladores trabajando
en el mismo framework, es más rápida la detección de problemas de seguridad.
5) Documentación.
El volumen y la calidad de la documentación existente de un framework lo vuelve fácil de usar y
actualizable.
6) Licencia.
Tiene un impacto significativo en las aplicaciones. Una aplicación desarrollada usando licencia GPL
estará sujeta a esta misma. Si se usará una licencia MIT, se podría distribuir con un mejor margen
de ganancias.

5. UNIVERSIDAD DE CUENCA
EDUCAMOS PARA EL DESARROLLO
FACULTAD DE INGENIERÍA 15 de julio de 2017.
Miguel Ángel Macías N. Programación Web.
7) Extensión y Complementos.
Cuando se instala un nuevo plugin o se amplía el framework, ¿Qué tan extensible se vuelve el
software? Usar complementos que otras personas han desarrollado para atacar un problema en
específico se vuelve una necesidad a la hora de realizar un trabajo eficiente y rápido.
8) Consumo de servicios SOAP/REST.
Permite la separación entre el cliente y el servidor. Brindan visibilidad, fiabilidad y escalabilidad.
REST es cualquier interfaz entre sistemas que use HTTP para obtener datos o generar operaciones
sobre esos datos en todos los formatos posibles.
9) Soporta AJAX
AJAX es un conjunto de técnicas de desarrollo web que utilizan tecnologías web en el lado del
cliente para crear aplicaciones web asíncronas. Con AJAX las aplicaciones web pueden enviar y
recuperar datos desde un servidor de forma asincrónica sin interferir con la visualización y el
comportamiento de la página existente. Permite que las páginas web cambien el contenido
dinámicamente sin necesidad de recargar la página entera.
C. Definición de los criterios de cada Framework.
La información de los atributos de cada framework fue recopilada de https://hotframeworks.com,
http://www.bestwebframeworks.com, y de las páginas oficiales de cada framework.
VI. RESULTADOS
A. Tabla de los grados de atributo de cada framework.
Como se explicó anteriormente se utilizarán grados, 0.0, 0.5, y 1.0 para medir los atributos de cada
framework.
Tabla 1. Grados de los atributos de cada framework.
CRITERIA ANGULARJS LARAVEL PRIMEFACES SMARTGWT
Curva de aprendizaje 0.5 1.0 0.5 0.5
Comunidad y soporte 1.0 1.0 1.0 0.5
Longevidad 1.0 1.0 1.0 1.0
Seguridad 1.0 1.0 0.5 0.5
Documentación 0.5 1.0 1.0 0.0
Licencia MIT MIT Apache Apache
Extensión y complementos. 1.0 1.0 1.0 1.0
Consumo de servicios SOAP/REST 1.0 1.0 1.0 1.0
Soporte AJAX 1.0 0.5 1.0 1.0
Total: 7.0 7.5 7.0 5.5

6. UNIVERSIDAD DE CUENCA
EDUCAMOS PARA EL DESARROLLO
FACULTAD DE INGENIERÍA 15 de julio de 2017.
Miguel Ángel Macías N. Programación Web.
B. Tabla de los pesos de atributo de cada framework.
El peso que se le da a cada atributo es subjetivo, pues no existe una métrica ideal para cada tipo de
software. Sin embargo, se estimó el peso de cada uno en base a los conocimientos aprendidos en el curso
de Programación Web de la carrera Ingeniería en Sistema de la Universidad de Cuenca. Se da más
importancia a la curva de aprendizaje y al soporte AJAX de cada uno de los Frameworks, debido a que
estos fueron los temas que se trataron con más prioridad durante toda la asignatura.
Tabla 2. Pesos de los atributos de cada framework.
PESOS CRITERIA ANGULARJS LARAVEL PRIMEFACES SMARTGWT
20 Curva de aprendizaje 10 20 10 10
10 Comunidad y soporte 10 10 10 5
10 Longevidad 10 10 10 10
10 Seguridad 10 10 5 5
10 Documentación 5 10 10 0
0 Licencia MIT MIT Apache Apache
10 Extensión y complementos. 10 10 10 10
10 Consumo de servicios SOAP/REST 10 10 10 10
20 SoporteAJAX 20 10 20 20
Total: 85 90 85 70
Al usar los pesos en los atributos de cada framework se puede obteneruna medida cuantitativa de cada
uno. La valoración de estos totales es sobre 100. De esta manera se puede apreciar de mejor manera qué
framework satisface las necesidades del desarrollador o de un proyecto puntual.También nos da una vista
general de cada framework en ciertos aspectos.
VII. CONCLUSIONES
Saber elegir que herramientas utilizar en el desarrollo de un proyecto representa una actividad importante
dentro del mismo. Más aún cuando se trata de Aplicaciones en la Web, el framework que se utilice puede
ser la piedra angular que lleve el proyecto a su culminación como también puede presentar trabas y
dificultades para el desarrollo del mismo. Un buen equipo de desarrollo tiene que tener en claro qué es lo
que quiere hacer y cómo lo va a hacer. No existe una métrica estándaralguna que permita solucionar este
problema, sin embargo la experiencia de los desarrolladores y la comunidad nos abren un abanico de
posibilidades al momento de entender cómo elegir el framework ideal para nuestra Aplicación Web. En
este documento se habló de 4 Frameworks puntuales: AngularJs, Laravel, PrimeFaces y SmartGWT.

7. UNIVERSIDAD DE CUENCA
EDUCAMOS PARA EL DESARROLLO
FACULTAD DE INGENIERÍA 15 de julio de 2017.
Miguel Ángel Macías N. Programación Web.
Se usaron 9 criterios para medir a estos Frameworks en sus diferentes aspectos.Las métricas y el trade-
off utilizados están basados en los conocimientos adquiridos durante el desarrollo de la asignatura
Programación Web de la carrera de Ingeniería en Sistemas de la Universidad de Cuenca. Siendo esta la
manera en la que se pudo medir a estos 4 frameworks.
Si se habla de seguridad, AngularJs y Laravel se muestran como una buena opción, mientras que
PrimeFaces y SmartGWT se quedan un poco atrás, pero esto no quiere decir que no posean seguridad,
simplemente es cuestión de adaptación y facilidad para el desarrollador al momento de trabajar.
De la misma manera tenemos otro criterio muy importante, la curva de aprendizaje. La curva de
aprendizaje no muchas veces se lo ve como algo importante dentro del campo laboral, puesto a que se da
por sentado de que el programador debe tenerun amplio conocimiento de todas las tecnologías disponibles
en la Web, pero no siempre es así. Cuando se recluta gente nueva dentro de un proyecto, la curva de
aprendizaje al momento de usar cierta tecnología pueda jugar una mala pasada a los involucrados en el
desarrollo de la aplicación. Aprender a manejar correctamente una herramienta puede ser todo un reto si se
tiene un tiempo límite dentro de la entrega del proyecto.Por esta razón, la mejor opción sería Laravel sobre
las demás.
Pero no todo está escrito, un buen equipo de desarrollo debe saber cuáles son su prioridades, ya sea la
seguridad, curva de aprendizaje, licencia o el tiempo de vida del framework, debe tener muy en claro los
puntos fuertes de cada herramienta al momento de usarla en su proyecto.Obteniendo una vista más general,
si tenemos que decir cuál de estos 4 representa ser una mejor opción, los resultados nos dirían que Laravel
es la opción obvia.
El propósito de este documento no es decir cuál de los 4 es el mejor, sino cultivar el uso de criterio del
lector para que en base a sus propias necesidades pueda elegir qué herramienta utilizar. Se presentaron
como puntos fuertes esos 9 criterios pero puede haber muchos más. La mejor manera de aprender a cómo
hacerlo es ponerlo en práctica, y compartiéndolo con otros desarrolladores.
VIII. REFERENCIAS
Study.com. (n.d.).What is Web Technology? - Definition& Trends - Video & Lesson Transcript | Study.com. [online] Available
at: http://study.com/academy/lesson/what-is-web-technology-definition-trends.html [Accessed 9 Jul. 2017].
Serprogramador.es. (2014).¿Que es FrontEndY Backenden la programación web? | Ser Programador.es. [online] Available at:
https://serprogramador.es/que-es-frontend-y-backend-en-la-programacion-web/ [Accessed 9 Jul. 2017].
Gutiérrez, J. (n.d.). ¿Qué es un Framework Web?. [ebook] Available at:
http://www.lsi.us.es/~javierj/investigacion_ficheros/Framework.pdf [Accessed 9 Jul. 2017].
Programacion Web. (n.d.). 1.4 Evolución del desarrollo de aplicaciones web. [online] Available at:
https://programacionwebisc.wordpress.com/1-4-evolucion-del-desarrollo-de-aplicaciones-web/ [Accessed 9 Jul. 2017].
Jaen, R. (2014). SmartGWT rápido, bonito y no tan barato. [Blog] Bvision. Available at: http://blog.bvision.com/?p=1931
[Accessed 12 Jul. 2017].
Pech-May, F., Gómez, M. and De la Cruz, L. (n.d.). Desarrollo de Aplicaciones web con JPA, EJB, JSF y PrimeFaces. AyP.
[online] Available at: http://www.tamps.cinvestav.mx/~fpech/sd/files/paper001.pdf [Accessed 12 Jul. 2017].
McCool, S. (2012). Laravel starter. Birminghan, UK: Packt Pub.
Williamson, K. (2015). Learning AngularJS. 1st ed. Sebastopol: Meg Foley.
Blasco, D. (2016). Ventajas y desventajas de programar en AngularJS | Atraura. [online] Atraura, expertos en tecnología de
movilidad. Available at: https://www.atraura.com/angularjs/ [Accessed 12 Jul. 2017].
Anon, (n.d.). Decision Support and Trade-off Techniques. [online] Available at:
https://www2.bth.se/com/besq.nsf/(WebFiles)/F6480D3A4EF1DAE1C12570690032D0C8/$FILE/chapter_6.pdf [Accessed 14 Jul.
2017].
KiPoint Solutions. (2014). 10 Criterios para Elegir el Framework Correcto. [online] Available at:
http://www.kipoint.com.mx/es/blog/10-criterios-para-elegir-el-framework-correcto#.WWnG3oQ1_IW [Accessed 14 Jul. 2017].
Online, S. (2013). 13 Criteria for Evaluating Web Frameworks - Safari Blog. [online] Safaribooksonline.com. Available at:
https://www.safaribooksonline.com/blog/2013/10/14/13-criteria-for-evaluating-web-frameworks/ [Accessed 14 Jul. 2017].
Zuasti, R. (2012). Choosinga Web Development Framework: Options andCriteria - DZone Java. [online] dzone.com. Available
at: https://dzone.com/articles/choosing-web-development-0 [Accessed 14 Jul. 2017].