DEV Community: Pablo Yeverino

Debouncing vs Throttling

Pablo Yeverino — Thu, 20 Jun 2024 21:47:49 +0000

This is a submission for DEV Computer Science Challenge v24.06.12: One Byte Explainer.

Explainer

Debouncing is like me waiting for you to finish your question to be able to answer it. Throttling is me answering just 1 question every 5 minutes.

Cleaner React validations

Pablo Yeverino — Wed, 28 Oct 2020 17:06:30 +0000

10/28 - Yesterday I finished an assignment related to a 'Change phone-number form and it looks like this:

So, to validate I need to check every change of the Input fields in order to enable or disable the button... easy right??

Just for context, I'm using useState hooks for each value of the field and another one to the enabling state of the button. Also, I'm managing state with MobX, so the user's current phone number and country code properties of userStore. Hopefully it's enough context for the next snippets.

After some really nice PR review, my code was simplified to this:

I really like the approach because is pretty much self explanatory and a little bit cleaner.

What am I doing today:

Start doing push ups each two brakes. That means that if I take a brake every hour, I should do 4 rounds of push-ups a day. What do you thing??
Take at least 30 minutes of video editing course.

If you got all the way over here, I really appreciate it!!

If you want to, follow me on Twitter

Basic differences between three GraphQL-servers.

Pablo Yeverino — Sun, 17 Nov 2019 01:07:17 +0000

Hello!!!

TL;DR: A comparison between express-graphql, apollo and yoga was made for a Hello World! Query. In order to setup a simple GraphQL API, considering the size and number of files, Express-graphql is the champion here🥇. The complexity of the SDL Implementation is not very different and definitely a more extensive analysis has to be done in order to choose a tool for an enterprise size application.

I wanted to compare express-graphql, apollo and graphql-yoga with Node.js The main information that I want to get are dependencies, size of development project and the most important, the way to implement the Schema definition language (SDL), in order to build the schema.

Express-graphql.

This is the simplest way to run a GraphQL API.

Dependencies:

graphql
express
express-graphql

Size:

5.1 MB
862 files.

SDL implementation.

The buildSchema method is imported from graphql in order to build the schema.



const { buildSchema } = require('graphql');

const schema = buildSchema(`
  type Query {
    hello: String!
  }
`);

Here is the video of all the steps.

Apollo Server.

At the Apollo Documentation we can read that Apollo Server is the best way to build a production-ready, self-documenting API for GraphQL API clients, using data from any source.

Dependencies:

graphql
apollo-server

Size:

16.7 MB
4,502 files.

SDL Implementation

The gql function is imported from apollo-server to parse the plain string that contains the GraphQL code.



const { gql } = require('apollo-server');

const typeDefs = qgl`
  type Query {
    hello: String!
  }
`;

Is worth to note a difference between the resolvers with Express and Apollo, in the former you only add the function which will resolve the hello Query. In the last, you have to define the resolvers according to the types.

Also I made a video implementing the Apollo server.

GraphQL-Yoga Server

Graphql-yoga is a fully-featured GraphQL Server focused on easy setup, performance and great developer experience as can be read at the creator's repo. It was created by Prisma.

Dependencies:

graphql-yoga

Size:

14.6 MB
4,634 files.

SDL Implementation

In this case, any function has to be imported in order to parse the plain string, so the schema is created out of it completely.




const typeDefs = `
  type Query {
    hello(name: String): String!
  }
`;

The resolvers have to be defined in the same way as with Apollo, by type and field.

Here is the video of the same API that have been created in the other two cases. In this example, the query can take an String argument.

How can you show your work if you are a backend developer???

Pablo Yeverino — Sat, 16 Nov 2019 18:07:12 +0000

Hello, there!!

