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

Praise for An Elm Primer for React Developers›

  • Praise for An Elm Primer for React Developers
  • Foreword
  • Introduction
  • Acknowledgements

Part I: From React to Elm: Getting Started›

  • Chapter 1: Elm: Constraints That Free You
    • React Recommends, Elm Requires and Enables
    • When Constraints Give Freedom
    • Debugging Gets Boring (In a Good Way)
    • Refactoring with Confidence
    • Architecture You Don’t Have to Enforce
    • 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
  • Chapter 17: Performance in Practice
    • React.memo, useCallback, and Reconciliation Pain Points
    • How Elm’s Virtual DOM Makes Optimization Automatic
    • Performance by Default vs Performance by Configuration
    • Bundle Sizes and Compilation Targets
    • Lazy Loading and Code Splitting
    • When and How to Optimize Elm Applications
    • elm-optimize-level-2
    • Wrapping Up
  • About the Author
  • Appendix A: Quick Reference Guide
    • React to Elm Concept Mapping
    • Common Patterns Cheat Sheet
    • Troubleshooting Guide for React Developers
  • 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: Elm’s Approach to Effects
    • Where to Go From Here
  • Appendix C: Further Reading and Resources
    • Code Examples from This Book
    • Essential Elm Learning Resources
    • A Reference Elm SPA: dwayne/elm-conduit
    • Community and Getting Help
    • Advanced Topics Beyond This Book
An Elm Primer for React Developers/Overview

An Elm Primer for React Developers

Course overview

The fastest way for React developers to master functional programming. Elm guarantees zero runtime exceptions and teaches FP concepts that transfer everywhere.

4 parts
·
25 chapters
Begin reading
Download
Part 1

Praise for An Elm Primer for React Developers4 chapters

Begin part ›
  1. Praise for An Elm Primer for React Developers

  2. Foreword

  3. Introduction

  4. Acknowledgements

Part 2

Part I: From React to Elm: Getting Started4 chapters

Begin part ›
  1. Chapter 1: Elm: Constraints That Free You

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

  3. Chapter 3: Your First Elm App

  4. Chapter 4: Starting Small: Elm in Your React Codebase

Part 3

Part II: The Outside World: Randomness, APIs, and JavaScript4 chapters

Begin part ›
  1. Chapter 5: Commands and Randomness

  2. Chapter 6: HTTP and Remote Data

  3. Chapter 7: JSON Decoders and Type Safety

  4. Chapter 8: JavaScript Interop: Ports and Flags

Part 4

Part III: Building Real Applications13 chapters

Begin part ›
  1. Chapter 9: Organizing Files and Modules

  2. Chapter 10: Modules Around Data Structures

  3. Chapter 11: Forms and Validation

  4. Chapter 12: Building a Feedback Wizard

  5. Chapter 13: Routing and Navigation

  6. Chapter 14: State Patterns at Scale

  7. Chapter 15: Testing Strategies

  8. Chapter 16: The Elm Ecosystem for React Developers

  9. Chapter 17: Performance in Practice

  10. About the Author

  11. Appendix A: Quick Reference Guide

  12. Appendix B: The Scary Words You Already Understand

  13. Appendix C: Further Reading and Resources