Componentes HTML

Acabo de caer en cuenta de porqué no me gusta angular, backbone, ember…

El problema

Todos estos frameworks si bien intentan dividir la aplicación que vas a construír en módulos se hace esto por mantenibilidad, no por reutilización de los módulos.

En otras tecnologías generalmente creas un componente reutilizable y basta con mover el archivo de proyecto para tenerlo listo, pero estos frameworks no se puede hacer eso, por ejemplo una simple targeta que muestre los datos de una persona:

Con backbone o bien tienes un archivo enorme o tienes varios archivos, modelo, vista, plantilla, estilos… y seguramente los archivos JS y la plantilla se carguen mediante un cargador de dependencias como RequireJS con lo que para usar el módulo necesitas tenerlo o bien compilar el módulo en un solo archivo antes de utilizarlo.

Con angular la separación en módulos no es tan radical al haber mucho menos código, pero una simple directiva será un archivo JS que bien puede tener el HTML en formato string o cargarlo de un archivo aparte y el CSS debería ponerse aparte ya que si se pone en la plantilla cada vez que se instancie la directiva se estaría creando un nuevo tag style ya renderizado.

Además, ya a nivel de estándar, con los estilos tenemos el problema de que los estilos que creemos para nuestro componente reutilizable podría fácilmente afectar a un elemento de la página que no pretendíamos modificar, para ser realmente reutilizable es necesario que el CSS solo se aplique a los elementos del componente en cuestión.
Analizado de esta forma parece ser que el tema es poder tener en un solo archivo un pequeño bloque de lógica, contenido y estilo que pueda ser importado en cualquier página sin afectar en nada a la página en cuestión. Y resulta HTML desde un principio nos permite definir en un solo archivo y de forma natural lógica, contenido y estilos.

La solución

Entonces me encuentro con estas diapositivas que hablan de los HTML WebComponents y resulta ser justo lo que hace falta:

<element name="x-tarjeta" extends="button">
    <template>
        <style>
            h1 {
                color: red;
            }
            img {
                height: 32px;
                width: 32px;
            }
            .separator { ... }
        </style>

        <header>
            Full name: <content select="h1"></content>
            Age: <content select=".age"></content>
        </header>
        <div class="separator"></div>
        <section>
            <content select="img"></content>
        </section>
    <template>

    <script>
        var template = this.querySelector('template');
        this.register({ // this == <element>
            prototype: {
                readyCallback: function() {
                    var dom = template.content.cloneNode(true);
                    var shadow = this.createShadowRoot()
                    shadow.appendChild(dom);
                }
            }
        });
    </script>
</element>

Al estar los estilos dentro del template se vuelven a añadir al dom cada vez que creamos un x-tarjeta (como con angular) pero en este caso gracias al ShadowDOM los estilos solo se aplican al template y a su contenido.

Además el estándard de html templates nos permite mezclar el template con los elementos que inserten dentro de x-tarjeta

<!-- Uso -->
<x-tarjeta>
    <h1>A. Matías Q.</h1>
    <div class="age">24</div>
    <img src="/.../foto.png">
</x-tarjeta>

Y por último el estándard html imports nos permite tener este componente en un archivo html independiente y transportable e importarlo en donde lo necesitemos, incluyendo otros compoentes.

<link rel="import" href="x-tarjeta.html">

Conclusión

Ahora mismo estoy dividido entre angular y los web components:

Angular

  • +El parseador de angular provee doble binding
  • +Los templates están directamente integrados con el framework por lo que podemos manipular la lógica desde la vista, suena a mala idea pero en componentes pequeños es mantenible.
  • -Un componente requiere un archivo independiente para el HTML, un JS importado desde el HTML y un CSS importado desde el HTML o desde otro CSS. (dos imports para un componente)
Web components
  • +Compactos, tienen todo lo necesario en el mismo archivo sin que éste sea demasiado grande
  • +Futuro estándar
  • +Alcance del CSS limitado al componente
  • -Soportado en gran parte por Chrome, pero generalmente hay que usar polyfills que no pueden reproducir toda la funcionalidad (en particular limitar el CSS)
  • -Si bien es excelente para crear componentes me es difícil imaginar una web completa hecha con componentes. Desde Polymer recomiendan crear elementos hasta para componentes no visuales como AJAX o Keyboard, pero no lo vo claro.

Tal como lo veo ahora una web se compone de la parte aplicación que es todo el código único de la app que difícilmente sirva para otro proyecto y una serie de componentes, lo ideal para mi sería poder hacer la parte de aplicación con angular ya que me permite crear módulos mantenibles y utilizar los WebComponents como componentes reutilizables pero desconozco como se relaciones ambas tecnologías.

Espero poder hacer un prototipo mezclándolas y escribir más adelante…

10 thoughts on “Componentes HTML

  1. Undeniably believe that which you said. Your favorite reason appeared to be on the internet the simplest thing to be aware of. I say to you, I definitely get irked while people consider worries that they just don’t know about. You managed to hit the nail upon the top and also defined out the whole thing without having side-effects , people could take a signal. Will probably be back to get more. Thanks

  2. I have been surfing online greater than 3 hours as of late, yet I by no means found any interesting article like yours. It is lovely value sufficient for me. In my opinion, if all webmasters and bloggers made good content as you did, the net might be a lot more helpful than ever before.

  3. Someone essentially lend a hand to make severely posts I’d state. That is the first time I frequented your website page and to this point? I amazed with the analysis you made to make this actual post incredible. Fantastic task!

  4. My husband and i ended up being now joyous that Chris could do his survey while using the ideas he discovered through your web site. It’s not at all simplistic to simply choose to be releasing helpful tips which usually other folks could have been making money from. We fully understand we now have the blog owner to thank for that. Most of the illustrations you have made, the easy website navigation, the relationships you aid to create – it is mostly great, and it’s really making our son and the family understand that article is amusing, which is rather serious. Thanks for everything!

  5. Ignoring a hush-hush’s phone scream is a unpleasant possibility to do, but I’ll brook in I’ve done it in behalf of profitable reasons. It wasn’t because I borrowed houndb.ticep.se/praktiske-artikler/borgerservice-otterup.php moneyed I couldn’t sound the praises of, nor was I disturb a also pen-friend was m‚range seeking a loan. The conundrum is that friendships are oftentimes like high-priced subscriptions – it feels like you exclusively break down mentally down access when you reorganize out to be your dues.

Deja un comentario

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