An Elm Primer for React Developers

Introduction

About the Author

1. Part I: From React to Elm: Getting Started

Chapter 1: Elm: Delightful Constraints

1. React Recommends, Elm Requires and Enables
2. When Constraints Give Freedom
3. The Debugging Clarity
4. Refactoring with Confidence
5. The Architectural Discipline
6. What This Costs You
7. What Elm Teaches You

Chapter 2: The Elm Architecture – A Recipe for Reliable Apps

1. The Recipe: Four Simple Ingredients
2. Ingredient 1: Model - Your State Shape
3. Ingredient 2: Msg - Things That Can Happen
4. Ingredient 3: update - How State Changes
5. Ingredient 4: view - Rendering Your State
6. Putting It All Together: Counter with Undo
7. The Elm Runtime Loop
8. What React Developers Already Know
9. What Makes TEA Different
10. The Price of Explicitness
11. What You Just Learned (The FP Hiding in Plain Sight)
12. What’s Next

Chapter 3: Your First Elm App

1. Installing Elm
2. Editor Setup
3. Setting Up Your Project
4. The obligatory “Hello, world!”
5. Two Flavors of main
6. The LGTM Generator: Building It Step by Step
7. Building Your First Elm App
8. Compiler-Driven Development in Action
9. What You Just Built

Chapter 4: Starting Small: Elm in Your React Codebase

1. Widget-by-widget Incremental Adoption Strategy
2. Integrating One Elm Component into React
3. Build Systems and Toolchain Integration
4. Scaling This Approach
5. Part II: The Outside World: Randomness, APIs, and JavaScript

Chapter 5: Commands and Randomness

1. Upgrading from Browser.sandbox to Browser.element
2. The Cmd Type and How It Works
3. Adding Randomness to the LGTM Generator
4. What You Just Learned

Chapter 6: HTTP and Remote Data

1. From Random.generate to Http.get
2. Setting Up the Server
3. Installing elm/http
4. The Shape of HTTP in Elm
5. Success | Loading | Error
6. Creating the HTTP Request
7. Updating init
8. Refactoring the GotPhrase Message
9. Handling Results in update
10. Rendering Different States
11. The Complete Code
12. Commands Are Just Commands
13. What You Just Learned

Chapter 7: JSON Decoders and Type Safety

1. Why JSON Needs Decoding in Elm
2. Supporting JSON in Our LGTM Generator
3. What About Sending JSON?
4. What You Just Learned
5. Further Reading

Chapter 8: JavaScript Interop: Ports and Flags

1. JavaScript as Infrastructure
2. Upgrading Our Build for Manual Bootstrapping
3. Flags as Program Input
4. Ports for Communicating with JavaScript
5. Adding Clipboard Support to the LGTM Generator
6. What You Just Learned
7. Part III: Building Real Applications

Chapter 9: Organizing Files and Modules

1. Moving Beyond the Single-File Approach?
2. Elm is Different
3. Let’s Build an Advent Calendar App
4. Basic Advent Calendar Spec
5. Starting Simple: The Mock Date Version
6. Getting the Real Date: Enter Tasks
7. When to Split: Modules for Data Structures
8. The Freedom of Safe Refactoring
9. What We’ve Learned

Chapter 10: Modules Around Data Structures

1. Opaque Types: Hiding What Shouldn’t Be Seen
2. Going Further: Phantom Types
3. The Complete Calendar Module
4. Using the Calendar Module
5. What We Gained
6. The Broader Pattern: State Machines in Types
7. When to Use Each Pattern
8. The Freedom to Reorganize
9. What We’ve Learned

Chapter 11: Forms and Validation

1. A Simple Contact Form
2. When Validation Enters the Picture
3. Finding the Right Abstraction
4. What We Learned

Chapter 12: Building a Feedback Wizard

1. The Problem: A Feedback Widget
2. Modeling the Top-Level State
3. The OutMsg Pattern
4. Why OutMsg Works
5. Native Dialogs and Ports
6. The Complete Main Module
7. The Api Module
8. Patterns Worth Noting
9. What We Learned

Chapter 13: Routing and Navigation

1. From Element to Application
2. Modeling Routes as Types
3. Parsing URLs
4. Building URLs
5. The Application Structure
6. Handling Navigation
7. A Page Module
8. Comparing to React Router
9. The Complete Example
10. Wrapping up

Chapter 14: State Patterns at Scale

1. From Booleans to State Machines
2. Reversible State Machines
3. A Second State Machine: Form Lifecycle
4. From Type to Module
5. Composing Models
6. Shared State
7. The Underlying Principle
8. Wrapping Up

Chapter 15: Testing Strategies

1. From Jest to elm-test
2. TDD Where It Shines
3. Fuzz Testing: Let the Framework Think
4. What You Don’t Need to Test
5. The Complete Code
6. Wrapping Up

Chapter 16: The Elm Ecosystem for React Developers

1. The Part Where npm Lies to You (And Elm Doesn’t)
2. Popular Packages and Community Patterns
3. When the Ecosystem Doesn’t Have What You Need
4. Wrapping Up
5. Part IV

What’s Coming

Appendix B: The Scary Words You Already Understand

1. Why Elm Avoids This Terminology
2. Functors: Things You Can Map Over
3. Applicatives: When You Have Multiple Wrapped Values
4. Monads: Chaining Operations That Might Fail
5. The Elm to Haskell Rosetta Stone
6. Commands and Tasks: The IO Monad in Disguise
7. Where to Go From Here