 Resources from Murphy Randle in 2021

Elm is a beginner friendly functional reactive programming language for building web applications. It contains a small but powerful set of language constructs, such as, static types, algebraic data types, immutability, and pure functions. Elm provides and requires the use of a specific architecture that’s well suited for sensible application construction. Elm’s type system and architecture may feel constraining at first, but they ultimately provide the programmer with some neat benefits including comprehensible code, and a much improved refactoring experience.

In this course you will learn the basic fundamentals of Elm so that you can start building applications today.

Elm is a programming language that provides a clean functional syntax for writing HTML web applications. It promises zero runtime exceptions, fast rendering, time-travel debugging, and much more.

Start Using Elm to Build Web Applications

Node.js is a well established server runtime that many companies are using worldwide. Express.js is a server framework for Node.js used by over 5 million projects. ReasonML is a type-safe functional language that compiles to Javascript.

This playlist collects the basic pieces of information a programmer needs to get started building servers in ReasonML on Node.js and Express.js. Follow along to learn how to get the speed of Node, combined with the added type-safety of Reason.

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

node

Making an HTTP server in ReasonML on top of Node.js

Simple, fast & type safe code that leverages the JavaScript & OCaml ecosystems.

reason

ReasonML is a fantastic way to write Javascript! But it doesn't yet have a built-in async / await syntax. Furthermore the built-in libraries for working with Javascript promises are awkward to work with, and produce code that's hard to read. This lesson will teach the viewer how to use the "bs-let" language extension (called a PPX) to achieve readable, easy to write promise-based code.

Async / Await in ReasonML

Although ReasonML has built-in libraries for working with JSON, they are low-level and difficult to use by hand. The Decco library offers automatically generated JSON decoders, and produce a result that keeps the programmer safe at runtime by telling them whether the data they got matched the shape of the data they expected. 

Automatically decode JSON into records in ReasonML using Decco

This lesson shows how the Serbet server library for ReasonML and Node.js makes handling JSON request bodies, and responding with JSON request bodies a simple task.

Handle JSON request bodies and send JSON responses from a Node.js server using ReasonML

Decco is a great library for automatically generating JSON encoders and decoders, but most real-world projects will quickly run into the need to add custom data types that Decco doesn't ship with support for. This lesson shows how to simply add a custom data type by implementing a codec that reads and writes Javascript dates as floats.

Write a simple custom JSON decoder for Decco in ReasonML

Decco is a language extension that automatically generates JSON encoders and decoders from type signatures. When adding adding custom Decoders, the error messages that the compiler produces can be quite confusing. This lesson shows the viewer how to use explicit type signatures to narrow down where an error might be coming from in custom codec code. This same pattern can be applied whenever confusing error messages come from code that is written without explicit type signatures.

Working with cryptic error messages from ReasonML when writing custom Decco decoders.

This lesson shows how to use the `serbet` npm package to write a simple Node.js http server in ReasonML by implementing a simple "hello world" endpoint. Serbet is a convenient wrapper around Express.js. It's a young library, but its patterns are already used in production code.

Make a basic server with ReasonML and Node.js

Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.

tailwind

This lessons shows how to dynamically add a red border to an input when a validation error pops occurs using ReasonReact, Tailwind, and re-classnames.

Dynamically style an input border with Tailwind and ReasonReact

Getting Elm installed. We will install the Elm CLI with npm. This gives us access to `elm-repl` and `elm-reactor`. The repl lets us play with expressions at the command-line, and reactor starts a development server which builds Elm files on-demand.

Install the Elm Platform command-line tools

This lesson shows a super simple, yet pleasant, look at the smallest Elm example. We will use the text function from the Html module to display text in a browser.


Output text in a browser using the text function in Elm

A record is a set of key-value pairs, similar to objects in Javascript. Record fields can be accessed through dot-notation, or special access functions. Records are fully type-checked and can be described by type aliases.

Store key-value pairs using Records in Elm

Functions are one of the core building blocks of Elm. In this lesson we learn how to define, call, pass parameters, receive parameters, partially apply functions, compose functions, and add correct type signatures. In this lesson we will show how to define functions with type signatures.

Write functions and Type Signatures in Elm

Elm provides a declarative way to produce DOM elements and react to DOM events, similar to HTML. Learn how to get Web content on the screen by writing functions that take in data and return Elm’s version of HTML.

Render HTML in the browser using the Html module in Elm

Sometimes a function is useful for many different types. Instead of writing a copy of that function for each different type, learn to use type variables and allow the same function to be reused.

Reuse Functions Through Type Variables in Elm

Elm is designed specifically for building applications, and it is built around a scalable and sensible application architecture. Learn the very basics of this architecture through updating application state by reacting to DOM events.

Create Apps Using the Elm Application Architecture

Elm comes with an index of publicly-usable open-source packages. Using packages from this index can substantially improve a developer’s experience. Learn how to find a package through the index, understand its API through type annotations and documentation, download it, and use it in a project.

Elm packages aren't working with embedded **Ellie**, so I've provided you with a link to the Ellie example [here](https://ellie-app.com/nNVB6RrbZa1/9). 

Discover New Packages Using the Elm Package Index

Elm includes a data type called `Maybe` which is useful for working with values that may, or may not exist. This lesson shows a simple case where maybe types are encountered, and how to make them useful.

Using "Maybe" in Elm for values that may or may not exist

The Hypertext Transfer Protocol (HTTP) is an application-level protocol for distributed, collaborative, hypermedia information systems. It is a generic, stateless, protocol which can be used for many tasks beyond its use for hypertext, such as name servers and distributed object management systems, through extension of its request methods, error codes and headers.

http

Understand the three basic parts of making HTTP requests in Elm: 1) Building the request, 2) Writing a JSON decoder, 3) Sending the request using the Elm runtime, and reacting to the results with messages.

HTTP requests are just pieces of data in Elm. When we want to send them, we hand them off to Elm's runtime, and it notifies us when the request is done. An important part of working with HTTP requests that fetch JSON is JSON decoding, the process by which we can turn untyped JSON data into Elm types that are safe to work with.

Specs:

- Editor: Atom
- Theme: [Nebula (with Nebula syntax theme)](https://atom.io/themes/nebula-ui)
- Font: [Iosevka with ligatures enabled](https://github.com/be5invis/Iosevka)
- Plugin used for imports: [Elmjutsu](https://atom.io/packages/elmjutsu)
- Plugin used for formatting: [Elm-format](https://atom.io/packages/elm-format)
- Plugin used for linting: [linter-elm-make](https://atom.io/packages/linter-elm-make)


Make an HTTP Request in Elm

Lists are used in Elm to represent sequences of data. The List library comes with a toolbox of useful functions. Here we cover list transformation (map), and getting single values from lists (fold).


Sequencing Data With Lists in Elm

Decoding JSON strings in Elm is a 2-step process:

1. Create a "recipe" for the decoding
2. Perform the decoding

This lesson gives a couple basic examples of the two steps in action.

Topics

Instructors

Content Type

Murphy Randle