Skip to content

Instantly share code, notes, and snippets.

@stratigos
Last active September 14, 2019 00:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stratigos/81cb9fe6d03dd3eccaf8031a3c60e4a5 to your computer and use it in GitHub Desktop.
Save stratigos/81cb9fe6d03dd3eccaf8031a3c60e4a5 to your computer and use it in GitHub Desktop.
Elm Lang Guide

Elm Language Guide

  • πŸ“† 2019-07-19
  • this spans many weeks / investment times
  • πŸ“– πŸŒ³οΈπŸ•΅β€β™€οΈοΈ The Elm Language Guide
  • πŸ‘¨β€πŸ’»πŸ“οΈ an experienced OOP programmer learning FP and Elm

Installing Elm

Compared to my experiences using JavaScript over many years, I found installing
and running Elm to be fast and easy for an Ubuntu 18 development machine.

Running this step was required, and deduced from a few different github issue
comments:

sudo npm install -g elm --unsafe-perm=true --allow-root

Core Language

The elm REPL is really nice to use.

Records

  • Records vs Objects is interesting
    • you cant ask a Record for a field that does not exist
    • a Record never has an undefined or null field
    • a Record can not be made recursive with this or self keyword
      • πŸ“οΈ Elm tries to avoid systemic problems from OOP by forcing separation of
        data and logic. The ability to say this breaks this separation.
    • a Record supports structural typing
      • dont care about the names or location in call stack something was defined
      • only care that, for every a and b, the b has at least every single
        feature that a has.
        • this differs from duck typing, where one might only care that b has
          at least the current interesting features that a has.

The Elm Architecture

if you ultimately cannot use Elm at work yet, you will get a lot out of using
Elm and internalizing this pattern.

...after joining a company that provides developers with ample skill investment
time and resources 😊

Intro

The Basic Pattern

  • Model - describes the application state
  • Update - describes the ways state can be updated
  • View - represents the application state as HTML

Follow Along

There is a repository to facilitate coding along with this guide. I have made
my own fork here: 🍴

Buttons

  • see buttons code

  • skimming types

    • cool Elm has type inference
    • it helps catch bugs! πŸ›οΈ
    • actually not sure why the guide says to skim this part right now, I just want to read all the things Β―\_(ツ)_/Β―
  • types can be used to describe capabilities as data

    • e.g., a type of Increment or Decrement is a piece of data that is also describing a capability
  • so, I understand how this produces an HTML view that sends messages, but how does this program actually receive the messages? the connection is not obvious to me at a glance at this extremely simple code πŸ€”οΈ

  • Model, Update, View - the essense of The Elm Architecture ℒ️

    • 🌳️🌳️🌳️
  • I took on the programming challenge at the end, to make a Reset button. I spent a lot of time figuring out how to reassign model to 0! Like several other folks on stackoverflow, I diddnt see the = at the top of the function definition!

Text Fields

  • Im starting to wonder what Msg -> Model -> Model means for the func def πŸ€”οΈ

    • does this mean: receives a Msg and a Model and returns a Model ?
    • whats the -> mean in this context?
  • ok, the program here mainly just persists the value you type

    • the actual reversal of String is done by JS on the front end, all the Elm app does is accept a string and return it to the front end.
    • other than to highlight the change to use a Record to represent Model, I am not sure if this is a worthwhile example on its own πŸ€·β€β™€οΈοΈ

Forms

  • πŸ€”οΈ what is exposing(..)❓

    • imports all of the things πŸ™Œ
  • Forms seem pretty straightforward to me.

    • I do find that an absence of learning Elm makes remembering its styntax difficult!
  • TODO mess with the code as the example suggests!

  • cya next time!

πŸš§πŸ—πŸ‘·

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment