DEV Community: Marius Espejo

React Query: Fetch, cache, and update server data using queries and mutations!

Marius Espejo — Mon, 03 May 2021 01:29:22 +0000

In this video we discuss introducing React Query to a ReactJS application. React Query provides a hooks API which allows you to fetch, cache, and update data. At first glance it seems like just a simple library, however you'll find out that it is packed with features which pretty much handle most of the server state management concerns that you might have in any client application. This includes things like automatically de-duping requests, background refreshing, caching, optimistic updating, accessing data globally and several others.

If you make React Query manage your server state, you'll find that the remaining client state that requires management becomes VERY small and likely will remove the need for more complex solutions like Redux. This is state management solution that you absolutely should know about if you're a React developer!

Have you tried using JŌTAI with React yet?

Marius Espejo — Sat, 24 Apr 2021 23:42:01 +0000

In this video we're going to explore the Jōtai library!

In the ReactJS ecosystem you've got so many state management solutions to pick from. You've got useState, useReducer, context API, recoil, redux, zustand, and so many more!

Jotai provides a very simple minimalistic API and focuses on composing "atoms" as a bottom-up model/approach to managing state in a frontend application.

Jotai is pronounced "joe-tie" and means "state" in Japanese.

I'll be walking you through a basic ReactJS tutorial of Jotai as well as some notes on my own first impressions of using the library.

Have any of you used Jotai in production? What are your thoughts about it?

Code with me and let me know what you think!

If you're interested, I also recently made content on Zustand, another approach to state management from the same authors as Jotai.

Is Redux DEAD? Try Zustand!

Marius Espejo — Sun, 18 Apr 2021 19:10:33 +0000

With the advent of hooks a lot of ReactJS developers have moved away from Redux as the default state management of choice.

However is simply using useState, useReducer, and the context API good enough? I highly recommend checking out Zustand! Dead simple and unopinionated state management!

Zustand is a small, fast and scaleable bearbones state-management solution. Has a comfy api based on hooks, isn't boilerplatey or opinionated, but still just enough to be explicit and flux-like.

In this video we're going to walk through the basics of using Zustand. We'll also discuss the pros and cons of this approach compared to reducer-based and context-based solutions like the useReducer hook and Redux.

Let me know what you think of Zustand!

NestJS Testing Tutorial

Marius Espejo — Sat, 10 Apr 2021 21:27:17 +0000

In this video we go over the fundamentals of writing unit, integration, and e2e tests for a NestJS API application!

NodeJS Express Test-Driven API Development (TDD)

Marius Espejo — Sat, 03 Apr 2021 22:07:45 +0000

The idea behind Test-Driven Development is quite simple.

Write a test BEFORE you implement your next bit of functionality
Write the minimal implementation needed to make your test pass
Refactor and re-structure what you've written so far as needed

Then just keep cycling through those 3 steps as you build out the rest of your project!

In the following video, we learn about the basics of Test-Driven Development (TDD) specifically in the landscape of developing APIs. We use ExpressJS, Jest, and supertest as our frameworks of choice here, but the fundamentals that you learn from this video can be applied in almost any scenario, regardless of what NodeJS or testing framework you are using.

AdonisJS vs NestJS | NodeJS API Frameworks

Marius Espejo — Sun, 28 Mar 2021 16:50:14 +0000

In this video we compare AdonisJS 5 head-to-head against NestJS (with ExpressJS and TypeORM behind the scenes) and see which one comes out on top!

If you've been trying to decide which of these two Typescript-based frameworks to use, this is the content for you!

Topics covered include:

Starting a project
CRUD
Routing and Controllers
Exception Handling
Request body, query params, url params
Validation
Inversion of Control and Dependency Injection
Testing

... and more!

You can watch here:

NestJS Crash Course: Everything you need to know! | NodeJS Tutorial 2021

Marius Espejo — Sun, 21 Mar 2021 17:53:50 +0000

In this video I walk you through a crash course of one the best Node.js frameworks: NestJS!

If you're completely new to Nest and are looking to understand the fundamentals, this is for you!

Topics covered include:

Starting a project
CRUD
Modules, controllers, services, pipes
Using the CLI to generate everything
Request body, query params, url params
Validation
3-layer architecture and dependency injection
Swagger (Open API) documentation ... and more!

You can watch here:

TypeORM Tutorial: Migrations, queries, and more! | NestJS

Marius Espejo — Sun, 14 Mar 2021 03:01:52 +0000

Quite possibly one of the best ORMs you can use with NodeJS (and even more so with NestJS) is TypeORM!

In this video I'll walk you through how to set it up, connect to your database, generate and run migrations for production use, use the Repository API, create custom queries, database relationships, and so much more!

If you're looking to get started with TypeORM to create some CRUD APIs you're on the right post! 🙌

Best way to create GraphQL APIs ?? | NestJS GraphQL Tutorial

Marius Espejo — Mon, 22 Feb 2021 01:07:39 +0000

In this video I walk you through how to create a new GraphQL server and API from scratch utilizing the NestJS framework. This is, in my opinion, one of the best ways to do it!

We'll also cover multiple topics including database integration with TypeORM, queries and mutations, validation, as well as some techniques to help you develop these as FAST as possible!

Let me know what you think 🦁

Fastest Way to Create APIs!

Marius Espejo — Sun, 14 Feb 2021 02:20:34 +0000

In this video I walk you through one of the fastest ways to create a fully working RESTful Node.js CRUD API utilizing the Nestjs framework, TypeORM, Swagger/OpenAPI, and a few other packages!

Complete with API documentation! Let me know what you think 😄

Interview Practice: Buy and Sell Stock Problem

Marius Espejo — Sun, 07 Feb 2021 05:04:12 +0000

Visual learners this is for you!

Challenge:

You are given an array of integers which represent the price of a stock on a given day.

You want to MAXIMIZE your profit by choosing a single day to buy one stock and choosing a DIFFERENT day in the future to sell that stock.

Return the MAXIMUM PROFIT you can achieve from this selling transaction.

In this video I'm going to show you the different approaches to tackle this problem, starting with a basic brute force approach, then switching to something a bit more optimized using some intuition that we gather from some visuals.

Let me know what you think!

🚀 💎 👐

How To Test Dynamic Lists in React.js (TDD approach)

Marius Espejo — Sun, 31 Jan 2021 02:18:25 +0000

In my previous posts I covered the basics of how to unit test your React applications as well as how to take a Test-Driven Development approach:

React Testing Crash Course for Beginners

Marius Espejo ・ Oct 25 '20

#react #showdev #javascript #beginners

React Test-Driven Development (TDD)

Marius Espejo ・ Jan 24 '21

#react #showdev #javascript #beginners

In this next video I show you how to test lists with dynamic content and specific ordering!

We'll again take a test driven development (TDD) approach to first focus on writing the tests, then the implementation.

I also cover strategies to write the code for accessibility as well as various techniques to make it all even better!

Let me know in the comments if you have feedback!