 Resources from Nik Graf in 2021

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

reason

At it's core BuckelScript is a backend for the OCaml compiler to emits JavaScript. Luckily it support not only OCaml, but also ReasonML syntax out of the box. In addition BuckleScript comes with a whole toolchain to make our lifes easier.

In this lesson we will setup the tooling to create and build a new project. We explore it's structure and add a new module.

First steps using Reason with BuckleScript

Modules allow us to encapsulate business logic like let bindings or types into logical entities. In ReasonML every file is a module. Names have to be unique though per project. This is quite opinionated compared to other languages. Sub-modules also can be created using the `module` keyword. In addition to that ReasonML supports interface files that not only describe let bindings, functions and their types, but also enforce visibility of those. In this lesson we explore all of these features step by step without getting overwhelmed.

Modules in Reason

The goal of this course is to explain syntax and semantics of the programming language Reason.

Each lesson is focusing on a specific feature or concept and can be watched independently. Still the whole course is carefully crafted and each lesson builds up on the previous ones.

In this intro I also talk about the three reasons why I care about the language.

I hope the course is helpful to you and I'm looking forward to hear what you build with Reason.

Course Overview: Get started with Reason

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

With React 16 it is possible now to return an Array of elements.

In React 16.2 support for fragments was added. It's a convenient way to return multiple children from a component’s render method.

Render Multiple Elements using React.Fragment and the JSX Fragment Syntax <> in React 16.2

`getDerivedStateFromProps` is lifecycle hook introduced with React 16.3 and intended as a replacement for `componentWillReceiveProps`. It is invoked after a component is instantiated as well as when it receives new props. It should return an object to update state, or null to indicate that the new props do not require any state updates.

Update State Based on Props using the Lifecycle Hook getDerivedStateFromProps in React16.3

`getSnapshotBeforeUpdate` is a lifecycle hook that was introduced with React 16.3. It is invoked right before the most recently rendered output is committed and the value returned by it will be passed as a third parameter to `componentDidUpdate`. It enables your component to capture current values for example a scroll position before they are potentially changed.

Capture values using the lifecycle hook getSnapshotBeforeUpdate in React 16.3

Refs allow you to imperatively modify a child outside of the typical React dataflow. With React 16.3 a new ref API was introduce that should provide the convenience of string refs with the safety of callback refs.

Create a DOM reference using createRef in React 16.3

The function `forwardRef` allows us to extract a ref and pass it to its descendants. This is a powerful tool, but should be used with caution to avoid unexpected ref behaviour. The technique of forwarding refs really starts to shine in combination with higher order components (HOCs).

Forward a DOM reference to another Component using forwardRef in React 16.3

With React 16.3 a new Context API was introduced. It provides a way to share values like that are considered global between components without having to explicitly pass a prop through every level of the tree.

When creating a context we get a Provider to pass values into the tree, as well as Consumer in order get them out.


Pass Data through a Component Tree using Context Providers and Consumers in React 16.3

Amazon Web Services (AWS) is a powerful expansive cloud infrastructure platform for building modern web applications.

AWS provides services for data, presentation, authentication, security, video encoding, and much more. Offering over 175 fully-featured services from data centers globally, AWS powers a large percentage of the internet.

In order to configure any AWS service we first need to create a user that has enough permissions. Using the AWS CLI we can configure our local environment to interact with AWS APIs.

Create a User and setup the AWS CLI to interact with AWS

To get started we install the Serverless Framework and show you some useful hints on how to get started with your first project.

Setup the Serverless Framework

In this lesson we walk through the necessary configuration of a Lambda function, add a simple code snippet and then deploy the function to AWS Lambda. We test it using the invoke command coming with the CLI tool.

Deploy a Node.js function to AWS Lambda using the Serverless Framework

Out of the box a AWS Lambda function is just an ephemeral container running our code. In order to invoke it and return a result we need to configure the AWS service API Gateway and connect it to our function.

Attach a HTTP endpoint to an AWS Lambda function using the Serverless Framework

The Serverless Framework uses CloudFormation to deploy our functions. Using the resources section we can deploy and configure a wide range of AWS services using raw CloudFormation definitions. In this session we demonstrate this by adding a DynamoDB table to our application.

Your table can be seen [here](https://console.aws.amazon.com/dynamodb/home?region=us-east-1#tables:).

Deploy a DynamoDB table to AWS using the Serverless Framework

In order to store data into a DynamoDB table we first need to setup the permissions for the Lambda function to have write access. Further we can use the DocumentClient API shipping with AWS to write the data coming from a request to the DynamoDB table.

Deploy an AWS Lambda function to store data in DynamoDB using the Serverless Framework

To retrieve a previously created item from a DynamoDB table we have to setup the IAM permissions for the Lambda to get an item and further implement the code using the DynamoDB DocumentClient API.

Deploy an AWS Lambda to retrieve a record from DynamoDB with the Serverless Framework

This introduction provides some insights what serverless is about and walks you through an overview of the course's content.

Course Overview: Develop a Serverless Backend using Node.js on AWS Lambda

Rust is a systems programming language that runs blazingly fast, prevents segfaults, and guarantees thread safety.

rust

In order to setup a project we need to install the nightly build of Rust and add the WebAssembly target. For an improved workflow we also install the CLI tools wasm-pack and wasm-gc.

Setup Rust for WebAssembly

In this lesson we are going to setup a project from scratch by introducing the JavaScript snippet to load a WebAssembly module. We demonstrate two different ways and showcase the benefit of the streaming solution. Once the module is loaded we can invoke a function previously exported from our Rust code.

Load a WebAssembly Function Written in Rust and Invoke it from JavaScript

In some cases it’s useful to be able to invoke a JavaScript function inside Rust. This session showcases how this can be done, by passing along our JavaScript functions to the WebAssembly module instantiation.

Pass a JavaScript Function to WebAssembly and Invoke it from Rust

webpack is a tool to build JavaScript modules in your application. To start using webpack from its cli or api, follow the Installation instructions. webpack simplifies your workflow by quickly constructing a dependency graph of your application and bundling them in the right order. webpack can be configured to customise optimisations to your code, to split vendor/css/js code for production, run a development server that hot-reloads your code without page refresh and many such cool features.

webpack

Interoperability between JavaScript and Rust is limited to numerics and accessing memory directly. Since this can be exhausting and overwhelming to do manually the Rust/Wasm team has created the wasm-bindgen project to facilitate high-level interactions between Rust and JavaScript.

Topics

Instructors

Content Type

Free or Pro