Se busca Framework – Angular 2 no me convence.

Hasta hoy en día venía usando AngularJS para mis desarrollos web. Quien me lo iba a decir, hace dos años huía de JavaScript y ahora es un lenguaje que cada vez me gusta más. Cierto es que el JavaScript de ahora no es el de antes, ha cambiado mucho el cuento y todavía sigue cambiando. ECMAScript 6 llega y viene para quedarse y los browser cada día son más potentes, de tal modo que son capaces de ejecutar aplicaciones con la misma carga que hace años cuando programábamos cliente servidor; y eso es otra vez lo que está pasando, volvemos al cliente servidor solo que el cliente se ejecuta en un browser, en un contexto, que puede ser ejecutado en cualquier sistema que pueda correr el navegador.

Las aplicaciones en el cliente tienen ya de todo y al igual que en Windows teníamos la VCL de Delphi o .NET Framework con WinForm, ahora tenemos el browser y multitud de frameworks javascript que corren en él. Actualmente se habla mucho de Angular 2 y de React, la gente los compara y la verdad es que no me parece bien, es comparar una auto caravana con una berlina … no tienen nada que ver, aunque con los dos puedes moverte.

Como decía hasta ahora he venido usando AngularJS, había pasado por Knockout y luego con Knockout + Durandal y cuando conocí AngularJS este me convenció. ¿Que me dió AngularJS? AngularJS me dio la posibilidad de realizar aplicaciones JavaScript de forma fácil. Sí, vale, la curva de aprendizaje es gorda al principio, pero cuando te haces con ello y le pillas el truco es un arma súper potente. Angular me dio la posibilidad de realizar aplicaciones de forma muy rápida. Me programé cuatro cosas básicas, directivas, factorías y algún provider, y pude tirar aplicaciones de forma fácil. En un año monté dos aplicaciones en el trabajo y una aplicación, más completa, extra laboralmente para un amigo. Costó un poco empezar pero en cuanto di con la tecla me pude centrar en lo importante, la aplicación, el negocio, las pantallas, la usabilidad, …

Y es que, a mi forma de entender todos los cruds son iguales, con Angular conseguí de una forma muy sencilla sacar CRUDs como churros.

En mi post anterior hablo de como pienso que se debe enfocar la implementación de cruds en una aplicación.

Bien, como en el mundo html + javascript están las cosas progresando muy rápido me ha llegado el momento de cambiar de framework, AngularJS se va a a quedar como está y los únicos movimientos que tendrá serán para acercarte a Angular 2, para orientar el desarrollo a componentes y hacerte el salto más fácil. Podrás hacer convivir componentes en AngularJS con componentes en Angular 2, pero Angular 2 ya no es AngularJS. Ng2 es muy distinto a AngularJS.

Llegados a este punto me puse a aprender Angular 2 hace unos meses, pero la verdad es que estaba muy verde y sujeto a muchos cambios, lo veía muy lejos y empecé a pensar en intentar programar con el estilo de Angular 2 pero usando AngularJS, me hice un emulador de Angular 2 en AngularJS pensando en que en un futuro el salto a Angular 2 fuera más sencillo.

