Elm Workshop: Day One

Braving the Pride Weekend commuter traffic, I just attended day one of Elm Workshop, presented by Richard Feldman from NoRedInk, hosted by Women Who Code, and located at Pivotal Lab (yep, a lot of people went into this). Learning a functional programming language for the first time is a truly fascinating experience, especially if one does in 8 hours straight! Most of what I learned are from the in-workshop exercise, but here are some notes for day one. Note that this is from a very compacted 8 hours course, so I can only hope I didn’t misunderstand something:

  • Compared Babel to Elm: both translates languages
  • if-else is a statement in JavaScript, but expression in Elm. The last line in a function is a return value.
  • Uses then instead of {}.
  • Arguments are separated by space.
  • Only have double equal (==). No triple equal (===). Slash equal (/=) instead of bang equal (!=).
  • When calling functions, space are used instead of parentheses. Parentheses are used for grouping, not indicating function call.
    • instead of text( pluralize (“self”, “shelves”, 5)), do text (pluralize “self” “shelves” 5)
    • in the above sample, parentheses are used to ensure the result of function pluralize is passed as argument for function text, not all 4 item (function pluralize, string “self” and “shelves”, and integer 5).
  • Elm is not good with tab – change to space.
  • String are always double quotes.
  • Pro: good in debugging. When compile, error message occurs and points developer to where the problem is.
  • Single plus (+) in Elm is resolve for arithmetic. For concatenation, double plus (++) is used.
  • For HTML output, square brackets are used for each tag, in general. Text are precedent by text. Comma help separates. For HTML output, the functions – named as HTML tags such as div – takes 2 argument: list of attributes and list of children.
    • Comma is placed at the beginning of a statement instead of end. That’s a convention in Elm to make sure commas are not forgotten.
  • List: all elements in list for Elm must be the same type of value, unlike JS.
  • Type Indication: To declare the value of a variable, add : Type Type-of-type, such as apple: List String or shelves: Html a
    • Empty list type is undefined. Calling it in various name will work. If the first type is undefined, a can be places.
    • Type indication can also indicate the return type with an arrow, such as pluralHtml : number -> Html a (Format: function: type-it-takes -> type it returns).
  • Partial Application: When a function only give partial information regarding the argument for another function.
  • List.map(: grabs the list, runs though the list and apply something.
  • Anonymous function are defined by slash ():
    • List.map(function(shelf) { return viewShelf(shelf); })
    • (List.map (shelf -> viewShelf shelf) shelves)
    • Ext-function(anoy-function-arg -> return-function/value), Ext-function-arg2
    • But we can also pass the function directly in cases where it is just a function being passed to another function.
    • List.map viewShelf shelves
  • Interactive:
    • onClick{} instead of Eventhandler
    • Msg instead of Callback
  • True/False is capitalized in Elm because it is a uni-type in Elm, unlike JavaScript which is all lowercase.
  • Record and UniType
    • Records data are called use using dot (.): model.data
    • UniType are called using case:
      • case arg of
        • uni-type-class1 uni-typevalue1-> { function or changes }
        • un-itype-class1 uni-typevalue1 -> { function or changes }
  • Debug.log: wrap it around what you want to log. Acts like console.log.
  • For imports, exposing(..) means bring everything in.
  • Pipeline Encoding: [ “list”, “items ] |> variableType.function1 /> variableType.function2  <= runs multiple function with a set of argument. ( Example: [“apple”, “orange”] /> List.reverse /> List.map String.toUpper means List.map String.toUpper(List.reverse [“apple”, “orange”]). )
  • Type Alias can take in arguments and return a record if the type alias has the variable defined by type only (the variable is not assigned values or expression)

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.