Mark Gerrard
7d7986f3ab
This tutorial includes: - 7 progressive lessons covering Elm fundamentals - Exercises with starter code - Solutions for exercises - Final project: Task Manager app with localStorage persistence Topics covered: - Basic syntax and types - Functions and functional programming concepts - The Elm Architecture (Model-View-Update) - Lists and Maybe types - HTTP requests and JSON decoding - Ports for JavaScript interop
123 lines
3.3 KiB
Markdown
123 lines
3.3 KiB
Markdown
# 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):**
|
|
```bash
|
|
brew install elm
|
|
```
|
|
|
|
**Linux/macOS (npm):**
|
|
```bash
|
|
npm install -g elm
|
|
```
|
|
|
|
**Windows:**
|
|
Download the installer from [elm-lang.org](https://guide.elm-lang.org/install/elm.html)
|
|
|
|
### 2. Verify Installation
|
|
|
|
```bash
|
|
elm --version
|
|
# Should output something like: 0.19.1
|
|
```
|
|
|
|
### 3. Install Helpful Tools
|
|
|
|
```bash
|
|
# 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](lessons/01-introduction.md) | REPL, Hello World, elm.json |
|
|
| 2 | [Basic Syntax & Types](lessons/02-basics.md) | Values, Types, Type Annotations |
|
|
| 3 | [Functions](lessons/03-functions.md) | Pure Functions, Currying, Pipes |
|
|
| 4 | [The Elm Architecture](lessons/04-tea.md) | Model, View, Update |
|
|
| 5 | [Lists & Maybe](lessons/05-lists-maybe.md) | Collections, Null Safety |
|
|
| 6 | [HTTP & JSON](lessons/06-http-json.md) | Commands, Decoders |
|
|
| 7 | [Final Project](lessons/07-final-project.md) | 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
|
|
// JavaScript
|
|
const name = "Alice";
|
|
const add = (a, b) => a + b;
|
|
const numbers = [1, 2, 3];
|
|
const doubled = numbers.map(n => n * 2);
|
|
```
|
|
|
|
```elm
|
|
-- Elm
|
|
name = "Alice"
|
|
add a b = a + b
|
|
numbers = [1, 2, 3]
|
|
doubled = List.map (\n -> n * 2) numbers
|
|
```
|
|
|
|
## Getting Help
|
|
|
|
- [Official Elm Guide](https://guide.elm-lang.org/)
|
|
- [Elm Slack](https://elmlang.herokuapp.com/)
|
|
- [Elm Discourse](https://discourse.elm-lang.org/)
|
|
- [Elm Packages](https://package.elm-lang.org/)
|
|
|
|
---
|
|
|
|
Ready? Let's start with [Lesson 1: Introduction](lessons/01-introduction.md)!
|