An Elm Primer for React Developers

An Elm Primer for React Developers

Christian Ekrem
This is a sample of the book's content.Buy on Leanpub
Table of Contents

Introduction›

  • Introduction
  • About the Author

Part I: From React to Elm: Getting Started›

  • Chapter 1: Elm: Delightful Constraints
    • React Recommends, Elm Requires and Enables
    • When Constraints Give Freedom
    • The Debugging Clarity
    • Refactoring with Confidence
    • The Architectural Discipline
    • What This Costs You
    • What Elm Teaches You
  • Chapter 2: The Elm Architecture – A Recipe for Reliable Apps
    • The Recipe: Four Simple Ingredients
    • Ingredient 1: Model - Your State Shape
    • Ingredient 2: Msg - Things That Can Happen
    • Ingredient 3: update - How State Changes
    • Ingredient 4: view - Rendering Your State
    • Putting It All Together: Counter with Undo
    • The Elm Runtime Loop
    • What React Developers Already Know
    • What Makes TEA Different
    • The Price of Explicitness
    • What You Just Learned (The FP Hiding in Plain Sight)
    • What’s Next
  • Chapter 3: Your First Elm App
    • Installing Elm
    • Editor Setup
    • Setting Up Your Project
    • The obligatory “Hello, world!”
    • Two Flavors of main
    • The LGTM Generator: Building It Step by Step
    • Building Your First Elm App
    • Compiler-Driven Development in Action
    • What You Just Built
  • Chapter 4: Starting Small: Elm in Your React Codebase
    • Widget-by-widget Incremental Adoption Strategy
    • Integrating One Elm Component into React
    • Build Systems and Toolchain Integration
    • Scaling This Approach

Part II: The Outside World: Randomness, APIs, and JavaScript›

  • Chapter 5: Commands and Randomness
    • Upgrading from Browser.sandbox to Browser.element
    • The Cmd Type and How It Works
    • Adding Randomness to the LGTM Generator
    • What You Just Learned
  • Chapter 6: HTTP and Remote Data
    • From Random.generate to Http.get
    • Setting Up the Server
    • Installing elm/http
    • The Shape of HTTP in Elm
    • Success | Loading | Error
    • Creating the HTTP Request
    • Updating init
    • Refactoring the GotPhrase Message
    • Handling Results in update
    • Rendering Different States
    • The Complete Code
    • Commands Are Just Commands
    • What You Just Learned
  • Chapter 7: JSON Decoders and Type Safety
    • Why JSON Needs Decoding in Elm
    • Supporting JSON in Our LGTM Generator
    • What About Sending JSON?
    • What You Just Learned
    • Further Reading
  • Chapter 8: JavaScript Interop: Ports and Flags
    • JavaScript as Infrastructure
    • Upgrading Our Build for Manual Bootstrapping
    • Flags as Program Input
    • Ports for Communicating with JavaScript
    • Adding Clipboard Support to the LGTM Generator
    • What You Just Learned

Part III: Building Real Applications›

  • Chapter 9: Organizing Files and Modules
    • Moving Beyond the Single-File Approach?
    • Elm is Different
    • Let’s Build an Advent Calendar App
    • Basic Advent Calendar Spec
    • Starting Simple: The Mock Date Version
    • Getting the Real Date: Enter Tasks
    • When to Split: Modules for Data Structures
    • The Freedom of Safe Refactoring
    • What We’ve Learned
  • Chapter 10: Modules Around Data Structures
    • Opaque Types: Hiding What Shouldn’t Be Seen
    • Going Further: Phantom Types
    • The Complete Calendar Module
    • Using the Calendar Module
    • What We Gained
    • The Broader Pattern: State Machines in Types
    • When to Use Each Pattern
    • The Freedom to Reorganize
    • What We’ve Learned
  • Chapter 11: Forms and Validation
    • A Simple Contact Form
    • When Validation Enters the Picture
    • Finding the Right Abstraction
    • What We Learned
  • Chapter 12: Building a Feedback Wizard
    • The Problem: A Feedback Widget
    • Modeling the Top-Level State
    • The OutMsg Pattern
    • Why OutMsg Works
    • Native Dialogs and Ports
    • The Complete Main Module
    • The Api Module
    • Patterns Worth Noting
    • What We Learned
  • Chapter 13: Routing and Navigation
    • From Element to Application
    • Modeling Routes as Types
    • Parsing URLs
    • Building URLs
    • The Application Structure
    • Handling Navigation
    • A Page Module
    • Comparing to React Router
    • The Complete Example
    • Wrapping up
  • Chapter 14: State Patterns at Scale
    • From Booleans to State Machines
    • Reversible State Machines
    • A Second State Machine: Form Lifecycle
    • From Type to Module
    • Composing Models
    • Shared State
    • The Underlying Principle
    • Wrapping Up
  • Chapter 15: Testing Strategies
    • From Jest to elm-test
    • TDD Where It Shines
    • Fuzz Testing: Let the Framework Think
    • What You Don’t Need to Test
    • The Complete Code
    • Wrapping Up
  • Chapter 16: The Elm Ecosystem for React Developers
    • The Part Where npm Lies to You (And Elm Doesn’t)
    • Popular Packages and Community Patterns
    • When the Ecosystem Doesn’t Have What You Need
    • Wrapping Up

Part IV›

  • What’s Coming
  • Appendix B: The Scary Words You Already Understand
    • Why Elm Avoids This Terminology
    • Functors: Things You Can Map Over
    • Applicatives: When You Have Multiple Wrapped Values
    • Monads: Chaining Operations That Might Fail
    • The Elm to Haskell Rosetta Stone
    • Commands and Tasks: The IO Monad in Disguise
    • Where to Go From Here
An Elm Primer for React Developers/