Anda di halaman 1dari 35

UNIVERSIDAD MAYOR DE SAN SIMON

FACULTAD DE CIENCIAS Y TECNOLOGIA


DIRECCIÓN DE POSGRADO

“CARACTERISTICAS DE ANGULAR Y VUE


PARA EL DESARROLLO DE INTERFACES DE
USUARIO EN APLICACIONES WEB”

TRABAJO FINAL PRESENTADO PARA OBTENER EL


CERTIFICADO DE DIPLOMADO EXPERTO EN DESARROLLO DE
APLICACIONES EMPRESARIALES VERSIÓN I
.

POSTULANTE : EVERT ROJAS OLIVERA


TUTOR : ING. EDSON ARIEL TERCEROS TORRICO

Cochabamba – Bolivia
2018

1
ii

A mis padres y a mis hermanos,

Que me apoyaron incondicionalmente y

confiaron en mí en todo momento.

Son lo más importante que tengo en mi vida.


Índice de Contenido
Resumen 6

Introducción 7

1 Generalidades 8

1.1 Antecedentes Generales 8

1.2 Antecedentes Específicos 9

2 Metodología 10

3 Características de Angular y Vue para el desarrollo de interfaces de usuario 10

3.1 Conceptos teóricos para desarrollar interfaces de usuario 10

3.1.1 Framework 11

3.1.2 Frontend 11

3.1.3 Backend 12

3.1.4 JavaScript 12

3.1.5 TypeScript 13

3.1.6 Compilación 13

3.1.7 Transpilación 13

3.1.8 Node.js 14

3.1.9 Angular 15

3.1.10 Vue 16

3.1.11 SPA 17

3.2 Similitudes entre Angular y Vue 17

3
4

3.2.1 Código libre 18

3.2.2 Popularidad 18

3.2.3 Basados en componentes 18

3.2.4 Últimas versiones de JavaScript 19

3.2.5 Agnósticos al Backend 19

3.2.6 CLI 20

3.3 Diferencias entre Angular y Vue 21

3.3.1 Actualizaciones constantes de angular 22

3.4 Ventajas de Angular y Vue 25

3.4.1 Ventajas de Angular 25

3.4.2 Ventajas de Vue 28

3.5 Desventajas de Angular y Vue 30

3.5.1 Desventajas de Angular 30

3.5.2 Desventajas de Vue 31

4 Conclusiones 32

5 Bibliografía 34

6 Páginas Web 35
5

Índice de cuadros, gráficos y figuras

Figura 1 Algunos Frameworks de JavaScript ..................................................................................... 7

Figura 2 Ejemplo "Hola mundo" ......................................................................................................14

Figura 3 Angular el Framework más popular ...................................................................................15

Figura 4 Vue el Framework JavaScript Progresivo ..........................................................................16

Figura 5 Separación del Backend y Frontend ...................................................................................20

Figura 6 Interfaz de línea de comandos de Angular .........................................................................20

Figura 7 Interfaz de línea de comandos de Vue................................................................................21

Figura 8 Tabla de diferencias entre Angular y Vue..........................................................................22

Figura 9 Ciclo de actualizaciones de versiones de Angular.............................................................23

Figura 10 Nomenclatura de cambio de versión ................................................................................23

Figura 11 Model-view-view-model ...................................................................................................24

Figura 12 Tabla de Ventajas de Angular y Vue................................................................................25

Figura 13 Estadística de Frameworks JavaScript .............................................................................26

Figura 14 Tabla de desventajas de Angular y Vue ...........................................................................30


6

Resumen

En esta monografía inicialmente se hace una pequeña introducción, donde se menciona el porqué
del estudio en particular de estas tecnologías de desarrollo de interfaces de usuarios orientadas a
la web, así como también el alcance de este estudio.

Seguidamente se hace énfasis a los antecedentes de los Frameworks en general, para luego
centrarnos específicamente a los antecedentes de Angular y Vue a lo largo de sus existencias.

Otro punto importante que se toca es la metodología con la cual se ha desarrollado esta monografía.

Después se hace un repaso sobre los conceptos y definiciones básicas que todo desarrollador de
interfaces de usuario debe conocer. Ya para luego entrar a las características más importantes que
tienen estas herramientas de desarrollo, como ser sus similitudes que poseen, las diferencias que
hacen únicas a cada Framework. También se hace un análisis de las ventajas y desventajas que
tiene uno sobre el otro.

Ya para finalizar y con todo lo analizado e investigado a lo largo de esta monografía se pasa a
sacar las debidas conclusiones.

Palabras clave: Framework, JavaScript, TypeScript, Angular, Vue, Backend, Frontend.


7

Introducción

En la actualidad todos sabemos que, en el campo de la programación, la oferta de herramientas


para crear interfaces de usuario para aplicaciones orientadas a la web es muy variada, y sobre todo
que es muy cambiante, debido sobre todo a que dichas aplicaciones y lenguajes la mayoría de las
veces pueden indistintamente utilizarse para diferentes tipos de aplicaciones, y no hay nada peor
para la persona que quiere programar la proliferación de ofertas que lo conducen a un callejón sin
salida y esto se convierte en un verdadero problema a la hora de elegir la herramienta a utilizar.

Figura 1 Algunos Frameworks de JavaScript


Fuente: (Jelvix, 2018)

Como vemos en la gráfica ( Figura 1), hay muchas herramientas o Frameworks que podríamos
estudiar, pero nos avocaremos a profundizar específicamente sobre las características más
importantes de Angular y Vue, así por ejemplo los conceptos básicos, sus similitudes y diferencias,
las ventajas y desventajas que tiene uno sobre otro, etc.
8

Lo que se quiere concretar con esta investigación, es profundizar el estudio de las características
de estas herramientas, entender el por qué se han hecho muy populares y el por qué son las más
utilizados por ls desarrolladores de interfaces de usuario en estos últimos años.

