Programming Elm

Build Safe and Maintainable Front-End Applications

by Jeremy Fairbank

Elm brings the safety and stability of functional programing to front-end development, making it one of the most popular new languages. Elm’s functional nature and static typing means that runtime errors are nearly impossible, and it compiles to JavaScript for easy web deployment. This book helps you take advantage of this new language in your web site development. Learn how the Elm Architecture will help you create fast applications. Discover how to integrate Elm with JavaScript so you can update legacy applications. See how Elm tooling makes deployment quicker and easier.

Functional programming offers safer applications with fewer runtime errors, but functional solutions that are type-safe and easy to use have been hard to find, until the Elm language. Elm has the benefits of functional languages while compiling to JavaScript. This book provides a complete tutorial for the Elm language, starting with a simple static application that introduces Elm syntax, modules, and the virtual DOM, to exploring how to create a UI using functions. See how Elm handles the issues of state in functional languages. You’ll continue to build up larger applications involving HTTP requests for communication. Integrate your Elm applications with JavaScript so you can update legacy applications or take advantage of JavaScript resources.

Elm also provides built-in tooling to alleviate the tooling creep that’s so common in JavaScript. This book covers Elm’s deployment and testing tools that ease development confusion. Dive into advanced concepts including creating single-page applications, and creating performance improvements. Elm expert Jeremy Fairbank brings his years of web development experience to teaching how to use Elm for front-end development.

Your web UIs will be faster, safer, and easier to develop with Elm and this tutorial.

• Errata, typos, suggestions

• Source Code (zip file)

Releases:

• P3.0 2020/04/21
• P2.0 2019/10/25
• P1.0 2019/07/01
• B18.0 2019/06/21

• Preface
  • Why Elm?
  • Who Is This Book For?
  • What’s In This Book?
  • How to Read This Book
  • Online Resources
  • Acknowledgements
• Get Started with Elm
  • Get Started with Functions
  • Use Static Types
  • Build a Static App
  • What You Learned
• Create Stateful Elm Applications
  • Apply the Elm Architecture excerpt
  • Create the View
  • Handle State Changes
  • The Elm Architecture Life Cycle
  • What You Learned
• Refactor and Enhance Elm Applications
  • Refactor with Good Practices
  • Comment on Photos
  • What You Learned
• Communicate with Servers
  • Safely Decode JSON excerpt
  • Fetch from HTTP APIs
  • What You Learned
• Go Real-Time with WebSockets
  • Load Multiple Photos
  • Receive Photos from WebSockets
  • What You Learned
• Build Larger Applications
  • Organize the View
  • Simplify Messages
  • Use Nested State
  • Use Extensible Records
  • Remove View Duplication
  • Prevent Invalid States
  • What You Learned
• Develop, Debug, and Deploy with Powerful Tooling
  • Debug Code with the Debug Module
  • Rapidly Develop and Deploy Elm Applications
  • What You Learned
• Integrate with JavaScript
  • Embed an Elm Application
  • Upload Images with Ports
  • Display Uploaded Images
  • What You Learned
• Test Elm Applications
  • Test-Driven Development in Elm
  • What to Expect When You’re Expecting
  • Fuzz Your Tests
  • Test an Application
  • What You Learned
• Build Single-Page Applications
  • Build a Skeleton SPA
  • Route to a Component Page
  • Welcome Back Picshare
  • Handle Dynamic Routes
  • What You Learned
• Write Fast Applications
  • Benchmark Code
  • Traverse Large Lists
  • Get Lazy
  • Build Lazy Applications
  • What You Learned
• Install Elm
  • All Roads Lead to Node
  • Install the Elm Compiler
  • Install Development Tools
• Run the Local Server
  • Install and Run the Server
• Elm Package Versions
  • Install an Older Package Version