Volver a Entradas

uso de web components con rails 5.2.x

Colocado en Herramientas

Nota: El siguiente material hace referencia a la version 5.2.x de Rails y se realiza sobre un sistema con Ubuntu Linux.

Los componentes web (web components) continuan postulandose como unas de las tecnologías que veo con mayor interes para la construcción de sitios y applicationes web. —Más ahora que los modulos de JavaScript son soportados de forma nativa en los navegadores modernos.

Cómo pequeña introducción, los componentes web constan 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.

En los siguientes apartados, con la creación de un pequeño proyecto, veremos como puede hacerse la integración.

Creando un nuevo proyecto

Nota 2: Éste tutorial asume que el sistema cuenta con el interprete de Ruby 2.5.x y Node.js stable instalados. En caso de que no desees instalar éstas y las otras dependencias, puedes usar las maquínas virtuales que se indican, las cuales contienen 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 '~> 5.2.0'
    
  2. Crear un nuevo proyecto de Rails:

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

    cd polymer-app
    

Ahora, veamos algunas formas de como pueden incluirse algunos de estos elementos ya creados en la biblioteca Polymer dentro de un proyecto de Rails.

Agregando componentes con gemas

El ecosistema de desarrolladores de Ruby ha creado la gemas con las cuales pueden agregarse facilmente los componentes de Polymer a un proyecto de Rails. Usaremos como ejemplo las gemas polymer-rails y polymer-elements-rails para agregar el componente paper-button a una vista.

Uso de la gema polymer-rails

  • Primero hay que agregar las gemas en el Gemfile:

    # dentro de Gemfile
    
    gem polymer-rails
    gem polymer-elements-rails
    
  • Luego hay que instalar las nuevas depenencias:

    bundle install
    

Ahora, necesitamos aplicar la siguiente configuración:

  • Crear el archivo application.html.erb e incluir en el los componentes deseados.

    # Crear el directorio principal para los componentes
    mkdir -p app/assets/components
    
    # Crear el archivo que incluye las referencias a los componentes
    touch app/assets/components/application.html.erb
    
    // dentro de app/assets/components/application.html.erb
    
    //= require polymer/polymer
    //= require paper-button/paper-button
    
  • Usar la instrucción html_import_tag para incluir los componentes de application.html.erb.

    # dentro de app/views/layouts/application.html.erb, después de turbolinks
    
    <%= html_import_tag 'application' %>
    

Agregando componentes con webpack

Las versiones de Rails desde 5.1 incluyen la opción de utilizar [webpack][webpack] como manejador de assets en lugar del tradicional asset pipeline. Esto permite emplear las versiones más recientes de bibliotecas de modulos JavaScript sin tener que esperar a que los autores de las gemas las actualicen, además de ser un mejor desempeño.

Instalación de webpacker

Es posible usar webpack desde la creación de una nueva aplicación de Rails pero, como en las instrucciones ya se ha iniciado una aplicación, tendremos que encargarnos de algunos pasos manualmente.

  • Agregamos la gema webpacker
  # dentro de Gemfile

  gem 'webpacker', '~> 3.5.3'
  • Instalamos la nueva dependencia
  bundle install

Con ésto tendremos disponibles varias tareas de Rails que nos permiten generar los archivos requeridos para el uso de bibliotecas en modulos de JavaScript, como React, Vue, Angular, etc.

Lamentablemente Rails no tiene aún una tarea para ahorrarnos varios pasos con Polymer, pero podemos hacerlo de forma general por medio del comando:

rails webpacker:install

Al ejecutarlo se crearan los siguientes archivos y directorios:

config/webpacker.yml
config/webpack
config/webpack/development.js
config/webpack/environment.js
config/webpack/production.js
config/webpack/test.js
.postcssrc.yml
.babelrc
app/javascript
app/javascript/packs/application.js
bin
bin/webpack
bin/webpack-dev-server

Y se instalará con Yarn los siguientes paquetes:

// dentro de package.json

{
  "dependencies": {
    "@rails/webpacker": "3.5"
  },
  "devDependencies": {
    "webpack-dev-server": "2.11.2"
  }
}

Además de modificar algunos archivos de configuración, pero no es necesario ahondar más en eso.

Instalación de componentes Polymer

Yarn nos permite instalar cualquier modulo disponigle en el registro de NPM, así que lo usaremos para obtener los modulos de los componentes que deseamos integrar. En éste caso, sólo requeriremos paper-button con el siguiente comando:

yarn add @polymer/paper-button

Configuración de nuevos assets

Ya con el componente paper-button se encuentra dentro de node_modules, le indicaremos a webpacker la ruta para encontrarlo, editando el archivo application.js de app/javascript/packs.

// dentro de app/javascript/packs/application.js

import {PolymerElement} from '../../../node_modules/@polymer/polymer/polymer-element.js'
import '../../../node_modules/@polymer/paper-button/paper-button.js'

Si tienes experiencia, habrás notado que éste archivo application.js está en una ubicación diferente al que se usa con el asset pipeline tradicional. Por lo tanto, debemos agrearlo al layout principal de la aplicación, application.html.erb, debajo de turbolinks:

<%= javascript_pack_tag 'application' %>

Por último en la configuración, en el entorno de desarrollo debemos autorizar a webpacker-dev-server en las politicas de seguridad para que pueda servir los assets. Esto se hace editando el archivo content_security_policy.rb del directorio config/initializers:

# dentro de config/initializers/content_security_policy.rb

Rails.application.config.content_security_policy do |policy|
  policy.connect_src :self, :https, "http://localhost:3035", "ws://localhost:3035" if Rails.env.development?
end

Uso de componentes

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

  • Agregar una nueva ruta para la página a desplegar:

    # dentro de app/config/routes.rb
    
    Rails.application.routes.draw do
      root 'welcome#index'
    end
    
  • Crear el controlador welcome_controller.rb dentro de app/controllers:

    touch app/controllers/welcome_controller.rb
    
    # dentro de app/controllers/welcome_controller.rb
    
    class WelcomeController < ApplicationController
      def index
      end
    end
    
  • Crear la vista welcome/index.html.erb dentro de app/views

    mkdir app/views/welcome/
    
    touch app/views/welcome/index.html.rb
    
  • Incluir el elemento paper-button

    # dentro de app/views/welcome/index.html.rb
    
    <paper-button raised>Hola, Mundo!</paper-button>
    

Iniciando el servidor

Si utilizaste webpacker para incluir los componentes de Polymer, en otra terminal, se inicia el servidor de desarrollo del mismo para compilar los assets con el siguiente comando (si usaste las gemas, inicia directamente el servidor de Rails:

./bin/webpacker-dev-server

Paso seguido, iniciamos el servidor de Rails:

rails server

Y visitamos en el navegador la dirección http://localhost:3000/

¡Observa el resultado!

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

Paper Button

Si resides en la ciudad de México y tienen interes en aprender más sobre los componentes web, Polymer y otras tecnologias relacionadas, puedes integrarte con el grupo de PolymerMX.


David O' Rojo —Ciudadano del mundo, recorriendo el largo camino a la maestría en Desarrollo de Software. Interesado en lenguajes dinámicos, herramientas para el desarrollo web y proyectos enfocados al beneficio de la sociedad.

A Continuación

el largo camino hacia la maestría en desarrollo de software