1 Generalidades

1.1 Antecedentes Generales

La web es una plataforma que no ha dejado de evolucionar desde que se creó. En sus inicios, en
los años 1990, la Web se había diseñado para permitir a los usuarios consultar información a través
del mundo, técnicamente, en esta época, los sitios web estaban compuestos únicamente de páginas
HTML estáticas

A partir de los inicios de los años 2000, la web se ha hecho más participativa, menos consultiva.
Han aparecido muchos sitios, eBay, por ejemplo, permite comprar o vender objetos publicando
anuncios o respondiendo a ellos. Youtube, permite compartir los propios videos o ver los de otros
usuarios. De similar manera Facebook nos permite compartir nuestra vida cotidiana en línea y
consultar la de nuestros amigos. Todos estos sitios han tratado de posicionar al usuario como un
actor importante y no solo como un lector.

Para construir sitios más dinámicos y con una ergonomía más potente que los sitios estáticos, el
uso de JavaScript empezó a ser muy importante.

JavaScript fue desarrollado originalmente por Brendan Eich de Netscape con el nombre de Mocha,
el cual fue renombrado posteriormente a LiveScript, para finalmente quedar como JavaScript. La
denominación produjo confusión, dando la impresión de que el lenguaje es una prolongación de
Java, y se ha caracterizado por muchos como una estrategia de mercadotecnia de Netscape para
obtener prestigio e innovar en el ámbito de los nuevos lenguajes de programación web.

En 1997 los autores propusieron JavaScript para que fuera adoptado como estándar de la
Asociación Europea de Fabricantes de Computadoras (ECMA, por sus siglas en ingles), que a
pesar de su nombre no es europeo sino internacional, con sede en Ginebra. En junio de 1997 fue
9

adoptado como un estándar ECMA, con el nombre de ECMAScript. Poco después también como
un estándar ISO.

JavaScript se consideró por mucho tiempo como un elemento accesorio en la creación de sitios
web. Sin embargo, desde la aparición de AJAX y la web 2.0, la importancia de JavaScript en las
aplicaciones web ha crecido exponencialmente.

La evolución de JavaScript ha hecho de él un lenguaje de programación cada vez más potente y al


mismo tiempo más complejo, por ello han surgido Frameworks y librerías de JavaScript, para
facilitar la integración en las aplicaciones web y en el aumento de la productividad del desarrollo.

1.2 Antecedentes Específicos

Una de las herramientas más influyentes y atractivas para el desarrollo de una aplicación web es
Angular.

Angular comenzó en 2009 como un Framework para el desarrollo Frontend con JavaScript,
desarrollado por el equipo de Google. Al principio no convenció, posiblemente por su dificultad
en su curva de aprendizaje, pero que con el tiempo ha ido haciéndose con el mercado y los
desarrolladores por sus ideas potentes e innovadoras, dando la oportunidad de crear proyectos con
una estructura MVC limpia y la idea de manipular el DOM de manera dinámica.

Actualmente es el Framework más utilizado para desarrollos en JavaScript en estos últimos años,
apoyado con mucha documentación y librerías para facilitar el desarrollo de aplicaciones en
Angular, con una clara diferencia respecto a los demás.

Angular se ha ido renovando y reinventando al pasar de los años, ha ido evolucionando cada vez
más y más en sus nuevas versiones incorporando mejoras y simplificando algunas tareas que
anteriormente era muy dificultoso para el programador.

Hoy en día Angular se ha convertido quizá en el Framework más popular para crear aplicaciones
sofisticadas de una sola página (SPA).
10

Por otra parte, otra herramienta muy interesante y a tomar en cuenta es Vue, que fue lanzado por
primera vez en febrero de 2014 por el ex empleado de Google Evan You. Ha sido todo un éxito,
especialmente teniendo en cuenta que Vue está obteniendo tanta tracción como un espectáculo de
un solo hombre sin el respaldo de una gran compañía. Evan actualmente tiene un equipo de doce
desarrolladores principales. En 2016, se lanzó la versión 2. Vue es utilizado por Alibaba, Baidu,
Expedia, Nintendo, GitLab.

A diferencia de otros Frameworks monolíticos, Vue está diseñado desde el inicio para ser adoptado
incrementalmente. La biblioteca principal se enfoca solo en la capa de la vista, y es muy simple de
utilizar e integrar con otros proyectos o bibliotecas existentes. Por otro lado, Vue también es
perfectamente capaz de soportar aplicaciones sofisticadas de una sola página (SPA) cuando se
utiliza en combinación con herramientas modernas y librerías compatibles.

2 Metodología

Para el presente trabajo se utilizarán los siguientes métodos de investigación:

 Método Bibliográfico, debido a que se realizara la lectura y compilación de libros


relacionados al tema de estudio.
 Método Analítico, debido a que se procederá a revisar y analizar ordenadamente
documentos relacionados al tema de estudio.

3 Características de Angular y Vue para el desarrollo de interfaces de usuario

Para la construcción de interfaces de usuario orientadas a la web con Angular o Vue, es necesario
el estudio de las características de estas herramientas que las hacen muy populares y poderosas.

3.1 Conceptos teóricos para desarrollar interfaces de usuario

Para que un desarrollador empiece a construir interfaces de usuario, primeramente, debe conocer
los conceptos, definiciones y fundamentos básicos que tienen estas tecnologías.
11

3.1.1 Framework

Un Framework es un conjunto de clases cooperativas que construyen un diseño reutilizable para


un tipo específico de software. Un Framework proporciona la arquitectura partiendo el diseño en
clases abstractas y definiendo sus responsabilidades y colaboraciones. Un desarrollador realiza una
aplicación haciendo subclases y componiendo instancias a partir de las clases definidas por el
Framework. (Galindo Haro & Camps Riba, 2008, pág. 38)

