robertknight

Elm Tutorial Notes

1. Went to elm-lang hopepage, skimmed the initial instructions, went for the Install option so I could develop in my preferred editor (Atom).
2. Not obvious where to go next after that, went to the Docs link at the top. Was expecting to find an 'Intro to Elm' guide. In lieu of that, picked the next most obvious thing which was walking through the Quick Start links.

berndca

import StartApp
import Http
import Markdown
import Html exposing (Html, div, button, text)
import Html.Events exposing (onClick)
import Task exposing (Task)
import Effects exposing (Effects)

-- the URL of the README.md that we desire
readmeUrl : String

staltz

How to show migration guides in GitHub Markdown

Use the diff code highlighting tag.

  ```diff
  - foo
  + bar

Example:

jvoigtlaender

module Main where

import Signal
import Time exposing (Time, millisecond)
import String

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Effects exposing (Never, Effects)

manigandham

Strictly Frameworks

• Mobiledoc - github.com/bustle/mobiledoc-kit - framework to build editors with a standardized JSON structure
• ShareDB - github.com/share/sharedb - framework to sync any JSON document using operational transforms, add real-time collaborative editing to anything else
• Bangle.dev - github.com/bangle-io/bangle.dev - toolkit built for building editors, based on prosemirror

Abstracted Editors

These use separate document structures instead of HTML, some are more modular libraries than full editors

JoshCheek

Learning Elm

What is it? (20 min)

Glance through a few of the examples, maybe 5 or so, to see what kinds of things Elm is doing, what domains they're in, what the code looks like, what other people think Elm is.

JoeyEremondi

-- interface is a more familiar name for the intention of the construct
type alias Append a rest = { rest | append : a -> a -> a}


-- implement is a more familiar name
stringAppend rest = {rest | append = \x y -> x ++ y}

-- this is Monoid
type alias AppendWithId a rest = Append a {rest | id : a}
--                ^ 1 potential superclass

mgold

module SuperTimer where

import Html exposing (..)
import Html.Events exposing (onClick)
import Time exposing (Time)
import Signal exposing (Address)

type Action = Tick Time | Toggle Bool | NoOp

type alias Model = { running: Bool, count: Float}

yang-wei

Should be work with 0.18

Destructuring(or pattern matching) is a way used to extract data from a data structure(tuple, list, record) that mirros the construction. Compare to other languages, Elm support much less destructuring but let's see what it got !

Tuple

myTuple = ("A", "B", "C")
myNestedTuple = ("A", "B", "C", ("X", "Y", "Z"))

yang-wei

When receiving JSON data from other resources(server API etc), we need Json.Decode to convert the JSON values into Elm values. This gist let you quickly learn how to do that.

I like to follow working example code so this is how the boilerplate will look like:

import Graphics.Element exposing (Element, show)
import Task exposing (Task, andThen)
import Json.Decode exposing (Decoder, int, string, object3, (:=))

import Http