https://github.com/halfzebra/web-development-with-elm

📖 Course materials for my course on Web Development with Elm
https://github.com/halfzebra/web-development-with-elm

course-materials elm

Last synced: 5 months ago
JSON representation

📖 Course materials for my course on Web Development with Elm

• Host: GitHub
• URL: https://github.com/halfzebra/web-development-with-elm
• Owner: halfzebra
• Created: 2017-08-10T23:14:49.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-06-24T12:57:16.000Z (over 7 years ago)
• Last Synced: 2025-04-03T01:41:29.770Z (6 months ago)
• Topics: course-materials, elm
• Language: Elm
• Homepage: https://www.packtpub.com/web-development/web-development-elm-programming-video
• Size: 91.8 KB
• Stars: 13
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Web Development with Elm [![Build Status](https://travis-ci.org/halfzebra/web-development-with-elm.svg?branch=master)](https://travis-ci.org/halfzebra/web-development-with-elm)

## 1. Elm: Installation and Building the first project

In the first section, we will cover the basic syntax features of functional programming language, core data types, and persistent data structures. You will learn the core ideas behind Elm’s type system and how Type inference helps to prevent the runtime errors. In the last couple videos, we will look into module system and the built-in module for rendering HTML and inline CSS.

  1. [Starting-up with your first Elm App](/1-1-starting-up-with-your-first-elm-app/README.md)

  2. [Get familiar with Elm syntax](/1-2-get-familiar-with-elm-syntax/src/Main.elm)

  3. [Expressing the Model with Built-in Data types](/1-3-expressing-the-model-with-built-in-data-types/src/Main.elm)

  4. [Persistent data structures in Elm](/1-4-persistent-data-structures-in-elm/src/Main.elm)

  5. [Elm’s Type system and Type inference](/1-5-elms-type-system-and-type-inference/src/Main.elm)

  6. [Maybe and the Result data types](/1-6-maybe-and-result-data-types/src/Main.elm)

  7. [Module system in Elm](/1-7-module-system-in-elm/src/Main.elm)

  8. [Rendering the Model with HTML and CSS](/1-8-rendering-the-model-with-html-and-css/src/Main.elm#L28)

  

## 2. Architecting Webapps: The Elm Architecture

The second section focuses on Elm Architecture and stateful applications written in a purely functional language. You will learn to build interactive user interfaces with Beginner program. We will introduce the concept side effects required for performing I/O operations in Elm.  

The second half of the section focuses on Json.Decode and Json.Encode modules for ensuring the type safety in runtime, while performing I/O operations.

  1. [Introducing Side effects with Beginner program](/2-1-introducing-side-effects-with-beginner-program/src/Main.elm)

  2. [Tasks for asynchronous computations](/2-2-tasks-for-asynchronous-computations)

  3. [Executing the Program with Commands](/2-3-executing-the-program-with-commands/src)  

  4. [Manage the initial application state with Program with Flags](/2-4-manage-the-initial-application-state-with-program-with-flags/src)

  5. [Communication with the Server](/2-5-communication-with-the-server)

  6. [Encoding and Decoding JSON](/2-6-encoding-and-decoding-json)

  7. [Talking to JavaScript](/2-7-talking-to-javascript)

  

## 3. Explore The Elm Tooling

This section outlines core development tools you will use for application development. We will look into Elm’s package manager and learn about available open-source packages. In the second half, you will get familiar with the basic principles of testing Elm code. The final video covers elm-css module, which allows you to write Type safe CSS.

  1. [Development tools: elm-format, Time Traveling Debugger and elm-reactor](/3-1-development-tools-elm-format-time-traveling-debugger-and-elm-reactor/README.md)

  2. [Package manager and open-source packages](/3-2-package-manager-and-open-source-packages/README.md)

  3. [Testing your modules](/3-3-testing-your-modules/tests)

  4. [Type safe CSS with elm-css](/3-4-type-safe-css-with-elm-css/)

  

## 4. Going Further with Elm

This section outlines core development tools you will use for application development. We will look into Elm’s package manager and learn about available open-source packages. In the second half, you will get familiar with the basic principles of testing Elm code. The final video covers elm-css module, which allows you to write Type safe CSS.

  1. [Encapsulation and Code Organization](/4-1-encapsulation-and-code-organization/src/Data)

  2. [Managing the Messages with Tagger](/4-2-managing-the-messages-with-tagger/src/Main.elm#L136)

  3. [Rendering performance optimizations with Html.Lazy](/4-3-rendering-performance-optimizations-with-html-lazy/src/Main.elm#L209)