Elm Learning Trail (2020-03-10). . . Gratefully Copied From 8th Light Internal

elm-learning-trail-2020-03-10.md

Shared by some nice humans over @ 8th Light

Elm

'A delightful language for reliable web apps' - A statically typed, pure functional language for building web user interfaces.

Level 1

• Read the core language section of the elm-lang guide https://guide.elm-lang.org/core_language.html
• Setup an Elm project locally
• Complete the Button, Text Fields and Form section of the elm-lang guide https://guide.elm-lang.org/architecture/
• Complete some of the "easy" exercises on the Exercism Elm track https://exercism.io/tracks/elm

You should be able to

• Run an elm program in your browser
• Understand how to start reading the compiler messages
• Create small programs which can handle user interaction / input
• Use elm test to run tests

Level 2

• Read the Types and Error handling sections in the elm-lang guide https://guide.elm-lang.org/types/
• Make a HTTP request and Decode its response into Elm data
• Write a program that 'rolls a dice' (dealing with Randomness in a pure language) https://guide.elm-lang.org/effects/random.html
• Subscribe to the current time and display it https://guide.elm-lang.org/effects/time.html

You should be able to

• Understand, create and use some custom types (this is by far the most important and useful concept in Elm!)
• Have a basic understanding of making Http requests and decoding JSON
• Use commands (i.e. Http and Random) and subscriptions (Time) to handle effects in an elm program
• Understand the difference between constructor functions (term level) and types (type level)

Level 3

• Create a TODO list app
  • implement CRUD operations on a TODO
  • filter TODOs by active or completed
  • record the time they were created / completed
  • Bonus: Save TODOs to localStorage https://guide.elm-lang.org/interop/ports.html
• Watch the life of a file https://www.youtube.com/watch?v=XpDsk374LDE
• Watch making data structures https://www.youtube.com/watch?v=x1FU3e0sT1I
• Watch making impossible states impossible https://www.youtube.com/watch?v=IcgmSRJHu_8

You should be able to

• Structure a small application
• Understand how to use custom types to express and restrict possible application states

Level 4

• Read the WebApps section of the elm lang guide https://guide.elm-lang.org/webapps/
• Use Browser.application to build an app that matches URLs with separate Page modules
• Explore the frontend for the elm-package-website to seen an example of a larger elm application
• Explore elm-spa-example as another example of a larger Elm application

You should be able to

• Understand the basics of building a Single Page App in Elm
• Understand how to carve out an Elm application into page modules
• Understand the tradeoffs of doing this too early

Some Further Reading / Videos (highly recommended!)

• Extensible Records: https://medium.com/@ckoster22/advanced-types-in-elm-extensible-records-67e9d804030d
• Opaque Types: https://medium.com/@ckoster22/advanced-types-in-elm-opaque-types-ec5ec3b84ed2
• Scaling Elm Apps: https://www.youtube.com/watch?v=DoA4Txr4GUs

Level 5

• Use elm-ui to build a clone of the slack UI https://korban.net/posts/elm/2019-11-17-elm-ui-introduction/
• Read Type-Safe & Composable GraphQL in Elm https://medium.com/open-graphql/type-safe-composable-graphql-in-elm-b3378cc8d021
• Implement a realtime slack clone using graphql and elm-ui (For an instant realtime graphql server over postgres, check out https://hasura.io/)

You should be able to

• Build a complex web application in Elm
• Appreciate the ease of building type safe layouts without CSS!
• Use autogenerated types to build graphql queries

Advanced Types

• Phantom Types: https://medium.com/@ckoster22/advanced-types-in-elm-phantom-types-808044c5946d
• Recursive Types: https://elmprogramming.com/type-system.html#recursive-types
• The Never Type: https://medium.com/@ckoster22/advanced-types-in-elm-the-never-type-ca9b3297bbd4