Learn Jekyll, 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

Jekyll is a blog-aware static site generator. You can write text in markdown or HTML and Jekyll uses layouts to create a static website. You can tweak how you want the site URLs to look, what data gets displayed on the site, and more.

After watching the collection you'll be able to:

* Install Jeykll and run it locally
* Create a new blog post
* Install plugins to add new features to your blog

Jekyll is a parsing engine bundled as a ruby gem used to build static websites from dynamic components such as templates, partials, liquid code, markdown, etc. Jekyll is known as "a simple, blog aware, static site generator".

jekyll

Create A Blog With Jekyll

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

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.

Using Reason's Type option

In this lesson we walk through how to declare functions in ReasonML. Declaring and using functions is straightforward. Still there are a handful great features not available in a lot of other languages like labeled arguments or auto currying. Both are explained in this lesson.

Declare Functions in Reason

Concise and readable code is an important aspect of good quality and maintainability. The reverse-application operator aka. pipe operator allows us to chain functions together without the hassle of creating intermediate let bindings or complicated nesting.

Chain Functions using the pipe/reverse-application Operator in Reason

Function recursion requires the let binding to be accessible inside it's own local scope. Using the `rec` keyword in ReasonML we can enable this visibility to declare recursion functions.

Recursive Functions in Reason

ReasonML ships with a couple more useful data structures to store multiple elements. Tuple is one of them. It allows us to store a fixed number of values of any kind of type. While lists are homogeneous and immutable. Arrays are mutable.

In this lesson we explore multiples ways on how to create, access and update each of these data structures.

Tuples, Lists and Arrays in Reason

In this lesson we explore what structural equality as well as referential equality means in ReasonML. We walk through a couple examples and end with a handful of ideas on what to use when.