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

A <canvas> element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.

canvas

Learn some of the different ways you can affect the graphical content that you are drawing to a canvas. We'll cover global alpha, global composite operations and shadows.

Canvas Effects

With the HTML `canvas` you can easily draw text as well as graphics. Let's take a look at basic text manipulation on the canvas.

Drawing Text on Canvas

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

In this lesson, we cover several different ways to animate graphics drawn to Canvas.

Animating with Canvas

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 

When drawing on the HTML5 canvas element, your fills aren't limited to flat colors. You can use gradients to get smoothly blended color fills on your drawn elements.

Gradient Fills on the HTML5 Canvas

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

Transformations can change the default canvas coordinate system and create complex drawings with much less code.

Canvas Transformations

In this lesson, listening for and handling mouse and keyboard events in Canvas is covered.

Listening for Mouse and Keyboard Events with HTML Canvas

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.

Automatically de/serialize JSON with Purescript-Foreign-Generics

In Purescript, we can use set data structures using Purescript-Set, but many of its functions come with an Ord typeclass constraint. In this lesson, we'll learn how to understand the typeclass constraints on a function and how to create instances of typeclasses.

Use Sets with Ord Typeclass instances

The HTML Canvas element allows us to access powerful drawing APIs from JavaScript. In this lesson, the first in a series, we will learn about `<canvas>`, and get ready to start drawing.

Introduction to the HTML Canvas element

Now that we have an HTML5 canvas to draw on, let's take a look at drawing simple lines and rectangles with JavaScript

Drawing Paths - Lines and Rectangles

When drawing on your HTML canvas in JavaScript, you aren't restricted to straight lines. Using curves and arcs you are able to create smooth curved lines.

Drawing Paths - Curves and Arcs

You aren't limited to boring black lines when drawing on the HTML5 canvas element. Using styles, you can program interesting colorful images with JavaScript.

Drawing Styles on HTML5 Canvas

In this lesson, you'll learn how to read and write individual pixel color values from a canvas.

Canvas and Pixels



[React Storybook](https://github.com/kadirahq/react-storybook) is a UI component development environment for React.
With that, you can develop UI components without running your app.

Here I show how to get started with React Storybook.
For more information, have a look at our [documentation](https://getstorybook.io/docs).

Getting Started with React Storybook

In addition to vector drawing, you can draw bitmap images into a canvas, and also retrieve a bitmap based on the content in a canvas.

HTML Canvas and Images

React Component stories can be dynamically loaded into React Storybook instead of doing it manually every time.

Load React Storybook Stories Dynamically

PureScript has a REPL (a console you can type expressions into) called `pulp`. In this lesson, we will show how you can use `pulp` to test your modules and functions. We will use code as we would in a file, like `import`ing modules. We will also use REPL specific syntax like `:type` (or `:t` for short) to view type definitions and `:reset` to re-compile changes to our files.

Technologies talked about in this lesson:

[Pulp](https://github.com/bodil/pulp) by [@bodil](https://twitter.com/bodil)
[Psci](https://github.com/purescript/purescript/wiki/PSCi)
[Purescript](https://github.com/purescript/purescript)

Topics

Instructors

Content Type

Free or Pro