Construcción con polímeros y componentes web utilizando una base de datos de personajes Pokémon

Construcción con polímeros y componentes web utilizando una base de datos de personajes Pokémon

He estado experimentando recientemente con Polymer para tener una idea de lo que se trata. Si bien todavía es experimental y solo está disponible actualmente en algunos de los navegadores, también se encuentra entre las tecnologías más innovadoras que han llegado a la web en la memoria reciente.

Comencemos con cómo lo describe Google:

Los componentes web marcan el comienzo de una nueva era de desarrollo web basada en elementos personalizados encapsulados e interoperables que amplían el propio HTML. Construido sobre estos nuevos estándares, Polymer hace que sea más fácil y rápido crear cualquier cosa, desde un botón hasta una aplicación completa en computadoras de escritorio, dispositivos móviles y más.

Hay cuatro especificaciones que forman componentes web. Todos están bajo consideración en el nuevo Navegador Microsoft Edge también (puedes ver esto actualmente en http://dev.modern.ie/plataforma/status/ e incluso vota que quieres que ingeniería lo priorice más alto):

  • Elementos personalizados: permitir al autor definir y utilizar nuevos tipos de elementos DOM en un documento.
  • Sombra DOM: combinar múltiples árboles DOM en una jerarquía y cómo estos árboles interactúan entre sí dentro de un documento, lo que permite una mejor composición del DOM.
  • Importaciones HTML: incluir y reutilizar documentos HTML en otros documentos HTML.
  • Plantillas HTML: declara fragmentos de HTML que se pueden clonar e insertar en el documento mediante script.

¿Por qué es esto útil?

¿Alguna vez ha agregado un marco o biblioteca a su proyecto web, solo para descubrir que el CSS sobrescribió algunos de sus estilos? Ahora, debe editar el orden en que se cargan los estilos, así como realizar cambios en su propio código. Es lento y frustrante, por decir lo menos. Shadow DOM ofrece componentes reutilizables. Todo su CSS y marcado se limitan al elemento anfitrión, por lo que los estilos definidos dentro de Shadow Root (su elemento de polímero) no afectarán al resto de la página. Puede encontrar una excelente descripción general de cómo funciona en WebComponents.com.

¿Qué pasa con el soporte del navegador?

Imagen cortesía de http://webcomponents.org/

Como se mencionó, puede ver la hoja de ruta de Microsoft Edge en dev.modern.ie/plataforma/estado/ para ver soporte nuevo e histórico para Internet Explorer. Microsoft actualiza el sitio con frecuencia para ilustrar lo que se avecina y lo que dicen los desarrolladores al respecto. Alternativamente, caniuse.com es un gran recurso para ver cómo se ve el soporte en todos los ámbitos, incluidos los navegadores móviles. Este sitio, sin embargo, no muestra si el navegador en cuestión actualmente tiene o no la tecnología en consideración o en desarrollo; tendrá que juntar esos dos.

¿Hay alguna tecnología competidora?

Firefox y Chrome han estado discutiendo desde hace algún tiempo en términos de compatibilidad con estos diversos componentes web. Firefox tiene su propia tecnología etiqueta Xque solo depende de Elementos personalizados, y le da al desarrollador la capacidad de optar por Shadow DOM. Aquí hay una gran comparación de los dos.

Encontrar un buen punto de partida

Para tener una idea de cómo funciona el polímero, primero quería usar algunos componentes web que habían creado otras personas. En este caso comencé navegando por el CustomElements.io página en busca de algunas cosas interesantes para aprender y usar. El componente web x-Pokémon y componente web de elementos de voz enseguida captó mi atención. Con esos dos, pude analizar fácilmente la base de datos de Pokémon y dibujar las imágenes de Pokémon en la pantalla, ¡luego usar elementos de voz para decir el nombre del Pokémon! Después de jugar con ellos, decidí que era hora de irme por mi cuenta y crear mi primer componente web.

Crear mi propio componente

Diseñador de polímeros es una fantástica herramienta basada en navegador creada por Google, que le permite diseñar un elemento de papel dentro del navegador con su GUI de arrastrar y soltar. Aún mejor: ¡escupe el código por ti! Esto resultó ser invaluable cuando estaba aprendiendo cómo funcionaba el polímero. Quería diseñar algo simple, así que creé un contenedor para contener tres botones radiales; un botón para cada selección de idioma. Los usuarios ahora tienen la capacidad de seleccionar un botón radial asociado con un idioma (en-EN, en-GB y es-ES), que a su vez estaría vinculado al componente web de audio y cambiaría el acento.

El texto «Cambiar el acento» no forma parte del elemento de polímero. Es parte del HTML de la página, pero quería incluirlo en este fragmento para que entendieras lo que hacen estos botones. Después de diseñar mi contenido, esto es lo que dijo el diseñador:

<link rel="import" href="https://www.noupe.com/development/bower_components/polymer/polymer.html"        >
<link rel="import" href="http://www.noupe.com/paper-radio-group/paper-radio-group.html"  >
<link rel="import" href="http://www.noupe.com/paper-radio-button/paper-radio-button.html">
<polymer-element name="x-radial-buttons">
  <!-- Shadow DOM -->
  <template>
  <style> 
  #paper_radio_group { 
  position: relative; 
  width:    440px; 
  height:   50px; 
  } 
  </style>
  <paper-radio-group selected="English-GB" valueattr="label" selectedindex="1" id="paper_radio_group">
  <paper-radio-button label="English-US" id="paper_radio_btn_en-US" on-click="{{ changeAccentUS }}"></paper-radio-button>
  <paper-radio-button label="English-GB" id="paper_radio_btn_en-GB" on-click="{{ changeAccentGB }}"></paper-radio-button>
  <paper-radio-button label="Spanish"      id="paper_radio_btn_es-ES" on-click="{{ changeAccentES }}"></paper-radio-button>
  </paper-radio-group>
  </template> <!-- /Shadow DOM -->
    <script>
  Polymer({
  })
  </script>
  </polymer-element>

