Nota: El siguiente material hace referencia a la version 4.2.x de Rails. Si quieres ver las instrucciones para versiones más modernas, he preparado una actualización que puedes leer en éste enlace.


Viajé a la ciudad de México para asistir a una reunión del grupo de Polymer México, en donde el buen Vic Borja compartió sus notas sobre cómo incluir la interesante tecnología de los web components para su uso en Rails. (El proyecto completo mostró Vic se encuentra en su repositorio de Github).

Cómo pequeña introducción, los componentes web son conjuntos de HTML, CSS y JavaScript empaquetados de una forma que permite su uso como etiquetas HTML personalizadas, con estilos y comportamientos propios a la vez que son reutilizables.

Poder tener tu propia colección de bloques de construcción para la web y utilizar los que comparten otras personas puede hacer que en un futuro las interfaces de applicaciones web ofrezcan experiencias más diversas y útiles a los usuario, a la vez que se reduce el esfuerzo al crearlas.

Ahora, veamos como pueden incluirse algunos de estos elementos dentro de un proyecto de Rails.

Creando un nuevo proyecto

Nota 2: Éste tutorial asume que el sistema cuenta con el interprete de Ruby 2.4.x y Node.js stable instalados. En caso de que no desees instalar éstas y las otras dependencias, puedes usar ésta maquina virtual que incluye la configuración del proyecto.

Siguiendo los pasos enumerados, crearemos primero un nuevo proyecto de Rails.

  1. Instalar la gema rails:

    gem install rails -v '~> 4.2.10'
    
  2. Crear un nuevo proyecto de Rails:

    rails new polymer-app
    
  3. Moverse a la carpeta del proyecto:

    cd polymer-app
    

Instalando Polymer con Yarn

Nota 3: Las intrucciones originales usaban el manejador de paquetes Bower para descargar las bibliotecas necesarias pero, como éste manejador ha quedado en desuso, ahora se utiliza el moderno manejador de dependencias Yarn.

Para esa muestra en particular, Vic utilizó la versión 0.5.5 de la biblioteca de componentes web de Google, Polymer, ya que la versión más reciente (0.8) se encontraba aún en alpha. El administrador de dependencias Yarn.

El administrador de dependencias

Ahora, es necesario revisar la documentación oficial de Yarn para realizar la instalación en el sistema.

Instalación de componentes

Con la instalación de Yarn, es posible obtener cualquier paquete publicado para NPM, y lo utilizaremos para obtener los componentes Paper Elements:

yarn add --modules-folder vendor/assets/components @polymer/paper-elements

Con esta instrucción, se descargaran los modulos dentro de la carpeta vendor/assets/components de nuestro proyecto de Rails y se creará el archivo package.json registrando la biblioteca como dependencia.

Configuración de assets

Ahora tenemos los archivos necesarios en nuestro sistema, pero hace falta que Rails pueda encontrarlos para incluirlos en las plantillas de nuestra aplicación.

Para lograrlo, primero editamos el archivo config/initializers/assets.rb, agregando las siguientes líneas:

# Add web component assets to the asset load path
Rails.application.config.assets.paths << Rails.root.join('vendor/assets/components')

# Precompile additional assets.
Rails.application.config.assets.precompile += %w( *.js *.css *.html )

Depués, editaremos el archivo app/assets/javascripts/application.js, incluyendo lo siguiente antes de la línea //= require_tree .:

//= require webcomponents.js/webcomponents

Uso de componentes

Para probar los componentes, añadiremos una sencilla página a la aplicación con los siquientes pasos:

  1. Editar el archivo config/routes.rb, incluyendo una nueva ruta:
  Rails.application.routes.draw do
    root 'welcome#index'
  end
  1. Crear el welcome_controller.rb dentro de app/controllers con el contenido:
  class WelcomeController < ApplicationController
    def index
    end
  end
  1. Crear la vista welcome/index.html.erb dentro del directorio app/views.

  2. Incluir un paper element dentro del archivo ‘app/views/welcome/index.html.erb’.

    <link rel="import" type="text/html" href="<%= asset_path '@polymer/paper-button/paper-button.html' %>">
    <paper-button raised>¡Hola mundo!</paper-button>
    
  3. Iniciar el servidor de desarrollo de la aplicación:

  rails serve
  1. Visitar la direccion http://localhost:3000/

¡Observa el resultado!

Si todo salió bien, observarás una página con un botón como éste:

Paper Button