[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":-5,"_8":9,"_10":11},"actionData","errors","root",{"_799":-5,"_806":-5,"_807":808,"_809":810,"_811":812,"_813":814,"_815":816,"_817":818,"_819":550,"_820":821,"_822":823,"_824":825},"routes/_store+/_readers+/read_/route","routes/_store+/_readers+/read_.$slug/route",{"_16":544,"_545":546,"_547":548,"_549":550,"_551":-7},"routes/_store+/_readers+/read_.$slug.$chapterId/route",{"_12":13,"_14":15,"_16":17,"_18":19,"_20":21},"title","An Elm Primer for React Developers","content","

Acknowledgements

https://leanpub.com/elm-for-react-devs","book",{"_33":34,"_12":13,"_35":36,"_37":38,"_39":40,"_41":42,"_43":15},"nextChapter",{"_22":23,"_12":24,"_25":-5,"_26":27,"_28":29,"_30":-5,"_31":-5,"_32":-5},"sections",[],"level",2,"Chapter 1: Elm: Constraints That Free You","description","path","#why-elm","fileCount",1,"quizType","sectionNum","youtubeId","previewContent","

\n \n
- \nPraise for An Elm Primer for React Developers\n
- \nForeword\n
- \nIntroduction\n
- \nAcknowledgements\n
\n
\nPart I: From React to Elm: Getting Started\n
- \nChapter 1: Elm: Constraints That Free You\n
  - \nReact Recommends, Elm Requires and Enables\n
  - \nWhen Constraints Give Freedom\n
  - \nDebugging Gets Boring (In a Good Way)\n
  - \nRefactoring with Confidence\n
  - \nArchitecture You Don’t Have to Enforce\n
  - \nWhat This Costs You\n
  - \nWhat Elm Teaches You\n
  \n
- \nChapter 2: The Elm Architecture – A Recipe for Reliable Apps\n
  - \nThe Recipe: Four Simple Ingredients\n
  - \nIngredient 1: Model - Your State Shape\n
  - \nIngredient 2: Msg - Things That Can Happen\n
  - \nIngredient 3: update - How State Changes\n
  - \nIngredient 4: view - Rendering Your State\n
  - \nPutting It All Together: Counter with Undo\n
  - \nThe Elm Runtime Loop\n
  - \nWhat React Developers Already Know\n
  - \nWhat Makes TEA Different\n
  - \nThe Price of Explicitness\n
  - \nWhat You Just Learned (The FP Hiding in Plain Sight)\n
  - \nWhat’s Next\n
  \n
- \nChapter 3: Your First Elm App\n
  - \nInstalling Elm\n
  - \nEditor Setup\n
  - \nSetting Up Your Project\n
  - \nThe obligatory “Hello, world!”\n
  - \nTwo Flavors of main\n
  - \nThe LGTM Generator: Building It Step by Step\n
  - \nBuilding Your First Elm App\n
  - \nCompiler-Driven Development in Action\n
  - \nWhat You Just Built\n
  \n
- \nChapter 4: Starting Small: Elm in Your React Codebase\n
  - \nWidget-by-widget Incremental Adoption Strategy\n
  - \nIntegrating One Elm Component into React\n
  - \nBuild Systems and Toolchain Integration\n
  - \nScaling This Approach\n
  \n
\n
\nPart II: The Outside World: Randomness, APIs, and JavaScript\n
- \nChapter 5: Commands and Randomness\n
  - \nUpgrading from Browser.sandbox to Browser.element\n
  - \nThe Cmd Type and How It Works\n
  - \nAdding Randomness to the LGTM Generator\n
  - \nWhat You Just Learned\n
  \n
- \nChapter 6: HTTP and Remote Data\n
  - \nFrom Random.generate to Http.get\n
  - \nSetting Up the Server\n
  - \nInstalling elm/http\n
  - \nThe Shape of HTTP in Elm\n
  - \nSuccess | Loading | Error\n
  - \nCreating the HTTP Request\n
  - \nUpdating init\n
  - \nRefactoring the GotPhrase Message\n
  - \nHandling Results in update\n
  - \nRendering Different States\n
  - \nThe Complete Code\n
  - \nCommands Are Just Commands\n
  - \nWhat You Just Learned\n
  \n
- \nChapter 7: JSON Decoders and Type Safety\n
  - \nWhy JSON Needs Decoding in Elm\n
  - \nSupporting JSON in Our LGTM Generator\n
  - \nWhat About Sending JSON?\n
  - \nWhat You Just Learned\n
  - \nFurther Reading\n
  \n
- \nChapter 8: JavaScript Interop: Ports and Flags\n
  - \nJavaScript as Infrastructure\n
  - \nUpgrading Our Build for Manual Bootstrapping\n
  - \nFlags as Program Input\n
  - \nPorts for Communicating with JavaScript\n
  - \nAdding Clipboard Support to the LGTM Generator\n
  - \nWhat You Just Learned\n
  \n
\n
\nPart III: Building Real Applications\n
- \nChapter 9: Organizing Files and Modules\n
  - \nMoving Beyond the Single-File Approach?\n
  - \nElm is Different\n
  - \nLet’s Build an Advent Calendar App\n
  - \nBasic Advent Calendar Spec\n
  - \nStarting Simple: The Mock Date Version\n
  - \nGetting the Real Date: Enter Tasks\n
  - \nWhen to Split: Modules for Data Structures\n
  - \nThe Freedom of Safe Refactoring\n
  - \nWhat We’ve Learned\n
  \n
- \nChapter 10: Modules Around Data Structures\n
  - \nOpaque Types: Hiding What Shouldn’t Be Seen\n
  - \nGoing Further: Phantom Types\n
  - \nThe Complete Calendar Module\n
  - \nUsing the Calendar Module\n
  - \nWhat We Gained\n
  - \nThe Broader Pattern: State Machines in Types\n
  - \nWhen to Use Each Pattern\n
  - \nThe Freedom to Reorganize\n
  - \nWhat We’ve Learned\n
  \n
- \nChapter 11: Forms and Validation\n
  - \nA Simple Contact Form\n
  - \nWhen Validation Enters the Picture\n
  - \nFinding the Right Abstraction\n
  - \nWhat We Learned\n
  \n
- \nChapter 12: Building a Feedback Wizard\n
  - \nThe Problem: A Feedback Widget\n
  - \nModeling the Top-Level State\n
  - \nThe OutMsg Pattern\n
  - \nWhy OutMsg Works\n
  - \nNative Dialogs and Ports\n
  - \nThe Complete Main Module\n
  - \nThe Api Module\n
  - \nPatterns Worth Noting\n
  - \nWhat We Learned\n
  \n
- \nChapter 13: Routing and Navigation\n
  - \nFrom Element to Application\n
  - \nModeling Routes as Types\n
  - \nParsing URLs\n
  - \nBuilding URLs\n
  - \nThe Application Structure\n
  - \nHandling Navigation\n
  - \nA Page Module\n
  - \nComparing to React Router\n
  - \nThe Complete Example\n
  - \nWrapping up\n
  \n
- \nChapter 14: State Patterns at Scale\n
  - \nFrom Booleans to State Machines\n
  - \nReversible State Machines\n
  - \nA Second State Machine: Form Lifecycle\n
  - \nFrom Type to Module\n
  - \nComposing Models\n
  - \nShared State\n
  - \nThe Underlying Principle\n
  - \nWrapping Up\n
  \n
- \nChapter 15: Testing Strategies\n
  - \nFrom Jest to elm-test\n
  - \nTDD Where It Shines\n
  - \nFuzz Testing: Let the Framework Think\n
  - \nWhat You Don’t Need to Test\n
  - \nThe Complete Code\n
  - \nWrapping Up\n
  \n
- \nChapter 16: The Elm Ecosystem for React Developers\n
  - \nThe Part Where npm Lies to You (And Elm Doesn’t)\n
  - \nPopular Packages and Community Patterns\n
  - \nWhen the Ecosystem Doesn’t Have What You Need\n
  - \nWrapping Up\n
  \n
- \nChapter 17: Performance in Practice\n
  - \nReact.memo, useCallback, and Reconciliation Pain Points\n
  - \nHow Elm’s Virtual DOM Makes Optimization Automatic\n
  - \nPerformance by Default vs Performance by Configuration\n
  - \nBundle Sizes and Compilation Targets\n
  - \nLazy Loading and Code Splitting\n
  - \nWhen and How to Optimize Elm Applications\n
  - \nelm-optimize-level-2\n
  - \nWrapping Up\n
  \n
- \nAbout the Author\n
- \nAppendix A: Quick Reference Guide\n
  - \nReact to Elm Concept Mapping\n
  - \nCommon Patterns Cheat Sheet\n
  - \nTroubleshooting Guide for React Developers\n
  \n
- \nAppendix B: The Scary Words You Already Understand\n
  - \nWhy Elm Avoids This Terminology\n
  - \nFunctors: Things You Can Map Over\n
  - \nApplicatives: When You Have Multiple Wrapped Values\n
  - \nMonads: Chaining Operations That Might Fail\n
  - \nThe Elm to Haskell Rosetta Stone\n
  - \nCommands and Tasks: Elm’s Approach to Effects\n
  - \nWhere to Go From Here\n
  \n
- \nAppendix C: Further Reading and Resources\n
  - \nCode Examples from This Book\n
  - \nEssential Elm Learning Resources\n
  - \nA Reference Elm SPA: dwayne/elm-conduit\n
  - \nCommunity and Getting Help\n
  - \nAdvanced Topics Beyond This Book\n
  \n
\n

Praise for An Elm Primer for React Developers

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Foreword

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Introduction

If you’ve spent any time at all using React, chances are you’ve felt both the library’s power and its complexity. Hooks are flexible, TypeScript catches many errors. But runtime surprises still slip through. useEffect dependencies are easy to mess up, performance bugs eventually demand strategic (and specific!) React.memo and useCallback usage, and what started out harmlessly enough easily gets out of hand. I don’t think these are signs you’re doing React wrong; they’re the natural trade-offs of React’s flexibility.

Some of my most-read posts are the deep-dive React articles (especially on React.memo and reconciliation). A few are used in React courses, and some have even been translated to Korean(!). This popularity reflects a truth: once you step beyond the basics, React’s complexity increases dramatically and its benefits can quickly be overshadowed by significant drawbacks.

Elm takes a different approach. It’s a small functional language with one way to build applications, designed for reliability and clarity. With Elm, you trade flexibility for focus. There’s exactly one architecture (The Elm Architecture, or TEA), exactly one way to represent side effects, and a type system that works hard to prevent runtime errors. The result is a developer experience that feels, at least at first, strangely quiet. You don’t spend hours debugging why your component didn’t re-render or why state mutated unexpectedly. Instead, you spend time modeling your problem domain.

For React developers, the first encounter with Elm can feel almost too simple. There are no hooks to juggle, no contexts to configure, no class vs. function components. Just a Model, an Update function, and a View. And yet, that simplicity scales to codebases with hundreds of thousands of lines.

So why consider Elm if you already know React?

\nTo catch more errors at compile time. Many React/TypeScript errors show up only in the browser. Elm’s compiler is famously strict: if it compiles, it’s very likely to work.\n
\nTo simplify mental overhead. Fewer concepts mean fewer ways to get things wrong. Instead of choosing between a dozen state management solutions, Elm gives you one–TEA.\n
\nBecause it’s actually fun. Elm is genuinely enjoyable to work with. The compiler points you toward fixes, the language encourages clear modeling, and your app tends to just work once it compiles.\n

But there’s a deeper reason to learn Elm, even if you never use it professionally: it’s the fastest way to truly learn functional programming. Real functional programming, the kind that actually changes how you think about code in any language. Haskell has too many language features and quirks, making it notoriously hard to get started with something practical. Elm, by contrast, is remarkably small and focused (the entire language fits in your head). And crucially, you’re working in a domain you already know: building web UIs. Strict FP discipline plus a domain you already know–that’s a surprisingly good combo for actually learning this stuff.

If you’ve ever wanted to grow as a developer by learning functional programming, Elm is in my honest opinion your shortest path. By far! Especially if you’re already familiar with React.

This book is a guided tour for React developers: what Elm looks like, how it compares, and how you might start using Elm–even if only as a single widget inside a React app. By the end, you should have a feel for whether Elm can play a role in your work. Better yet: you will have learned functional programming along the way! Whether you end up actually abandoning React is beside the point (and probably not all up to you).

If React has been your main frontend toolkit, Elm shows you what frontend development feels like with different trade-offs. You get to see what it looks like to write only functional code, and to keep all side effects at the boundary where they belong. It may not be for every project, but once you’ve experienced Elm’s compiler, you’ll wish more of your codebases worked this way.

And learning Elm will be worthwhile whether you end up using it professionally or not. Especially in this day and age, learning something transferable (not just syntax and recipes) that helps us solve real engineering problems is very valuable.

To give you a taste of what I mean, let me show you the kind of guarantees Elm provides. Throughout this book, you’ll see what I call “Elm Hooks” in each chapter–quick previews of how Elm handles that chapter’s topic. React has hooks for state management, but Elm keeps you hooked on the language itself.

Try this one. It’ll demonstrate two of Elm’s main selling points: the friendly compiler and the strict type system (or, good cop / bad cop, if you prefer).

\n\n\n\n

$\"An$

Elm Hook

Given the following Elm code

 1 type Animal = Cat | Dog | Penguin\n 2 \n 3 \n 4 animalToString : Animal -> String\n 5 animalToString animal =\n 6     case animal of\n 7         Dog ->\n 8             \"dog\"\n 9 \n10         Cat ->\n11             \"cat\"\n12 \n13         -- Ooops, forgot about that Penguin!\n

\n\n

The compiler answers the following:

 1 -- MISSING PATTERNS --------------- /path-to-your/src/Main.elm\n 2 This `case` does not have branches for all possibilities:\n 3 \n 4 306|>    case animal of\n 5 307|>        Dog ->\n 6 308|>            \"dog\"\n 7 309|>\n 8 310|>        Cat ->\n 9 311|>            \"cat\"\n10 \n11 Missing possibilities include:\n12 \n13     Penguin\n14 \n15 I would have to crash if I saw one of those. Add branches for them!\n16 \n17 Hint: If you want to write the code for each branch later, use `Debug.todo` as a\n18 placeholder. Read <https://elm-lang.org/0.19.1/missing-patterns> for more\n19 guidance on this workflow.\n

\n\n

Sure beats all those ensureNever helpers¹ you’ve written in TypeScript, huh?

\n\n

In TypeScript, ensureNever (sometimes called assertNever or exhaustive) is a helper function that takes a value of type never and throws if it’s ever called. Developers add it as the default case in switch statements to get a compile error when a new union member is added but not handled. The fact that you need a helper function for this tells you something about the difference between opt-in and built-in exhaustiveness checking.↩︎

Acknowledgements

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Part I: From React to Elm: Getting Started

Chapter 1: Elm: Constraints That Free You

Remember that Penguin example from the introduction? That kind of exhaustive checking runs through everything Elm does. Let me show you what this means for everyday development.

Let’s say you refactor a type. Say you rename a field from status to orderStatus (not an unreasonable thing to do). You update the code, run your tests, and ship it, thinking all is well and good. A week later, though, production errors start rolling in: Cannot read property 'status' of undefined.

You missed one usage. It was buried in an error handler that only runs when a specific edge case triggers. Even with strict: true and no any types anywhere in the project, TypeScript didn’t catch it. Maybe the type was widened through a generic callback, or the old field name was still valid on the structural type. The code compiled without a single red squiggly. Your tests didn’t catch it because they didn’t quite cover that exact scenario. ESLint was silent because the code was syntactically fine, as far as it could tell.

I’m sure you’ve experienced something similar. And this is not about being a bad developer or having a sloppy team. You ran the tests, you checked and double-checked your work, and even had that one colleague who’s extra strict do the code review! But TypeScript’s type safety is opt-in at every layer: you choose to enable strict mode, you choose to avoid type assertions, you choose to handle every case in a switch statement. In a system where soundness requires discipline at every boundary, gaps are a matter of when, not if. You rely on tools to catch what you forget, but these tools have structural limits baked into their design.

React Recommends, Elm Requires and Enables

React and Elm are essentially heading in the same direction, but taking quite different paths to get there.

Look at how React has evolved:

\nHooks moved us toward functional components and immutable state\n
\nRedux brought predictable state management to the mainstream (Bonus point: Redux was actually inspired by Elm!)\n
\nTypeScript went from optional to essential for most serious projects\n
\nServer Components push side effects to the server\n

Each change pushes React toward functional programming principles. Immutability, pure functions, explicit state management–the React community now considers all of these best practices. No React developer worth their salt has side effects in their map or reduce, after all! Right?

I’ve heard more than one React developer say something like: “Good React code in 2026 looks suspiciously like Elm code from 2016.”

React recommends functional programming. Elm requires it. And the constraints that feel limiting at first? They’re what allow you to stop chasing bugs through state mutations and start solving the actual problem.

In React, you can still mutate variables, mix paradigms, create runtime errors. The community discourages it; JavaScript can’t stop you.

In Elm, these things are simply impossible¹. The language won’t compile if you try to mutate data. And there’s no such thing as throwing an exception–the compiler rejects Debug.todo when you build with the --optimize flag, so it can’t sneak into production.

React’s flexibility is a genuine strength. But it comes with a cost: you have to maintain the discipline yourself, and it gets harder as your codebase scales.

When Constraints Give Freedom

This comes up all the time when debugging:

1 const user = { name: \"Ada\", age: 29 };\n2 someFunction(user);\n3 console.log(user.name); // What's the name now?\n

\n\n

The answer is simple, and annoying: you can’t know without reading someFunction. Maybe it mutates the user. Maybe it doesn’t. Maybe it mutates it conditionally. Maybe you never get to the console.log at all because of a runtime exception. You have to trace through the code to be sure. TypeScript’s Readonly<T> helps at the surface level, but deep immutability requires recursive utility types and you basically have to stay on guard all the time (and as casts can always punch a hole through your defenses).

I’ve spent hours debugging issues where data was mutated in unexpected places. A function I thought was safe was actually changing my state without my knowing, and the resulting bug only appeared in specific conditions (and my tests didn’t catch it).

Now look at the Elm equivalent:

1 user = { name = \"Ada\", age = 29 }\n2 \n3 -- This isn't valid Elm syntax, whether inline or in a function:\n4 user.name = \"Grace\"  -- ERROR: won't compile\n5 \n6 -- The right way:\n7 updatedUser = { user | name = \"Grace\" }  -- Creates a new record\n

\n\n

The compiler makes mutation impossible. When you pass user to a function, you know it comes back unchanged. Not because you trust the function author (that would be too brittle) but because the language prevents it. All mutation. If you’ve used Rust, you know the distinction between a variable and a mutable variable matters. In Elm, they’re all immutable.

You stop wondering “who changed this value?” because nothing can. That question simply doesn’t exist in Elm.

Debugging Gets Boring (In a Good Way)

In React, when state is wrong, you trace backward: where was this set? What changed it? Did something mutate it accidentally?

In Elm, when state is wrong, you look at your update function. That’s it. That’s the only place state changes. If the state is wrong, the logic in update is wrong. No hidden mutations or stale closures. No wondering if some other component changed something, because it couldn’t possibly do so.

At my client’s production app (a 150k+ lines Elm codebase), we’ve had entire months with zero runtime exceptions originating from our Elm code².

Though the developers on my team are great, that’s not the main reason. I’m quite confident this is it: the compiler catches those errors before the code runs!

\n\n\n\n

$\"An$

Elm Hook

You know that moment when you refactor a type but forget to update one place that uses it? In Elm, you literally cannot compile until you fix every single usage. The compiler won’t let you ship the incomplete refactor. It’s impossible to “forget one spot.”

Refactoring with Confidence

All of this pays off most when you refactor.

Say you need to add a new state to your application–a Paused state for a game, or a Refreshing state for data loading. In React, you’d:

\nAdd 'paused' to your TypeScript union type\n
\nSearch the codebase for places that check the state\n
\nUpdate each one, hoping you found them all\n
\nTest manually, hoping you caught the edge cases\n
\nShip and monitor for bugs\n
\nHope and/or pray?\n

(To be fair: TypeScript’s discriminated unions help here. But they’re opt-in, and escape hatches like any and type assertions mean you can never be fully sure you caught everything.)

In Elm, you:

\nAdd Paused to your union type\n
\nTry to compile\n
\nThe compiler lists every place that needs updating\n
\nFix each one until compiler gives you a green light\n
\nDeploy\n

I refactored a complex state machine recently–47 places needed updates. The compiler found all 47. I fixed them one by one. When the code compiled, I deployed it. No bugs or forgotten edge cases. The compiler had verified completeness, and that was it.

This isn’t a guarantee of correctness (I can still have logic bugs!) but it is a guarantee that every code path handles every state. No gaps. No undefined behavior at runtime.

Architecture You Don’t Have to Enforce

If you’ve read about Clean Architecture or SOLID principles, you know the ideas are sound. Single Responsibility, Dependency Inversion, separation of concerns. Good stuff, and I’m all for it!

But they’re also discipline. You have to remember to follow them. Code review has to catch violations, and it’s way too easy to cut corners when you’re rushing.

The Elm Architecture enforces these patterns by default. Not as guidelines, but as requirements. The architecture separates View, Update, and Model–Browser.sandbox and Browser.element require them as separate functions, so Single Responsibility is just how the code works. Mutation is impossible and side effects go through Cmd, which means your functions stay pure whether you’re thinking about it or not. And pattern matching forces you to handle every case, so exhaustive handling comes for free.

Where other languages offer SOLID (or whatever acronyms float their boat³) as “best practices” you should follow if you’re disciplined, in Elm they’re mandatory. The compiler enforces what code review can’t.

What This Costs You

Elm’s strictness has real costs.

The ecosystem is smaller. React has thousands of libraries. Elm has hundreds. You’ll find yourself writing more from scratch.

The learning curve is steeper. Functional programming is different if you’re coming from JavaScript, and concepts like pattern matching and union types take time to internalize.

Your team needs to learn. Hiring is harder. Onboarding takes longer. Not every developer wants to learn a niche language.

You lose flexibility. Sometimes you just want to mutate a value and move on. Elm won’t let you. You have to do it the “right” way, even when the shortcut would probably work.

The language hasn’t had a release since 2019. That can look alarming at first glance, but in practice it means remarkable stability. Your Elm code from five years ago still compiles and runs without changes. Whether you see this as a cost or a feature depends on your perspective, but you should know about it going in.

For some projects, these costs aren’t worth it. If you’re prototyping, exploring, or building something simple, React’s flexibility is valuable. You want to move fast, not satisfy a strict compiler. Doubly so if React is already in your bones: when you need speed, familiar tools win. And honestly, for most projects today, React is still the pragmatic choice, and that’s perfectly fine.

But for other projects (production applications where bugs are expensive, complex state machines, financial tools, healthcare systems) Elm’s guarantees are worth the upfront cost.

And, to be completely honest: At this point I personally prefer Elm even for the occasional whimsical side-project that won’t hurt a fly no matter how hard it crashes. As you’ll hopefully discover for yourself before too long: Elm is kind of addictive, and fun to work with!

What Elm Teaches You

The best thing about learning Elm is what it does to the rest of your code.

After spending time with Elm, mutable state starts looking suspicious. You begin designing types that prevent bugs instead of just documenting intent. You write better React, better TypeScript, better everything–because the functional thinking becomes yours, not just something a linter enforces.

I genuinely think Elm is the fastest route into functional programming. Not because it teaches you monads and functors⁴, but because it makes functional programming impossible to avoid. Try to mutate a variable? Compiler says no. Try to ignore a case? Compiler says no. Try to sneak in a side effect? Nope. You can’t cheat your way around it, so you learn to think functionally.

Compare this to learning FP through Haskell or OCaml. Those languages are powerful, but they’re also large and complex. Haskell has lazy evaluation, type classes, monad transformers, dozens of language extensions. By the time you understand enough to build something useful, months have passed.

Elm’s syntax fits in your head in a weekend. No classes. No inheritance. No async/await, no promises, no null, no undefined. Just functions, types, and one architecture pattern. That smallness is exactly why you pick it up fast.

And you’re building in a domain you already know. If you’re coming from React, you understand components, events, state updates, and you’re familiar with the DOM. Elm uses different mechanics, but the same concepts. The output is still web, so you can focus on learning functional programming instead of a whole new platform.

Even if you never use Elm professionally, the habits stick. Modeling with types, making illegal states unrepresentable, treating data as immutable–you carry these with you into any language. And if you eventually pick up Haskell, F#, or OCaml, you’ll find you already understand the core concepts.

Enough philosophy. Next chapter, we write the same app in React and Elm, side by side.

\n\n

To be 100% accurate, you could generate a runtime error by triggering an underlying JavaScript divide-by-zero exception. An actual division by zero in Elm is not enough, though; you’d have to do remainderBy 0 {whateverNumber} or modBy 0 {whateverNumber}. And it’s technically possible to get a Stack Overflow if you (mis-)use extreme recursion without tail call optimization.↩︎
JavaScript code communicating through ports can still throw exceptions on its side, though these won’t crash the Elm runtime itself. When I say “zero runtime exceptions,” I mean zero from the Elm code.↩︎
Bonus point: you might also have to argue with your peers that following SOLID in particular or being mindful of architecture in general is even worth it, especially in frontend projects. (It is, btw, but the point is not everyone agrees.)↩︎
Elm never even mentions monads or functors by those names. You’ll use them (Maybe.andThen is monadic bind) but the language doesn’t make you learn the vocabulary to get work done.↩︎

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

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The Recipe: Four Simple Ingredients

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Ingredient 1: Model - Your State Shape

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Ingredient 2: Msg - Things That Can Happen

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Ingredient 3: update - How State Changes

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Ingredient 4: view - Rendering Your State

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Putting It All Together: Counter with Undo

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Messages Describe All Possible Actions

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Update Handles Each Case Explicitly

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

View Renders Based on Model

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The Elm Runtime Loop

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

What React Developers Already Know

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

What Makes TEA Different

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The Price of Explicitness

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

What You Just Learned (The FP Hiding in Plain Sight)

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

What’s Next

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Chapter 3: Your First Elm App

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Installing Elm

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Editor Setup

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Setting Up Your Project

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

What You Just Created

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The obligatory “Hello, world!”

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Two Flavors of main

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

What’s a Program?

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The LGTM Generator: Building It Step by Step

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Step 1: Model First

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Step 2: Defining What Can Happen

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Step 3: Implementing Update

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Step 4: Building the View

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The Complete Application

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Building Your First Elm App

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Compiler-Driven Development in Action

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

What You Just Built

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Chapter 4: Starting Small: Elm in Your React Codebase

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\nThis content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Integrating One Elm Component into React

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Build Systems and Toolchain Integration

The Manual Setup

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Scaling This Approach

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

A Real Example

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Making It Work

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

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

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Chapter 5: Commands and Randomness

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Upgrading from Browser.sandbox to Browser.element

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Step 1: The Mechanical Refactor

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The Cmd Type and How It Works

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Adding Randomness to the LGTM Generator

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Building a Random Generator

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Adding a New Message

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Using Random.generate

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The Complete Picture

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

What You Just Learned

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

What This Means in Practice

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Chapter 6: HTTP and Remote Data

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

From Random.generate to Http.get

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Setting Up the Server

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Installing elm/http

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The Shape of HTTP in Elm

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Success | Loading | Error

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Creating the HTTP Request

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Updating init

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Refactoring the GotPhrase Message

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Handling Results in update

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Rendering Different States

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The Complete Code

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Commands Are Just Commands

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

What You Just Learned

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Chapter 7: JSON Decoders and Type Safety

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Why JSON Needs Decoding in Elm

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Example: Optional fields -> Maybe

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Example: Nested objects and lists

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Example: Reaching deep with `Decode.at`\n

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Supporting JSON in Our LGTM Generator

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Step 1: Decode Just the Phrase

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Step 2: Decode the Full Payload

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

What Just Happened?

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

What About Sending JSON?

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

What You Just Learned

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Chapter 8: JavaScript Interop: Ports and Flags

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

JavaScript as Infrastructure

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Upgrading Our Build for Manual Bootstrapping

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Flags as Program Input

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

A Simple Flag Example

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Optional Flags

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Common Flag Patterns

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Ports for Communicating with JavaScript

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Adding Clipboard Support to the LGTM Generator

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Step one: adding an outbound port (Elm -> JS) carrying a String

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Step two: mapping the `ClickedCopy` `Msg` to our outbound port

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Step three: receiving messages in JavaScript land

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Step four: sending messages from JavaScript to Elm

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

What You Just Learned

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Part III: Building Real Applications

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Chapter 9: Organizing Files and Modules

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Moving Beyond the Single-File Approach?

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

JavaScript Pain Point I: “Sneaky Mutations”

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

JavaScript Pain Point II: Refactoring is Hard and Quite Dangerous

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Elm is Different

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Let’s Build an Advent Calendar App

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Basic Advent Calendar Spec

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Starting Simple: The Mock Date Version

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Properly Typed Business Logic

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The View Layer

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Getting the Real Date: Enter Tasks

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

What is a Task?

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The Changes We Made

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Building the Task

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The Result

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

When to Split: Modules for Data Structures

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The Freedom of Safe Refactoring

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

What We’ve Learned

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Chapter 10: Modules Around Data Structures

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Opaque Types: Hiding What Shouldn’t Be Seen

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Smart Constructors: The Only Way In

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Working with Opaque Types

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Going Further: Phantom Types

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Type Parameters That Don’t Exist at Runtime

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The Marker Type

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Parse, Don’t Validate

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The Complete Calendar Module

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Using the Calendar Module

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

One Source of Truth

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

What We Gained

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The Broader Pattern: State Machines in Types

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

When to Use Each Pattern

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The Freedom to Reorganize

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

What We’ve Learned

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Chapter 11: Forms and Validation

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

A Simple Contact Form

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The Model

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Messages for User Input

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The Update Function

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The View

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Putting It Together

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

When Validation Enters the Picture

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The Model Expands

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Validation Functions

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The Update Function Now Validates

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The View Gets Cluttered

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The Boilerplate Inventory

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Questions Worth Asking

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Finding the Right Abstraction

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

What We Want

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The Shape of a Solution

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

A Practical Example

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

How Validators Work

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Composing Validators

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Input Transformation

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

What This Abstraction Trades Away

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Phantom Types in Action

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

What We Learned

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Chapter 12: Building a Feedback Wizard

Modeling the Top-Level State

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The OutMsg Pattern

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The Wizard Module

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Handling OutMsg in the Parent

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Why OutMsg Works

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Native Dialogs and Ports

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The Complete Main Module

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The Api Module

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Patterns Worth Noting

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Nested TEA

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

State as Union Type

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

OutMsg for Composition

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Subscriptions Follow State

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

What We Learned

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Chapter 13: Routing and Navigation

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

From Element to Application

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Modeling Routes as Types

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Parsing URLs

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Building URLs

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The Application Structure

A Page Module

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Comparing to React Router

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The Complete Example

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Wrapping up

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Chapter 14: State Patterns at Scale

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

From Booleans to State Machines

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Reversible State Machines

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

A Second State Machine: Form Lifecycle

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

From Type to Module

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Composing Models

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Shared State

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The Underlying Principle

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Wrapping Up

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Chapter 15: Testing Strategies

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

From Jest to elm-test

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

TDD Where It Shines

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Round 1: The Empty List

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Round 2: A Single Element

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Round 3: Two Different Elements

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Round 4: Consecutive Equal Elements

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Round 5: The Full Test

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Fuzz Testing: Let the Framework Think

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

What You Don’t Need to Test

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The Complete Code

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Wrapping Up

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Chapter 16: The Elm Ecosystem for React Developers

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The Part Where npm Lies to You (And Elm Doesn’t)

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

What’s more: No Lockfile Drama

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The Trade-Off

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Popular Packages and Community Patterns

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Core Packages (`elm/*`)

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Community Standards

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Quality Signals

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

elm-review

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

When the Ecosystem Doesn’t Have What You Need

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Ports

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Custom Elements

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Write It Yourself

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Ask the Community

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The Abandoned Package Problem

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Potential Deal-Breakers

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Wrapping Up

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Chapter 17: Performance in Practice

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

React.memo, useCallback, and Reconciliation Pain Points

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

How Elm’s Virtual DOM Makes Optimization Automatic

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Html.Lazy

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Performance by Default vs Performance by Configuration

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Bundle Sizes and Compilation Targets

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Asset Splitting

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Lazy Loading and Code Splitting

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

When and How to Optimize Elm Applications

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Step 1: Profile, Don’t Guess

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Step 2: Check Your Update Function

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Step 3: Use Html.Lazy for Expensive Views

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Step 4: Use Html.Keyed for Lists

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Step 5: Consider the DOM Itself

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

What You Don’t Need to Optimize

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

elm-optimize-level-2

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Wrapping Up

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

About the Author

I’m a Staff Engineer with over 12 years of experience building production systems. My recommendations in this book are battle-tested in one of the world’s largest Elm codebases–over 150,000 lines of production code at Lovdata, Norway’s leading legal information provider.

Before Lovdata, I spent six years at Vipps MobilePay (Norway’s leading mobile payment platform) working across backend development in Go, frontend development in React, Android development in Kotlin, and eventually becoming the first engineer to work across both simultaneously. That range of experience shapes my sense of what actually makes code maintainable.

I’ve also taught at a special-needs high school and worked as a film director. Both of those taught me how to explain things clearly and meet people where they are–which is exactly what this book aims to do for React developers learning Elm.

Why this book exists: I believe Elm is the fastest way for developers to truly learn functional programming. Whether you adopt Elm professionally or not, learning it will make you a better developer in any language. This book puts that experience to work for React developers.

I write about technology and functional programming at cekrem.github.io.

“Architecture!” the man said, and you’ll be glad he did.

Christian Ekrem has worked with Lovdata from March 2025 until May 29, 2026, and in that time he has made a strong and lasting impression as a highly experienced full-stack developer. He combines deep technical knowledge with a genuine passion for clean code, thoughtful architecture, and building systems that are robust, maintainable, and easy for others to understand.

Just as importantly, he is an excellent communicator and teacher. He has a rare ability to explain complex technical ideas clearly, bring people along in architectural discussions, and raise the quality of the whole team through patient guidance and constructive feedback. I would warmly recommend him to any organization looking for a skilled, principled, and collaborative developer.

— Simon Skrede, Head of Development at Lovdata, home to one of the world’s largest Elm codebases

Appendix A: Quick Reference Guide

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

React to Elm Concept Mapping

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Common Patterns Cheat Sheet

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The Basic Skeleton

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Cmd Patterns

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

JSON Decoder Patterns

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Maybe and Result

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Port Communication

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

URL Routing Skeleton

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Common List and Dict Operations

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Type Conversions

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Troubleshooting Guide for React Developers

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

“Why can’t I just mutate the model?”

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Missing a Msg variant in update

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Forgetting to wire subscriptions

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

JSON decoder failures

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Type annotation confusion

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

“Why can’t I just call a function with side effects?”

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Common compiler error messages

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Appendix B: The Scary Words You Already Understand

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Why Elm Avoids This Terminology

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Functors: Things You Can Map Over

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Applicatives: When You Have Multiple Wrapped Values

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Monads: Chaining Operations That Might Fail

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

The Elm to Haskell Rosetta Stone

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Commands and Tasks: Elm’s Approach to Effects

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Where to Go From Here

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Appendix C: Further Reading and Resources

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Code Examples from This Book

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Essential Elm Learning Resources

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

A Reference Elm SPA: dwayne/elm-conduit

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

What to Look For

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

How to Read It

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Community and Getting Help

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n

Advanced Topics Beyond This Book

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/elm-for-react-devs.\n\n

\n\n","metaText","The fastest way for React developers to master functional programming. Elm guarantees zero runtime exceptions and teaches FP concepts that transfer everywhere.","slug","elm-for-react-devs","showReadLinkString","sample","tocStructure",[44,45,46,47,48,49,19,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213],"publicChapterContent",{"_22":29,"_12":542,"_25":-5,"_26":543,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":542,"_25":-5,"_26":543,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":540,"_25":-5,"_26":541,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":538,"_25":-5,"_26":539,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":536,"_25":-5,"_26":537,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":29,"_12":534,"_25":-5,"_26":535,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":532,"_25":-5,"_26":533,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":530,"_25":-5,"_26":531,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":528,"_25":-5,"_26":529,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":526,"_25":-5,"_26":527,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":524,"_25":-5,"_26":525,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":522,"_25":-5,"_26":523,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":520,"_25":-5,"_26":521,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":518,"_25":-5,"_26":519,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":516,"_25":-5,"_26":517,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":514,"_25":-5,"_26":515,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":512,"_25":-5,"_26":513,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":510,"_25":-5,"_26":511,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":508,"_25":-5,"_26":509,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":506,"_25":-5,"_26":507,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":504,"_25":-5,"_26":505,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":502,"_25":-5,"_26":503,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":500,"_25":-5,"_26":501,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":498,"_25":-5,"_26":499,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":496,"_25":-5,"_26":497,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":494,"_25":-5,"_26":495,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":492,"_25":-5,"_26":493,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":490,"_25":-5,"_26":491,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":488,"_25":-5,"_26":489,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":486,"_25":-5,"_26":487,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":484,"_25":-5,"_26":485,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":482,"_25":-5,"_26":483,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":480,"_25":-5,"_26":481,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":478,"_25":-5,"_26":479,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":476,"_25":-5,"_26":477,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":474,"_25":-5,"_26":475,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":472,"_25":-5,"_26":473,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":470,"_25":-5,"_26":471,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":468,"_25":-5,"_26":469,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":466,"_25":-5,"_26":467,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":464,"_25":-5,"_26":465,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":29,"_12":462,"_25":-5,"_26":463,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":460,"_25":-5,"_26":461,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":458,"_25":-5,"_26":459,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":456,"_25":-5,"_26":457,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":454,"_25":-5,"_26":455,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":402,"_25":-5,"_26":453,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":451,"_25":-5,"_26":452,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":449,"_25":-5,"_26":450,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":447,"_25":-5,"_26":448,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":445,"_25":-5,"_26":446,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":443,"_25":-5,"_26":444,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":441,"_25":-5,"_26":442,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":439,"_25":-5,"_26":440,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":437,"_25":-5,"_26":438,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":435,"_25":-5,"_26":436,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":433,"_25":-5,"_26":434,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":431,"_25":-5,"_26":432,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":281,"_25":-5,"_26":430,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":428,"_25":-5,"_26":429,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":402,"_25":-5,"_26":427,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":425,"_25":-5,"_26":426,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":423,"_25":-5,"_26":424,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":421,"_25":-5,"_26":422,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":419,"_25":-5,"_26":420,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":402,"_25":-5,"_26":418,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":416,"_25":-5,"_26":417,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":414,"_25":-5,"_26":415,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":412,"_25":-5,"_26":413,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":410,"_25":-5,"_26":411,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":408,"_25":-5,"_26":409,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":406,"_25":-5,"_26":407,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":404,"_25":-5,"_26":405,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":402,"_25":-5,"_26":403,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":29,"_12":400,"_25":-5,"_26":401,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":398,"_25":-5,"_26":399,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":396,"_25":-5,"_26":397,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":394,"_25":-5,"_26":395,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":392,"_25":-5,"_26":393,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":390,"_25":-5,"_26":391,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":388,"_25":-5,"_26":389,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":386,"_25":-5,"_26":387,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":384,"_25":-5,"_26":385,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":382,"_25":-5,"_26":383,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":361,"_25":-5,"_26":381,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":379,"_25":-5,"_26":380,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":377,"_25":-5,"_26":378,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":375,"_25":-5,"_26":376,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":373,"_25":-5,"_26":374,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":371,"_25":-5,"_26":372,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":369,"_25":-5,"_26":370,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":367,"_25":-5,"_26":368,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":365,"_25":-5,"_26":366,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":363,"_25":-5,"_26":364,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":361,"_25":-5,"_26":362,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":359,"_25":-5,"_26":360,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":357,"_25":-5,"_26":358,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":355,"_25":-5,"_26":356,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":353,"_25":-5,"_26":354,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":332,"_25":-5,"_26":352,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":350,"_25":-5,"_26":351,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":348,"_25":-5,"_26":349,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":346,"_25":-5,"_26":347,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":344,"_25":-5,"_26":345,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":342,"_25":-5,"_26":343,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":340,"_25":-5,"_26":341,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":338,"_25":-5,"_26":339,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":336,"_25":-5,"_26":337,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":334,"_25":-5,"_26":335,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":332,"_25":-5,"_26":333,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":330,"_25":-5,"_26":331,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":328,"_25":-5,"_26":329,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":326,"_25":-5,"_26":327,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":324,"_25":-5,"_26":325,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":322,"_25":-5,"_26":323,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":320,"_25":-5,"_26":321,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":318,"_25":-5,"_26":319,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":316,"_25":-5,"_26":317,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":314,"_25":-5,"_26":315,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":312,"_25":-5,"_26":313,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":310,"_25":-5,"_26":311,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":308,"_25":-5,"_26":309,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":306,"_25":-5,"_26":307,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":304,"_25":-5,"_26":305,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":302,"_25":-5,"_26":303,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":300,"_25":-5,"_26":301,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":298,"_25":-5,"_26":299,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":296,"_25":-5,"_26":297,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":294,"_25":-5,"_26":295,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":253,"_25":-5,"_26":293,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":291,"_25":-5,"_26":292,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":289,"_25":-5,"_26":290,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":287,"_25":-5,"_26":288,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":285,"_25":-5,"_26":286,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":283,"_25":-5,"_26":284,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":281,"_25":-5,"_26":282,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":253,"_25":-5,"_26":280,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":278,"_25":-5,"_26":279,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":276,"_25":-5,"_26":277,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":274,"_25":-5,"_26":275,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":272,"_25":-5,"_26":273,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":253,"_25":-5,"_26":271,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":269,"_25":-5,"_26":270,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":267,"_25":-5,"_26":268,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":265,"_25":-5,"_26":266,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":263,"_25":-5,"_26":264,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":261,"_25":-5,"_26":262,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":259,"_25":-5,"_26":260,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":257,"_25":-5,"_26":258,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":255,"_25":-5,"_26":256,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":253,"_25":-5,"_26":254,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":251,"_25":-5,"_26":252,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":249,"_25":-5,"_26":250,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":247,"_25":-5,"_26":248,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":245,"_25":-5,"_26":246,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":243,"_25":-5,"_26":244,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":241,"_25":-5,"_26":242,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":239,"_25":-5,"_26":240,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":237,"_25":-5,"_26":238,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":235,"_25":-5,"_26":236,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":233,"_25":-5,"_26":234,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":231,"_25":-5,"_26":232,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":229,"_25":-5,"_26":230,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":227,"_25":-5,"_26":228,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":225,"_25":-5,"_26":226,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":223,"_25":-5,"_26":224,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":221,"_25":-5,"_26":222,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":219,"_25":-5,"_26":220,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":217,"_25":-5,"_26":218,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":215,"_25":-5,"_26":216,"_28":29,"_30":-5,"_31":-5,"_32":-5},3,"Advanced Topics Beyond This Book","#advanced-topics-beyond-this-book","Community and Getting Help","#community-and-getting-help","A Reference Elm SPA: dwayne/elm-conduit","#a-reference-elm-spa-dwayneelm-conduit","Essential Elm Learning Resources","#essential-elm-learning-resources","Code Examples from This Book","#code-examples-from-this-book","Appendix C: Further Reading and Resources","#resources","Where to Go From Here","#where-to-go-from-here","Commands and Tasks: Elm’s Approach to Effects","#commands-and-tasks-elms-approach-to-effects","The Elm to Haskell Rosetta Stone","#the-elm-to-haskell-rosetta-stone","Monads: Chaining Operations That Might Fail","#monads-chaining-operations-that-might-fail","Applicatives: When You Have Multiple Wrapped Values","#applicatives-when-you-have-multiple-wrapped-values","Functors: Things You Can Map Over","#functors-things-you-can-map-over","Why Elm Avoids This Terminology","#why-elm-avoids-this-terminology","Appendix B: The Scary Words You Already Understand","#appendix-b-the-scary-words-you-already-understand","Troubleshooting Guide for React Developers","#troubleshooting-guide-for-react-developers","Common Patterns Cheat Sheet","#common-patterns-cheat-sheet","React to Elm Concept Mapping","#react-to-elm-concept-mapping","Appendix A: Quick Reference Guide","#quick-reference","About the Author","#about-the-author","Wrapping Up","#wrapping-up-4","elm-optimize-level-2","#elm-optimize-level-2","When and How to Optimize Elm Applications","#when-and-how-to-optimize-elm-applications","Lazy Loading and Code Splitting","#lazy-loading-and-code-splitting","Bundle Sizes and Compilation Targets","#bundle-sizes-and-compilation-targets","Performance by Default vs Performance by Configuration","#performance-by-default-vs-performance-by-configuration","How Elm’s Virtual DOM Makes Optimization Automatic","#how-elms-virtual-dom-makes-optimization-automatic","React.memo, useCallback, and Reconciliation Pain Points","#reactmemo-usecallback-and-reconciliation-pain-points","Chapter 17: Performance in Practice","#performance","#wrapping-up-3","When the Ecosystem Doesn’t Have What You Need","#when-the-ecosystem-doesnt-have-what-you-need","Popular Packages and Community Patterns","#popular-packages-and-community-patterns","The Part Where npm Lies to You (And Elm Doesn’t)","#the-part-where-npm-lies-to-you-and-elm-doesnt","Chapter 16: The Elm Ecosystem for React Developers","#ecosystem","#wrapping-up-2","The Complete Code","#the-complete-code-1","What You Don’t Need to Test","#what-you-dont-need-to-test","Fuzz Testing: Let the Framework Think","#fuzz-testing-let-the-framework-think","TDD Where It Shines","#tdd-where-it-shines","From Jest to elm-test","#from-jest-to-elm-test","Chapter 15: Testing Strategies","#testing","#wrapping-up-1","The Underlying Principle","#the-underlying-principle","Shared State","#shared-state","Composing Models","#composing-models","From Type to Module","#from-type-to-module","A Second State Machine: Form Lifecycle","#a-second-state-machine-form-lifecycle","Reversible State Machines","#reversible-state-machines","From Booleans to State Machines","#from-booleans-to-state-machines","Chapter 14: State Patterns at Scale","#state-patterns","Wrapping up","#wrapping-up","The Complete Example","#the-complete-example","Comparing to React Router","#comparing-to-react-router","A Page Module","#a-page-module","Handling Navigation","#handling-navigation","The Application Structure","#the-application-structure","Building URLs","#building-urls","Parsing URLs","#parsing-urls","Modeling Routes as Types","#modeling-routes-as-types","From Element to Application","#from-element-to-application","Chapter 13: Routing and Navigation","#routing","What We Learned","#what-we-learned-1","Patterns Worth Noting","#patterns-worth-noting","The Api Module","#the-api-module","The Complete Main Module","#the-complete-main-module","Native Dialogs and Ports","#native-dialogs-and-ports","Why OutMsg Works","#why-outmsg-works","The OutMsg Pattern","#the-outmsg-pattern","Modeling the Top-Level State","#modeling-the-top-level-state","The Problem: A Feedback Widget","#the-problem-a-feedback-widget","Chapter 12: Building a Feedback Wizard","#wizard","#what-we-learned","Finding the Right Abstraction","#finding-the-right-abstraction","When Validation Enters the Picture","#when-validation-enters-the-picture","A Simple Contact Form","#a-simple-contact-form","Chapter 11: Forms and Validation","#forms-validation","What We’ve Learned","#what-weve-learned-1","The Freedom to Reorganize","#the-freedom-to-reorganize","When to Use Each Pattern","#when-to-use-each-pattern","The Broader Pattern: State Machines in Types","#the-broader-pattern-state-machines-in-types","What We Gained","#what-we-gained","Using the Calendar Module","#using-the-calendar-module","The Complete Calendar Module","#the-complete-calendar-module","Going Further: Phantom Types","#going-further-phantom-types","Opaque Types: Hiding What Shouldn’t Be Seen","#opaque-types-hiding-what-shouldnt-be-seen","Chapter 10: Modules Around Data Structures","#modules-data","#what-weve-learned","The Freedom of Safe Refactoring","#the-freedom-of-safe-refactoring","When to Split: Modules for Data Structures","#when-to-split-modules-for-data-structures","Getting the Real Date: Enter Tasks","#getting-the-real-date-enter-tasks","Starting Simple: The Mock Date Version","#starting-simple-the-mock-date-version","Basic Advent Calendar Spec","#basic-advent-calendar-spec","Let’s Build an Advent Calendar App","#lets-build-an-advent-calendar-app","Elm is Different","#elm-is-different","Moving Beyond the Single-File Approach?","#moving-beyond-the-single-file-approach","Chapter 9: Organizing Files and Modules","#organizing-modules","Part III: Building Real Applications","#part-iii-building-real-applications","What You Just Learned","#what-you-just-learned-3","Adding Clipboard Support to the LGTM Generator","#adding-clipboard-support-to-the-lgtm-generator","Ports for Communicating with JavaScript","#ports-for-communicating-with-javascript","Flags as Program Input","#flags-as-program-input","Upgrading Our Build for Manual Bootstrapping","#upgrading-our-build-for-manual-bootstrapping","JavaScript as Infrastructure","#javascript-as-infrastructure","Chapter 8: JavaScript Interop: Ports and Flags","#interop","Further Reading","#further-reading","#what-you-just-learned-2","What About Sending JSON?","#what-about-sending-json","Supporting JSON in Our LGTM Generator","#supporting-json-in-our-lgtm-generator","Why JSON Needs Decoding in Elm","#why-json-needs-decoding-in-elm","Chapter 7: JSON Decoders and Type Safety","#json-decoders","#what-you-just-learned-1","Commands Are Just Commands","#commands-are-just-commands","#the-complete-code","Rendering Different States","#rendering-different-states","Handling Results in update","#handling-results-in-update","Refactoring the GotPhrase Message","#refactoring-the-gotphrase-message","Updating init","#updating-init","Creating the HTTP Request","#creating-the-http-request","Success | Loading | Error","#success--loading--error","The Shape of HTTP in Elm","#the-shape-of-http-in-elm","Installing elm/http","#installing-elmhttp","Setting Up the Server","#setting-up-the-server","From Random.generate to Http.get","#from-randomgenerate-to-httpget","Chapter 6: HTTP and Remote Data","#http-data","#what-you-just-learned","Adding Randomness to the LGTM Generator","#adding-randomness-to-the-lgtm-generator","The Cmd Type and How It Works","#the-cmd-type-and-how-it-works","Upgrading from Browser.sandbox to Browser.element","#upgrading-from-browsersandbox-to-browserelement","Chapter 5: Commands and Randomness","#commands","Part II: The Outside World: Randomness, APIs, and JavaScript","#part-ii-the-outside-world-randomness-apis-and-javascript","Scaling This Approach","#scaling-this-approach","Build Systems and Toolchain Integration","#build-systems-and-toolchain-integration","Integrating One Elm Component into React","#integrating-one-elm-component-into-react","Widget-by-widget Incremental Adoption Strategy","#widget-by-widget-incremental-adoption-strategy","Chapter 4: Starting Small: Elm in Your React Codebase","#starting-small","What You Just Built","#what-you-just-built","Compiler-Driven Development in Action","#compiler-driven-development-in-action","Building Your First Elm App","#building-your-first-elm-app","The LGTM Generator: Building It Step by Step","#the-lgtm-generator-building-it-step-by-step","Two Flavors of main","#two-flavors-of-main","The obligatory “Hello, world!”","#the-obligatory-hello-world","Setting Up Your Project","#setting-up-your-project","Editor Setup","#editor-setup","Installing Elm","#installing-elm","Chapter 3: Your First Elm App","#first-app","What’s Next","#whats-next","What You Just Learned (The FP Hiding in Plain Sight)","#what-you-just-learned-the-fp-hiding-in-plain-sight","The Price of Explicitness","#the-price-of-explicitness","What Makes TEA Different","#what-makes-tea-different","What React Developers Already Know","#what-react-developers-already-know","The Elm Runtime Loop","#the-elm-runtime-loop","Putting It All Together: Counter with Undo","#putting-it-all-together-counter-with-undo","Ingredient 4: view - Rendering Your State","#ingredient-4-view---rendering-your-state","Ingredient 3: update - How State Changes","#ingredient-3-update---how-state-changes","Ingredient 2: Msg - Things That Can Happen","#ingredient-2-msg---things-that-can-happen","Ingredient 1: Model - Your State Shape","#ingredient-1-model---your-state-shape","The Recipe: Four Simple Ingredients","#the-recipe-four-simple-ingredients","Chapter 2: The Elm Architecture – A Recipe for Reliable Apps","#elm-architecture","What Elm Teaches You","#what-elm-teaches-you","What This Costs You","#what-this-costs-you","Architecture You Don’t Have to Enforce","#architecture-you-dont-have-to-enforce","Refactoring with Confidence","#refactoring-with-confidence","Debugging Gets Boring (In a Good Way)","#debugging-gets-boring-in-a-good-way","When Constraints Give Freedom","#when-constraints-give-freedom","React Recommends, Elm Requires and Enables","#react-recommends-elm-requires-and-enables","Part I: From React to Elm: Getting Started","#part-i-from-react-to-elm-getting-started","Acknowledgements","#acknowledgements","Introduction","#introduction","Foreword","#foreword","Praise for An Elm Primer for React Developers","#praise-for-an-elm-primer-for-react-developers",{"_12":13,"_37":38,"_35":36,"_784":785,"_786":787,"_788":789,"_39":40,"_790":791,"_792":793},"parts",[723,724,725,726],"toc",[552,553,554,555,556,557,558,559,560,561,562,563,564,565,566,567,568,569,570,571,572,573,574,575,576,577,578,579,580,581,582,583,584,585,586,587,588,589,590,591,592,593,594,595,596,597,598,599,600,601,602,603,604,605,606,607,608,609,610,611,612,613,614,615,616,617,618,619,620,621,622,623,624,625,626,627,628,629,630,631,632,633,634,635,636,637,638,639,640,641,642,643,644,645,646,647,648,649,650,651,652,653,654,655,656,657,658,659,660,661,662,663,664,665,666,667,668,669,670,671,672,673,674,675,676,677,678,679,680,681,682,683,684,685,686,687,688,689,690,691,692,693,694,695,696,697,698,699,700,701,702,703,704,705,706,707,708,709,710,711,712,713,714,715,716,717,718,719,720,721,722],"isUnavailableOnline",false,"unavailableMessage",{"_22":29,"_12":542,"_25":-5,"_26":543,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":542,"_25":-5,"_26":543,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":540,"_25":-5,"_26":541,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":538,"_25":-5,"_26":539,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":536,"_25":-5,"_26":537,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":29,"_12":534,"_25":-5,"_26":535,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":24,"_25":-5,"_26":27,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":532,"_25":-5,"_26":533,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":530,"_25":-5,"_26":531,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":528,"_25":-5,"_26":529,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":526,"_25":-5,"_26":527,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":524,"_25":-5,"_26":525,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":522,"_25":-5,"_26":523,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":520,"_25":-5,"_26":521,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":518,"_25":-5,"_26":519,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":516,"_25":-5,"_26":517,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":514,"_25":-5,"_26":515,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":512,"_25":-5,"_26":513,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":510,"_25":-5,"_26":511,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":508,"_25":-5,"_26":509,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":506,"_25":-5,"_26":507,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":504,"_25":-5,"_26":505,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":502,"_25":-5,"_26":503,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":500,"_25":-5,"_26":501,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":498,"_25":-5,"_26":499,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":496,"_25":-5,"_26":497,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":494,"_25":-5,"_26":495,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":492,"_25":-5,"_26":493,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":490,"_25":-5,"_26":491,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":488,"_25":-5,"_26":489,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":486,"_25":-5,"_26":487,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":484,"_25":-5,"_26":485,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":482,"_25":-5,"_26":483,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":480,"_25":-5,"_26":481,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":478,"_25":-5,"_26":479,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":476,"_25":-5,"_26":477,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":474,"_25":-5,"_26":475,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":472,"_25":-5,"_26":473,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":470,"_25":-5,"_26":471,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":468,"_25":-5,"_26":469,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":466,"_25":-5,"_26":467,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":464,"_25":-5,"_26":465,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":29,"_12":462,"_25":-5,"_26":463,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":460,"_25":-5,"_26":461,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":458,"_25":-5,"_26":459,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":456,"_25":-5,"_26":457,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":454,"_25":-5,"_26":455,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":402,"_25":-5,"_26":453,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":451,"_25":-5,"_26":452,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":449,"_25":-5,"_26":450,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":447,"_25":-5,"_26":448,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":445,"_25":-5,"_26":446,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":443,"_25":-5,"_26":444,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":441,"_25":-5,"_26":442,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":439,"_25":-5,"_26":440,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":437,"_25":-5,"_26":438,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":435,"_25":-5,"_26":436,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":433,"_25":-5,"_26":434,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":431,"_25":-5,"_26":432,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":281,"_25":-5,"_26":430,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":428,"_25":-5,"_26":429,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":402,"_25":-5,"_26":427,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":425,"_25":-5,"_26":426,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":423,"_25":-5,"_26":424,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":421,"_25":-5,"_26":422,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":419,"_25":-5,"_26":420,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":402,"_25":-5,"_26":418,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":416,"_25":-5,"_26":417,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":414,"_25":-5,"_26":415,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":412,"_25":-5,"_26":413,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":410,"_25":-5,"_26":411,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":408,"_25":-5,"_26":409,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":406,"_25":-5,"_26":407,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":404,"_25":-5,"_26":405,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":402,"_25":-5,"_26":403,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":29,"_12":400,"_25":-5,"_26":401,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":398,"_25":-5,"_26":399,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":396,"_25":-5,"_26":397,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":394,"_25":-5,"_26":395,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":392,"_25":-5,"_26":393,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":390,"_25":-5,"_26":391,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":388,"_25":-5,"_26":389,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":386,"_25":-5,"_26":387,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":384,"_25":-5,"_26":385,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":382,"_25":-5,"_26":383,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":361,"_25":-5,"_26":381,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":379,"_25":-5,"_26":380,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":377,"_25":-5,"_26":378,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":375,"_25":-5,"_26":376,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":373,"_25":-5,"_26":374,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":371,"_25":-5,"_26":372,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":369,"_25":-5,"_26":370,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":367,"_25":-5,"_26":368,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":365,"_25":-5,"_26":366,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":363,"_25":-5,"_26":364,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":361,"_25":-5,"_26":362,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":359,"_25":-5,"_26":360,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":357,"_25":-5,"_26":358,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":355,"_25":-5,"_26":356,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":353,"_25":-5,"_26":354,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":332,"_25":-5,"_26":352,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":350,"_25":-5,"_26":351,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":348,"_25":-5,"_26":349,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":346,"_25":-5,"_26":347,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":344,"_25":-5,"_26":345,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":342,"_25":-5,"_26":343,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":340,"_25":-5,"_26":341,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":338,"_25":-5,"_26":339,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":336,"_25":-5,"_26":337,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":334,"_25":-5,"_26":335,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":332,"_25":-5,"_26":333,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":330,"_25":-5,"_26":331,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":328,"_25":-5,"_26":329,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":326,"_25":-5,"_26":327,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":324,"_25":-5,"_26":325,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":322,"_25":-5,"_26":323,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":320,"_25":-5,"_26":321,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":318,"_25":-5,"_26":319,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":316,"_25":-5,"_26":317,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":314,"_25":-5,"_26":315,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":312,"_25":-5,"_26":313,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":310,"_25":-5,"_26":311,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":308,"_25":-5,"_26":309,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":306,"_25":-5,"_26":307,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":304,"_25":-5,"_26":305,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":302,"_25":-5,"_26":303,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":300,"_25":-5,"_26":301,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":298,"_25":-5,"_26":299,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":296,"_25":-5,"_26":297,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":294,"_25":-5,"_26":295,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":253,"_25":-5,"_26":293,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":291,"_25":-5,"_26":292,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":289,"_25":-5,"_26":290,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":287,"_25":-5,"_26":288,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":285,"_25":-5,"_26":286,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":283,"_25":-5,"_26":284,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":281,"_25":-5,"_26":282,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":253,"_25":-5,"_26":280,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":278,"_25":-5,"_26":279,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":276,"_25":-5,"_26":277,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":274,"_25":-5,"_26":275,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":272,"_25":-5,"_26":273,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":253,"_25":-5,"_26":271,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":269,"_25":-5,"_26":270,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":267,"_25":-5,"_26":268,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":265,"_25":-5,"_26":266,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":263,"_25":-5,"_26":264,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":261,"_25":-5,"_26":262,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":259,"_25":-5,"_26":260,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":257,"_25":-5,"_26":258,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":255,"_25":-5,"_26":256,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":253,"_25":-5,"_26":254,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":251,"_25":-5,"_26":252,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":249,"_25":-5,"_26":250,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":247,"_25":-5,"_26":248,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":245,"_25":-5,"_26":246,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":243,"_25":-5,"_26":244,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":241,"_25":-5,"_26":242,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":239,"_25":-5,"_26":240,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":237,"_25":-5,"_26":238,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":235,"_25":-5,"_26":236,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":233,"_25":-5,"_26":234,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":231,"_25":-5,"_26":232,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":229,"_25":-5,"_26":230,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":227,"_25":-5,"_26":228,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":225,"_25":-5,"_26":226,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":223,"_25":-5,"_26":224,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":221,"_25":-5,"_26":222,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":219,"_25":-5,"_26":220,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":217,"_25":-5,"_26":218,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":214,"_12":215,"_25":-5,"_26":216,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_12":542,"_25":727,"_28":29,"_26":543,"_728":775},{"_12":534,"_25":727,"_28":29,"_26":535,"_728":766},{"_12":462,"_25":727,"_28":29,"_26":463,"_728":757},{"_12":400,"_25":727,"_28":29,"_26":401,"_728":729},"","chapters",[730,731,732,733,734,735,736,737,738,739,740,741,742],{"_22":23,"_12":398,"_26":399,"_28":29,"_743":756,"_32":-5},{"_22":23,"_12":379,"_26":380,"_28":29,"_743":755,"_32":-5},{"_22":23,"_12":359,"_26":360,"_28":29,"_743":754,"_32":-5},{"_22":23,"_12":350,"_26":351,"_28":29,"_743":753,"_32":-5},{"_22":23,"_12":330,"_26":331,"_28":29,"_743":752,"_32":-5},{"_22":23,"_12":308,"_26":309,"_28":29,"_743":751,"_32":-5},{"_22":23,"_12":291,"_26":292,"_28":29,"_743":750,"_32":-5},{"_22":23,"_12":278,"_26":279,"_28":29,"_743":749,"_32":-5},{"_22":23,"_12":269,"_26":270,"_28":29,"_743":748,"_32":-5},{"_22":23,"_12":251,"_26":252,"_28":29,"_743":747,"_32":-5},{"_22":23,"_12":249,"_26":250,"_28":29,"_743":746,"_32":-5},{"_22":23,"_12":241,"_26":242,"_28":29,"_743":745,"_32":-5},{"_22":23,"_12":225,"_26":226,"_28":29,"_743":744,"_32":-5},"subsections",[718,719,720,721,722],[710,711,712,713,714,715,716],[706,707,708],[],[696,697,698,699,700,701,702,703],[691,692,693,694],[684,685,686,687,688,689],[675,676,677,678,679,680,681,682],[664,665,666,667,668,669,670,671,672,673],[654,655,656,657,658,659,660,661,662],[649,650,651,652],[639,640,641,642,643,644,645,646,647],[629,630,631,632,633,634,635,636,637],[758,759,760,761],{"_22":23,"_12":460,"_26":461,"_28":29,"_743":765,"_32":-5},{"_22":23,"_12":451,"_26":452,"_28":29,"_743":764,"_32":-5},{"_22":23,"_12":425,"_26":426,"_28":29,"_743":763,"_32":-5},{"_22":23,"_12":414,"_26":415,"_28":29,"_743":762,"_32":-5},[621,622,623,624,625,626],[615,616,617,618,619],[601,602,603,604,605,606,607,608,609,610,611,612,613],[596,597,598,599],[767,768,769,770],{"_22":23,"_12":24,"_26":27,"_28":29,"_743":774,"_32":-5},{"_22":23,"_12":518,"_26":519,"_28":29,"_743":773,"_32":-5},{"_22":23,"_12":492,"_26":493,"_28":29,"_743":772,"_32":-5},{"_22":23,"_12":472,"_26":473,"_28":29,"_743":771,"_32":-5},[590,591,592,593],[580,581,582,583,584,585,586,587,588],[567,568,569,570,571,572,573,574,575,576,577,578],[559,560,561,562,563,564,565],[776,777,778,779],{"_22":23,"_12":542,"_26":543,"_28":29,"_743":783,"_32":-5},{"_22":23,"_12":540,"_26":541,"_28":29,"_743":782,"_32":-5},{"_22":23,"_12":538,"_26":539,"_28":29,"_743":781,"_32":-5},{"_22":23,"_12":536,"_26":537,"_28":29,"_743":780,"_32":-5},[],[],[],[],"coverFeatured",{"_803":805},"coverFeatured2x",{"_803":804},"authors",[794],"samplePdfUrl","https://s3.amazonaws.com/samples.leanpub.com/elm-for-react-devs-sample.pdf?x-amz-checksum-mode=ENABLED&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=0XBXHW3Q9GGV69BT7E82%2F20260601%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260601T190026Z&X-Amz-Expires=518400&X-Amz-SignedHeaders=host&X-Amz-Signature=89cac6ca5779d9625eb2d38666fc8d0e7682007b0a90def45940124dce915cb1","sampleEpubUrl","https://s3.amazonaws.com/samples.leanpub.com/elm-for-react-devs-sample.epub?x-amz-checksum-mode=ENABLED&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=0XBXHW3Q9GGV69BT7E82%2F20260601%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260601T190026Z&X-Amz-Expires=518400&X-Amz-SignedHeaders=host&X-Amz-Signature=d92b7f13006a07799ac3a79223167599fd37bbed59026882e4b9c427b232432b",{"_795":796,"_797":798,"_799":800},"id","Z2lkOi8vbGVhbnB1Yi9TdG9yZTo6UHJvZHVjdEF1dGhvci83MTU1OA","name","Christian Ekrem","user",{"_801":802},"username","cekrem","url","https://d2sofvawe08yqg.cloudfront.net/elm-for-react-devs/s_featured2x?1761298270&1761298270","https://d2sofvawe08yqg.cloudfront.net/elm-for-react-devs/s_featured?1761298270&1761298270","shoppingCartId","shoppingCart",{"_795":839,"_840":841,"_842":830,"_843":727,"_844":845,"_846":847,"_848":830},"locale","en","readerTheme","light","constants",{"_837":838},"publishers",{"_833":834,"_835":836},"learnerOrganizations",[],"needsLocaleCookieSync","announcements",{"_826":827,"_828":-5},"sentryEnvironment","production","sentryRelease","49b41a51c91f05d91ae3f9fc55c44cf1f379b516","announcement_store",{"_829":830,"_831":832},"announcement_authors","flag",true,"text","

Kick off your book project in 3 hours! Live workshop on Zoom. You’ll leave with a real book project, progress on your first chapter, and a clear plan to keep going. Saturday, June 6, 2026. Learn more…

\n","companies",[],"universities",[],"paypalClientId","AX53Cwz8jR6rVVzzZiZNWWXl0dGagi-GZrjG-S3Ua14E5nrKMn7DxDQ730O4R8LusLPp49ALn6aRVaEy","no-cart","count",0,"free","updatedAt","paymentGateway","STRIPE","cartItems",[],"loading"]

Acknowledgements

Table of Contents

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

Messages Describe All Possible Actions

Update Handles Each Case Explicitly

View Renders Based on Model

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

What You Just Created

The obligatory “Hello, world!”

Two Flavors of main

What’s a Program?

The LGTM Generator: Building It Step by Step

Step 1: Model First

Step 2: Defining What Can Happen

Step 3: Implementing Update

Step 4: Building the View

The Complete Application

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

The StrictMode Gotcha, or “How Not To Render Your Elm Widget Twice”

The Manual Setup

Scaling This Approach

A Real Example

Making It Work

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

Chapter 5: Commands and Randomness

Upgrading from Browser.sandbox to Browser.element

Step 1: The Mechanical Refactor

The Cmd Type and How It Works

Adding Randomness to the LGTM Generator

Building a Random Generator

Adding a New Message

Using Random.generate

The Complete Picture

What You Just Learned

What This Means in Practice

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

Example: Reaching deep with `Decode.at`\n

Step two: mapping the `ClickedCopy` `Msg` to our outbound port