Elementos de papel

También puede notar que estos elementos utilizan papel. Me tomó un poco entender qué era exactamente el papel, porque si intentas buscarlo en Google, es probable que no obtenga lo que espera. Para agregar este elemento a mi proyecto, también necesitaba agregar Elementos de papel de Google. Según tengo entendido, los elementos de papel son el diseño de material de Google llevado a la web. Para instalar elementos de papel, ejecute lo siguiente en su línea de comando:

bower install Polymer/core-elements --save

Nota para los usuarios de Visual Studio: Descubrí que Bower puede arrojar errores al intentar usar las herramientas de línea de comandos dentro de Visual Studio. Una publicación en Stack Overflow aclaró que debería usar una herramienta de línea de comando separada, como PowerShell, para instalar los paquetes de Bower. Una vez que hice eso, todo funcionó bien. Cambié directorios por con cd “nombre del directorio donde está mi proyecto web” tener PowerShell apuntando hacia mi proyecto, y luego podría usar todos los comandos de Bower para instalar componentes. Ex: cd C:UsuariosDaveDocumentosProyectosPokémon-WebAudio

Agregar JavaScript al elemento de polímero

Tenía mi HTML y CSS completos, pero necesitaba comenzar a conectar mi JavaScript. Me tomó un poco de tiempo entender cómo Polymer maneja su JavaScript, ya que tienen mucha documentación sobre el tema, pero no muchos ejemplos prácticos. Tenga en cuenta que tienen muchos ejemplos, pero básicamente se convierte en «hola mundo» sin ninguna sustancia. Repasa JavaScript en detalle en el Guía para desarrolladores de API, pero fue Stack Overflow lo que realmente demostró ser útil aquí. Por ejemplo, todavía no estoy seguro de cómo ingresar el código en

Polymer{()}

es diferente de introducirlo en el