3.1.2 Frontend

El Frontend son todas aquellas tecnologías que corren del lado del cliente, es decir, todas aquellas
tecnologías que corren del lado del navegador web, generalizándose más que nada en tres
lenguajes, HTML , CSS Y JavaScript, la persona encargada del Frontend, se dedica solo a estas
tres tecnologías, aunque esto no significa que no sepa cómo trabaja el Backend, ya que es necesario
para que pueda consumir datos y pueda estructurar correctamente un maquetado en HTML y CSS
para su mejor comodidad y la comodidad del Backend a la hora de colocarlo sobre un servidor,
normalmente en Frontend se encarga de estilizar la página de tal manera que pueda quedar cómoda
para la persona que la ve, es decir, esta persona, debe de conocer técnicas de un usuario promedio
para dar una experiencia de usuario cómoda a la persona que visita la página, así mismo debe saber
de diseño de interacción para colocar las cosas de manera que el usuario las pueda ubicar de manera
rápida y cómoda, es decir, el Backend posteriormente se encargará de llenar las páginas de
información (en ocasiones) y de colocar la página en un servidor, pero esto de nada sirve si la
página es poco agradable, por tanto, el programador del Frontend debe de saber un poco de diseño,
ya que como se dijo anteriormente, este se va a encargar de que la página no solo se vea bonita
para el usuario, sino que sea cómoda de utilizar y navegar.

El Frontend es el que se encargará de dejar bonita la página, en ver que los datos se muestren de
manera cómoda para el usuario, de que la interacción que realice sea llamativa y en la estética del
sitio.
12

3.1.3 Backend

El Backend es todo aquello que se encuentra del lado del servidor, es decir, que toda persona que
se dedica al desarrollo Backend se encarga de lenguajes como PHP, Python, .Net, Java, etc, es
aquel que interactua con bases de datos, verificar manejo de sesiones de usuarios, montar la página
en un servidor, y desde éste “servir” todas las vistas que el Frontend crea, es decir, uno como
Backend se encarga más que nada de la manipulación de los datos, que en muchas ocasiones suele
ser lo más tedioso, pero al mismo tiempo, un Backend no sirve de mucho si no existe un Frontend
de por medio que se haya encargado de que la página se vea estética, el programador de Backend
normalmente debe de conocer Bases de datos, Frameworks y Librerías que le permitan
desenvolverse mejor en la manera en la que sirve las páginas, ya que él se va a encargar de que
todos los datos que llegan desde el Frontend, vayan a una base de datos, por tanto, debe de conocer
un poco de seguridad, para mantener los datos cuidados y tratar de protegerse de todo tipo de
inyecciones que puedan tratar de hacer al servidor para que no sea vulnerable, así mismo, se
encarga de crear API’s para que sus datos puedan consumirse de manera cómoda para el Frontend
y que pueda mejorar la experiencia del usuario, teniendo en cuenta los cuidados necesarios que
debe considerar para que su servidor pueda mantenerse seguro.

3.1.4 JavaScript

JavaScript es un lenguaje de desarrollo de aplicaciones cliente/servidor a través de Internet.

También se puede definir como un lenguaje ligero e interpretado, orientado a objetos con funciones
de primera clase, más conocido como el lenguaje de script para páginas web, pero también usado
en muchos entornos sin navegador, tales como node.js, Apache CouchDB y Adobe Acrobat. Es
un lenguaje script multiparadigma, basado en prototipos, dinámico, soporta estilos de
programación funcional, orientada a objetos e imperativa

El lenguaje escrito en JavaScript tiene la particularidad de estar insertado dentro del mismo
documento HTML, que lo presenta al usuario final y no es por ello un programa aparte. Permite
crear aplicaciones web interactivas. (Sanchez, 2001, pág. 9)
13

3.1.5 TypeScript

Es un lenguaje creado por Microsoft y de código abierto, próximo sintácticamente a JavaScript, el


cual cuenta con herramientas de programación orientada a objetos, y que genera código JavaScript
tras su compilación. La ventaja de este lenguaje es su fase de compilación, durante la cual el
compilador de TypeScript va a realizar un conjunto de verificaciones sintácticas que garantizaran
la consistencia del código escrito. (Ollivier, 2011, pág. 318)

3.1.6 Compilación

Compilar es el proceso por el cual el código fuente de un programa escrito en un lenguaje de


programación “A” se traduce a código fuente de un lenguaje de programación “B”.

El caso más común es cuando el código origen está escrito en un lenguaje de programación de
“alto nivel” y se traduce a código máquina que pueda ejecutar directamente el ordenador.

3.1.7 Transpilación

La transpilación es un caso particular de la compilación. Es decir, todo transpilador es también un


compilador, pero al revés no es cierto, hay compiladores que no se pueden considerar
transpiladores. La característica que convierte un compilador en transpilador es la relación entre
los lenguajes origen y destino de la traducción.

Los transpiladores son programas utilizados en la traducción del código de un lenguaje para
utilizarlo en otro, o de una versión para otra, permitiendo hacer compatible cualquier código en
cualquier tipo de plataforma.

Básicamente, los transpiladores se emplean en la fase de desarrollo del proyecto, donde el


programador tiene que escribir el código y éste hace su trabajo traduciéndolo, compilando y
adaptándolo. Este nuevo código, ya compatible, es el que se distribuye o despliega para llevarlo a
producción. Una vez traducido el código, no es necesaria la herramienta en lo que resta del
desarrollo del proyecto.
14

3.1.8 Node.js

Node.js es un entorno en tiempo de ejecución multiplataforma, de código abierto, para la capa del
servidor basado en el lenguaje de programación ECMAScript, asíncrono, con I/O de datos en una
arquitectura orientada a eventos y basado en el motor V8 de Google

