Initial commit: Elm tutorial for JavaScript developers
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
This commit is contained in:
122
README.md
Normal file
122
README.md
Normal file
@@ -0,0 +1,122 @@
|
||||
# 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)!
|
||||
Reference in New Issue
Block a user