DEV Community

Cover image for A tour of all Elm commands
Amin
Amin

Posted on

A tour of all Elm commands

A tour. The Eiffel Tour. Elm Europe Events taking place in Paris. Get it?

Elm is awesome. For many reasons. One being that it ships all the necessary tools that we would be familiar with other frameworks like Angular, React or Vue.

REPL

Comes in handy when we are unsure about one command's output. Especially while learning Elm!

$ elm repl
> List.map ((+) 1) [1, 2, 3] 
[2,3,4] : List number
Enter fullscreen mode Exit fullscreen mode
$ elm repl
> List.nap
-- NAMING ERROR ----------------------------------------------------------- REPL

I cannot find a `List.nap` variable:

3|   List.nap
     ^^^^^^^^
The `List` module does not expose a `nap` variable. These names seem close
though:

    List.map
    List.any
    List.map2
    List.map3

Hint: Read <https://elm-lang.org/0.19.1/imports> to see how `import`
declarations work in Elm.
Enter fullscreen mode Exit fullscreen mode

Init

This will create an elm.json file which is at the root of all Elm projects. Plus, it is a really polite command and will ask you before writing anything onto your local file system.

$ elm init
Hello! Elm projects always start with an elm.json file. I can create them!

Now you may be wondering, what will be in this file? How do I add Elm files to
my project? How do I see it in the browser? How will my code grow? Do I need
more directories? What about tests? Etc.

Check out <https://elm-lang.org/0.19.1/init> for all the answers!

Knowing all that, would you like me to create an elm.json file now? [Y/n]: y
Okay, I created it. Now read that link!
Enter fullscreen mode Exit fullscreen mode

Reactor

This will run a web server, exposing a dashboard that you can use to browse all of your project's files. And I mean all of them. But you can also use it to compile your Elm files in one click and displaying the result of that page.

$ elm reactor
Go to http://localhost:8000 to see your project dashboard.
Enter fullscreen mode Exit fullscreen mode

Make

While with Webpack, you would want to setup some plugins before creating your first page using a framework like Angular, React or Vue by adding a html-webpack-plugin and configuring the template to output it to some folder, in Elm, it's all baked into the compiler.

Need a fully fledged HTML page? Just tell it to output to index.html. Need only the compiled JavaScript? Again, just tell it to output to index.js. It's that simple!

$ elm make src/Main.elm --output public/index.html
Starting downloads...

  ● elm/core 1.0.4
  ● elm/url 1.0.0
  ● elm/json 1.1.3
  ● elm/time 1.0.0
  ● elm/virtual-dom 1.0.2
  ● elm/html 1.0.0
  ● elm/browser 1.0.2

Dependencies ready!         
Success! Compiled 1 module.

    Main ───> public/main.js
Enter fullscreen mode Exit fullscreen mode

Install

Elm is so polite, that it even ask for your confirmation before writing anything on your file system, including when installing new packages.

And if that package has indirect dependencies, not only it will install them for you, but it will tell you exactly what will be done.

$ elm install elm-explorations/markdown
Here is my plan:

  Add:
    elm-explorations/markdown    1.0.0

Would you like me to update your elm.json accordingly? [Y/n]: y
Success!
Enter fullscreen mode Exit fullscreen mode

Diff

If there are some API changes made in your source-code, this command will tell you exactly what happened and where.

Even better, this can be used from versions to versions, and for external packages as well!

$ elm diff elm/http 1.0.0 2.0.0
This is a MAJOR change.                                                                                                                                       

---- REMOVED MODULES - MAJOR ----                                                                                                                             

    Http.Progress                                                                                                                                             


---- Http - MAJOR ----                                                                                                                                        

    Added:                                                                                                                                                    
        type Body                                                                                                                                             
        type Expect msg                                                                                                                                       
        type Header                                                                                                                                           
        type Progress                                                                                                                                         
            = Sending { sent : Int, size : Int }                                                                                                              
            | Receiving { received : Int, size : Maybe Int }
[...]
Enter fullscreen mode Exit fullscreen mode

Bump

Let's say that you are writing a module to help your users compute the numbers of the Fibonacci's sequence. So that our function will take an integer and return all of the Fibonacci's numbers until that number. You published your package as a version 0.1.0.

module Fibonacci exposing (sequence)

sequence : Int -> List Int
Enter fullscreen mode Exit fullscreen mode

Now, you decide to you change the header of your function to return a list of strings.

module Fibonacci exposing (sequence)

sequence : Int -> List String
Enter fullscreen mode Exit fullscreen mode

If you run the command elm bump it will automatically calcluate the differences in the API, see that there is now a breaking change, and increment the major version from 0.1.0 to 1.0.0. Automatically. You have literally nothing to do. Just focus on your app and Elm will do the rest for you.

Publish

I think that this one is pretty self-explanatory. If you need to publish the API you just created (and if no one has ever done something similar) you can publish your package to the official Elm package registry. Just like you would with NPM packages.

Conclusion

While most projects often require some tooling and configuration to get productive, Elm does not. And we saw all the tools that Elm provides in order for the developer to get productive as quick as possible.