Concebido como un entorno de ejecución de JavaScript orientado a eventos asíncronos, Node está
diseñado para construir aplicaciones en red escalables. En la siguiente aplicación de ejemplo "hola
mundo" (ver Figura 2), se pueden manejar muchas conexiones concurrentes. Por cada conexión el
callback será ejecutado, sin embargo, si no hay trabajo que hacer Node estará durmiendo.

Figura 2 Ejemplo "Hola mundo"


Fuente: (Sitio Oficial de Node.js, 2018)

Esto contrasta con el modelo de concurrencia más común hoy en día, donde se usan hilos del
Sistema Operativo. Las operaciones de redes basadas en hilos son relativamente ineficientes y son
muy difíciles de usar. Además, los usuarios de Node están libres de preocupaciones sobre el
15

bloqueo del proceso, ya que no existe. Casi ninguna función en Node realiza I/O directamente, así
que el proceso nunca se bloquea. Debido a que no hay bloqueo es muy razonable desarrollar
sistemas escalables en Node. (Sitio Oficial de Node.js, 2018)

3.1.9 Angular

Angular es un Framework de desarrollo para JavaScript creado por Google.

Figura 3 Angular el Framework más popular


Fuente: (Sitio Oficial de Angular, 2018)

Es un Framework que facilita la creación de aplicaciones web. Angular combina plantillas


declarativas, inyección de dependencias herramientas de extremo a extremo y las mejores prácticas
para ser aplicadas en el desarrollo Frontend.

Desde la aparición de Angular la nueva versión de AngularJS se pueden crear aplicaciones tanto
para la web, móvil e incluso el escritorio, convirtiéndolo en un Framework muy funcional para los
desarrolladores.

Importantes empresas lo utilizan aparte de Google, por ejemplo: Nike, Telegram, Youtube,
Freelancer y Upwork
16

3.1.10 Vue

Vue es un marco de trabajo progresivo de código abierto de JavaScript para construir interfaces de
usuario. La integración en proyectos que usan otras bibliotecas de JavaScript se simplifica con
Vue porque está diseñada para ser adoptable incrementalmente.

Como se indica claramente en la imagen (Figura 4), Vue es un Framework progresivo para
construir interfaces de usuario. Fue creado por Evan You que trabajaba en Google realizando
prototipos y en el core del Framework de Meteor, hasta que pensó en otra forma de hacer una
opción más fácil que abarcara las necesidades a la hora de hacer prototipos. Así surgió Vue en el
2014, desde entonces ha tenido una gran evolución y sigue creciendo en su versión 2 cada vez más
y más.

Figura 4 Vue el Framework JavaScript Progresivo


Fuente: (Pagina Oficial de Vue, 2018)

Vue está diseñado desde cero para ser adoptable de forma incremental. La biblioteca central se
enfoca solo en la capa de vista y es fácil de captar e integrar con otras bibliotecas o proyectos
existentes. Por otro lado, Vue también es perfectamente capaz de impulsar aplicaciones
sofisticadas de una sola página cuando se usa en combinación con herramientas modernas y
bibliotecas de soporte. (Pagina Oficial de Vue, 2018)

Empresas como: Xiaomi, Alibaba, WizzAir, Adobe y Gitlab son algunos de los muchas que están
utilizando actualmente esta herramienta.
17

3.1.11 SPA

Una SPA (por sus siglas en inglés, Single Page Application) es una aplicación web de una sola
página, es decir, la interacción de la aplicación es en una página. En una SPA el HTML, JavaScript,
CSS se carga una sola vez.

Todos los días interactuamos con aplicaciones SPA, como por ejemplo YouTube, Netflix, Gmail,
etc.

Las SPAs resuelven los siguientes puntos:

 Enrutado
 Interfaz de usuario dinámica
 Acceso a los datos

El enrutado, debe permitir al usuario navegar a través de URLs. Respecto a la Interfaz de usuario
dinámica, se refiere a actualizar la información que se visualiza en la página cuando se recibe datos
a través del API. Finalmente, acceso a los datos, la aplicación pueda acceder a un sistema de
almacenamiento de datos en cliente. El navegador proporciona una serie de servicios.

A diferencia de las aplicaciones con arquitectura Cliente/Servidor, que operan en una red y solo
funcionaban sobre la PC, las SPA pueden ejecutarse en cualquier dispositivo que tenga un
navegador web y conexión web.

3.2 Similitudes entre Angular y Vue

Existen características comunes entre Angular y Vue que los hacen muy interesantes a la hora de
escoger una de estas herramientas para la construcción de interfaces de usuario, por ello es
primordial analizar esas características comunes.
18

3.2.1 Código libre

Este es una de las razones por el cual muchos desarrolladores del mundo se interesan por estas
tecnologías.

El código abierto es un modelo de desarrollo de software basado en la colaboración abierta. Se


enfoca más en los beneficios prácticos (acceso al código fuente) que en cuestiones éticas o de
libertad que tanto se destacan en el software libre. Para muchos el término «libre» hace referencia
al hecho de adquirir un software de manera gratuita, pero más que eso, la libertad se refiere al
modificar la fuente del programa sin restricciones de licencia, ya que muchas empresas de software
encierran su código, ocultándolo, y restringiéndose los derechos a sí misma

El termino de “código abierto” es utilizado a menudo para referirse a Software Libre. Sin embargo,
sus criterios son algo menos determinantes. El código abierto acepta algunas clases de restricciones
que el software libre ha rechazado. El significado de código abierto se refiere a la accesibilidad del
código fuente, aunque tienen licencias restrictivas sobre ese código. (Alonso, 2014, pág. 268)

3.2.2 Popularidad

Muchos arquitectos y líderes de proyectos de todo el mundo los han adoptado para crear
aplicaciones web de todo tipo, entre ellas las empresariales, tanto ha sido su popularidad de estos
Frameworks. que han crecido muy rápidamente y han sido aceptados por una creciente comunidad
de desarrolladores alrededor del mundo.

