Bootstrapping an Elm Project

Kevin Gathuku — Wed, 29 May 2019 08:27:44 +0000

Elm is a delightful language for building reliable web applications. It’s a language that gets compiled to JavaScript and so is used to build applications that run in a web browser. In this post, we’re going to explore different ways of starting an Elm project, starting with the simplest and moving on to setups with more advanced features such as hot-reload in development.

Let’s get started!

Prerequisites

Before we get started, please make sure to Install Elm

To confirm if you have Elm installed, you can try running the interactive repl using the elm repl command. If you get a prompt such as the one shown in this image, you're good to go 👍

Elm CLI

This is the officially supported way of creating a new Elm project.

Create a new directory where your project will live

mkdir my-awesome-elm-project
Navigate to the newly created directory

cd my-awesome-elm-project
Run elm init inside this directory and you should get a prompt like the one below:

Press the Enter key and it should create an elm.json file in the current directory. A src directory will also be created.

It is a good idea to read through the linked resource that talks more about starting new Elm projects

Let's start by creating a new Main.elm file in the src directory. Once we've created the file, let's add some Elm code that should show us the classic "Hello World!" message once we run it.

module Main exposing (main)

import Browser
import Html exposing (h1, text)

main =
  h1 [] [ text "Hello World!" ]

To run the code, let's run elm reactor in our directory and it should start a new local server at http://localhost:8000. elm reactor is the simplest way to get started running Elm code.
Once you navigate to http://localhost:8000, you should see an interface like the following.

Click on the src link, then Main.elm and you should be greeted by our "Hello World!" message.

And that's it! We've successfully created a project the elm init command and run it using elm reactor.

Pros:

Easy to get started
No external dependencies apart from elm itself

Cons:

Manual reloading once we make changes

Elm Make

This is an extension of elm reactor and includes the ability to compile our Elm code to static HTML.

Using the same project from our previous section, we can compile the project using the command:

elm make src/Main.elm

Once we run this command, an index.html file will be generated in the current working directory, and if you open it in a web browser, you should see the same "Hello World" message.

I don't have lots of experience with elm make so that's as far as I'll go with it.

Parcel

Parcel is a "Blazing fast, zero configuration web application bundler" and is my personal favourite to get started with an Elm application quickly. It handles compiling your Elm code to JavaScript and is super easy to get started with.

You can create an Elm application compiled by Parcel in a few simple steps:

Install Parcel

yarn global add parcel-bundler or npm install -g parcel-bundler
Follow the instructions in the Elm section of the Parcel website, which involves:
- creating an index.html file with the following contents:


<html>
  <body>
    <main></main>
    <script src="./index.js"></script>
  </body>
</html>

creating an index.js file with the following contents:

import { Elm } from './Main.elm'

Elm.Main.init({
  node: document.querySelector('main')
})

creating a Main.elm file with the following contents:

module Main exposing (main)

import Browser
import Html exposing (h1, text)

main =
  h1 [] [ text "Hello, from Parcel!" ]

To run the application, run the command: parcel index.html

I love this setup so much that I've created my own starter project based on Parcel. Feel free to check it out on GitHub

Pros:

Easy to get started with
No manual configuration needed 💪
Hot reload included out of the box
Easy to get started with JavaScript Interop

Cons:

🤷‍♀️

Notable Mentions:

create-elm-app - Based on create-react-app and creates a zero-config application based on Webpack
elm-live - A flexible dev server for Elm. Live reload included.

This is not meant to be a comprehensive list, and any suggestions/additions are welcome in the comments section below.

I hope these options are useful for you when starting out your next Elm project 🚀

Cleaner Clojure Functions with the :pre Special Form

Kevin Gathuku — Thu, 03 Jan 2019 13:00:14 +0000

In the course of programming, it's fairly common to face a scenario where you want to ensure that a function's arguments fulfil some condition(s), and if not, to throw an error. In this post, we're going to see how Clojure provides a handy special form that greatly simplifies this task.

One such scenario that I've come across recently is trying to come up with a function that would compute the 3x + 1 problem (Collatz conjecture). The problem is as follows:

Take any positive integer n.

If n is even, divide n by 2 to get n / 2.

If n is odd, multiply n by 3 and add 1 to get 3n + 1.

Repeat the process indefinitely.

The conjecture states that no matter which number you start with, you will always reach 1 eventually.

The task at hand was to write a function that takes a number as an argument and returns the number of steps it takes for the number to eventually be 1.

You'll also notice that the first condition for the number to be passed in is that it has to be a positive integer. Therefore, given any value less than 1, the function should throw an error.

A typical solution in Clojure would look as follows:

While this definitely works, I found out that Clojure provides a much more elegant way to accomplish this, with the help of the :pre special form

This form enables specifying conditions about the arguments that should be met before the rest of the function body is evaluated. If any of the conditions is not met, an assertion error is thrown.

This is how we could rewrite the function making use of the :pre condition:

In this case, if the function is called with 0 or a negative number, an assertion error is automatically thrown.

I think you would agree that the second version looks much nicer 🙂

DEV Community: Kevin Gathuku

Bootstrapping an Elm Project

Prerequisites

Elm CLI

Pros:

Cons:

Elm Make

Parcel

Pros:

Cons:

Notable Mentions:

Cleaner Clojure Functions with the :pre Special Form