Learn Cycle, Purescript and React-storybook

PureScript is a small strongly, statically typed language inspired by Haskell and compiles to JavaScript. This means no run-time errors, human readable output, ADTs, and pattern matching (and more!) all at your fingertips.

In this course we will use an [online editor](http://try.purescript.org/) to show basics into PureScript with an instant visual representation, investigate the type system and ways to reason about common programing problems with PureScript. 

As we explore the type system and common problems that are faced when programming in PureScript we will learn plenty of functional programming concepts as PureScript is a purely functional language.

PureScript is a small strongly typed programming language that compiles to JavaScript.

purescript

Functional Programming Concepts in Purescript

Cycle.js is a framework where your app is described as a simple function taking an event stream as input and outputting an event stream. 

Cycle.js builds on functional and reactive streams and is a JavaScript framework. What does that mean? In the course, André Staltz, the creator of Cycle.js, will explain it to us.

We'll start this course with an empty project and build out our own toy version of Cycle.js to understand exactly what's going on under the hood. When we have a solid base of how Cycle.js works we will move on to use the Cycle.js API and build an app using the Model-View-Intent pattern.

Cycle.js is a framework where your app is described as a simple function taking an event stream as input and outputting an event stream.

cycle

Cycle.js Fundamentals

We are starting to get a better architecture for these UI apps. But we still have a problem of repeating code for the sliders, since they share so much in common in looks and functionality. This lessons shows how we can create a generic labeled slider as a main() function receiving properties as sources.

Create a Generic Cycle.js Component

Our app is not yet a BMI calculator, because it only has two sliders, but doesn't show the calculated BMI number. In this lesson we will learn how to export any stream from a child component and use it in the parent component, in order to display the BMI calculation on the DOM.

Export Values from Components through Sinks in Cycle.js

This lesson shows what can be learned next as a continuation of this course, and gives a recap on the core concepts: main for pure logic, drivers for side effects, run() to connect main and drivers, sources for read effects, sinks for write effects, and nesting Cycle.js apps to work as components.

Overview of Cycle.js

PureScript types are very extensive and we are going to experiment with type constructors and how to make then use them.

Basic Data Constructors in PureScript

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

In this lesson, we show how to setup React Storybook into an existing React project. We’ll go through common configuration files and how to adjust them.

Add React Storybook to a Project 

Components trigger actions via function props to notify of events that occur within the Component. We can inspect those events using React Storybook.

Inspect Component Events with React Storybook

Let's see next how to use the HTTP driver to generate requests and capture responses. We will build a small app to fetch a single piece of data from a REST server and display that on the DOM.

Fetch Data using the Cycle.js HTTP Driver

Once we have a labeled slider component inside the main function, we should be able to create another labeled slider. This lesson teaches how to accomplish that, and make sure those two instances work independently of each other.

Use Multiple Independent Instances of a Cycle.js Component

We added classNames to pre-processing and post-processing steps when calling the LabeledSlider, in order to instances independent of each other. It would be better if we could hide these steps away. This lesson introduces the isolate() helper function to achieve that.

Isolate Component Instances in Cycle.js

This lesson is the first in an introduction to Cycle.js. We will see how to build from scratch a toy version of Cycle.js. See how to use RxJS to create simple web apps, and how to separate logic from effects.

Separate Logic from Effects in Cycle.js

We need to give structure to our application with logic and effects. This lessons shows how we can organize our code into two parts: main() function for logic, and effects functions for effects.

Organize Code in the Main and Effect Functions

How can we show one string on the DOM, and a completely different string on Console log? This lesson shows how we can make our main function return multiple Observables, each one targeted at a different type of effect.

Customize Effects from the Main Function

What if we wanted to change the behavior of our app reset the timer every time the mouse *hovers* over it? Currently we only support clicks, and they are hard coded in the DOM Driver. This lesson will introduce DOMSource.selectEvents(), a way of making the DOM Source rich and allowing the main() function to determine which read effects it needs.

Fine-grained Control over the DOM Source in Cycle.js

Now you should have a good idea what Cycle.run does, and what the DOM Driver is. In this lesson, we will not build a toy version of Cycle.js anymore. Instead, we will learn how to use Cycle.js to solve problems. We will start by making a simple Hello world application.

Read Text Input in a Cycle.js Hello World Application

Usually we use template languages like Handlebars, JSX, and Jade to create. One simple way we can create our own template language is to write a function that returns these objects for us. This lessons shows how we can use these functions as a DSL to create our DOM description objects.

Use Hyperscript in Cycle.js as an Alternative to Template Languages

So far we have been writing very small apps in Cycle.js. Let's start growing the size of the apps we build. This time, we will see how to build a simple Body-Mass Index Calculator. We'll see how as our application grows there are three distinct sections: handling read effects, handling write effects, and handling internal state.



Manage Multiple Observable Streams in Cycle.js

We built the BMI calculator all inside one function: main(). As apps scale, we don't want main() to grow. We need an organized pattern where each function focuses on doing one thing. This lesson shows how we can easily refactor the main() function into three parts: Intent, Model, and View.

Organize your Cycle.js Application into the Model-View-Intent Pattern

We have made a Cycle.js app for generic labeled slider which can be configured through props, but how can we reuse it in other Cycle.js apps? This lesson shows how we can embed any Cycle program inside a larger Cycle program in a very simple manner.

Use a Cycle.js Component in the main() Function

Deserializing and serializing JSON manually is a boring, error-prone way to be able to handle JSON. This example shows how you can use Generics in Purescript to automatically derive de/serializers so that once you've written your type definition, you only need a few lines of code to handle JSON.

Topics

Instructors

Content Type

Free or Pro