Programming Elm: Build Safe, Sane, and Maintainable Front-End Applications

302 Pages·2019·12.592 MB·English

by  Jeremy Fairbank

Early Praise for Programming Elm
Programming Elm is wonderfully accessible for folks coming to Elm from JavaScript.
Jeremy Fairbank takes the time to introduce each concept thoroughly and
thoughtfully, so the learning path is quite smooth.
➤ Brian Hicks
Organizer, elm-conf
Programming Elm is a joyful and empathetic primer on building software with
Elm, and I recommend it to anyone interested in adding Elm to their front-end
development toolkit.
➤ Luke Westby
Engineer, Creator of Ellie, NoRedInk
I love the approach of teaching real-world solutions by starting from a project
with real-world problems.
➤ Kevin Yank
Host, Elm Town Podcast
We've left this page blank to
make the page numbers the
same in the electronic and
paper books.
We tried just leaving it out,
but then people wrote us to
ask about the missing pages.
Anyway, Eddy the Gerbil
wanted to say “hello.”
Programming Elm
Build Safe and Maintainable Front-End Applications
Jeremy Fairbank
The Pragmatic Bookshelf
Raleigh, North Carolina
Many of the designations used by manufacturers and sellers to distinguish their products
are claimed as trademarks. Where those designations appear in this book, and The Pragmatic
Programmers, LLC was aware of a trademark claim, the designations have been printed in
initial capital letters or in all capitals. The Pragmatic Starter Kit, The Pragmatic Programmer,
Pragmatic Programming, Pragmatic Bookshelf, PragProg and the linking g device are trade-
marks of The Pragmatic Programmers, LLC.
Every precaution was taken in the preparation of this book. However, the publisher assumes
no responsibility for errors or omissions, or for damages that may result from the use of
information (including program listings) contained herein.
Our Pragmatic books, screencasts, and audio books can help you and your team create
better software and have more fun. Visit us at https://pragprog.com.
The team that produced this book includes:
Publisher: Andy Hunt
VP of Operations: Janet Furlow
Managing Editor: Susan Conant
Development Editor: Brian MacDonald
Copy Editor: Sean Dennis
Indexing: Potomac Indexing, LLC
Layout: Gilson Graphics
For sales, volume licensing, and support, please contact [email protected].
For international rights, please contact [email protected].
Copyright © 2019 The Pragmatic Programmers, LLC.
All rights reserved. No part of this publication may be reproduced, stored in a retrieval system,
or transmitted, in any form, or by any means, electronic, mechanical, photocopying, recording,
or otherwise, without the prior consent of the publisher.
ISBN-13: 978-1-68050-285-5
Encoded using the finest acid-free high-entropy binary digits.
Book version: P2.0—September 2019
Contents
Preface . . . . . . . . . . . . . . ix
1. Get Started with Elm . . . . . . . . . . . 1
Get Started with Functions 1
Use Static Types 9
Build a Static App 17
What You Learned 25
2. Create Stateful Elm Applications . . . . . . . . 27
Apply the Elm Architecture 27
Create the View 32
Handle State Changes 34
The Elm Architecture Life Cycle 43
What You Learned 45
3. Refactor and Enhance Elm Applications . . . . . . 47
Refactor with Good Practices 47
Comment on Photos 52
What You Learned 60
4. Communicate with Servers . . . . . . . . . 61
Safely Decode JSON 61
Fetch from HTTP APIs 73
What You Learned 84
5. Go Real-Time with WebSockets . . . . . . . . 85
Load Multiple Photos 85
Receive Photos from WebSockets 92
What You Learned 102
6. Build Larger Applications . . . . . . . . . 103
Organize the View 103
Contents • vi
Simplify Messages 110
Use Nested State 113
Use Extensible Records 118
Remove View Duplication 121
Prevent Invalid States 127
What You Learned 129
7. Develop, Debug, and Deploy with Powerful Tooling . . . 131
Debug Code with the Debug Module 131
Rapidly Develop and Deploy Elm Applications 142
What You Learned 152
8. Integrate with JavaScript . . . . . . . . . 153
Embed an Elm Application 153
Upload Images with Ports 159
Display Uploaded Images 167
What You Learned 173
9. Test Elm Applications . . . . . . . . . . 175
Test-Driven Development in Elm 175
What to Expect When You’re Expecting 182
Fuzz Your Tests 188
Test an Application 195
What You Learned 203
10. Build Single-Page Applications . . . . . . . . 205
Build a Skeleton SPA 205
Route to a Component Page 212
Welcome Back Picshare 217
Handle Dynamic Routes 224
What You Learned 232
11. Write Fast Applications . . . . . . . . . . 235
Benchmark Code 235
Traverse Large Lists 242
Get Lazy 249
Build Lazy Applications 255
What You Learned 263
Contents • vii
A1. Install Elm . . . . . . . . . . . . . 265
All Roads Lead to Node 265
Install the Elm Compiler 265
Install Development Tools 266
A2. Run the Local Server . . . . . . . . . . 267
Install and Run the Server 267
A3. Elm Package Versions . . . . . . . . . . 269
Install an Older Package Version 269
Bibliography . . . . . . . . . . . . 271
Index . . . . . . . . . . . . . . 273
Preface
Don’t worry; you haven’t picked up the latest gardening book (however, I can
teach you how to grow some great tomatoes). Elm is a statically typed, func-
tional programming language made for building safe front-end web applica-
tions. It compiles down to minimal JavaScript for easy deployment of your
applications to the web.
If you’re a front-end developer tired of the JavaScript framework churn or
want to build more resilient and maintainable applications, then you need to
learn Elm. This book will take you from no knowledge of Elm to creating
complex single-page applications.
Why Elm?
More and more front-end developers are choosing Elm to build applications
for benefits such as:
• No runtime exceptions in practice: Elm’s compiler catches problems early
to prevent exceptions at runtime for your users.
• No null or undefined errors: Elm offers versatile types for representing null.
The compiler also ensures you handle all possible nulls in your application.
• No JavaScript fatigue: You don’t have to choose and wire up different
frameworks and libraries to build an application. Elm has a built-in
framework for creating applications, the Elm Architecture.
• Predictable code: All Elm code is free from side effects, you can trust your
functions to always produce the same result based on their arguments.
• Immutable data types: You don’t have to worry about your code or third-
party code changing data unexpectedly and causing bugs. Your data will
be consistent and safe.
report erratum •