A gentle introduction to Elm programming language

Overview

This course aims to introduce learners to the Elm programming language. By the end of the course, students will be able to understand the basics of Elm syntax and semantics, utilize the Elm Architecture to build front-end web applications, make HTTP requests, develop single-page apps, and interact with JavaScript. The course teaches skills such as immutability, pure functions, type systems, and code organization. The teaching method includes theoretical explanations, practical examples, and hands-on coding exercises. This course is intended for beginners interested in learning a functional programming language for front-end web development.

Syllabus

Introduction Get your feet wet with Elm

01 Introduction
- Why Elm?
- Who This Book is For
- Conventions Used in This Book
- Acknowledgements
- About the Author
02 Getting Started
- Installation
- Building a Simple Web Page
- Elm Platform
- Elm Programming Language
- Elm Compiler
- Elm Architecture
- Elm Runtime
- elm make
- elm install
- elm reactor
- elm repl
- Ellie
- Conclusion

Syntax & Semantics Learn Elm from the ground up

03 Elm Language Basics
- Simple Arithmetic
- Boolean
- Comparison
- Comments
- Expression
- Value
- Constant
- If Expression
- Function
- Let Expression
- Case Expression
- Indentation
- String
- Regular Expression
- List
- Array
- Tuple
- Record
- Conclusion
04 Benefits of Using Elm
- Immutability
- Pure Functions
- Solving Complex Problems with Simple Functions
- Easy to Test
- Type System
- Easier Code Organization
- Fuzz Testing
- Pattern Matching
- Conclusion

Architecture Understand how the Elm Architecture helps us build robust front-end web applications

05 Elm Architecture
- Model View Update - Part 1
- Virtual DOM
- Model View Update - Part 2
- Side Effects
- Commands
- Conclusion
06 HTTP Requests
- Fetching Data Using GET
- Decoding JSON - Part 1
- Decoding JSON - Part 2
- RemoteData
- Retrieving Data on Initialization
- Conclusion
07 Single-Page Apps
- What is a Single-Page App?
- Restructuring Code
- Creating Post Module
- Creating List Posts Page
- Navigating to List Posts Page
- Editing a Post
- Deleting a Post
- Creating a New Post
- Conclusion
08 Interact with JavaScript
- Sending Data to JavaScript
- Subscriptions
- Receiving Data from JavaScript
- Protecting Boundaries between Elm and JavaScript
- Saving App State in Local Storage
- Retrieving App State from Local Storage
- Interacting with Web Components
- Conclusion
- Where To Go From Here?