Elixir para React.js Devs
Tags: elixir, react, javascript, chile
Published: 2023-12-27 18:49:43

---
title: Elixir para React.js Devs
published: true
description: ¿Qué es Elixir?, ¿Para qué sirve?, ¿Cómo se compara con React.js?
tags: elixir, react, javascript, chile
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ecxssw1cr7durd2hgfg9.png
# Use a ratio of 100:42 for best results.
# published_at: 2023-12-27 13:54 +0000
---

## ¿Qué es Elixir?

Elixir es un maravilloso lenguaje de programación, creado por José Valim el 2011 (Brasil) y a sus usuarios les gusta denominarse "alquimistas". Grandes empresas como Pinterest han ahorrado más de 2 millones de dólares al año en costos de servidores gracias a esta grandiosa tecnología.

- https://elixir-lang.org/
- https://paraxial.io/blog/elixir-savings

### ¿Cómo Aprenderlo?

Para comenzar recomendamos el libro online gratuito [Joy Of Elixir](https://joyofelixir.com/) donde podrás realizar ejercicios para aprender lo básico del lenguaje. Es importante complementarlo con la herramienta [Livebook](https://livebook.dev/ ) ya que con ello podrás instalar Elixir fácilmente y ejecutar scripts.

También recomendamos mucho el clásico _"Elixir in Action"_ para aprender más profundamente el ecosistema de Elixir y Erlang.

- https://joyofelixir.com/
- https://livebook.dev/ 
- https://www.manning.com/books/elixir-in-action

### Comunidad de 🧙 Elixir Chile 🇨🇱

🧙 [Elixir Chile](https://elixircl.github.io/) 🇨🇱 tiene el objetivo de crear artefactos de software, documentación y actividades para el fomento de la tecnología Elixir en el país.

Todas las personas son bienvenidas, aunque no estén dentro de Chile. El único requisito es ser amables y apoyarnos mutuamente.

Pueden visitarnos en nuestra web https://elixircl.github.io/ y hablar con nosotros en [Discord](https://discord.gg/WwSXMcMdAt).

## ¿Para qué sirve Elixir?

Elixir es mucho más que un lenguaje de programación para backends. Es todo un ecosistema que sirve para distintos propósitos y cada día hay nuevas herramientas. Ciertamente si decides invertir en esta tecnología, podrás acceder a muchos campos laborales y proyectos entretenidos.

La siguiente tabla muestra algunas de las herramientas disponibles en el ecosistema.

|Categoría|Nombre|Descripción|Enlace|
|---|---|---|---|
|AI|Nx|Matrices multidimensionales (tensores) y definiciones numéricas para Elixir. (Similares a Numpy).|https://github.com/elixir-nx/nx|
|AI|Axon| Axon brinda control total sobre cada aspecto de la creación y capacitación de una red neuronal. (Deeplearning Similares a Tensorflow/Pytorch).|https://github.com/elixir-nx/axon|
|AI|Scholar| Algoritmos para la clasificación, regresión, agrupación, reducción de dimensionalidad, métricas y preprocesamiento. (Similar a SKLearn) | https://github.com/elixir-nx/scholar|
|AI|Bumblebee|Bumblebee proporciona modelos de red neuronales previamente capacitados usando Axon. (Similar a Transformers).|https://github.com/elixir-nx/bumblebee|
|AI|Explorer|Explorer trae la serie (unidimensional) y los marcos de datos (bidimensionales) para la exploración de datos rápidos a Elixir. (Similar a Pandas).|https://github.com/elixir-explorer/explorer|
|AI|EXGBoost|Implementa algoritmos de aprendizaje automático en el marco de impulso de gradiente (Gradient Boosting framework). (Bind para XGBoost)|https://github.com/acalejos/exgboost|
|IOT|Nerves|Construir e implementar fácilmente sistemas incrustados de producción.|https://nerves-project.org/|
|Multimedia|Membrane|Un marco multimedia fácilmente comprensible y personalizable.|https://membrane.stream/|
|Mobile|Liveview Native|Crea aplicaciones nativas Android e iOS utilizando Elixir.|https://github.com/liveview-native|
|Mobile|Elixir Desktop|Crea aplicaciones de escritorio, Android e iOS utilizando Phoenix (Webview).|https://github.com/elixir-desktop/desktop|
|Web| Phoenix Framework | Crea sistemas Webs tanto backend como frontend (con Liveview) | https://www.phoenixframework.org/|
|Web| Surface UI | Extensión para Phoenix. Permite crear interfaces Web con inspiración de React.js y Vue.js|https://surface-ui.org/|
|Web| Ash Framework | Extensión para Phoenix. Permite estandarizar la creación de APIs Rest y GraphQL.|https://ash-hq.org/|
|ORM| Ecto | Una capa para llamar a las bases de datos | https://hexdocs.pm/ecto/Ecto.html|
|HTTP| Req | Cliente HTTP con baterías incluidas (similar a python requests)|https://github.com/wojtekmach/req|
Serverless| Flame| Protocolo para aplicaciones tipo Serverlss similar a AWS Lambda.| https://github.com/phoenixframework/flame
|Herramientas|Oban|Procesamiento de Tareas|https://github.com/sorentwo/oban|
|Herramientas|Broadway|Eventos (Similar a Kafka o RabbitMQ)|https://github.com/dashbitco/broadway|
|Herramientas|Livebook|Automatizar flujos de trabajo de código y datos con cuadernos interactivos. (Similar a Jupyter Notebooks)|https://livebook.dev/|

### ¿Por qué Usarlo?

**Razón Técnica**: La Erlang VM (Beam) tiene más de 30 años de evolución en entornos distribuidos y concurrentes, lo que la hace ideal para los sistemas de hoy.

Un ejemplo es el experimento de Leandro donde se probó la cantidad de conexiones TCP. Elixir y Erlang superaron incluso a tecnologías como Go y Rust.

![Elixir vs Go TCP Throutput](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g35zfozerp1fny1s6np9.png)

{% embed https://twitter.com/leostera/status/1739169948646232511 %}

**Razón Negocio**: Utilizar tecnologías modernas como Elixir permite contratar personas curiosas, lo que es más probable que sean buenos candidatos. La disminución de las dependencias permitirá ahorrar costos a mediano y largo plazo.


**Razón Emocional**: Elixir y Phoenix son lenguajes y frameworks modernos y fáciles de aprender, lo que los hace entretenidos y permite motivar a las personas a experimentar y generar nuevas ideas o soluciones. Además son bien valorados en el mercado y las ofertas laborales están bien remuneradas.


**Razón Profesional**: Utilizar Elixir y Phoenix traerá oportunidades laborales novedosas, además de mejorar las probabilidades de destacar en el mercado al utilizar una tecnología con menor cantidad de competencia.

Para más detalles se puede leer:

{% embed https://dev.to/devschile/por-que-elegir-elixir-y-phoenix-3h1b %}

## Elixir para JS Devs

Una pequeña comparación entre los dos lenguajes basado en la página web [Elixir for a JS Dev](http://web.archive.org/web/20230603033748/https://elixirforajs.dev/)

### Importar Módulos

**Javascript**

```js

 import React, { useState } from 'react';
 import React as MyReact from 'react';

```

**Elixir**
```elixir

# En Elixir se puede importar solo llamando 
# al módulo de forma completa 
# (no depende de la estructura de directorios). 
# También notar la separación utilizando puntos.
import MySuperSpecialProject.HelperModule

# Un alias permite utilizar el módulo 
# sin especificar la ruta completa. 
# En este caso podremos usar HelperModule.
alias MySuperSpecialProject.HelperModule

# También podremos importar una función 
# en específico desde un módulo.
import MySuperSpecialProject.HelperModule, 
       only: [my_function, 1]
```

### Funciones

**Javascript**

```js
 function add(n1, n2) {
   return n1 + n2;
 }
 const add = (n1, n2) => n1 + n2;
```

**Elixir**

```elixir
# Las funciones utilizan el keyword def
# similar a Python. Y utilizando bloques do y end
# similar a Ruby.
def add(n1, n2) do
  n1 + n2
end

# Las funciones pueden ser asignadas a variables
# En su forma larga (con fn)
add = fn(a, b) -> a + b end

# Y en su forma abreviada (usando &)
add = &(&1 + &2)

# Las funciones pueden ser privadas dentro de un módulo
# Similar a métodos privados de una clase.
defp private_add(n1, n2) do
  n1 + n2
end
```

### De-estructuración

**Javascript**

```js
 const o = { nested: { prop: '¡Hola!' } };

 const { nested: { prop } = {} } = o;

 console.log(prop);
 // ¡Hola!
```

**Elixir**

```elixir
o = %{nested: %{prop: "¡Hola!"}}

# Esto es lo que se conoce como Pattern Matching
# Una herramienta muy poderosa en los lenguajes
# funcionales como Elixir.
%{nested: %{prop: prop}} = o

IO.inspect(prop)

# ¡Hola!
```

### Surface UI para React.js Devs

Ahora veremos una pequeña introducción a Surface UI y cómo alguien que conoce _React.js_ puede aprenderlo fácilmente, permitiendo acceder al maravilloso mundo de Elixir y Phoenix.

Para comenzar esta pequeña comparación de tecnologías. Considerando React.js para Server Side Rendering (SSR) en el framework Next.js.

|Tecnología|Framework|Lenguaje|Realtime|
|---|---|---|---|
|Surface UI (https://surface-ui.org/)| Phoenix|Elixir|LiveView|
|React.js| Next.js|Javascript|Socket.io|

Surface UI es una extensión para LiveView de Phoenix que trae convenciones y herramientas muy similares a las encontradas en frameworks de frontend Javascript como React.js o Vue.js.

React.js permite crear frontends web de forma declarativa en el ambiente cliente con Javascript. Reemplazando la forma imperativa comunmente usada en otras tecnologías como jQuery y HTMx. Actualmente existen herramientas como Next.js que permiten traer esta forma declarativa de crear frontend al servidor, sin embargo estos frameworks de Javascript al nivel de servidor no tienen las mismas características y capacidades ofrecidas por tecnologías que funcionen bajo la BEAM VM.

Phoenix con su herramienta LiveView permite crear frontends web de forma declarativa en el ambiente servidor con Elixir. Sumando la extensión de Surface UI nos permite tener lo mejor de los dos mundos. Primero una excelente y robusta plataforma de servidores y segundo, una forma de crear frontends utilizando convenciones y herramientas de fácil aprendizaje para personas que provengan de ecosistemas como Javascript.

### Ejemplo de Módulo Surface

```elixir
defmodule MyAppWeb.ExampleLive do
   use Surface.LiveView

   # Importamos nuestro componente
   # utilizando un alias
   alias MyAppWeb.Components.ExampleComponent
   
   def render(assigns) do
       # Renderizamos el HTML final
       # Con una sintaxis similar a JSX de React.js
       ~F"""
            <ExampleComponent>
               ¡Hola Mundo!
            </ExampleComponent>
        """
   end
end
```

#### Características Principales de Surface UI



##### [Propiedades](https://surface-ui.org/properties)

Al igual que React.js podemos definir las propiedades, tanto obligatorias como opcionales de nuestro componente y pasarlas al momento de renderizar el componente.

```elixir
# Creando el Componente

defmodule Hola do
  use Surface.Component

  @doc "A quien saludar"
  prop nombre, :string, required: true

  def render(assigns) do
    ~F"""
    ¡Hola, {@nombre}!
    """
  end
end

# Usando el Componente

defmodule Ejemplo do
  use Surface.Component

  def render(assigns) do
    ~F"""
    <Hola nombre="Juan Pérez" />
    """
  end
end
```

##### [Estilos de CSS Colocados](https://surface-ui.org/scoped_css)

Nos permite separar nuestros CSS en un archivo con el mismo nombre del módulo. (similar a Vue.js SFC CSS).

```text
my_app_web/components
├── ...
├── card.ex
├── card.css
``` 

También nos permite utilizar un tag especial `<style>` para cambiar la apariencia del componente.

```jsx
def render(assigns) do
  ~F"""
  <style>
    .tag {
      @apply bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2;
    }
  </style>

  <div>
    <span class="tag">#surface</span>
    <span class="tag">#phoenix</span>
    <span class="tag">#tailwindcss</span>
  </div>
  """
end
```

##### [Hooks de Javascript](https://surface-ui.org/js_interop)

También podremos hacer uso de Javascript para ciertos eventos que no son necesarios llevarlos al servidor (Por ejemplo animaciones, reproducción de sonidos o utilización de bibliotecas de gráficos como D3).

Para ésto podemos crear un archivo javascript en el mismo directorio de nuestro componente.

```text
my_app_web/components
├── ...
├── card.ex
├── card.hooks.js
```

```js
export default {
  mounted(){
    console.log("Componente Card se ha montado")
  }
}
```

Y luego en el HTML se puede asociar al elemento
que gatillará el evento, utilizando la directiva `:hook`

```html
<div id="mi_div" :hook>
  ...
</div>
```


##### [Catálogo de Componentes](https://github.com/surface-ui/surface_catalogue/)

De la misma forma que se usa [Storybook](https://storybook.js.org/) para React.js, Surface UI cuenta con _Catalogue_, una ayuda para documentar y ver nuestros componentes de forma fácil y bonita.

- https://github.com/surface-ui/surface_catalogue/

##### Otros Enlaces

- [Formateador de Surface](https://github.com/surface-ui/surface_formatter)

- [Coloreador de Sintaxis para VS Code](https://marketplace.visualstudio.com/items?itemName=msaraiva.surface)

##### Proyectos de Ejemplo 

Si desean ver un pequeño proyecto de ejemplo que utiliza Surface UI pueden ver el siguiente repositorio:

{% embed https://github.com/ElixirCL/huemulixir %}


También una configuración de ejemplo con Tailwind y Sass:

{% embed https://github.com/ElixirCL/surface-tailwind-sass %}

Este proyecto muestra un Tic Tac Toe
{% embed https://github.com/ElixirCL/surface-tictactoe %}

## Links

- https://github.com/ElixirCL/ElixirCL/wiki/%5BTips%5D-Ambiente-de-Desarrollo-Elixir-en-Windows
- https://github.com/ElixirCL/ElixirCL/wiki/%5BTips%5D-Instalar-Surface-UI


## Conclusión

Elixir es una tremenda tecnología para invertir en aprenderla y utilizarla profesionalmente, no solo por su sintaxis amigable, también por su cantidad de herramientas y características versátiles que nos permitirán desarrollar y participar en una gran gama de proyectos de distinta índole.

Además el uso de Surface UI permitirá a muchas personas del área frontend Javascript, ingresar al mundo del desarrollo frontend y backend con Elixir, Phoenix y Liveview.