 Resources from Nik Graf in 2021

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

The goal of this course is to explain how to setup a project using JavaScript and WebAssembly with Rust.

We start out with building our first WebAssembly module and loading it. Then we gradually build up until to a point where we use wasm-bindgen to invoke functions and pass data between JavaScript and Rust without a hassel.

Further we explore various tools like wasm-pack to build our Rust code with ease and use them in combination with Node or Webpack.

Course Overview: Using WebAssembly with Rust

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

We will learn how to set up the Apollo Client using Apollo Boost, connect it to a GraphQL endpoint and use the Apollo Provider to connect it to our React Application. In addition we demonstrate how to use an Apollo Consumer

Setup and Connect an Apollo Client to a React Application with Apollo Provider

In order to display data we first need to fetch it. The Query component allows us to describe which data we are interested and automatically handle the fetching of our data. Once we received the data we can render it using React. Since the Query component handles the data fetching we need to make sure we properly deal with the cases of a loading state as well as when the receive Errors from the GraphQL API. In this lesson we will cover both.

Fetch Data using the Apollo Query Component

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

WebAssembly is great for targeting performance bottlenecks in the browser. Now with node-loader, we can do the same on the server through Node.js

While Node offers also bindings to native extensions for C/C++ via node-gyp, there was no straight forward way to write Rust extensions. In addition did the node-gyp API change often and developers had to be careful to make their C/C++ code work with various operating systems.

Compiling Rust to WebAssembly solves both of these issues. The API is stable and once compiled to WebAssembly it will run on every operating system supported by Node.

Since Node doesn't support loading `.wasm` files a loader is needed. The loader flag though is only supported when using the `--experimental-modules` flag in Node 10 or higher.

Run WebAssembly in Node.js using the node-loader

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

`wasm-pack` is a tool that seeks to be a one-stop shop for building and working with Rust generated WebAssembly that you would like to interop with JavaScript. This includes ability to publish modules so that you can share your Rust generated WebAssembly code with others. 

In this lesson we create a npm package and export a Rust function that will log to the console in the browser. We publish the module to NPM and afterwards use a `rust-webpack-template` to install and use the newly published package.

Create and Publish a NPM Package Containing Rust Generated WebAssembly using wasm-pack

`js-sys` offers bindings to all the global APIs available in every JavaScript environment as defined by the ECMAScript standard.

In this lesson, we will install and use `js-sys` to invoke JavaScript's Date API to grab the current time. The date will need to be converted to a value Rust can use and display that date from Rust in the browser.

Use the js-sys Crate to Invoke Global APIs Available in Any JavaScript Environment

Previous to this lesson, we set up our own Rust/wasm project from scratch.

The Rust/wasm team ships a template for you to get started right away. In this lesson, you'll see how to initialize the template (assumes you have `wasm-pack` installed) and see how this template gives you additional custom Rust features in addition to the `WasmPackPlugin` that will build your library on every file change.

Create a New Rust/Webpack Project using the rust-webpack Template

GraphQL supports parameters for queries via variables. They allow us to supply dynamic arguments. Often we want these variables to be dependent on decisions made by a User. In this session we are going to walk through how to implement a filter variable based on a UI checkbox element using Apollo's Query component.

Provide Dynamic Arguments in a Apollo Query Component with GraphQL Variables

In this lesson we will first explore how to manually refetch data for an already executed query to receive the latest state of our data.

Later we use polling to refetch the latest state on a timed interval. Polling can be a simple and effective tool to provide an almost real-time experience without the overhead of setting up a WebSocket solution.



Refetch Data with the Apollo Query Component either Manually or on Timed Intervals

In this lesson we will use the Mutation component to invoke a mutation of a GraphQL API. In addition we cover how to update the local cache using refetch queries as well as improving the user experience when dealing with mutations.

In the end we discuss several gotchas related to Mutations and possible ways on how to tackle them.

Update Data using the Apollo Mutation component

With the introduction of `apollo-link-state` Apollo for the first time introduced a way to manage local state through GraphQL queries and mutations. This can be achieved using the @client directive.

In this lesson we will leverage this feature to keep track of starred recipes and store the information in the `localStorage`.


Manage Local State using Apollo by extending the GraphQL Schema on the Client

This course will provide you with a crisp, but still complete introduction on how to fetch and update remote data from a GraphQL endpoint, as well as managing local state using the Apollo Client in combination with React.

While this course clearly targets Apollo and GraphQL beginners even someone with quite some Apollo experience might learn something now in the lesson on how to manage local state.

Each lesson is focusing on a specific feature or concept and can be watched independently. Still the whole course is carefully crafted to get build up one cookbook application.

Happy watching 🎥🍿

Topics

Instructors

Content Type