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

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

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

Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

gulp

Building upon the `watch` task that we begin this lesson with, we’ll look at how to create a local development server using the `app` directory as the web root. By using Browsersync to achieve this, we can also instruct all connected browsers to automatically reload each time our bundle is re-generated. Browsersync has a public `.stream()` method that is designed exactly for this purpose.

Gulp and Browserify - Adding Live Reload with Browsersync

Babel has support for the latest version of JavaScript through syntax transformers. These plugins allow you to use new syntax, right now without waiting for browser support.

babel

What is already a nice workflow using Gulp, Browserify, Watchify & Browsersync to enable auto rebuilds & live browser reloading can be further improved by adding Babelify. A simple wrapper around the popular transpiler Babel, Babelify can ‘transform’ source files as they pass through our stream to enable certain Javascript features not yet available in the Browser or Node. We end the lesson by looking at how to generate & extract sourcemaps using `exorcist`.

Gulp and Browserify - Adding Babel & Source Maps

Browserify lets you require('modules') in the browser by bundling up all of your dependencies.

browserify

Let's look at the basics of setting up Gulp and Browserify. Creating a Gulp task from scratch, we'll cover how to utilise the Browserify API to generate a single `bundle.js` file, catch and log any errors that occur in the compilation process, transform the stream into a format that can be consumed by `gulp.dest` and finish by writing the bundle to a `dist` directory.

Gulp and Browserify - Initial Setup

Beginning with a single Gulp task capable of generating a one-time Browserify bundle, we enable file-watching and incremental rebuilds by incorporating Watchify. We add a second task `watch` & refactor our initial code to enable the bulk of it to be re-used. We’ll look at exactly how to ‘wire’ these tools together and how the relationship between Watchify & Browserify can manifest into a seriously efficient workflow.

Gulp and Browserify - Hooking up Watchify

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

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.