playground elm

|> Spielplatz-Elm

Mein Spielplatz benutze ich zum Spielen mit ausgefallenen und aufregenden Technologien. Dies ist für Elm.

Zweck

Der Zweck dieses Spielplatzes ist es, die ELM -Sprache zu erforschen, zu studieren und zu bewerten - eine entzückende Sprache für zuverlässige WebApps.

Die Showcases sollen sein:

• Einfach : ziemlich einfach und verständlich. Jedes Schaufenster wird in einer einzelnen ELM -Datei implementiert.
• Erkundung :
  • Markieren Sie einige Aspekte der ELM -Sprache wie Unveränderlichkeit, Reaktivität, Leistung und Interoperabilität mit anderen JS -Bibliotheken und CSS -Frameworks.
  • Entdecken Sie einige Architektur-/Entwurfsmuster in Bezug auf reaktive statische/serverlose Spa
• Spielbar : So viel wie möglich, bietet einen nützlichen und angenehmen Inhalt.

? Präsentationen

Besuchen Sie die? Demo -Site und in Ihrem Browser spielen.

Die Demo ist eine reine Spa (100% Clientside -Anwendung), die in ELM geschrieben wurde.

Liste der Showcases:

• GLSL: Ein dynamischer Webgl -Elektrizitätseffekt mit GLSL -Shadern mit interaktiver 3D -Rotation mit glatte Trägheit.

• Soundwave Toggle: Eine einfache Schaltfläche für die Schaltwelle, die in SVG geführt wird.

• DAPP: Eine unkomplizierte dezentrale Anwendung (DAPP), die mit verschiedenen Brieftaschen unter Verwendung von EIP-6963 geführt wird.

• Asteroiden: Ein einfacher Klon des klassischen Spiels -Asteroiden, der in ELM unter Verwendung des ECS -Musters (Entity Component System) implementiert ist und mit SVG gerendert wird.

• Begriff: Ein webbasiertes Terminal, das den JavaScript-Code mithilfe von ELM-Ports für die Interaktivität bewertet.

• Physik: Ein unkomplizierter Physik -Engine, der den Veret -Integrationsalgorithmus verwendet, der auf einer HTML5 -Leinwand gerendert wird.

• Labyrinth: Ein Labyrinthgenerator, der mit dem rekursiven Backtracking -Algorithmus hergestellt wurde.

• Digitale Uhr: Eine digitale Uhr -Demo, die visuell mit SVG dargestellt wird.

• Lissajous: Animation von Lissajous -Figuren, dargestellt in SVG.

• CALC: Ein grundlegender Rechner für einfache arithmetische Operationen.

? Gebäude und Laufen

Elm 0,19

ELM 0.19 hat mir aufgrund vieler Änderungen zu Themen, die ich in diesem Projekt mit früherer Version verwendet habe, so viele andere Codierer gebrochen:

• elm.json -Datei
• JSON -Dekodierung
• String / Int / Float Conversions
• Browseranwendung, Routing
• URL -Management
• Datum Uhrzeit ( Posix , Zone )
• Viele inkompatible Pakete
• ...

Ich habe es endlich geschafft, zu dieser neuen Version zu migrieren, aber Instabilitäten können jedoch bemerkt werden.

Voraussetzungen

Stellen Sie sicher, dass Sie die folgenden ordnungsgemäß installiert haben:

• Node.js v18.17 (Wasserstoff)
• PNPM v8.3

Bauen

Das Projekt basiert nun auf Parceljs, einen Webantrags -Bundler, der ELM -Builds bei Free übernimmt.

Zunächst müssen alle Knotenpakete, von denen dieses Projekt abhängt, lokal installiert werden. Dies kann mit dem folgenden Befehl erfolgen:

pnpm install

Der Build kann mit:

pnpm build

Dann öffnen Sie ./dist/index.html -Datei in Ihrem Browser.

Wenn Sie es vorziehen, kann die Website von einem lokalen HTTP -Server veröffentlicht werden. In diesem Modus wird der Aufbau des Projekts erneut gestartet und die Site im Browser automatisch aktualisiert. Das ist schön während der Entwicklungsphasen.

Die Veröffentlichung wird mit dem folgenden Befehl gestartet:

pnpm serve

Die Website ist über den "/ Endpunkt" zugänglich.

? Technologien

• elm : Elm

  Mit den folgenden (Haupt- und nicht erschöpfenden) Paketen:

  • Chadtech/Elm-Vektor
  • AVH4/ULM-Farbton
  • Cucucos/Elm-Format-Number
  • ELM-Explorations/Markdown
  • SIMONH1000/ELM-COLORPICKER
  • Joakin/Elm-Canvas
  • WSOWENS/SEMMER
  • Maccasoutreach/graphicsvg
  • Harmboschloo/Elm-ECS
  • Brianhicks/Elm-Partikel
  • ELM-Explorations/Webgl
  • NPhollon/Geo3d

• parceljs : Webanwendungsbundler

• bulma : Der moderne CSS -Framework

Lizenz

MIT © Chris Camel