Learn Canvas, Flux and Redwoodjs

RedwoodJS takes the JAMstack philosophy to the next level. It brings together all the tools modern web development has to offer:

- React
- GraphQL
- Prisma

RedwoodJS abstracts database management away from you so that you can just build your schema and it will do all the plumbing. This collection will go over how to create a RedwoodJS project and the scripts that will help make your developer experience a joy.


Bringing full-stack to the JAMstack

Do you love the JAMstack philosophy but need a database-backed web app? Want great developer experience and easy scaling? Redwood is here! Built on React, GraphQL, and Prisma, Redwood works with the components and development workflow you love, but with simple conventions and helpers to make your experience even better.

redwoodjs

Introduction to RedwoodJS: full-stack framework for JAMstack

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

The `canvas` element exposes a 2d context which allows you to draw lines using the `moveTo`, `lineTo`, and `stroke` api. You can combine this with Mouse events to make a simple drawing app.

Draw with Your Mouse on an HTML 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

We use `yarn redwood generate page` (`yarn rw` for short) in this lesson to generate an `IndexPage` component. 

The first argument to `yarn rw generate page` is the name of the page you are generating. The second argument is the path you want the page to show up on. So `yarn rw generate page index /` will generate an `IndexPage` component and insert a route entry in our `web/src/Routes.js` file.

We learn that redwood import `React` for you so you don't have to import it manually when you are creating a component.

Generate a Page Using the Redwood CLI

In this lesson, we are going over how to generate a `RedwoodJS` project.

We can create a `RedwoodJS` project with `yarn create redwood-app ./my-redwood-project`.

`yarn` will generate the `RedwoodJS` app in the file folder you specified without installing any globals.

To run the `RedwoodJS` app, we use `yarn redwood dev`. This runs the Redwood client as well as the `GraphQL` backend.

Generate a Redwood Project

RedwoodJS provides a `Link` component that we can use to navigate around our app. We can provide a `to` prop with the path that we want to navigate to.

RedwoodJS takes this a step further and provides a `routes` object from `@redwoodjs/router`. This object is aware of all the routes defined in `web/Routes.js`. This allows us to use the methods on this object rather than referencing the our routes with a string literal. We can then change the route path without having to change all of the references to that route all over our app.

Use RedwoodJS Link and routes Object to Navigate

RedwoodJS gives us a cli command to generate layouts.

`yarn redwood generate layout main`

This will generate a `MainLayout` component in `src/layouts/MainLayout/`. We can use this layout component to define any headers or footers we want to share across multiple pages. 

Extract a RedwoodJS Layout Component

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

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

Animating with Canvas

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

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

Actions contain no functionality, but rather describe an event in our application.  In this lesson we will describe our Actions as they relate to our application.  These Actions will then be available for triggering in our Views and for execution in our Store.

React Flux: Actions

In Flux our Components are referred to as Views, but they are the same familiar Components associated with any React development.  In Flux, however, we have the benefit of the architecture to keep us from having to pass down through a long chain of children Components any functionality that may be embedded in our Stores.  In this Lesson we will wire up all of our Components in record time utilizing the architecture we've already established.

React Flux: Components/Views

Stores are where the real work in our application is done.  Dispatchers broadcast Actions to all Stores, and the Stores registered to listen for those Actions will perform any logic needed to update our Views.  In this lesson we will establish our first Store and register the Actions we wish to respond to.

React Flux: Stores

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

Our build process during this series will utilize both gulp and browserify.  In this lesson we will take a moment to setup our environment and all of the tooling required to begin developing our Flux Application.  We've kept the build process very simple so porting it to grunt should be a breeze, but this also serves as a simple primer for those who may not be familiar with gulp.

React Flux: Development Environment Setup

Organizing modules and components is a critical aspect of the development of any single-page web application (SPA). In this lesson we will look at refactoring the Flux React store into a more module structure.

React Flux: Project Organization

Flux has four major components: Stores, Dispatchers, Views, and Actions.  These components interact less like a typical MVC and more like an Event Bus.  In this lesson we will start by creating our Dispatcher which queues up our Actions as Promises and executes them as they are received.  We'll also create an AppDispatcher which, unlike the Dispatcher, is more specific to our application.

Topics

Instructors

Content Type