DEV Community: Sergio Turpín

Decorator in Ruby on Rails

Sergio Turpín — Sat, 01 Jan 2022 21:12:21 +0000

- English Version -

Decorators provide a flexible alternative to subclassing for extending functionality. Simple! 😉

There are several ways to implement it, but the easiest for me is using Draper gem.

1. Create Rails app

> rails new decorator-rails

2. Install Draper gem

> bundle add draper

Well, from this moment when we create a controller it will automatically create our decorator file in app/decorator folder.

3. Create user scaffold

> rails g scaffold User first_name last_name

Among other files, the file app/decorators/user_decorator.rb has been created automatically.

4. Add custom method

# app/decorators/user_decorator.rb

class UserDecorator < Draper::Decorator
  delegate_all

  def full_name
    object.first_name + ' ' + object.last_name
  end
end

That allows behavior to be added to an individual object without affecting the behavior of other objects from the same class.

5. Decorate object in controller

# app/controllers/users_controller.rb

def show
  @user = User.find(params[:id]).decorate
end

6. Show it in View

# app/views/users/show.html.erb

First name: <%= @user.first_name %>
Last name: <%= @user.last_name %>
Full name: <%= @user.full_name %>

And now your view logic has been abstracted and organized to where it should be. This will greatly help you to reduce the code in your view files.

Usually it is used with Presenters, but I prefer to do it in another post 😉

🔍 Recommended reading

Thank you for reading 🙏

🌎 https://sergioturpin.es
📷 Instagram
🐦 Twitter
🐙 GitHub

- Versión en Español -

El patrón Decorator nos permite poder encapsular un objeto para que podamos extender su funcionalidad antes de su instanciación, así de simple! 😉

Existen muchas formas de implementarlo, pero una de las más sencillas es hacerlo con la gema Draper.

1. Creamos la app de Rails

> rails new decorator-rails

2. Instalamos la gema Draper

> bundle add draper

Bien, a partir de este momento cuando nosotros creemos un controlador, automáticamente se creará también su decorador en el directorio app/decorator.

3. Creamos el scaffold de usuario

> rails g scaffold User first_name last_name

Además de otros archivos, el fichero app/decorators/user_decorator.rb ha sido creado automáticamente.

4. Añadimos un método personalizado

# app/decorators/user_decorator.rb

class UserDecorator < Draper::Decorator
  delegate_all

  def full_name
    object.first_name + ' ' + object.last_name
  end
end

Esto nos permite agregar comportamiento a un objeto individual sin afectar al comportamiento de otros objetos de la misma clase.

5. Decoramos el objeto en el controlador

# app/controllers/users_controller.rb

def show
  @user = User.find(params[:id]).decorate
end

6. Lo mostramos en la Vista

# app/views/users/show.html.erb

First name: <%= @user.first_name %>
Last name: <%= @user.last_name %>
Full name: <%= @user.full_name %>

Y ahora su lógica de vista se ha abstraído y organizado donde debería estar. Esto le ayudará enormemente a reducir el código en sus archivos de vista.

Normalmente es usado conjuntamente con el patrón Presenters, pero he preferido hacerlo en otro post 😉

🔍 Lecturas recomendadas

Gracias por leer 🙏

🌎 https://sergioturpin.es
📷 Instagram
🐦 Twitter
🐙 GitHub

Spread Operator and Rest Parameters

Sergio Turpín — Sat, 20 Nov 2021 18:43:10 +0000

- English Version -

There are many pages wich explain what the Spread Operator (also know as three dots) and Rest Parameters are.

It is an operator that I really like and I would like to share with you some ways that I use it.

📓 Spread Operator

let numbers = [1, 2, 3, 4];
console.log( numbers );

// => [ 1, 2, 3, 4 ] (print as array)

When we use the spread operator we get the values independently:

let numbers = [1, 2, 3, 4];
console.log( ...numbers );

// => 1 2 3 4

Add an array to another:

let customers = [ 'Claudia', 'Borja', 'May' ];
let otherCustomers = [ 'Sergio', 'Jose' ];

customers.push( ...otherCustomers );
console.log( customers );

// => [ 'Claudia', 'Borja', 'May', 'Sergio', 'Jose' ]

Concat arrays:

let customers = [ 'Claudia', 'Borja', 'May' ];
let otherCustomers = [ 'Sergio', 'Jose' ];

let concatCustomers = [ ...customers, ...otherCustomers ];
console.log( concatCustomers );

// => [ 'Claudia', 'Borja', 'May', 'Sergio', 'Jose' ]

It also happens with objects:

const userData = {
    name: 'Jesús',
    surname: 'Cano',
    age: 8
}

const userAdrress = {
    address: 'C/ Gran Vía',
    number: 34
}

const data = { ...userData, ...userAdrress };
console.log( data );

// => (Output)
// {
//     name: 'Jesús',
//     surname: 'Cano',
//     age: 8,
//     address: 'C/ Gran Vía',
//     number: 34
// }

Destructuring on objects:

const userData = {
    name: 'Jesús',
    surname: 'Cano',
    age: 8
}

const userAdrress = {
    address: 'C/ Gran Vía',
    number: 34
}

let myObject = { ...userData, ...userAdrress }; 
let { name, address } = { ...myObject };

console.log( 'Name:', name, 'Address:', address );

// => Name: Jesús Adrress: C/ Gran Vía

Cleaned up repeated elements from an array:

let numbers = [ 1, 2, 2, 3, 3, 4, 5, 6, 6, 6, 6, 7 ];

let mySelect = new Set( numbers );
numbers =  [ ...mySelect ];