3.2.3 Basados en componentes

Los ingenieros de software consideran los componentes como parte de la plataforma inicial para
la orientación a servicios. Los componentes juegan este rol, por ejemplo, en servicios de web y,
más recientemente, en las arquitecturas orientadas a servicios (SOA), por lo que un componente
es convertido por el servicio web en un servicio y consiguientemente hereda otras características
más allá de las de un componente ordinario.
19

Los componentes son una de las características más poderosas de un Framework. Te permiten
extender elementos HTML básicos para encapsular código reutilizable. En un nivel alto, los
componentes son elementos personalizados a los que el compilador les añade comportamiento. En
algunos casos, pueden aparecer como elementos HTML nativos extendidos con el atributo especial

Una aplicación grande se podrá dividir en partes pequeñas, en dichas partes se podrá entonces
encapsular la lógica necesaria relativo a un aspecto visual de una página dada. Los componentes
son una solución viable para poder tener un dominio sobre dichas partes y sobre la interacción
entre éstas.

3.2.4 Últimas versiones de JavaScript

JavaScript es totalmente dinámico, estando en un proceso constante de cambio y mejora. Como


ocurrió con cada una de las anteriores versiones de ECMAScript, al principio no todos los
navegadores y plataformas soportaban esta nueva versión. Para evitar y subsanar estos problemas
de compatibilidad, se utilizan los transpiladores, una herramienta realmente útil.

Tanto Angular como Vue, trabajan con la última versión de JavaScript como estándar. JavaScript
es sin duda alguna, la base como lenguaje de programación del lado del Frontend. Así que, si se
tiene cierto dominio sobre JavaScript, se llevará un buen terreno ganado para aprovecharlo al
máximo, sea para el caso de Angular o Vue.

3.2.5 Agnósticos al Backend

Angular y Vue, se enfocan principalmente al Frontend, siendo agnóstico al Backend, es decir, se


podrá entonces crear la parte del Backend con el lenguaje de programación de preferencia y sus
detalles más comunes en cuanto al mecanismo de persistencia (acceso al motor de bases de datos
dado, etc.).

Como se muestra en la gráfica (ver Figura 5), y de hecho, es mejor manejar los proyectos por
separado: por un lado, la aplicación del lado de servidor, es decir el Backend y por otro la
aplicación del lado del cliente, o sea, el Frontend.
20

Figura 5 Separación del Backend y Frontend


Fuente: (DevCode, 2018)

3.2.6 CLI

Tanto Angular como Vue tienen su respectiva interfaz de línea de comandos (Figura 6) (Figura 7).
También llamada interfaz de línea de órdenes (CLI, por sus siglas en inglés). La Cli es un método
que permite a los usuarios dar instrucciones a algún programa informático por medio de una línea
de texto simple.

Figura 6 Interfaz de línea de comandos de Angular


Fuente: (Aprende facilmente, 2018)
21

Figura 7 Interfaz de línea de comandos de Vue


Fuente: (itnext.io, 2018)

Comenzar el desarrollo de una aplicación web es un proceso muy tedioso que, además, se dificulta
a medida que crece el tamaño y la complejidad del proyecto. Siempre cuesta empezar, y, sobre
todo, configurar el “esqueleto” del proyecto.

La CLI permite crear un proyecto totalmente configurado con un simple comando y no empezar
desde cero, también se puede crear boilerplate de módulos (hasta con enrutado), componentes,
directivas, pipes etc. Todo esto automatizado y de forma muy sencilla.

3.3 Diferencias entre Angular y Vue

Las características singulares que tienen tanto Angular como Vue, hacen que cada una de estas
herramientas tengan su propia identidad y su propia reputación, por tal motivo es necesario el
análisis de estas diferencias.
22

Figura 8 Tabla de diferencias entre Angular y Vue

Fuente: Elaboración Propia

3.3.1 Actualizaciones constantes de angular

Cuando salió AngularJS en el 2009, era normal ponerle el “JS” en el nombre del Framework ya
que estaban 100% escritos en JavaScript. Pero este nombre terminó siendo un problema, ya que
cuando empezó a crearse “Angular 2”, la nueva versión de este super poderoso Framework, se
empezó a escribir en AtScript, pero Microsoft creo TypeScript y por el tipado y su robustez, el
equipo de Angular lo adoptó y decidió reescribir todo lo que se había hecho en AtScript a
TypeScript… Por este motivo se tachó el JS del nombre. Entonces quedó de AngularJS a Angular
2. Pero la historia no queda ahí, después de tanto esperar esta nueva versión que cambió muchísimo
de la versión anterior, se tomó otra gran decisión. A partir de ese momento sacar versiones
consecutivas utilizando el SEMVER, por lo tanto, cada 6 meses se iba a tener una versión de
Angular nueva.
23

Figura 9 Ciclo de actualizaciones de versiones de Angular


Fuente: (Carlos Solis, 2018)

Y nuevamente se empezó con un nuevo problema en el nombre. Igor Minar, uno de los core team
de Angular se encargó en explicar exactamente qué es esto de las versiones y porque no se debían
preocupar, es más: se debían alegrar.

SEMREV es “Agrega contexto a los números de las versiones”. Esto permite a los desarrolladores
no sólo razonar sobre cualquier actualización que se hace, incluso se puede dejar que herramientas
como NPM lo hagan de manera automática y segura para nosotros. Como se puede apreciar en la
gráfica, una versión semántica consta de tres números:

Figura 10 Nomenclatura de cambio de versión


Fuente: (Carlos Solis, 2018)
24

Siempre que se corrija un error y lo liberen, aumenta el último número. Si se agrega una nueva
función, aumenta el segundo número y cada vez que libera un cambio de fuerte aumenta el primer
número.

