Elm in Action

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 Elm About 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 Contents PART 1 - GETTING STARTED 1. Welcome to Elm 2. Your first Elm application 3. Compiler as assistant PART 2 - PRODUCTION-GRADE ELM 4. Talking to servers 5. Talking to JavaScript 6. Testing PART 3 - BUILDING BIGGER 7. Data modeling 8. Single-page applications Elm in Action contents preface acknowledgments about this book Who should read this book How this book is organized: a roadmap About the code liveBook discussion forum Other online resources about the author about the cover illustration Turkey/Ottoman Empire collection brief contents Part 1 Getting started 1 Welcome to Elm 1.1 How Elm fits in 1.2 Expressions 1.2.1 Using elm repl 1.2.2 Building expressions 1.2.3 Booleans and conditionals 1.3 Functions 1.3.1 Defining functions 1.3.2 Importing functions 1.3.3 Creating scope with let-expressions 1.3.4 Anonymous functions 1.3.5 Operators 1.4 Collections 1.4.1 Lists 1.4.2 Records 1.4.3 Tuples Summary 2 Your first Elm application 2.1 Rendering a page 2.1.1 Describing a page using the Html module 2.1.2 Building a project 2.2 Handling user input with The Elm Architecture 2.2.1 Representing application state with a model 2.2.2 Handling events with messages and updates Summary 3 Compiler as assistant 3.1 Documenting guarantees with type annotations 3.1.1 Adding optional type annotations 3.1.2 Annotating functions with type variables 3.1.3 Reusing annotations with type aliases 3.1.4 Annotating longer functions 3.2 Using case-expressions and custom types 3.2.1 Using case-expressions 3.2.2 Enumerating possibilities with custom types 3.2.3 Holding data in custom types 3.2.4 Representing flexible messages with custom types 3.3 Generating random numbers with commands 3.3.1 Describing random values with Random.Generator 3.3.2 Introducing commands to The Elm Architecture 3.3.3 Generating random values with Random.generate Summary Part 2 Production-grade Elm 4 Talking to servers 4.1 Preparing for server-loaded data 4.1.1 Modeling incremental initialization 4.1.2 Resolving data dependencies 4.2 Fetching data from a server 4.2.1 Describing HTTP requests 4.2.2 Sending HTTP requests 4.3 Decoding JSON 4.3.1 Decoding JSON strings into results 4.3.2 Decoding JSON collections 4.3.3 Decoding JSON HTTP responses Summary 5 Talking to JavaScript 5.1 Using custom elements 5.1.1 Importing custom elements 5.1.2 Handling custom events 5.1.3 Responding to slider changes 5.2 Sending data to JavaScript 5.2.1 Creating a command by using a port 5.2.2 Receiving data from Elm 5.2.3 Timing DOM updates 5.3 Receiving data from JavaScript 5.3.1 Receiving real-time data from JavaScript via ports 5.3.2 Receiving initialization arguments via flags Summary 6 Testing 6.1 Writing unit tests 6.1.1 Introducing tests 6.1.2 Unit testing a JSON decoder 6.1.3 Narrowing test scope 6.2 Writing fuzz tests 6.2.1 Converting unit tests to fuzz tests 6.2.2 Testing update functions 6.2.3 Creating multiple tests with one function 6.3 Testing views 6.3.1 Testing DOM structure 6.3.2 Fuzzing view tests 6.3.3 Testing user interactions Summary Part 3 Building bigger 7 Data modeling 7.1 Storing values by keys in dictionaries 7.1.1 Setting up the page 7.1.2 Storing photos by URL in a dictionary 7.2 Modeling trees by using recursive custom types 7.2.1 Defining trees by using custom types 7.2.2 Recursive messages 7.2.3 Event handlers with recursive messages 7.3 Decoding graphs and trees 7.3.1 Decoding dictionaries 7.3.2 Decoding recursive JSON 7.3.3 Accumulating while decoding Summary 8 Single-page applications 8.1 Framing the page 8.1.1 Creating Main.elm 8.1.2 Rendering the header and footer 8.1.3 Skipping unnecessary renders with Html.Lazy 8.2 Routing 8.2.1 Handling the initial URL 8.2.2 Parsing URL paths 8.2.3 Handing URL changes 8.3 Delegating pages 8.3.1 Revising module structure 8.3.2 Initializing page states 8.3.3 Delegating page logic Summary appendix A Getting set up A.1 Installing Node.js and NPM A.2 Installing command-line tools A.3 Obtaining the Elm in Action repository A.4 Installing recommended optional tools appendix B Installing Elm packages B.1 Direct and indirect dependencies B.2 Semantic versioning in packages B.2.1 Semantic versioning enforced B.2.2 Browsing package documentation B.3 Example: Installing elm/url appendix C Html.Lazy’s change check C.1 lazy’s check for strings and numbers C.2 lazy’s check for everything else C.3 When memory locations stay the same C.3.1 Memory locations for collections C.3.2 Memory locations across updates C.3.3 Memory locations for functions C.3.4 Named top-level functions always keep the same memory location index Symbols A B C D E F G H I J K L M N O P Q R S T U V W Elm in Action - back Elm is more than just a cutting-edge programming language, its a chance to upgrade the way you think about building web applications. Once you get comfortable with Elms refreshingly different approach to application development, youll 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 Elms best-in-class rendering speed will knock your socks off. Lets get started! Simply put, the Elm programming language transforms the way you think about frontend web development. Elms 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 isnt JavaScript, so youll have some new skills to learn. Elm in Action teaches you how to build well-designed, highly performant web applications using the Elm language. As you read, youll follow an application called Photo Groove that will show you how to structure your applications domain and behavior, how to maintain a pleasantly modular architecture, and how to deliver a quality product using the Elm language. Along the way, youll learn how to interact smoothly with browser functionality, servers, and JavaScript libraries, as well and picking up a few tricks for building fluid, intuitive user experiences. If youre new to functional programming, youll also gain a practical understanding of techniques that will make you a better developer no matter what youre writing! Elm is more than just a cutting-edge programming language, it's a chance to upgrade the way developers think about building web applications. Elm in Action teaches readers how to build well-designed, highly performant web applications using the Elm language. As they read, they'll follow an application called Photo Groove that will show them how to structure their application's domain and behavior, how to maintain a pleasantly modular architecture, and how to deliver a quality product using the Elm language.