This work is licensed under the Creative Commons Attribution 4.0 International License.

Portions of this repository have been adapted from Richard Feldman's Elm Workshop.

Also, some of the setup verfication ideas were adapted from this repository: Elm Curriculum

Introduction to Elm (Workshop)

Elm is a functional programming language for front-end web development. Elm has been gaining popularity as it aims to solve many of the main pain points of the modern JavaScript developer.

In this workshop, participants will be introduced to the Elm programming language and will build a small Elm app from the ground up. We assume prior knowledge only of JavaScript or another imperative or object-oriented language.

At the end of this course, you will be able to:

• Build an working Elm web app (Live Demo) of the app we'll be building)

To achieve that goal, we will cover:

Syntax

Participants will learn about Elm's syntax and core data structures. We’ll also compare Elm’s syntax to JavaScript.

The Elm Architecture

We’ll learn about Elm’s built in architecture and how it eliminates the need for a separate framework.

Data Modelling

Participants will learn about (and implement) Elm data structures to model their application.

Working with back-end JSON APIs

Here participants will add connectivity to their app by sending a request to the app’s API and processing the response.

We'll also learn about how JSON decoders and encoders are used to transform and process JSON data to and from concrete Elm data structures.

Displaying Data

In this section, participants will learn about how to create "View" code that displays their data on the screen.

Handling User Interaction with Messages

In this section, we'll finish creating our app by wiring up event handling for our app's user interaction.

Next Steps and Questions and Answers

In the final section, we'll briefly cover some things that are important but are out of the scope of the initial workshop such as:

• Interop with JavaScript
• Elm's Compiler
• Adding visual feedback for "loading", "success", "error" states etc.
• Using libraries like elm-bootstrap to simplify the development process
• Embedding an Elm app into an existing page/app
• Techniques for scaling
• Passing in flags upon app start up
• Testing in Elm

Requirements

For this class, you will need to bring and prepare:

• A laptop with internet access (we'll have WiFi access at the events)

• A GitHub account https://github.com

• A way to quickly clone GitHub repos (command line, SourceTree, GitHub Desktop, etc.)

  git installers: https://git-scm.com/downloads

Setup

Before the workshop, you'll want to make sure that your environment and project are setup.

Follow the steps at the following link to accomplish this: Setup and Verification Page