Angular 3, o lo que se hubiera llamado así, se incorporó en el nuevo router de Angular 2 que salió
poco después de éste con la versión 3.3.0, así que, para evitar confusiones decidieron saltar
directamente a la versión 4.

Las siguientes versiones que salieron 5, 6 y las próximas versiones de Angular será de acuerdo a
su nueva nomenclatura, pero además del cambio semántico, se incorpora un cambio en el ciclo de
desarrollo y tiempo de vida de Angular, eso significa que, desde ya, tiene ciclos de vida de 6 meses
como se había mencionado. (Arizmendi, 2011)

3.3.2 El patrón view-model o Model-view-view-model de Vue

Consiste en añadir una capa de lógica entre la capa de negocio y la capa de UI para evitar que una
tenga que comunicarse directamente con la otra: cuando la vista -la representación de una entidad
en la capa de presentación-, o el modelo -su representación en la capa de negocio- cambien, el
view-model se encargará de actualizar su contrapartida en la otra capa de forma automática, esto
facilita el testing y permite crear programas más modificables y reusables, aparte de evitar una
gran cantidad de código boilerplate que actualiza manualmente uno en función del otro.

Figura 11 Model-view-view-model
Fuente: (Pagina oficial de Vue, 2018)
25

3.4 Ventajas de Angular y Vue

Para el aprovechamiento máximo de cada herramienta, es necesario el estudio de las ventajas que
cada uno de estas tecnologías ofrecen a los desarrolladores de interfaces de usuario.

Figura 12 Tabla de Ventajas de Angular y Vue

Fuente Elaboración propia

3.4.1 Ventajas de Angular

 Angular el más buscado

Si hay un Framework en el mercado que no para de crecer, atractivo y con una comunidad enorme
detrás, ese es Angular.

Según la ilustración (ver Figura 13Figura 13), Angular es el Framework más buscado y consultado
en Stack Overflow.
26

Figura 13 Estadística de Frameworks JavaScript


Fuente: (Trabajo Frontend, 2018)

Stack Overflow es de enorme ayuda a la hora de escribir código. Para la mayoría de los
desarrolladores es la gran base para encontrar respuestas a todo tipo de preguntas relacionadas al
trabajo, desde muy pequeñas dudas técnicas a explicaciones conceptuales de alto nivel.

Es una referencia utilizada no solo por desarrolladores Frontend, y además consultada tanto por
programadores desde principiantes a seniors.

 Preparado para cualquier tipo de proyecto

Al ser un Framework completo, no es necesario tener que utilizar contenido de bibliotecas ajenas
para desarrollar aplicaciones, algo que sí pasa con muchas otras herramientas.

De la misma manera, con Angular, se dan más opciones de serie, lo cual permite organizar
fácilmente el código, muestra cómo se hacen las diferentes tareas o cómo es la arquitectura de la
aplicación. Se necesita pensar muy poco en cómo realizar las tareas. Porque Angular ya las ha
hecho para ti, entonces solo se puede dedicar tiempo a lo realmente importa, o sea a proveer de
funcionalidades a una aplicación web.
27

 Gran soporte para herramientas de desarrollo

La programación, al día de hoy, raramente se realiza sobre texto plano. Lo común es utilizar IDEs,
editores avanzados y demás herramientas que faciliten el entendimiento y el desarrollo del código.

Angular cuenta con plantillas capaces de almacenar, por separado, el código que se usa en la
interfaz de usuario y el de la logística de negocio. De esta manera, el uso de las herramientas
estándar de desarrollo es mucho más sencillo haciendo que también lo sea la edición de archivos.

 Angular siempre actualizado

Como ya se mencionó, Angular saca parches y soluciones a bugs cada semana, lanza 3 versiones
pequeñas cada al mes después de cada versión grande lanzada, y finalmente lanza una versión que
cambia el número “grande”, con un asistente de migración cada 6 meses. Todo esto hace que
angular este siempre en constante evolución.

 Código consistente

Eso implica que cualquier programador de Angular puede mirar el código escrito por otro
programador de Angular y entenderlo muy rápidamente, no encontrará código raro ahí. Como
consecuencia agregar un nuevo programador al proyecto o reemplazar a un programador por otro
es fácil, rápido, y sencillo. Para trabajar en equipo o retomar un proyecto que se quedó sin terminar
es una gran ventaja. Así que si una Empresa está desarrollando varios proyectos y necesita
apresurar uno de ellos puede “tomar prestado” a un programador de otro proyecto para darle
prioridad al que lo necesita.

Angular usa como lenguaje a TypeScript. Esto aumenta la consistencia del código fuente. Por
ejemplo, en JavaScript hay varias maneras de declarar un objeto, en cambio TypeScript tiene una
sola manera. Si no eres experto en JavaScript, mirando código se puede tener dudas, eso no ocurre
con TypeScript, siempre se sabe lo que se está haciendo. No es obligatorio usar TypeScript con
Angular, pero sí es lo recomendable.
28

3.4.2 Ventajas de Vue

 Curva de aprendizaje liviano

Esta es la principal ventaja que tiene este framework. La mayoría de los frameworks que compiten
con Vue.js tienen sus problemas, por ejemplo, Angular 1 tiene muchos elementos que se deben
comprender antes de construir una aplicación, Angular 2 tiene un setup muy complicado, para
hacer el “hola mundo” se necesitan 18 dependencias de npm, 4 archivos, y sobre 3,000 palabras
para explicar cómo hacerlo, Por estas razones un Framework simple captura la atención y gusta
mucho a los desarrolladores.

Además, es más beneficiosa para las empresas de desarrollo, porque hacen menos gastos
invirtiendo en el aprendizaje de sus empleados y ganan tiempo en realizar sus proyectos. Para
comenzar con Vue, todo lo que se necesita es familiaridad con HTML y ES5 JavaScript (es decir,
JavaScript plano). Con estas habilidades básicas, se puede comenzar a crear aplicaciones no
triviales en menos de un día.

 Rendimiento