La implementación del mismo fue muy divertida a la vez que arriesgada, me dediqué a decorar proveedores como $parse e $interpolate para transformar las expresiones de la vista sin hacer uso del prefijo del controlador (bindToController), $controller para poder añadir los hooks del lifeclicle de los componentes (todavía no estaba la 1.5), e incluso me hice un $$postDigest para avisar de cambios … me lo pasé de puta madre, pero, sin probarlo a fondo :(, desconfié de su estabilidad y no me atreví a ponerlo en producción.

Luego se me ocurrió optar por un paso intermedio, es decir, facilitar la creación de controladores, directivas y servicios con @decorators de ECMAScript7, y cree una cosa llamada ngts (Angular TypeScript). Ngts, junto a una colección de directivas básicas (ngts-module), es lo que uso actualmente y si en dos semanas no consigo dar con un framework que me de lo que quiero se quedará conmigo al menos un año, con muchas papeletas a que sean más…

La cosa es que todo esto empezó en noviembre del año pasado y ya han pasado 4 meses… y en estos 4 meses Angular 2 ha crecido mucho, pronto saldrá la RC1 y la verdad es que ya empieza a parecer maduro.

Por otro lado estuve mirandome React pero no se adapta a lo que yo quiero, prefiero tener un “todo en uno” antes de coger esto de aquí y esto de allá. Esto también viene motivado porque trabajo con un equipo de desarrollo en el que hay más personas y prefiero decirles que busquen documentación de X, que decirles “para el router busca Y, para el binding busca Z, para la inyección de dependencias busca ZZ, …” si no fuera por eso no me importaría buscarme lo que más me guste para cada cosa. Así que React descartado.

Así pues me puse manos a la obra y me tiré por Angular 2, para llegar rápido a una conclusión fui directo a intentar implementar lo que realmente quiero y necesito, el uso de plantillas para sacar pantallas de forma rápida. Cuál fue mi sorpresa cuando me encontré con esto: Final statement about ngInclude alternative O_O

Resulta que el equipo de Angular 2 ha decidido no permitir cargar plantillas html una vez que el componente está vivo… por lo tanto se cargan la posibilidad de añadir html de forma dinámica, bueno… añadir html puedes haciendo uso de [innerHtml] pero no te lo va a compilar… por lo tanto no hay nada que hacer. Las alternativas que dan son especificas para cada caso y en la mayoría de ocasiones muy toscas.

Estuve intentándolo hacer de distintas formas y la forma que más se acercaba fue haciendo uso de ng-content, lo que antiguamente era transclusion y que ahora es multiple-transclusion-slots de modo que el fichero con las plantillas se me quedaba de esta forma:

<crud [mnt]="self" objeto="product">
    <filter>Filtros de busqueda</filter>
    <row>plantilla fila</row>
    <row-detail>plantilla fila en detalle</row-detail>
    <edit>Plantilla edicion</edit>
</crud>

Y el código:

import {Component} from "angular2/core";
import {View} from "../../Ngts/Helpers/UrlHelper";
import {Crud} from "../../Ngts/Directives/Crud";
import {CrudBase} from "../Base/CrudBase";
 
@Component({
    selector: "product",
    templateUrl: View("Application/Warehouse/Product"),
    directives: [Crud]
})
export class Product extends CrudBase {
    ngOnInit() {
        logger.debug(this);
    }
}

Y aún con eso tengo problemas a la hora de repetir un ng-content dentro de una iteración *ngFor, y lo que debo pasar no es la plantilla de cada fila de la lista de entidades, si no la plantilla de la lista completa…

Además de esto no me gustan otras cosas:

  • No me gusta mucho el uso del html que están haciendo en Angular 2, si bien es cierto que es html legal según las especificaciones, ningún browser soporta mayúsculas y minúsculas en los atributos, de hecho yo me las vi negras para hacer el emulador por eso, tuve que parsear el html a mano (usé https://github.com/tildeio/simple-html-tokenizer) antes de añadirlo al DOM.
  • También la fijación en tener que crearte un componente por cada cosa que hagas es algo que no me gusta, si tengo 400 entidades en mi aplicación (que las tengo) tengo que hacer 400 plantillas html, pero si encima me tengo que crear un componente por cada uno de ellos ya no son 400 archivos, son 800 … y eso va pesando. Aunque es cierto que se pueden crear FakeComponents y reducir eso, pero ya es más ruido…
  • Los decoradores como @Component, @Injectable y @Directive. Me gusta el uso de decorators pero … en algunas ocasiones se hace inmanejable … y la verdad es que queda muy feote.

Bien, me vi con el futuro negro pero antes de agachar el lomo para recibir latigazos he decidido probar otra cosa.

He buscado y he encontrado Aurelia… ahora estoy probándolo. He ido directo al grano y me ha sorprendido gratamente.

8 comments

  • Me parece que con Aurelia vas por buen camino. ¿Has tratado Vue.js? Por lo que mencionas Vue puede quedar pequeño pero no estaría mal echarle un vistazo. Éxito.

  • Pingback: Se busca framework – Aurelia | 0 errors, 0 warnings

  • Hola Jaime, no conocía vue.js, le he echado un vistazo y me gusta lo que he visto, aunque lo mismo si que de queda un poco corto.

    Saludos.

  • Jose Luis Zarate

    Sails.js alguien lo ha manejado ?

  • Jose Luis, no he probado Sails.js. Lo he buscado a raíz de tu comentario y por lo que veo viene a ser un framework MVC para el servidor. No se adapta al tema del post ya que en él se habla del cliente. No se si Sails.js trae algo para el cliente, pero creo que no es su foco principal.

    Saludos,

  • Yo no entiendo porque Google complica más las cosas, Angular JS es genial, amigable y de buen desarrollo. A lo mejor pudieron a ver mejorado su binding entre en controlador y la vista pero es COOL. ¿Cuáles crees tu que sean las ventajas que harían migrar a uno hacia Angular 2?

  • Eduardo, la principal razón es seguir en la ola, es decir, evolucionar con las tecnologías. La ventaja es continuar teniendo soporte.
    Otros seguro que te contarán que si es más eficiente, que si renderiza más rápido, que si usa ecmascript, que si escribir componentes es más eficiente,… Para mi todo eso son pamplinas.

    La razón es seguir en la ola, nada más.

  • HOla Javier hay alguna manera de ponerse en contacto contigo? quisiera comentarte unas cosas de Angular2, yo soy desarrollador de este framework

    Un saludo

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Demuestra que no eres un bot *