playground elm

|> Playground-Elm

Mi patio de recreo que uso para jugar con tecnologías elegantes y emocionantes. Este es para Elm.

Objetivo

El propósito de este patio de recreo es explorar, estudiar y evaluar el lenguaje ELM, un lenguaje encantador para las aplicaciones web confiables.

Las exhibiciones están destinadas a ser:

• Simple : bastante simple y comprensible. Cada escaparate se implementa en un solo archivo ELM.
• Exploratorio :
  • Destaca algunos aspectos del lenguaje ELM, como la inmutabilidad, la reactividad, el rendimiento y la interoperabilidad con otras bibliotecas JS y marcos CSS.
  • Explore algunos patrones arquitectónicos/de diseño alrededor de reactivo spA estática/sin servidor sin servidor
• Playable : tanto como sea posible, proporciona un contenido útil y agradable.

? Exhibiciones

Visitar el? sitio de demostración y jugar en su navegador.

La demostración es un spa puro (100% de la aplicación de clientes) escrita en ELM.

Lista de exhibiciones:

• GLSL: un efecto de electricidad WebGL dinámico creado con sombreadores GLSL, con rotación 3D interactiva con inercia suave.

• Soundwave Toggle: un simple botón de alternancia de onda de sonido renderizado en SVG.

• DAPP: una aplicación descentralizada (DAPP) directa que interfiere con varias billeteras, utilizando EIP-6963.

• Asteroides: un clon simple de los asteroides clásicos del juego, implementado en ELM utilizando el patrón del sistema de componentes de entidad (ECS), renderizado con SVG.

• Término: un terminal basado en la web que evalúa el código JavaScript utilizando puertos ELM para la interactividad.

• Física: un motor de física sencillo que utiliza el algoritmo de integración de verlet, renderizado en un lienzo HTML5.

• Mazer: un generador de laberinto diseñado utilizando el algoritmo recursivo de retroceso.

• Reloj digital: una demostración de reloj digital, representada visualmente con SVG.

• Lissajous: animación de figuras lissojusas, representadas en SVG.

• Calc: una calculadora básica diseñada para operaciones aritméticas simples.

? Construcción y carrera

ELM 0.19

Elm 0.19 me rompió como muchos otros codificadores, debido a muchos cambios en los temas que utilicé en este proyecto con la versión anterior:

• archivo elm.json
• JSON Decoding
• String / int / Float Conversions
• Aplicación del navegador, enrutamiento
• Gestión de URL
• hora de fecha ( Posix , Zone )
• muchos paquetes incompatibles
• ...

Finalmente logré migrar a esta nueva versión, pero las inestabilidades se pueden notar.

Requisitos previos

Asegúrese de tener lo siguiente correctamente instalado:

• Node.js v18.17 (hidrógeno)
• PNPM v8.3

Construir

El proyecto ahora se basa en Parceljs, un Bundler de aplicaciones web que maneja las compilaciones de Elm en gratis.

Al principio, todos los paquetes de nodo de los que depende de este proyecto debe instalarse localmente. Esto se puede hacer con el siguiente comando:

pnpm install

La construcción se puede lanzar con:

pnpm build

Luego, abra ./dist/index.html archivo en su navegador.

Si lo prefiere, el sitio puede ser publicado por un servidor HTTP local. En este modo, si se detecta algún cambio, la compilación del proyecto se iniciará nuevamente y el sitio se actualizará automáticamente en el navegador; Lo cual es bueno durante las fases de desarrollo.

La publicación se lanza con el siguiente comando:

pnpm serve

Se puede acceder al sitio a través del "/ punto final.

? Tecnologías

• elm : Elm

  Con los siguientes paquetes (principales y no exhaustivos):

  • Chadtech/Elm-vector
  • AVH4/Elm-Color
  • Cuducos/ELM-Format-Number
  • ELM-Exploraciones/Markdown
  • Simonh1000/Elm-Colorpicker
  • Joakin/Elm-Canvas
  • wsowens/término
  • MacCASoUreRach/Graphicsvg
  • Harmboschloo/Elm-ECS
  • Partícula brianhicks
  • ELM-Exploraciones/WebGL
  • nphollon/geo3d

• parceljs : Bundler de aplicaciones web

• bulma : el marco CSS moderno

Licencia

MIT © Chris Camel