I just read a post from Lady Bug (I lost the link, but I'll put it in the comments), then I went to her profile and noticed she has a link to Dribbble, so I went there and it's a cool platform for designers. So this question popped out!! Hope you have some ideas!!

Have a great weekend!!

Studying by writting

Pablo Yeverino — Sat, 16 Nov 2019 04:19:57 +0000

I am preparing to land a job in the next months, so I want to review the basic, and not so basic, concepts of all the stack I've used along my working experience since Vanilla Javascript, Node JS, GraphQL to MongoDB and AWS.

A very helpful way to study and learn for me is to write down what I read, as well as to build examples so I tought that if I am doing that anyway, it is a good idea to share it. Let' see how it works.

At the moment, the topics that I know I have to review are:

GraphQL and RESTful API's difference
Tracking MongoDB document changes with NodeJS
GraphQL pagination
Defining AWS Architecture

GraphQL and RESTful API's difference

First, from my point of view, a definition of a RESTful API is the way a server expose its data and it makes stateless transfer. There are 5 fundamentals of the REST architecture: 1

Everything is a Resource:
- Is important to think in terms of resources instead of physical files. Client has access to the resources over some URI.
Unique identifier:
- In REST, every resource should be represented by a unique URI.
Simple and uniform Interfaces
- To send and request data to those resources, HTTP methods are used to replace a list of English-based methods like GetCustomer. In this case, we need the URI that represents the resource (www.mysite.com/Customers/1234), and the GET method.
Representations:
- In the requests/responses from/to the API, what actually we are sending are represantations of the resource data, which could be XML, JSON, etc.
Stateless:
- Each request is independent to the others.

Let's imagine a page where the name of a blogger, the titles of her blog posts and the last three followers has to be displayed.

In order to accomplish the task, three different GET fetches have to be done:

/users/<id> //To get the user name
/users/<id>/post // To get her posts
/users/<id>/followers

With GraphQL, you should think in graphs, not in endpoins, as Lee Byron, co-inventor of GraphQL, says in his Lessosns From 4 Years of GraphQL. [2]

A query with GraphQL to accomplish our hypothetical task would look like the following:

Query {
  User(id: "exampleId123") {
    name
    posts {
      title
    }
    followers (last: 3) {
      name
    }
  }
}

And the response for that query looks like the following:

{
  "data": {
    "User": {
      "name": "Mary",
      "posts": [
        { title: "Learn GraphQL today" }
      ],
      "followers": [
        {"name":"John"},
        {"name":"Alice"},
        {"name":"Sarah"}
      ]
    }
  }
}

As we see, one simple query with the POST method can retrieve the information with the exact data, which could be very difficult to implement with a RESTful API.

Some problems that we are solving with GraphQL will be the following:

Overfetching: When a query is made to get just specific data but the response is complex and with an specifica data structure.
Underfetching: In order to complete the information, a second query has to be done. This issue is known as the n+1-request problem.
Rapid Product iterations on the Frontend: A common pattern with RESTful APIs is to structure the endpoints according to the views, so if the front end changes, backend has to change also.
Insightful Analytics: Queries and resolvers performance can be monitored.
- Schema and type system: GraphQL use the Schema Definition Language to define the schema of an API based on types.

I am just watching the GraphQL documentary and they give a great explanation: [3]

Think APIs as a vending machine.

To get information, you put a quarter, push a button and get a product, so if you want many products, you have to push so many buttons. Then, REST come to the scene and try to figure out which products belong together, so the machine vending is programmed in order tu push a button and get any ammount of product that the vending machine owner decides, and maybe it returns some spare change in order to get more products.

Now GraphQL comes to the vending machines and bring the hability to the client to decide which buttons to press in order to get multiple products at one time.

I am gonna stop here this post and for sure I will continue with practice and snippets.

Hope you like it!! And if so, keep the conversation on Twitter

DEV Community: Pablo Yeverino

Debouncing vs Throttling

Explainer

Cleaner React validations

Basic differences between three GraphQL-servers.

Express-graphql.

Dependencies:

Size:

SDL implementation.

Apollo Server.

Dependencies:

Size:

SDL Implementation

GraphQL-Yoga Server

Dependencies:

Size:

SDL Implementation

How can you show your work if you are a backend developer???

Studying by writting

Table of contents

GraphQL and RESTful API's difference

Think APIs as a vending machine.