Vue tiene un mejor rendimiento y es mucho más fácil de optimizar porque no utiliza la
comprobación sucia. Angular se vuelve lento cuando hay muchos observadores, porque cada vez
que cambia algo en el alcance, todos estos observadores deben ser reevaluados nuevamente.
Además, el ciclo de resumen puede tener que ejecutarse varias veces para estabilizarse, si algún
observador desencadena otra actualización. Los usuarios de Angular a menudo tienen que recurrir
a técnicas esotéricas para sortear el ciclo de resumen, y en algunas situaciones, no hay forma de
optimizar un alcance con muchos observadores.

Vue no sufre de esto en absoluto porque utiliza un sistema transparente de observación de


seguimiento de dependencias con colas asíncronas: todos los cambios se activan de forma
independiente a menos que tengan relaciones de dependencia explícitas.
29

Curiosamente, hay algunas similitudes en cómo Angular y Vue están abordando estos problemas
de Angular.

 Excelente documentación

Vue.js tiene una documentación muy circunstancial que puede ajustar la curva de aprendizaje para
los desarrolladores y ahorrar mucho tiempo para desarrollar una aplicación utilizando solo los
conocimientos básicos de HTML y JavaScript.

 Progresivo

Esto quiere decir que las funcionalidades principales (el renderizado y el sistema de componentes)
están en una pequeña biblioteca, sin embargo, es posible añadir todas las funcionalidades que
tienen otros Frameworks completos como el routing en el lado del cliente, build systems como
Webpack o Systemjs y manejo de estados con herramientas como Vuex o Redux, añadiendo
bibliotecas adicionales. La filosofía detrás de esta forma de construir el Framework la explica su
creador en esta conferencia donde explica que los Frameworks introducen complejidad con el
objetivo de disminuir la complejidad de la construcción de aplicaciones, sin embargo, muchas
veces, o se quedan cortos (si la aplicación es muy grande), o se pasan (si el Framework introduce
más complejidad de la que necesita la aplicación). Por lo tanto, este esquema progresivo permite
incluir en la aplicación solo las herramientas que se necesitan.

 Tamaño ligero

Las versiones recientes de Angular, con compilación de AOT, han logrado reducir su tamaño
considerablemente. Sin embargo, un proyecto Vue con todas las funciones con Vuex más Vue
Router incluido (aproximadamente 30KB comprimido) aún es significativamente más ligero que
una aplicación compilada por AOT y lista para usar, generada por angular-cli aproximadamente
65KB comprimido) según el portal oficial de Vue. (Pagina Oficial de Vue, 2018)

 Impresionante integración
30

Vue se puede utilizar tanto para crear aplicaciones de una sola página como para interfaces web
de aplicaciones más difíciles. Lo principal es que las partes interactivas más pequeñas se pueden
integrar fácilmente en la infraestructura existente sin ningún efecto negativo en todo el sistema.

 Directivas vs componentes

Vue tiene una separación más clara entre directivas y componentes. Las directivas están destinadas
a encapsular las manipulaciones de DOM solamente, mientras que los componentes son unidades
autónomas que tienen su propia lógica de vista y datos. En AngularJS, las directivas hacen todo y
los componentes son solo un tipo específico de directiva.

3.5 Desventajas de Angular y Vue

Para que el desarrollador no caiga en frustraciones, es necesario la investigación sobre las


desventajas que tienen estas herramientas de desarrollo, ya que no todo Framework es perfecto.

Figura 14 Tabla de desventajas de Angular y Vue

Fuente: Elaboración Propia

3.5.1 Desventajas de Angular

 Curva de aprendizaje
31

La gran crítica de los desarrolladores sobre Angular es su gran curva de aprendizaje, ya que
empezar con Angular implica tener amplios conocimientos de diferentes tecnologías. En primer
lugar, Angular es un framework de JavaScript que se ha apoyado y recomienda el desarrollo sobre
TypeScript (superconjunto de JavaScript creado por Microsoft), utiliza la programación funcional
o declarativa haciendo uso de funciones lambda, y se basa en el patrón reactivo (RxJS) para la
gestión del código asíncrono del lenguaje JavaScript. Además, recomienda fuertemente el
desarrollo basado en pruebas utilizando herramientas como Jasmine/Karma para las pruebas
unitarias y de integración, y Protractor para las pruebas del sistema.

 Angular requiere esencialmente de TypeScript

Dado que casi toda su documentación y recursos de aprendizaje están basados en TypeScript.
TypeScript tiene sus beneficios: la comprobación de tipos estática puede ser muy útil para
aplicaciones a gran escala y puede ser un gran impulso a la productividad para desarrolladores con
fondos en Java y C #.

Sin embargo, no todo el mundo quiere usar TypeScript. En muchos casos de uso a pequeña escala,
la introducción de un sistema tipo puede generar más gastos generales que la ganancia de
productividad. En esos casos, sería mejor ir con Vue, ya que usar Angular sin TypeScript puede
ser un desafío.

 Problemas con las constantes actualizaciones

Si bien Angular se actualiza constantemente y eso quiere decir que está en constante evolución,
esto puede llevar para muchos a problemas de migración que pueden aparecer al pasar de la versión
anterior a la última.

3.5.2 Desventajas de Vue

 Riesgo en el exceso de flexibilidad


32

A veces, Vue.js puede tener problemas al integrarse en grandes proyectos. Vue.js da mucha
libertad, lo que para un desarrollador poco experimentado puede resultar peligroso cuando se trate
de aplicaciones muy grandes

 Mantenido por un grupo de personas

Esto podría suponer un riesgo menor ya que la comunidad alrededor de Vue.js es muy grande.

