Angular JS, Typescript, VueJS. Pequeñas decisiones en el desarrollo informático.

Cada vez son más las opciones existentes a nivel de desarrollo. Grandes empresas como Google y Microsoft lanzan sus propios frameworks con sus respectivas fortalezas y debilidades. ¿Qué me puede aportar Angular, Typescript? ¿y VueJS? ¿Qué framework está más valorado a nivel profesional? ¿Cuál me permite desarrollar de forma más cómoda?

De todas las opciones disponibles y potenciales preguntas que puedan surgir, hoy nos centramos en un punto de vista subjetivo y perfectamente rebatible de un desarrollador informático con más de seis años de experiencia, Rubén Utrilla, trabajador de Aurigae – Cashware. Nos ofrece su visión personal de algunos puntos a tener en cuenta cuando hablamos de Angular JS (framework de JavaScript puro), Typescript (Lenguaje compilado por encima de JavaScript), o VueJS (Framework progresivo).

Empezamos hablando sobre el desarrollo a través de Angular. La principal casuística a la que se están enfrentando muchos desarrolladores de Javascript en este momento, es que siguen programando en Angular 1x, ya que en Angular 2x y Angular 5x emplean Typescript, que se ha ganado algún que otro detractor.

Por otro lado, y analizando la solución que nos ofrece Typescript, es importante señalar que se trata de una herramienta muy útil para desarrolladores convertidos que vienen de lenguajes tipados (como Java o C).  Además, Typescript tiene valor añadido para una programación orientada a objetos, puesto que sigue este paradigma.

Como principal inconveniente, hay que señalar que para una programación funcional puede acabar, según algunas opiniones, con el espíritu de JavaScript.

Ante esta casuística existen varias soluciones factibles a la vez que útiles. Por ejemplo, la librería o framework VueJS el cual no utiliza lenguaje compilado solventa muy satisfactoriamente el problema (React podría ser otro ejemplo).

Hay que tener en cuenta que VueJS es muy fresco, con apenas cuatro años de funcionamiento. Puede que sea debido a su reciente creación, sumado a su versatilidad para resolver problemas como el antes descrito, que está generando importantes oportunidades laborales a nivel internacional. Además, es importante señalar que esta alternativa solventa muchos de los problemas que se venían detectando en otros frameworks antes de su lanzamiento.

VueJS puede ser una solución satisfactoria para desarrolladores que les gusta trabajar con Angular original y JavaScript sin necesidad de usar Typescript. Puede ser una opción más razonable que usar Angular 5x por ejemplo.

Por otro lado, una cuestión muy importante que han tenido que enfrentar muchos programadores es que después de llevar varios años programando en Javascript, se ven en la necesidad de aprender Typescript (usado con Angular 5x). No obstante, surge un problema, y es que no se puede predecir la vida que este lenguaje va a ofrecer, o cual será la deriva que tomen las versiones venideras. Esto obliga a plantearse que la inversión de tiempo que se tiene que emplear para aprenderlo sea o no rentable.

Un factor muy importante a tener en cuenta para afrontar esta decisión es que si sabes Angular 1x, entonces también sabes VueJS. O mejor dicho, se podría decir que existe una correlación muy sencilla entre ambos frameworks. Por poner un ejemplo, a nivel directivas, Angular trabaja con un ng-if y en VueJS tienes v-if. Con este tipo de correlaciones, sabiendo Angular se puede aprender VueJS en un solo día.

VueJS permite estar en proyectos más ligeros de lo que permite Angular aun llevando mucho más tiempo disponible.

Typescript por el contrario hay que reconocer que es más legible.

 

Big picture Angular 5 vs VueJS

Complejidad genérica. VueJS es mucho más sencillo y gratificante de aprender.

La curva de dificultad es mucho más suave que la de Angular.  Esta diferenciación se ve mucho más acusada cuando lo que se quiere desarrollar es un proyecto complejo.

A la hora de desarrollar proyectos más simples puede que no se perciba la diferencia, pero resulta mucho más fácil construir complejidades a través de VueJS. No obstante, no es lo mismo generar complejidades que desarrollar proyectos grandes. En este caso, VueJS no es la mejor opción para proyectos de estas características.

Complejidad del data binding. No es necesario señalar que Angular emplea un two way data binding, mientras que VueJS se centra en un one way data flow. Esto se traduce en una mayor capacidad por parte de VueJS para generar y desarrollar aplicaciones más cómoda e intuitivamente.

Rendimiento. VueJS trabaja con una librería mucho más pequeña que Angular, lo que una vez más se traduce en simpleza y  un rendimiento mucho más eficiente. Además, VueJS resuelve de mejor manera el problema de los dirty-checks (patrón de observer en el que algo está siempre mirando otro elemento para comprobar si cambia o no. Cuando hay muchas cosas que observar el rendimiento se puede ver afectado.)

Typescript. Tal y como se venía introduciendo, si se quiere estar al día con Angular y utilizar la última versión, es inevitable aprender Typescript. Es por ello que VueJS es una alternativa muy razonable para desarrolladores funcionales que nacen del lado de JavaScript puro, los cuales no quieren perder libertad mientras desarrollan.

Base de conocimiento: Un punto a tener en cuenta es que Angular lleva mucho más tiempo en el mercado, por lo que la base de conocimiento y la documentación disponible, es mucho mayor.

Fuente: Rubén Utrilla, desarrollador en AurigaeCashware.

 

Diccionario conceptual:

A continuación, exponemos un breve diccionario conceptual para aquellos que lo necesiten.

Angular JS – Framework de JavaScript puro que puede utilizar ES5 o ES6. Es propiedad de Google.

Typescript – Lenguaje compilado por encima de JavaScript. Es muy ordenado, pero pierde versatilidad vs Javascript. Es propiedad de Microsoft.

VueJS – Es un Framework progresivo, es decir, sirve para consumir interfaz del usuario.

Data binding – Técnica general que une orígenes de datos del proveedor y el consumider y las sincroniza.

Two way data binding – Unión de datos en la cual, cuando se actualiza el modelo se propagan los cambios a la interfaz de usuario y viceversa. Utilizado por frameworks como AngularJS.

One way data flow – Es una unión de datos en la cual el modelo es la única fuente de verdad absoluta. Utilizado por Frameworks como React y VueJS.

Dirty-Checks. Es un mecanismo bucle de Angular para comprobar todas las variables del ámbito ($scope) y reflejar sus cambios.

Scope – Ámbito donde se alberga la ejecución.