Ya hemos visto la arquitectura de Elm: tipos, comandos, suscripciones e incluso tenemos Elm instalado localmente.
Pero ¿qué sucede cuando necesitas integrarlo con JavaScript? Quizás exista una API de navegador que aún no tenga un paquete Elm equivalente. ¿Quizás quieras integrar un widget JavaScript en tu aplicación Elm? Veamos los tres mecanismos de interoperabilidad de Elm:
- Banderas
- Puertos
- Elementos personalizados
Antes de analizar los tres mecanismos, necesitamos saber cómo compilar programas Elm a JavaScript.
Ejecutar elm make genera archivos HTML por defecto. Entonces, si dices:
elm make src/Main.elm
Se genera un archivo index.html que puedes abrir y empezar a experimentar. Si te estás iniciando en la interoperabilidad de JavaScript, te conviene generar archivos JavaScript:
elm make src/Main.elm --output=main.js
Esto genera un archivo JavaScript que expone una función Elm.Main.init(). Una vez que tengas main.js, puedes escribir tu propio archivo HTML con la función que desees.
Aquí está el HTML mínimo necesario para que tu archivo main.js aparezca en un navegador:
<html>
<head>
<meta charset="UTF-8">
<title>Main</title>
<script src="main.js"></script>
</head>
<body>
<div id="myapp"></div>
<script>
var app = Elm.Main.init({
node: document.getElementById('myapp')
});
</script>
</body>
</html>
Quiero destacar las líneas importantes:
- <head> - Tenemos una línea para cargar nuestro archivo main.js compilado. ¡Es obligatorio! Si compilas un módulo Elm llamado Main, obtendrás una función Elm.Main.init() disponible en JavaScript. Si compilas un módulo Elm llamado Home, obtendrás una función Elm.Home.init() en JavaScript. Etc.
- <body> - Necesitamos hacer dos cosas aquí. Primero, creamos un <div> que queremos que nuestro programa Elm controle. ¿Quizás esté dentro de una aplicación más grande, rodeado de un montón de otras cosas? ¡No hay problema! Segundo, tenemos un <script> para inicializar nuestro programa Elm. Aquí llamamos a la función Elm.Main.init() para iniciar nuestro programa, pasando el nodo que queremos controlar.
Este es un archivo HTML normal, así que puedes incluir lo que quieras. Mucha gente carga archivos JS y CSS adicionales en el <head>. Esto significa que es perfectamente posible escribir el CSS a mano o generarlo de alguna manera. Agrega algo como <link rel="stylesheet" href="whatever-you-want.css"> en tu <head> y tendrás acceso a él. (También hay algunas opciones excelentes para especificar tu CSS dentro de Elm, ¡pero ese es otro tema!)
Ahora que sabemos cómo incrustar programas Elm en un documento HTML, es hora de empezar a explorar las tres opciones de interoperabilidad: indicadores, puertos y elementos personalizados en próximos posts.
.jpeg)
