Elm in Action

Richard Feldman

• Publisher: Manning
• Year: 2020
• ISBN:
  9781638355885
• Topic: Computer Science
• Subtopic: Web Programming
• Index: Computer Science

Summary
Elm is more than just a cutting-edge programming language, it's a chance to upgrade the way you think about building web applications. Once you get comfortable with Elm's refreshingly different approach to application development, you'll be working with a clean syntax, dependable libraries, and a delightful compiler that essentially eliminates runtime exceptions. Elm compiles to JavaScript, so your code runs in any browser, and Elm's best-in-class rendering speed will knock your socks off. Let's get started!Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications. About the technology
Simply put, the Elm programming language transforms the way you think about frontend web development.Elm's legendary compiler is an incredible assistant, giving you the precise and user-friendly support you need to work efficiently. Elm applications have small bundle sizes that run faster than JavaScript frameworks and are famously easy to maintain as they grow. The catch? Elm isn't JavaScript, so you'll have some new skills to learn. About the book
Elm in Action teaches you the Elm language along with a new approach to coding frontend applications. Chapter by chapter, you'll create a full-featured photo-browsing app, learning as you go about Elm's modular architecture, Elm testing, and how to work seamlessly with your favorite JavaScript libraries. You'll especially appreciate author and Elm core team member Richard Feldman's unique insights, based on his thousands of hours writing production code in Elm. When you're done, you'll have a toolbox of new development skills and a stunning web app for your portfolio. What's inside Scalable design for production web applications
Single-page applications in Elm
Data modeling in Elm
Accessing JavaScript from ElmAbout the reader
For web developers with no prior experience in Elm or functional programming. About the author
Richard Feldman is a software engineer at NoRedInk and a well-known member of the Elm community.Table of ContentsPART 1 - GETTING STARTED1. Welcome to Elm2. Your first Elm application3. Compiler as assistantPART 2 - PRODUCTION-GRADE ELM4. Talking to servers5. Talking to JavaScript6. TestingPART 3 - BUILDING BIGGER7. Data modeling8. Single-page applications

Part 1. Getting started

The first three chapters cover the fundamentals of building a user interface in Elm. By the end of chapter 3, you’ll have built a basic Elm application from scratch, having learned how to read and write Elm syntax, use The Elm Architecture to build interactive user interfaces, and leverage Elm’s compiler to get strong guarantees about your code.

Chapter 1 introduces the basics of Elm syntax and some basic operations. It focuses on small, self-contained examples and shows you how to run them. It sets the stage for chapter 2, where you begin by rendering a single page in the browser, and then make it interactive using The Elm Architecture.

Finally, chapter 3 builds on the application you wrote in chapter 2. You’ll extend it by adding some documentation and new functionality, learning some helpful techniques that will come in handy throughout the rest of the book. Once you complete chapter 3, you’ll know enough to be able to build a basic Elm project on your own

Chapter 1. Welcome to Elm

This chapter covers:

• Introducing Elm to a project
• Using elm repl
• Building expressions
• Writing and importing functions
• Working with collections

Back in 2014, I set out to rewrite a side project and ended up with a new favorite programming language. Not only was the rewritten code faster, more reliable, and easier to maintain, but writing it was the most fun I’d had in over a decade of writing code. Ever since that project, I’ve been hooked on Elm.

The rewrite in question was a writing application I’d built even longer ago, in 2011. Having tried out several writing apps over the course of writing a novel, and being satisfied with none, I decided to scratch my own itch and build my dream writing app. I called it Dreamwriter.

For those keeping score: yes, I was indeed writing code in order to write prose better.

Things went well at first. I built the basic web app, started using it, and iterated on the design. Months later I’d written over fifty thousand words in Dreamwriter. If I’d been satisfied with that early design, the story might have ended there. However, users always want a better experience—and when the user and the developer are the same person, further iteration is inevitable.

The more I revised Dreamwriter, the more difficult it became to maintain. I’d spend hours trying to reproduce bugs that knocked me out of my writing groove. At some point, the copy and paste functions stopped working, and I found myself resorting to the browser’s developer tools whenever I needed to move paragraphs around.

Right around when I’d decided to scrap my unreliable code base and do a full rewrite, a blog post crossed my radar. After reading it, I knew three things:

• The Elm programming language compiled to JavaScript, just like Babel or TypeScript. (I already had a compile step in my build script, so this was familiar territory.)
• Elm used the same rendering approach as React.js—which I had recently grown to love—except Elm had rendering benchmarks that outperformed React’s!
• Elm’s compiler would catch a lot of the errors I’d been seeing before they could harm me in production. I did not yet know just how many it would catch.

I’d never built anything with a functional programming language like Elm before, but I decided to take the plunge. I didn’t really know what I was doing, but the compiler’s helpful error messages kept picking me up whenever I stumbled. Eventually, I got the revised version up and running, and began to refactor.

The refactoring experience blew me away. I revised the Elm-powered Dreamwriter gleefully, even recklessly—and no matter how dramatic my changes, the compiler always had my back. It would point out whatever corner cases I’d missed, and I’d go through and fix them. As soon as the code compiled, lo and behold, everything worked again. I felt invincible.

I related my Elm experience to my coworkers at NoRedInk, and they were curious but understandably cautious. How could we find out if the team liked it without taking a big risk? A full rewrite may have been fine for Dreamwriter, but it would have been irresponsible to attempt that for our company’s entire frontend.

So we introduced Elm gently, by rewriting just one portion of one production feature in Elm. It went well, so we did a bit more. And then more.

Today our frontend programmers code almost exclusively in Elm, and our team has never been happier. Our test suites are smaller, yet our product is more reliable. Our feature set has grown more complex, yet refactoring remains delightful. We swap stories with other companies using Elm about how long our production code has run without throwing a runtime exception. In this book, we’ll explore all of these benefi...