¿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.
¿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.
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.
| 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.
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:
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.
| 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
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.
Otros Enlaces
Proyectos de Ejemplo
Si desean ver un pequeño proyecto de ejemplo que utiliza Surface UI pueden ver el siguiente repositorio:
ElixirCL
/
huemulixir
Un juego simple con Elixir usando a Huemul para dar sabios consejos
Huemulixir
Huemul te da un consejo según las frases de la Bola 8 (en español).
Engine: https://www.phoenixframework.org/
Inspirado en: https://github.com/devschile/huemul/blob/master/scripts/bola8.js
- Instalar las dependencias con
mix deps.get - Iniciar el servidor con
mix phx.server.
Ahora puedes ir a localhost:4000 desde el navegador.
Creado para la Devs Chile Jam 1 (https://itch.io/jam/devschile-1).
LICENCIA
BSD
Creditos
Made with ♥ by Ninjas.cl.
También una configuración de ejemplo con Tailwind y Sass:
ElixirCL
/
surface-tailwind-sass
Ejemplo de Configuración de Phoenix con Surface, Tailwind y Sass
Surface + Tailwind + Sass
Realizaremos una configuración básica de Surface UI, Tailwind y Sass en un proyecto Phoenix con LiveView.
Escrito por Camilo Castro y colaboradores Para Elixir Chile.
A menos que se especifique explícitamente, los contenidos de ésta obra están bajo una Licencia Creative Commons Atribución-No-Comercial-Compartir-Igual 4.0 Internacional
El código fuente está bajo la licencia BSD. https://github.com/elixircl/surface-tailwind-sass/
1. Creación de un nuevo proyecto
Vamos a crear un nuevo proyecto, aunque si ya tienes uno previo igual es útil, puesto que realizaremos las configuraciones de…
Este proyecto muestra un Tic Tac Toe
ElixirCL
/
surface-tictactoe
An example Tic Tac Toe made with Surface 0.11
Surface TicTacToe Example
Example moved to https://github.com/ElixirCL/surface-practice
React Tic Tac Toe Tutorial Implemented in Surface UI (0.11)
- Requires PostgreSQL running
To start your Phoenix server:
- Run
mix setupto install and setup dependencies - Start Phoenix endpoint with
mix phx.serveror inside IEx withiex -S mix phx.server
Now you can visit localhost:4000 from your browser.
License
BSD 2
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.
Top comments (1)
Excelente post Camilo!!! Muchas gracias por compartir