Learn Elm after Haskell

Learn
1

Hello everyone,

I have a bit of experience in Haskell from a university course and now i want to build front ends for my Haskell apps with Elm. And I have a few questions about that.

How many knowledge about HTML, java script and CSS do I need?
Are there tutorials on building bigger apps with a back end in Haskell?
As a first app I want to write a front end that sends some text input to a parser, that I have written in in Haskell and displays the result. I think that is not to difficult with text fields but that would not be very nice. Are there tutorials on how to create nice editors like Ellie?

2

Hi,

when it comes to HTML and CSS you have options, I prefer checking html element reference documentation and use the most semantically correct element, for example:

  • if you are displaying tabular data you should probably use the <table> element
  • if you are listing something and the order is important you should probably use <ol>
  • if you are displaying main navigation links they should probably be in a <nav> element

However using the elm ui library will get you the look and it might be faster (I tend to suggest starting with the basics and using libraries later)

With CSS you have similar choices you can use pure css - I prefer using frameworks based on atomic design like tachyons or tailwindcss, but elm also has libraries for that: elm-css

There is a well known demo app: real world app, ellie is also on github

Some further nice reading: elm.christmas
Some further nice listening: elm-radio

This article is also nice since it sheds some light on constructors: An intro to constructors in Elm (it has been super useful to me - it probably should be added to the elm guide as an appendix?)

3

Ellie uses CodeMirror, wrapped in a custom element: https://codemirror.net/
If you want to go that route, consult the Ellie source code to see how it is done.

Recently I have used this editor toolkit, which can be good for shorter texts and a more Elm based approach (still needs a little bit of Javascript code in a custom element): elm-rte-toolkit 1.0.4
Its not too hard to figure out a basic editor from the demo code, once you know Elm.

4

The Elm package website is a good example of Haskell for the back-end and Elm for the front-end: package.elm-lang.org/src at master · elm/package.elm-lang.org · GitHub

If you’re not afraid of being tied to a framework, IHP is an Haskell back-end framework that uses Elm for the front-end.

5

Than you very much for your answers. I will read that input in the next weeks. For my project i tired to use the monaco editor. That was no to difficult and similar to an example from the elm guide. But I don’t know how to access the content of the editor. Can you help me with that.

6

The Monaco Editor Playground site has some examples showing how to access the editor’s contents.
Here is a simpler one, just setting the text content: Monaco Editor

You can interface with those javascript functions via ports in your Elm app.
The open-source project Elm Editor integrates the Monaco editor. It is a complete example of how to use Monaco in an Elm app: elm-time/implement/example-apps/elm-editor at 38ee5dba9a06bf20cabd0ef4790643f4c4521780 · elm-time/elm-time · GitHub

You can see the ports to javascript implemented here:

Here are the Elm types describing the values going through the interface with Monaco:

There is also a live demo of the complete app at https://elm-editor.com

Now I notice one of the more prominent pieces of content is missing: The colors.
How do we get the colors into the editor? We see colors in the code editor, so why don’t we find them in the above interface type?
In the example, the colors in the code editor are not coming from the Elm app.
The linked example contains a definition of the Elm language syntax based on the Monarch format. Since the Monaco editor supports the Monarch format, we can let it directly use that syntax definition to derive the highlighting/colors for the code text. One benefit of that route is improved response times compared to updating the highlighting via the Elm app.

7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.