Learn Babel, Prisma and Webstorm

(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

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

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

When exploring a new framework or technology, it is nice to have a seed project or sandbox so you can just get in and start playing. Let's build our React playground using npm, browserify, 6to5, and more within WebStorm!

Setting up a React Playground Dev Environment

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

Lightweight yet powerful IDE, perfectly equipped for complex client-side development and server-side development with Node.js.

webstorm

John Lindquist is a WebStorm wizard. In this lesson, he'll show you some of the tips & tricks he uses to squeeze maximum productivity out of his tool of choice. 

Tips & Tricks

You can easily share your code from WebStorm with others using the "Create Gist" feature. This lesson walks you through how to create a gist from a single or multiples files and also how to use gist.run to share a running version of your code

WebStorm - Sharing a Gist

WebStorm can save you tons of time by managing your imports for you. John walks you through a few key WebStorm importing tips to help speed up your importing workflow.

Topics

Instructors

Content Type