Learn Mocha, Reason and Svelte

JavaScript community has been shaken recently by a release of Svelte 3 and for a good reason - it's a completely different approach than React or Vue. To quote the docs:

"[Svelte](https://svelte.dev/) is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app."

**The best part?** If you have 26 spare minutes you can learn the basics of Svelte 3 and start building your own apps with it!

Enjoy!



The magical disappearing UI framework

 - The web's JavaScript bloat crisis, solved. Svelte turns your templates into tiny, framework-less vanilla JavaScript.
 - Simple and familiar. Build apps out of composable, easy-to-write blocks using languages you already know.
 - Super fast, rock solid. Compile-time static analysis ensures the browser does no more work than it needs to.

svelte

Up and running with Svelte 3

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

This course foremost will teach you about the syntax and semantics of the programming language Reason or also referred to as ReasonML. In addition, the course touches on best practices recommended by the official documentation. Each lesson is focusing on a specific feature, concept or best practice and can be watched independently. Still, the whole course is carefully crafted, and each lesson builds up on the previous ones.

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

reason

Get Started with Reason

Ongoing playlist.

Don't be afraid to watch videos at 1.25x if the pace is too slow!

ReasonML Applications for the React Developer

Creating forms is one of the simplest and most complicated things at the same time. A basic form consists of many different things happening, we have to retain the value, we have to keep watch of validation and we have to show error messages when something is invalid, this is on both the fields and on the entire form itself if we send a request off to the backend service.

So we're going to create a form using just the normal svelte features. Then we'll look into creating a form using the svelte forms lib. 

Create forms in Svelte with Svelte Forms Lib

Chai is a BDD / TDD assertion library for node and the browser that can be delightfully paired with any javascript testing framework.

chai

Every dependable library needs to have tests to ensure that you don't push accidental bugs. In this lesson, see how you can set up mocha and chai to start testing your library.

Setting up Unit Testing with Mocha and Chai

Now that you've got everything set up with mocha and chai, it's time to actually write tests. In this lesson you'll learn how to use `describe` and `it` to outline your tests and make sure you don't break your library in the future.

Unit Testing with Mocha and Chai

Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases.

mocha

Mocha is a testing framework that provides structure for unit tests. In this lesson, we will be setting up Mocha with npm and npm scripts, writing a "Hello World" unit test, then writing the code to make the test pass (as an example of Test Driven Development (TDD), with the "red-green-refactor" workflow).

JavaScript Testing Fundamentals: Hello world unit test with Mocha (in ES6)

In this lesson, we will use Chai's request method to test our Node application's API responses.
By the end of this lesson, you will know how to:
- install the prerequisites to use mocha and chai in your application
- test for HTTP status response codes
- test for a string of text on a page
- test for a json response and validate the properties of the object
- write tests that not only verify the response of your application, but the behavior as well


Test Node RESTful API with Mocha and Chai

Writing great ES6 style Promises for Node.js is only half the battle. Your great modules must include tests as well to ensure future iterations don't break them. In this lesson, I show you a simple ES6 Promise in Node.js, then walk you through creating tests in Mocha using chai and chai-as-promised to test both resolve and reject methods.

Testing ES6 Promises in Node.js using Mocha and Chai

In this lesson, you will learn how to verify your API server is returning HTTP 400 responses when clients submit incorrect data. Returning HTTP 400 ensures that your clients are notified of the incorrect usage. Testing for them ensures your API returns errors instead of incorrect responses when supplied with incorrect data.

Test for HTTP 400 responses with Mocha and Chai

ReasonReact allows React developers to leverage ReasonML's type system when creating components.

In this lesson, we take a quick spin around the ReasonReact project by creating a `<HelloWorld />` component. By the end of this lesson, you'll have learned how to create a React component using the `ReasonReact.statelessComponent` module while getting a first-hand look at some of the amazing tooling ReasonReact provides its users with!

* [ReasonML Homepage](https://reasonml.github.io/)
* [ReasonReact Homepage](https://reasonml.github.io/reason-react)

Render a Stateless Component within a ReasonML Application using ReasonReact

This lesson shows viewers how to get up and running in a new ReasonReact application using Bucklescript's `bsb` command-line tool. 

To access `bsb` on your local machine you can install globally by running

```bash
npm install -g bs-platform
```

* [ReasonML Homepage](https://reasonml.github.io/)
* [ReasonReact Homepage](https://reasonml.github.io/reason-react)

Use BuckleScript to get up and running in a new ReasonReact project

In this lesson we explore ReasonML's language basic datatypes like `integer`, `float`, `boolean`, `string`, `char`, `unit` and `list`. Further you will get familiar with the addition operator, several relational operators as well as structural equality.

Basic Datatypes and Operators in Reason

Let bindings allow to bind values to names similar to variable declaration in other languages. There are subtle differences tough in every language and we are going to explore the semantics of ReasonML's let bindings. Further we see how type inference works and it's implications. Last but not least we discover type alias.

Let bindings, Type Inference and Type Aliases in Reason

Reason has lexical scope. In this lesson we explore what this means for the visibility of bindings using local block scopes.

Scope in Reason

First we are going to investigate the if expression and compare it to JavaScript's if statement. If being an expression has multiple implications on how to use it. In the second part we are introducing the ReasonML's switch expression in it's simplest form using structural equality as well as the fall-through case.

if-else and Switch Expressions in Reason

Records are like JavaScript objects but are

* immutable by default
* fixed in field names and types

We walk through how to create, access, update and destructure records. In certain niche situations we don't know the structure of our data ahead. In such cases using ReasonML objects works great.

Records and Objects in Reason

Variants are known as tagged unions in Computer Science. They allow us to express multiple options that are exclusive, as a data structure. A concept that isn't available in too many programming languages and yet such a powerful concept.

We explore how to create variants and constructors in ReasonML and briefly touch on how to pattern match them to extract data.

Variants and Pattern Matching Variants using switch in Reason

The ability to express multiple options that are exclusive as a data structure is a powerful concept. To leverage it's full power it's requires some rethinking on how to model our data.

We are going use a simple UI example to rethink how to approach representing our state.

This lesson was highly inspired by Yaron Minky's advice to "make illegal states unrepresentable" in his talk [Effective ML](https://vimeo.com/14313378) as well as Richard Feldman's talk [Making impossible states impossible](https://www.youtube.com/watch?v=IcgmSRJHu_8&t=354s) with Elm.

Elminate Illegal States in Reason with Variants

ReasonML doesn't null. Still sometimes we want to refer to something and don't know ahead if a corresponding value will be available.
Reason therefor offers the Variant option shipping with the standard library.