A pesar de no contar con el apoyo de compañías tecnológicas tan grandes como Google o
Facebook, Vue es utilizado intensamente por Alibaba, y hay bastantes compañías importantes que
dependen de Vue, lo que lleva a pensar que es difícil que su desarrollo sea abandonado. Su
adopción en este último año ha crecido enormemente, y Evan You creó un patrón para financiar
Vue que ha tenido bastante éxito y ha ayudado a contribuir al desarrollo de la herramienta.

 Falta de recursos

Vue.js todavía tiene una cuota de mercado bastante pequeña en comparación con Angular, lo que
significa que el intercambio de conocimientos en este Framework todavía está en la fase inicial

4 Conclusiones

 Para que un desarrollador empiece a construir interfaces de usuario, primeramente, debe


conocer los conceptos, definiciones y fundamentos básicos que tienen estas tecnologías.
Por ejemplo, debe saber que es un Framework como tal, saber diferenciar entre Backend y
Frontend, conocer básicamente JavaScript y TypeScript, saber cuál es la diferencia entre
un compilador y un transpilador, como funcionan básicamente Angular y Vue, saber que
es una SPA.
 Existen características comunes entre Angular y Vue que los hacen muy interesantes a la
hora de escoger una de estas herramientas para la construcción de interfaces de usuario,
por ello es primordial analizar esas características comunes. Entonces se debe tomar muy
en cuenta estos detalles: el hecho que una herramienta sea de código libre ya es un punto a
favor, que este respaldado por una gran comunidad y que cuente con una buena
33

documentación es primordial para empezar a aprender a utilizar dicha herramienta. Las


herramientas deben ser soportadas, actualizadas constantemente y deben evolucionar
conforme a los requerimientos de las nuevas necesidades. El que sea agnóstico al Backend
lo hace más interesante, ya que hace que el desarrollador pueda escoger también las
herramientas del lado del servidor sin que esto sea un problema.
 Las características singulares que tienen tanto Angular como Vue, hacen que cada una de
estas herramientas tengan su propia identidad y su propia reputación, por tal motivo es
necesario el análisis de estas diferencias, conocer las singularidades de cada Framework
hace que se pueda tomar una mejor decisión a la hora de escoger la herramienta para cierto
proyecto. Los Frameworks son herramientas muy poderosas que nos facilitan muchas
tareas en el desarrollo de interfaces de usuario. Existen muchos Frameworks disponibles
hoy en día, por lo cual se debe hacer un análisis de las características particulares que tienen
estas herramientas para poder elegir uno en específico para cada proyecto.
 Para el aprovechamiento máximo de cada herramienta, es necesario el estudio de las
ventajas que cada uno de estas tecnologías ofrecen a los desarrolladores de interfaces de
usuario. En esta parte se puede evidenciar que Angular es más popular y más usado en
proyectos más grandes, aunque Vue está creciendo muy rápidamente estos últimos años.
Angular es un Framework completo y robusto, esto hace que esté preparado para proyectos
grandes a nivel empresarial. Vue es más progresivo, esto quiere decir que a medida que el
proyecto va creciendo se pueden integrar otras herramientas sin ningún problema. Vue es
ligero ya que inicialmente pesa mucho menos que Angular, en cuanto a tiempos de
ejecución también Vue toma ventaja. Angular es más consistente en su código y casi todo
lo tiene definido es decir que está más estandarizado, mientras que Vue es más flexible y
da más opciones al desarrollador a la hora de integrar otras herramientas.

 Para que el desarrollador no caiga en frustraciones, es necesario la investigación sobre las


desventajas que tienen estas herramientas de desarrollo, ya que no todo Framework es
perfecto. En esta parte se puede afirmar que Angular tiene una curva de aprendizaje más
larga, ya que casi por imposición debes aprender TypeScript. Muchos desarrolladores
34

tienen problemas con las constantes actualizaciones que salen en Angular y no es muy
recomendable para proyectos pequeños. Mientras que Vue tiende a tener problemas a
medida que el proyecto va creciendo al ser un Framework muy flexible. También se puede
decir que Vue está mantenida por un grupo pequeño de personas y no cuenta con mucha
inversión a lo contrario que pasa con Angular que es mantenido por Google.

5 Bibliografía

Alonso, A. (2014). La tecnociencia y su divulgación: un enfoque transdisciplinar.

Arizmendi, C. (2011). Angular.

Galindo Haro, J. M., & Camps Riba, J. M. (2008). Diseño e implementación de un marco de

trabajo (framework) de presentación para aplicaciones JEE.

Ollivier, S. (2011). AngularJS: Desarrolle hoy las aplicaciones web de mañana.

Sanchez, M. A. (2001). JavaScript.


35

6 Páginas Web

Aprende facilmente. (2018). Obtenido de http://www.aprende-facilmente.com/angular-2/angular-

cli/

Carlos Solis. (2018). Obtenido de https://carlossolis.mobi/la-saga-de-angular-episodios-js-2-3-4-

y-5-681d8f2d3d40

DevCode. (2018). Obtenido de https://devcode.la/blog/frontend-y-backend/

itnext.io. (2018). Obtenido de https://itnext.io/how-to-build-a-simple-vue-cli-plugin-

a2e1323de1a0

Jelvix. (2018). Obtenido de https://jelvix.com/blog/top-10-best-javascript-frameworks-list-in-

2017

Pagina oficial de Vue. (2018). Obtenido de https://012.vuejs.org/guide/

Pagina Oficial de Vue. (2018). Obtenido de https://vuejs.org/

Pagina Oficial de Vue. (2018). Obtenido de https://vuejs.org/v2/guide/

Sitio Oficial de Angular. (2018). Obtenido de https://angular.io/

Sitio Oficial de Node.js. (2018). Obtenido de https://nodejs.org/es/about/

Trabajo Frontend. (2018). Obtenido de https://www.trabajofrontend.com/blog/react-angular-vue-

mas-popular