This is what convinced me to make the shift and I now started to use Elm in all of my side-projects. It is a real pleasure not having to focus on the tools that we need to use in order to get productive. I sometimes spent as much, if not much time, setting up my environment just to get an idea translated into something concrete and I often end up giving up when I see how much time I spend on that matter.

What do you think about it? Is it something that bothers you? Or you don't mind spending some time configuring your environment before getting productive? Let me know in the comment section and thanks for reading!

Top comments (7)

Collapse
 
leob profile image
leob

I just wonder, given all of its advantages, why did Elm never manage to grab a bigger market share from Javascript for frontend development? A strongly typed (FP even) language, fast compiler, tooling and framework integrated ... contrast that with JS: if you want a modern language then you need to add Babel or Typescript, then set up Webpack, which can be dauntingly complex, then choose from a smattering of frameworks (React, Vue, and so on) ... Elm must be an order of magnitude simpler. But yeah OTOH, ecosystem, community, both are huge obviously for JS.

Collapse
 
aminnairi profile image
Amin • Edited

Thanks for taking the time to write such an interesting comment (and a question I guess)!

Elm is based on the functional reactive programming style, which is a style of programming that is less known by beginners. As the major market share are distributed across frameworks built on imperative/object-oriented programming style, it means that using Elm is an added effort, other than the one made to learn a new framework (Elm is both a completely new language and a framework).

And in my opinion, people will want to have something easy, rather than something reliable. And I think that this is a shame because the effort made to shift from OOP to FP is really worth the effort, but there are not that many people advocating for that and this is also to me another reason for the unpopularity of Elm and others functional languages like Haskell.

And last, as you perfectly said, the ecosystem. But this is not true anymore because you can do things that you were used to do in others framework like using a router, modeling 3D programs using WebGL, having interactive applications communicating in real time etc...

I suggest, if you did not already, you watch this excelent talk from Richard Feldman about why functional programming isn't the norm today given all of the advantage linked to the functional programming.

Collapse
 
leob profile image
leob • Edited

Well actually I see it as an advantage that Elm is FP ... :-)

I've played a bit with Haskell in the past and while I found it pretty abstract and academic it intrigued me too. Then recently I started working with Rust, and it reminded me a lot of Haskell (even though Rust is not exclusively FP).

And even the Javascript world is gradually moving towards FP ... filter/map/reduce, React with pure functional components and Hooks, RxJs ... the move to FP is there.

Interestingly I recently came across a very interesting article (codeburst.io/faster-web-c6823830ce72) arguing that frameworks like React (and Vue, and so on) are slow (which I didn't realize because we're always being told that 'virtual DOM is fast'), and this article then went on to mention a technology called Imba (imba.io/).

I never heard of it before but right away it reminded me of Elm, and of Svelte. Both Imba and Svelte are compilers, which allows them to generate very fast and optimized code to manipulate the DOM. Now, Svelte is just Javascript but Imba uses its own language, which made me think of Elm :-)

So now I wonder, does the Elm compiler also manage to pull off generating crazy fast DOM manipulation code, like Svelte and Imba do (meaning, way faster than React or Vue) ?

Finally, have you ever heard of (or looked at) ReasonML ? reasonml.github.io

It's based on OCaml and made by the same group within Facebook who made React. Reminds me a lot of Elm in various ways: compiled, strong typing, FP, compiles to Javascript etcetera. I think it operates in the same space as Elm.

Thread Thread
 
aminnairi profile image
Amin

I'm not sure if Elm does what Svelte and Imba does on the optimization side for fast VirtualDOM rendering but I have read an article stating that the unoptimized (unkeyed) virtual DOM used in Elm is way faster than those used in React or Vue. Now this was a rather old article that was benchmarking using Elm 0.17 (we are now in Elm 0.19.1). So I don't know if this is still the case but I guess FP helps a lot in the optimization process.

I have been intrigued by ReasonML for a while. I love the project. I am not the best fan of the syntax but you can virtually do anything with the FFI capabilities of the language and with time (using Haskell & Elm) the syntax barrier begins to fade away.

The article you linked was very interesting! And I didn't know about Imba. I'll sure be playing with it. Looks promising too!

Thread Thread
 
leob profile image
leob • Edited

The interesting thing about the article for me was not so much Imba but the huge performance differences. Those differences do not just impact the end user of the app, but also the developer, because development becomes much more simple.

It's so fast that there's no more need for clever tricks or complicated techniques to optimize speed of your app - even if you just use plain and simple JS arrays and objects and mutate things willy-nilly it's still fast enough. That was really an eye opener for me.

What I notice about ReasonML though is that you aren't hearing a lot about it, it hasn't been able to break out of its tiny niche. It's not become mainstream, far from it.

The problem for all of these JS alternatives (Elm, Imba, ReasonML) is the small community and ecosystem compared to the established incumbent, Javascript.

Collapse
 
csaltos profile image
Carlos Saltos

If you compared with the global web development Elm has rather a small piece but Elm solves very hard problems for big websites (like the one at my company) and the community is rather big and vibrant, after all, the best professional tools are not for everyone and every case ... vive la liberté de choisir 👍😎

Collapse
 
teamroggers profile image
Rogier Nitschelm

I just started learning ELM two days ago, and I must say I love the syntax, the simplicity, the compiler messages, the newbie-friendly docs. My next side-project will definitely use ELM.