Learn Flow, Prisma and Xstream

(This collection is still WIP)

Databases are essential for any full-stack applications, but working with them is traditionally very difficult. Prisma is here to change that. It's a powerful database toolkit that helps us think in data itself - not SQL, not classes, just the data we care about in our apps.

In this series, we will learn how to leverage the power of Prisma to automatically generate a type-safe, autocomplete-ready, and efficient query builder, all based on a simple and easy-to-read schema. We will integrate all this good stuff into a Next.js project to complete a simple social network app.

In the end, you will be able to understand how Prisma works, and confidently start using Prisma in your own project.

Prisma is an open-source database toolkit. It replaces traditional ORMs and makes database access easy with an auto-generated query builder for TypeScript & Node.js.

prisma

Build a full-stack app with Prisma

This collection explores one of the most promising and coolest releases of early 2020 - prisma v2. First part of the prisma infrastructure to exit experimental mode - prisma client is an auto-generated and type-safe query builder for Node.js & TypeScript. We will explore and learn it  in this collection!

Get started with Prisma v2. Prisma Client

In this tutorial we will spin the docker container with official postgres image and access the database with `psql` to set up an easy playground for PostgreSQL relational database.


Run postgres database in docker container

In this lesson you write initial boilerplate for prisma (spoiler: it's not bigger than this summary) with typescript infrastructure.

Create new project with prisma

In this lesson you will learn how to connect your prisma to postgres db to be able to introspect it. We will also go trough the models and touch prisma naming convention.

Connect prisma to PostgreSQL database running in docker container

In this lesson you will learn how to generate type safe orm client with `prisma generate` and do first write operation using it.

Generate type safe client with prisma

In this lesson you will learn how to perform the simplest `findOne` and `findMany` read operations from postgres database using prisma client.

Perform read operations using prisma client

In this lesson you will learn how to perform the  `update`  operations on postgres table entries using prisma client.

Perform update operations using prisma client

In this lesson you will learn how to perform the `delete` operations on postgres database table entries using prisma client.

Perform delete operations with prisma client

In most of cases your database schema won't stay the same for too long - let's learn how to update the prisma client so it has access to all of the additions made to the postgress

Evolving prisma schema

Prisma makes database access easy with an auto-generated and type-safe query builder.

In this lesson, we will learn how to install all the necessary dependencies and set up Prisma for an existing npm project, with an empty PostgreSQL database running in the background. We will create our first Prisma data model in the schema, and use *Prisma Migrate* to map our data model into the database. 

Finally, we'll generate the *Prisma Client* into our `node_modules` directory, so later we can simply import and use the client tailored to our data models as a normal npm package in the project.

At the time of recording this lesson, *Prisma Migrate* is in an experimental state, so the extra flag `--experimental` is needed to perform the `save` and `up` commands.

Install and Set up Prisma for a New Project

In this lesson, we will write a code snippet which creates a new entry in the database. We will import and use the Prisma Client that we previously generated by running the command `npx prisma generate` to perform this query. 

Thanks to type-safety, we can now directly catch mismatched data field types while we are coding, drastically reducing the chance of having bugs in the code.

Tip - When in doubt, you can always use the key combination `ctrl-space` to invoke the autocomplete feature of VS Code. This is also a huge benefit made possible by Prisma's type-safety, and is super handy for exploring the Prisma Client API.

Create an entry in the database with Prisma Client

Apart from creating entries, it's also very intuitive to read, update, or delete data from the database with Prisma Client.

In this lesson, we will explore the [Prisma Client API](https://www.prisma.io/docs/reference/tools-and-interfaces/prisma-client/crud) for `findMany`, `findOne`, `updateMany`, `deleteMany` and so on.

Notice that since all these methods are tailored to the schema that we defined earlier, VS Code is aware of what is valid and is able to prompt us with helpful autocomplete options, making it much easier to explore the Prisma Client API.

Perform basic database queries (CRUD) with Prisma Client

In this lesson, we will learn how to model data relationships with Prisma Schema. 

We will be using a social network as our example, create data models such as users, posts, likes, comments, and model the relations between them. After this lesson, you should be able to model common relations like *one-to-one* (1:1), *one-to-many* (1:n), *many-to-many* (n:m) with Prisma.

At the time of recording this lesson, *Prisma Migrate* is in an experimental state, so the extra flag `--experimental` is needed to perform the `save` and `up` commands.


Work with Models and Relations with Prisma Schema

flow

We'll go over some of the built-in types in Flow and how to add them to our projects by adding type annotations to our variables in JavaScript. We'll also learn about type mismatch errors when we give a variable a value that doesn't match its type annotation and how to fix it.

Primitive Types in Flow

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

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

Let's learn how to set up Facebook's Flow inside of a project and write a simple typecheck task that will let us run Flow against any files in our codebase.

Up and Running with Facebook Flow for Typed JavaScript

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

Nuclide is the IDE Facebook employees use to write React code. But setting it up to use Flow type checking and Eslint to lint files on the fly is tricky. This video shows you how. 

Setup Nuclide to use Flow and Eslint (Mac)

In this lesson we are going to add types throughout our basic todo list component. This includes type checking the component props, local state, and property methods. 

Type Check React Components With Flow

In this lesson we are going to take a React and Redux application and add flow types throughout. This includes type checking a react component, a reducer, some actions, and a connect method. 

Type Check Redux Apps with Flow

Tools like Firebase give you a powerful API that connects directly with your client apps. Though powerful, Firebase can be difficult when writing complex data to the database or querying for a complex data structure.

GraphQL, on the other hand, has a powerful API too and an easy Graph spec to query and write to your data source. Unlike Firebase, it doesn't come with a data persistence layer.

Prisma is an open source database layer for GraphQL projects. It serves as both an ORM and also hides the complexity of writing complex resolvers.

This lesson shows how, without a server, you can Firebase-like GraphQL database that your client can talk directly with.


Topics

Instructors

Content Type