Learn Babel, Ramda and Tachyons

Learn how you can use ramda.js to bring functional programming concepts into your JavaScript code. Ramda offers composability and immutability right out of the box, so you can leave your imperative code behind and build cleaner, more maintainable code.

A library designed specifically for a functional programming style, one that makes it easy to create functional pipelines, one that never mutates user data.

ramda

Functional Programming in JavaScript with Ramda.js

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

Converting all of our modern JavaScript into ES5 compatible syntax is a great way to use modern features while targeting older browsers. What happens when the browsers natively support these language features? Then it no longer makes sense to transform that code or to include polyfills that will go unused. In this lesson, we’ll add the `@babel/polyfill` package and configure `babel-preset-env`

Target specific browsers with babel-preset-env and the babel pollyfill

In this lesson we'll see how to use the `without` function to remove items in a known list from an array. Then we'll generate our exclusion list and apply it to `without` using `reduce`, `min`, `max` and `converge` to detect the highest and lowest values in an array and creating a new array that excludes those values.

Discard the High and Low Values From an Array of Numbers with Ramda

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 take the opengraph image we wrote in codesandbox and copy it into our serverless function. We use Rollup to compile the component into an IIFE (immediately invoked function expression) that can run in our headless browser environment and cover a wide set of rollup plugins that we need for compatibility. We end the lesson having successfully screenshot our opengraph react component from our Netlify Function

Compiling a React to an IIFE with Rollup to execute and render in a headless browser

In this lesson we'll look at how you can use Ramda's `unfold` function to generate a list of values based on an initial seed.

Create an Array From a Seed Value with Ramda's unfold

Functional composition is a great way to write declarative code that reads well. But sometimes, you need to get insight into what's happening at different steps in your composition. This is where `tap` comes in. With tap, we can run code that generates side-effects, like logging to the console, and our data will continue to be passed along, untouched.

Debug Function Compositions with Ramda's Tap Function

Most of the functions offered by the ramda library are curried by default. Functions you've created or that you've pulled in from another library may not be curried. Ramda's `curry` and `curryN` functions allow you to take a non-curried function and use it as a curried functions. In the case where you have a manually curried function and you want to just call it like a normal function, you can use `uncurryN` to get back a function that accepts all of the arguments at once.

Curry and Uncurry Functions with Ramda

You can really unlock the power of ramda (and functional programming in general) when you combine functions. Counting words in a string may seem like a relatively difficult task, but ramda makes it easy by providing a `countBy` function.  This lesson walks through using the `countBy` to count words in a string.

Count Words in a String with Ramda's countBy and invert

We can write our package using the latest JavaScript syntax with a compilation step. In this lesson we will install `babel-cli` and `babel-preset-latest` and wire up a `build` script to compile our code using the babel “latest” preset when source files change. This means those using our package can use it in any version of JavaScript even though we are using the latest syntax for our source code.

Set up compilation of source code using babel with npm scripts

In this lesson, we'll refactor a React component to use Ramda lenses to update our component state. We'll create a lens to focus on the property we want to target and use `over` to apply the existing state value to a utility function and we'll get back a new state that will be reflected in our rendered UI.

Update Component State in React With Ramda Lenses

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

You can easily add CSS libraries to Nuxt using `yarn` or `npm` to install them, then simply adding them to the `nuxt.config.js` so they're included in each page. Then all the classes will be available for use in all of your templates. This lesson walks your through installing a library then adding it to your `nuxt.config.js`.

Add CSS Libraries to Nuxt

Using the map method of an array is a great way to create new data from an existing array in an immutable way and without writing any loops. The problem is that you need to call it on an existing array instance. In the lesson we'll see how to build our own reusable `map` utility function using manual currying and then we'll replace it with Ramda's `map`.

Create a Reusable Mapping Function with Ramda's Map

In this lesson, we'll use `Promise.all` to get an array that contains the resolved values from multiple promises. Then we'll see how we can use Ramda to convert that array of values into a single object using `zip` with `fromPairs`. Then we'll refactor to use `zipObj`.

Convert a Promise.all Result to an Object with Ramda's zip and zipObj

We don't always control the data we need in our applications, and that means we often find ourselves massaging and transforming our data. In this lesson, we'll learn how to transform objects in a declarative way using ramda's evolve function.

Declaratively Map Data Transformations to Object Properties Using Ramda evolve

In this lesson we'll see how Ramda's `path` and `pathOr` functions can be used to safely access a deeply nested property from an object while avoiding the dreaded checks for `undefined` at each new property in the desired path. 

Get Deeply Nested Properties Safely with Ramda's path and pathOr Functions

Sometimes you need to filter an array of objects or perform other conditional logic based on a combination of factors. Ramda's `where` function gives you a concise way to declaratively map individual predicates to object properties, that when combined, cover the various facets of your conditions. In this lesson, we'll look at how this powerful function can be used for scenarios requiring a complex predicate function.

Declaratively Map Predicates to Object Properties Using Ramda where

In this lesson we'll take an array of objects and map it to a new array where each object is a subset of the original. We'll look at multiple ways to accomplish this, refactoring our code into a simple and easy to read function using Ramda's `map`, `pick` and `project` functions.

Select a Subset of Properties from a Collection of Objects in Ramda

We'll learn how to get a subset of an array by specifying items to include with filter, or items to exclude using reject. We'll also look at how to get the results from both filter and reject, neatly separated with partition.

Add and Remove Items in Arrays using Filter, Reject and Partition in Ramda

In this lesson we'll learn the basics of using lenses in Ramda and see how they enable you to focus changes on specific properties of an object while keeping your data immutable. 

Change Object Properties with Ramda Lenses

Sorting an array of objects by multiple fields can be tricky. Even worse, the code can be tough to follow and making changes in the future is complicated by conditional logic in the sorting function. In this lesson we'll see how to simplify this using Ramda's `sortWith` along with `ascending` and `descending`. We'll sort an array of objects by multiple fields and the code will be readable and dead simple to change.

Sort an Array of Objects by Multiple Fields with Ramda's sortWith

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

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`.

Topics

Instructors

Content Type