¿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 donde podrás realizar ejercicios para aprender lo básico del lenguaje. Es importante complementarlo con la herramienta Livebook 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 🇨🇱 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.

¿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.

¿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.

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:

¿Por qué elegir Elixir y Phoenix?

Camilo for devsChile ・ Sep 25 '23

#elixir #chile #webdev #backend

Elixir para JS Devs

Una pequeña comparación entre los dos lenguajes basado en la página web Elixir for a JS Dev

Importar Módulos

Javascript

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

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

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

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

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

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

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

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.

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

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

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

# 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

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

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

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

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

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.

my_app_web/components
├── ...
├── card.ex
├── card.hooks.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

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

Catálogo de Componentes

De la misma forma que se usa Storybook 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

• Coloreador de Sintaxis para VS Code

Proyectos de Ejemplo

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

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

Este proyecto muestra un Tic Tac Toe

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.