A la hora de hacer una aplicación web, la discusión siempre es entre los mejores Frameworks como Angular o React o Vue y porqué cada uno es mejor o peor que el otro. Pero yo vengo a dar a conocer algo mucho más universal, compatible, y más fácil de aprender: PolymerJs.

¿Qué es PolymerJs?

Polymer es un proyecto que te ayuda a desbloquear todo el potencial de la web. Es una librería y un toolbox para utilizar WebComponents y crear aplicaciones web progresivas (PWA).

¿Pero qué es un WebComponent y porqué tiene tanto potencial?

Excelente pregunta mi joven padawan. Voy a dejar que MDN (la biblia de los desarrolladores) la responda por mi:

Los Componentes Web son una colección de tecnologías que te permiten crear elementos personalizados reutilizables — con su funcionalidad encapsulada apartada del resto del código — y utilizarlos en las aplicaciones web.

Creando un Hello World reutilizable

Suficiente teoría por hoy. Se aprende mucho más cuando los dedos empujan teclas. Vamos a crear nuestro primer componente reutilizable con la ayuda de Polymer para que veas lo fácil que es y lo bien que funciona.

Para empezar necesitamos algunas herramientas que quizás ya tenes instaladas:

• NodeJs
• Git
• npm

Ahora que tenemos lo básico para el desarrollo web, instalamos Polymer CLI:

npm install -g polymer-cli@next

y cloneamos el ejemplo inicial:

git clone https://westdabestdb@bitbucket.org/westdabestdb/polymerapp.git

Una vez que hayas hecho esto es momento de sacar Polymer a dar una vuelta:

cd polymerapp
polymer serve
//applications: http://127.0.0.1:8081
//reusable components: http://127.0.0.1:8081/components/polymerapp/

Ahora si vas a http://127.0.0.1:8081 deberías ver una hermosa y minimalista pantalla de Hello World. Eso que estas viendo es un componente reutilizable, vayamos a verlo:

import {
    PolymerElement,
    html
} from '@polymer/polymer';
class HelloWorld extends PolymerElement {

    constructor(who) {
        super();
        this.who = who;
    }

    static get properties() {
        return {
            who: {
                type: String,
                value: 'World'
            }
        };
    }

    static get template() {
        return html`
        <div class="app-container">
            Hello [[who]]
        </div>

        <style>
            .app-container {
                text-align: center;
                font-family: Arial, Helvetica, sans-serif;
                font-weight: bold;
                font-size: 5em;
                height: 100vh;
                width: 100vw;
                background-color: #e3e3e3;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        </style>
        `;
    }
}

customElements.define('hello-world', HelloWorld);

Para los que ya saben React, esto es como estar en casa. Tenemos un constructor con un parámetro llamado who que lo asigno a una propiedad interna del mismo nombre. Mi template es código HTML con CSS que saluda a lo que le hayan pasado en la variable who. Por último, le doy un nombre a mi componente y lo llamo hello-world para que lo podamos mostrar haciendo únicamente <hello-world who="there!"></hello-world> que es exactamente lo que hago desde el index:

import './HelloWorld.js'
class PolymerApp extends PolymerElement {

    static get properties() {
        return {
            who: {
                type: String,
                value: 'World'
            }
        }
    }
    static get template() {
        return html `
        <hello-world who="there!"></hello-world>
        `;
    }
}
customElements.define('polymer-app', PolymerApp);

Esto es todo, los puntos interesantes a tener en cuenta son:

• Los WebComponents son universales, no requieren ninguna librería y se pueden mostrar en cualquier navegador
• Los componentes que creamos son reutilizables y podemos ver muchos más creados por otros acá
• Podemos crear aplicaciones únicamente con esta librería

Listo para mi, ahora seguís vos

Espero que te haya servido para aprender algo nuevo, ahora te toca seguir aprendiendo y profundizando. Gracias por estar acá.

Un saludo, Ariel Mirra.

instagam | linkedin | otros proyectos