elm • Created in 2012 Evan Czaplicki • Web and UI focused • Compiles to JavaScript • Influences: Haskell, SML, OCaml, F# • Functional • Statically Typed
The argument to function `greet` is causing a mismatch. 11| greet 42 ^^ Function `greet` is expecting the argument to be: String But it is: number Compile time static type checks
Plan 9:00 - 9:15 Intro 9:15 - 9:45 Code: Syntax and Functional Programming 9:45 - 9:55 The Elm Architecture 9:55 - 10:30 Code: Building a Todo List 10:30 - 11:00 Code: Exercise and Break 11:00 - 11:10 HTTP: Commands and Decoders 11:10 - 11:45 Code: Fetching a GitHub User 11:45 - 12:00 Code: Exercise 12:00 - 12:15 Code: Components 12:15 - 12:30 Wrap Up
View Model Notice missing item in virtual DOM list, so just remove corresponding . elm Virtual DOM Todo List Build awesome Elm apps Learn functional programming
Exercise(s) • Allow adding new todo items. • Underneath todo list add a button to add a new todo item to the todo list. • The new todo item should have a blank description and should start off in an Editing state. • Hint: you’ll probably want the :: or ++ operators. • Allow deleting todo items. • Add delete button next to edit button. • Hint: editing/saving/completing required List.map. Deletion will require List.filter. • Allow marking a complete todo item as incomplete.
Exercise(s) • Add a loading screen. • Display something like “Fetching user …” • Hint: what state should you update and when? • Display another field or two for the user. • Hint: Remember to update the User type and the userDecoder. • Decode GitHub error messages. • Use login nouser for testing. • Hint: you need to decode response.body in the Http.BadStatus branch. • Hint: you’ll probably want the decodeString and field functions from: package.elm-lang.org/packages/elm-lang/core/5.1.1/Json-Decode
Components vs. Flat Structure • Components • Pros • Perfect for independent, reusable applications • Single-page applications • Cons • Nested complexity • More boilerplate • Cumbersome parent-child communication • Flat Structure • Flatter state • Use function and module helpers • Pros • No parent-child communication ceremony • Easier to follow flow of application • Cons • Larger models • More Msg values