console.log( numbers );

// => [1, 2, 3, 4, 5, 6, 7]

📓 Rest Parameters

Spread operator can also be used as a Rest Parameters, rest of the parameters that are passed to a javascript function and form an array.

const person = ( name, ...qualities ) => {

    console.log(`${name}'s qualities are: `);

    qualities.map( quality => {
        console.log( quality );
    });

}

person( 'Jaime', 'Sympathetic', 'Nice', 'Affective', 'Talkative' );

// => (Output)
// Jaime's qualities are: 
// Sympathetic
// Nice
// Affective
// Talkative

As you can see above, the rest parameters must be at the end, otherwise we will get an error.

const sumNumbers = ( ...args ) => {
    return args.filter( e => typeof e === 'number' )
        .reduce( (prev, curr) => prev + curr );
};

const result = sumNumbers( 1, null, 'fullstack', 5, undefined, 2 );

console.log( result );

// => 8

The possibilities are endless 😃

🔍 Recommended reading

Thank you for reading 🙏

🌎 https://sergioturpin.es
📷 Instagram
🐦 Twitter
🐙 GitHub

- Versión en Español -

Hay muchas páginas que explican qué es el Spread Operator (también conocido como operador de los tres puntos) y los Rest Parameters.

Es un operador que me gusta mucho y me gustaría compartir con vosotros alguna de las situaciones que suelo utilizarlo 😊

📓 Spread Operator

let numeros = [1, 2, 3, 4];
console.log( numeros );

// => [ 1, 2, 3, 4 ] (se imprime como un array)

Cuando utilizamos el Spread Operator obtenemos los valores de manera independiente:

let numeros = [1, 2, 3, 4];
console.log( ...numeros );

// => 1 2 3 4

Lo utilizo también para añadir un array a otro:

let clientes = [ 'Claudia', 'Borja', 'May' ];
let otrosClientes = [ 'Sergio', 'Jose' ];

clientes.push( ...otrosClientes );
console.log( clientes );

// => [ 'Claudia', 'Borja', 'May', 'Sergio', 'Jose' ]

Para concatenar arrays:

let clientes = [ 'Claudia', 'Borja', 'May' ];
let otrosClientes = [ 'Sergio', 'Jose' ];

let concatenaClientes = [ ...clientes, ...otrosClientes ];
console.log( concatenaClientes );

// => [ 'Claudia', 'Borja', 'May', 'Sergio', 'Jose' ]

Lo suelo utilizar también con objetos:

const datosUsuario = {
    nombre: 'Jesús',
    apellido: 'Cano',
    edad: 8
}

const direccionUsuario = {
    direccion: 'C/ Gran Vía',
    numero: 34
}

const datos = { ...datosUsuario, ...direccionUsuario };
console.log( datos );

// => (Output)
// {
//     nombre: 'Jesús',
//     apellido: 'Cano',
//     edad: 8,
//     direccion: 'C/ Gran Vía',
//     numero: 34
// }

También para desestructuración de objetos:

const datosUsuario = {
    nombre: 'Jesús',
    apellido: 'Cano',
    edad: 8
}

const direccionUsuario = {
    direccion: 'C/ Gran Vía',
    numero: 34
}

let miObjeto = { ...datosUsuario, ...direccionUsuario }; 
let { nombre, direccion } = { ...miObjeto };

console.log( 'Nombre:', nombre, 'Dirección:', direccion );

// => Nombre: Jesús Dirección: C/ Gran Vía

Para limpiar elementos repetidos en un array:

let numeros = [ 1, 2, 2, 3, 3, 4, 5, 6, 6, 6, 6, 7 ];

let miSeleccion = new Set( numeros );
numeros =  [ ...miSeleccion ];

console.log( numeros );

// => [1, 2, 3, 4, 5, 6, 7]

📓 Rest Parameters

Spread operator se puede utilizar como un Rest Parameters, el resto de parámetros son pasados a la función javascript y ya con ellos forma un array.

const persona = ( nombre, ...cualidades ) => {

    console.log(`Las cualidades de ${nombre} son: `);

    cualidades.map( cualidad => {
        console.log( cualidad );
    });

}

persona( 'Jaime', 'Simpático', 'Agradable', 'Afectivo', 'Charlatán' );

// => (Output)
// Las cualidades de Jaime son: 
// Simpático
// Agradable
// Afectivo
// Charlatán

Como puedes ver, el Rest Parameters está colocado al final, de otra manera nos devolvería un error.

const sumaNumeros = ( ...args ) => {
    return args.filter( e => typeof e === 'number' )
        .reduce( (prev, curr) => prev + curr );
};

const resultado = sumaNumeros( 1, null, 'fullstack', 5, undefined, 2 );

console.log( resultado );

// => 8

Las posibilidades son infinitas 😃

🔍 Lecturas recomendadas

Gracias por leer 🙏

🌎 https://sergioturpin.es
📷 Instagram
🐦 Twitter
🐙 GitHub

Hello devs!

Sergio Turpín — Fri, 24 Sep 2021 10:58:10 +0000

Hello!! 👋 My name is Sergio Turpín and I'm from Cieza, Murcia (Spain).

I'm very happy to be part of this community where we can gained substancial experience for the high level of IT resources 😉

I take this opportunity to share my renewed portfolio Sergio Turpín developed with GatsbyJS where I talk about my jobs and free time activities.

Based on computing I work at platform for citizen participation of my city council. I try to improve my skills with Ruby on Rails, Docker, Kubernetes, Istio and another artefacts 😅

I hope to share many coffees ☕ with you 😜