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:
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.
Top comments (0)