Elm Tutorial for JavaScript Developers

Welcome! This tutorial is designed for developers with JavaScript experience who want to learn Elm. We'll leverage your existing knowledge while introducing functional programming concepts gradually.

What is Elm?

Elm is a functional programming language that compiles to JavaScript. It's known for:

• No runtime exceptions - The compiler catches errors before your code runs
• Friendly error messages - Best-in-class compiler messages that help you fix issues
• Enforced semantic versioning - Package updates never break your code unexpectedly
• Small bundle sizes - Elm produces highly optimized JavaScript

Why Learn Elm?

As a JavaScript developer, Elm will teach you:

1. Pure functional programming patterns
2. Strong static typing (that actually helps rather than hinders)
3. Immutable data structures
4. A clean architecture pattern (The Elm Architecture inspired Redux!)

Prerequisites

• Basic JavaScript knowledge
• Familiarity with HTML
• A code editor (VS Code recommended with the Elm extension)

Setup

1. Install Elm

macOS (Homebrew):

brew install elm

Linux/macOS (npm):

npm install -g elm

Windows: Download the installer from elm-lang.org

2. Verify Installation

elm --version
# Should output something like: 0.19.1

3. Install Helpful Tools

# Elm formatter (like Prettier for Elm)
npm install -g elm-format

# Elm test runner
npm install -g elm-test

# Development server with hot reloading
npm install -g elm-live

4. Editor Setup

For VS Code, install the "Elm" extension by Elm tooling. This gives you:

• Syntax highlighting
• Auto-formatting on save
• Inline error messages
• Go to definition

Tutorial Structure

Lesson	Topic	Key Concepts
1	Introduction & First Program	REPL, Hello World, elm.json
2	Basic Syntax & Types	Values, Types, Type Annotations
3	Functions	Pure Functions, Currying, Pipes
4	The Elm Architecture	Model, View, Update
5	Lists & Maybe	Collections, Null Safety
6	HTTP & JSON	Commands, Decoders
7	Final Project	Building a Complete App

How to Use This Tutorial

1. Read each lesson in order - concepts build on each other
2. Type the code yourself - don't just copy-paste
3. Complete the exercises - they reinforce learning
4. Experiment - break things, see what errors you get

Quick Reference: JavaScript to Elm

Here's a preview of how familiar JavaScript concepts translate to Elm:

// JavaScript
const name = "Alice";
const add = (a, b) => a + b;
const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);

-- Elm
name = "Alice"
add a b = a + b
numbers = [1, 2, 3]
doubled = List.map (\n -> n * 2) numbers

Getting Help

• Official Elm Guide
• Elm Slack
• Elm Discourse
• Elm Packages

---

Ready? Let's start with Lesson 1: Introduction!