DEV Community: Julián Scialabba

GraphQL - What is it and what does it solve?

Julián Scialabba — Sun, 13 Sep 2020 23:50:22 +0000

When I read for the first time about GraphQL and the problems that it solves I went crazy. For that reason I want you to know about GraphQL.
In this post I will explain what GraphQL is and what was the motivation for its creation.

What is GraphQL?

GraphQL is a query language to build APIs. It was created by Facebook with the motivation to solve some problems that REST APIs were causing them. The Mobile Facebook team were having problems with REST that were affecting their app performance. They had to do multiple requests for a simple app page and they also had problems with overfetching data. For that reason, the app performance was being affected. Thus, they started to create a new query language in which a client can specify exactly what data it needs and receive it in a single request.

In 2015 Facebook released a specification of the language. The specification was highly adopted by the community and the same community has developed multiples client and backend implementations in differents languages: https://graphql.org/code/

Currently, GraphQL is being used by lots of different companies such as GitHub, Twitter, Airbnb, Atlassian, among others.

What does GraphQL solve?

In this section, I will explain some problems of REST that GraphQL solves. The motivation of GraphQL was solve these problems, so it is important to know them.

Multiple Request

Suppose we need some information to fill out a page. On this page, we want to show a list of posts with their related user and comments.

Using REST API

If we are using a REST API, we probably will have to make several requests to be able to have all the information required by the page:

// Get a list of posts - GET
curl https://jsonplaceholder.typicode.com/posts

// Get user of each post -> N request if you have N posts
curl https://jsonplaceholder.typicode.com/users/{post.userId}

// Get comments of each post -> M requests, if each post would have M comments
curl https://jsonplaceholder.typicode.com/comments/${post.comments[i].id}

In this example, we can see an important problem. For each post we have to do:

1- An extra request to fetch the user.

2- If a post has M comments, M request for fetch all comments.

So, considering that we fetch N posts and each post have M comments:

totalRequests = 1 (fetch posts)+ N (fetch user) + NM (fetch comments)
totalRequests = 1 + N + NM

For example, if in a simple page we have 20 posts and 3 comments for each post, in total we will doing 1 + 20 + 20 * 3 = 81 requests.

This problem between posts and comments is a known problem called N + 1 problem. This problem occurs when we fetch a simple resource (1 request) and also we have to do N requests more to fetch all the needed information.

You can tell me that with a refactor in the API this problem disappears. And that is true. If we create a new endpoint like:

curl https://jsonplaceholder.typicode.com/posts/1/comments

We only have to do a single request per post to fetch all its comments. Even better, if we send the comments inside the post resource we won't need an extra request.

However, we shouldn't change our backend according to our frontend needs. This is expensive and reduces our development speed.

Using GraphQL

GraphQL allows us to get all the data that we need in only ONE request. A GraphQL query to get the same information that the previous example:

{
 getPosts{
   id
   title
   body
   user {
     id
     username
     avatar
   }
   comments {
     id
     body
     author {
       id
       username
       avatar
     }
   }
 }
}

With this unique GraphQL query we will get a list of posts with all the needed information. And this is an important advantage over REST.

Underfetching and Overfetching

Following the example of the before section, suppose we need to fill out a page with a list of posts. On this page we have to show the title, user's username and tags of each post.

Using REST API

We have an endpoint in our API that returns a list of posts with the following data:

[
{
  id: '1',
  title: 'A title',
  userId: '1',
  tags: ['js', 'html'],
  likes: 12,
  body: 'Post body',
  image: 'An img'
}, 
{...}, 
{...}
]

In the new page we only need the title, user's username and tags of each post. So, we can see that we are underfetching and overfetching data. We are underfetching data because we will need to request other endpoint to fetch the user's username. And we are overfetching data because attributes like 'body', 'image' and 'likes' are not used in the page. This is a REST APIs problem because endpoints returns fixed data structure. So, when we hit an endpoint it return a fix data that may contain more o less information than we need.

Using GraphQL

GraphQL allows the client can specify exactly the data it needs. Thus, we won't have the problem of underfetching and overfetching data. An example query could be:

{
 getPosts{
   id
   title
   tags
   user {
     username
   }
 }
}

Then, with a single query, we will obtain the exact information that we need to avoid underfetching and overfetching data.

Frontend coupled with Backend

Suppose we are developing a new page in our app. When we are analyzing what data we need, we identify that we have to call several REST API endpoints to get all the data.

If we don't want to affect the performance of the app because of the multiples API requests, we may do some changes on the REST API endpoints or create a new endpoint that returns all the data that we need for the page with only one or few endpoints. This situation often happens with REST APIs and we usually have to decide whether to make changes to the API or adapt the frontend to the information provided by the API. And this is a problem because we are coupling our frontend and backend.

With GraphQL this problem disappears. The client can obtain the data that its needs in any page without changing anything in the backend. The only the client has to know is the Schema of the GraphQL API. The GraphQL Schema defines the data provided by the API and clients can consume that data as they want.

Lack of a contract between Frontend and Backend

REST defines how a client and a server can communicate but don't define anything about the data structure of the information exchanged between the client and server. The decision about the data structure is open and usually the backend decides how to send and receive information with the clients. In organized teams, frontend and backend teams can agree about the endpoints and data structure of the API. Anyway, it is not a characteristic of REST APIs but the well-organized teams. In a lot of other situations where we have to use an external REST API we don't know about the data structure until we start using the API.

GraphQL solves that using a strong type system to define the data structure and the information that can be consumed from our clients. All these definitions are written down in a Schema using the GraphQL Schema Definition Language (SDL). Here an example:

type Post {
  id: ID!
  title: String!
  body: String!
  user: User!
  comments: [Comment]
}

type Comment {
  id: ID!
  body: String!
  user: User!
}

type User {
  id: ID!
  username: String!
  avatar: String
}

type Query {
  getPosts: [Post]
  getUsers: [User]
}

This schema serves as a contract between the client and the server.

Once the GraphQL Schema is defined, then frontend and backend teams can work independently because it exists a contract between them. So, frontend team can mock the data following the Schema and develop the entire frontend app or web page. When the backend is ready, then frontend team can use the real GraphQL API.

API without documentation

REST doesn't force you to create documentation about the API. There are tools like Swagger that helps developers to create REST APIs documentation. However, it requires an extra effort for the developer to create and maintain it. For that reason there are a lot of REST APIs with no documentation or with outdated documentation.

Due to GraphQL uses a strong type system it is a documented language by definition. So, only creating our GraphQL Schema we are generating our API documentation. For example, here a gif with the documentation of the Schema defined above:

Lack of API usage tracking

With REST the only we can track about how clients consume our API is how often each endpoint is called.

With GraphQL, as each client specifies exactly the information that they are interested in, we can understand what data is being used and what is not being used. Also, we can measure performance for each attribute requested and this provides crucial insights about the performance of your API.

Conclusion

We have seen what is GraphQL and the advantages of GraphQL over REST.

GraphQL is a powerful tool but it is not a silverbullet. Building an API REST can be simpler. So, if you don't care about the REST problems that I have mentioned in this post, REST is a good choice for your project.

Thanks for reading!

JavaScript Data Types

Julián Scialabba — Tue, 18 Aug 2020 16:02:18 +0000

In this post, I will explain each Javascript data type. I will focus on a simple definition of each data type and some characteristics and problems about them.

Primitive Data Types

A primitive data type is an immutable data that doesn't have either properties or methods.

There are 7 primitive types:

undefined, null, string, number, boolean, symbol (ES5), bigint (ES11)

Before I explain each type, I would like to introduce the typeof operator.

Typeof operator

To know the type of any value, you can use the typeof operator. The typeof operator returns a string which indicates the type of the parameter value.

typeof("Hola") // string
typeof(12) // integer
typeof(true) // boolean
typeof(undefined) // undefined
typeof(null) // object
typeof({}) // object
typeof(Symbol()) // symbol
typeof(1n) // bigint
typeof(function(){}) // function

In the previous example, there are two cases in which typeof operator doesn't return the expected data type:

typeof(null) = 'object'
typeof(function(){}) = 'function'

Later, I will explain the reason of this behavior.

Explaining each Primitive Data Type

Undefined

It is a data type which represents a non-defined value. It means that you declare a variable but you don't set a value. The variable will contain an undefined value.

The typeof operator with an undefined value or with a non-declared variable returns 'undefined'.

var a;
console.log(a); // undefined
console.log(typeof(a)) // 'undefined'
console.log(typeof(b)) // 'undefined'
console.log(b) // Uncaught ReferenceError: b is not defined

If you want to clean a variable, you can set undefined, but it's not a good practice. For this purpose you should use the data type null.

Null

It is a data type which represents the absence of value. It means that a variable contains nothing or you don't know its value yet.

You should set null instead of undefined when you want to indicate that the variable is defined but without a value.

const a = null;
console.log(a); // null
console.log(typeof(a)); // 'object'

Something interesting with null is that typeof(null) = 'object'

This is an unexpected behavior because null is a primitive data type, so typeof(null) should be null. It's a bug from the beginning of the language. There was a proposal to fix this bug but it was rejected because this fix would break a lot of existing deployed code. Here the link of the proposal: https://web.archive.org/web/20160331031419/http://wiki.ecmascript.org:80/doku.php?id=harmony:typeof_null

String

It's a data type which represents text. It is used to store and manipulate text.

You can define a string using single quotation marks, double quotation marks or backticks. With backticks, you can concatenate and interpolate variables inside the string.

const name = 'Julian'; // Single quotation marks
const lastname = "Scialabba"; // Double quotation marks
const hello = `Hello ${name} ${lastname}`; // Backsticks -> Hello Julian Scialabba
console.log(typeof(hello)); // 'string'

String is a primitive data type. It means that strings don't have methods. But, why can we do something like that?:

const name = 'Julian';
name.length // 6 
name.toUpperCase(); // JULIAN  
//Why this string primitive has attributes and methods?

You can see that our string primitive is behaving like an object because it has properties and methods. And that is what really happens because it is an object. JavaScript internally creates a wrapper object that provides functionalities to our string primitive. JavaScript has wrapper objects for all primitives data types except for null and undefined. For this reason, null and undefined don't have methods and we usually find errors like:

var a;
var b = null;
var c = 'Hello';
console.log(a.toString()); // TypeError: a is undefined
console.log(b.toString()); // TypeError: b is null
console.log(c.toString()); // Hello

You can also create a wrapper object on your own:

const name = String('Julian');
console.log(typeof(name)); // 'string'

This way of creating a String is useful because it allows us to cast values. For example:

const numberStr = String(123);
const boolStr = String(true);
console.log(numberStr) // '123'
console.log(boolStr) // 'true'

You can also create a wrapper object with 'new' operator:

const name = new String('Julian');
console.log(typeof(name)); // 'object'

But, this way of creating a primitive value is not recommended. It is inefficient and it could cause confusion because the type of the variable is 'object' instead of 'string'.

You can create strings through Javascript type coercion, too. For example:

const age = 29;
const ageFromWrapperInteger = age.toString() // '29'
const ageCoercionStr = 29 + ''; // '29'
const isMaleCoercionStr = true + ''; // 'true'
console.log(typeof(ageFromWrapperInteger)); // 'string'
console.log(typeof(ageCoercionStr)); // 'string'
console.log(typeof(isMaleCoercionStr)); // 'string'

Number

It's a data type which represents numbers with or without decimals. It is used to store and operat numbers.

You can define a number using numbers without quotes or with the number wrapper object.

const number = 29;
const numberWithDecimals = 3.14;
const numberObjectWrapper = Number('2'); // 2
typeof(number); // 'number'
typeof(numberWithDecimals); // number
typeof(numberObjectWrapper); // number

Numbers in Javascript are encoded as double precision floating point numbers, following the international IEEE 754 standard. This format uses 64 bits to store the numbers. As a result of this representation, we have to consider two situations when we work with numbers:

Safe integers
Operations between decimal numbers

Safe Integers

Numbers in JavaScript have a safe range in which you can operate accurately:

[Number.MIN_SAFE_INTEGER, Number.MAX_SAFE_INTEGER] = [-2**53+1, 2**53-1] = [-9007199254740991, 9007199254740991]

If you operate outside the limits, your operations won't have precision and some numbers might not be represented. For example:

const maxSafe = Number.MAX_SAFE_INTEGER; //9007199254740991
const x = maxSafe + 1;  //9007199254740992
const y = maxSafe + 2;  //9007199254740992
x === y // true

ES11 specification added a new primitive data type to handle numbers larger than 2**53 - 1. It is called BigInt and I will explain it later.

Operations between decimal numbers

Numbers in JavaScript are stored in base-2 (binary) system. There are some decimal fractions that can't be represented exactly as binary fractions. For that reason, we have problems like the following:

0.2 + 0.1 // 0.30000000000000004
0.2 - 0.3 // -0.09999999999999998

You should be careful when you operate with fractions and when you need precision on your operations. To handle this problem, we have some options:

Work with a library:

If you need precision, you can work with a library, like Big Decimal, that handles this problem.

Round numbers:

You can round numbers with the method Number.toFixed(digits)

const number = 0.1 + 0.2; //// 0.30000000000000004
const numberFixedStr = number.toFixed(2); // '0.30'
const numberFixed = +number.toFixed(2); // 0.3

You can see that toFixed returns a string. If you want to get an integer number, you have to write a + at the beginning of the result (it coerces from String to Number types).

Work with integers:

Another option is to transform all our decimal numbers to integer numbers. Then you operate with integers, and finally you return the decimal number. For example:

const number1 = 0.1 * 100;
const number2 = 0.2 * 100;
(number1 + number2) / 100; // 0.3

NaN: Not a Number

The NaN value is a number that represents invalid numbers. There is a method isNaN(value) that indicates if a value is a NaN.

const x = 0/0; // NaN
const y = 1 * undefined; // NaN
const z = Number('Sarasa'); // NaN
typeof(x); // 'number'
typeof(y); // 'number'
typeof(z); // 'number'
x === y; // false
NaN === NaN // false
isNaN(x); // true

The value NaN isn't equal to any value, not even to NaN.

Boolean

It's a data type which represents the two boolean values: true or false.

const isValid = true;
const isFetching = false;
const isLoading = Boolean(true);
typeof(isValid); // 'boolean'
typeof(isFetching); // 'boolean'
typeof(isLoading); // 'boolean'

You can create boolean values as in the previous example or you can create boolean values with:

Comparison and logical operators
Truthy and falsy values.

Comparison and logical operators

The comparison and logical operators are used to test any value data type and return true or false.

Comparison Operators:

Equal value: ==
Equal value and type: ===
Not equal value: !=
Not equal value and not equal type: !==
Greather than: >
Less than: <
Greather than or equal to: >=
Less than or equal to: <=

Examples:

'123' == 123; // true
'123' === 123; // false
'123' != 123; // false
'123' !== 123; // true
123 > 123; // false
123 >= 123 // true
123 < 100 // false
123 <= 122 // true

Logical Operators

Not: !
And: &&
Or: ||

Examples:

!true // false
true && false // false
true || false // true
true && !false // true

Comparison and Logical Operators can be used in conditional statements:

const isValid = true;
const isFetching = false;
const name = '';
if(isValid && !isFetching){
 console.log('Fetch values');
}
if(!name) {
 console.log('User without name');
}

In the first if you can see that the condition is based on two boolean values. However, in the second if the condition is a String value. Why can we use any data type inside the conditional statement? It is due to Javascript type coercion and truthy and falsy values.

Falsy and truthy values

Javascript type coercion is the implicit conversion of values from one data type to another. This conversion is done automatically by the Javascript engine. Here, some examples:

'1' + 1 // '11' -> Converts Number to String and concat strings
'1' - 1 // 0 -> Converts String to Number and substract numbers
'1' * 1 // 1 -> Converts String to Number and multiply numbers
'1' + true // '1true' -> Converts Boolean to String and concat strings
1 + true // 2 -> Converts Boolean to Number and sum numbers. True = 1
1 + false // 1 -> Converts Boolean to Number and sum numbers. False = 0
'1' - true // 0 -> Converts String and Boolean to Numbers and substract numbers

If a value is inside of a conditional statement, it will be coerced as boolean type. The values that are coerced as true are called 'Truthy Values' and the values that are coerced as false are called 'Falsy Values'.
All the values that are not falsy are truthy values. For this reason, we only have to know the falsy values:

Number zero: 0
BigInt zero: 0n
Empty string: ''
Null: null
Undefined: undefined
Not a Number: NaN

Boolean(0) // false
Boolean(0n) // false
Boolean('') // false
Boolean(null) // false
Boolean(undefined) // false
Boolean(NaN) // false
Boolean({}) // true -> Empty object is truthy
Boolean([]) // true -> Empty array is truthy
Boolean('Hello') // true

Symbol

It's a data type that was introduced in ES5 and represents an unique identifier. It can be created using Symbol() with an optional string as parameter.

const aSymbol = Symbol();
const symbolId = Symbol('id');
const anotherSymbolId = Symbpl('id');
typeof(aSymbol) // 'symbol'
symbolId === anotherSymbolId // false

Each symbol has to be unique. For this reason, the equal comparison between two symbols with the same description is false. Every time you create a Symbol(), you will get a new and unique symbol that will be different from others.

Symbol() === Symbol() // false

Symbols are used to:

Identify unique and hidden properties on objects.
Identify a list of unique constant values.
Implement Well-Known Symbols to change some characteristics of the language: https://tc39.es/ecma262/#table-1

BigInt

It's a data type that was introduced in ES11. It represents numbers larger than 2**53 - 1, which is the limit for the primitive data type number. BigInt provides support for integers of arbitrary length but not for decimal values.

A BigInt can be created adding an n at the end of the number or with the wrapper object BigInt(value)

const bigIntValue = BigInt(1); // 1n
const anotherBigIntValue = BigInt('9999') // 9999n
bigIntValue + anotherBigIntValue // 10000n
const maxSafeInteger = 9007199254740991n; // MAX_SAFE_INTEGER
const maxSafeInteger1 = maxSafeInteger + 1n; // 9007199254740992n
const maxSafeInteger2 = maxSafeInteger + 2n; // 9007199254740993n -> With numbers we can't get this value
maxSafeInteger1 !== maxSafeInteger2 // true
typeof(maxSafeInteger) // 'bigint'

The available operators for BigInt are: +, *, -, **, /, %. You can't operate between a BigInt and a Number with those operators. You can't either operate with the Math library because this library uses data type Number.

const maxSafeInteger = 9007199254740991n;
maxSafeInteger + 9n // 9007199254741000n
maxSafeInteger - 1n // 9007199254740990n
maxSafeInteger * 2n // 18014398509481982n
maxSafeInteger ** 2n // 81129638414606663681390495662081n
5n / 2n // 2n -> It is rounded towards 0 because BigInt doesn't represent decimals
maxSafeInteger % 2n // 1n
maxSafeInteger + 2 // can't convert BigInt to number
Math.pow(3n,2) // can't convert BigInt to number

Comparisons between BigInt and Number work fine:

3n > 2 // true
1n > 2 // false
2n >= 2 // true
2n == 2 // true
2n === 2 // false -> The types are different

And finally, the only falsy value of BigInt is 0n.

Boolean(0n) // false
Boolean(1n) // true

It's not recommended that you coerce BigInt to Number. If you need numbers lower than 2**53 -1, you should use Number data type. If you need numbers higher than 2**53 -1, you should use BigInt data type.

If you coerce a BigInt higher than 2**53 -1 to number, you might loss precision.

Number(1n) //1
Number(9007199254740993n) //9007199254740992

Object Data Type

In JavaScript, every value that is not a primitive data type is an object data type.

Object data type is used to represent values with properties and methods. While primitive data types represent a simple immutable value, an object data type represent collection of data and more complex entities.

The typical Javascript key-value structure is an object data type.

const person = {
  name: 'Julian',
  lastname: 'Scialabba'
};
typeof(person); // 'object'

Other structures like Array, Function, Set, HashMap, Date, among others, are objects data type, too.

const numbers = [1, 2, 3, 4];
const aSet = new Set();
const aDate = new Date();
const sayHello = function(name){
  console.log(`Hello ${name}!`);
}
typeof(numbers) // 'object'
typeof(aSet) // 'object'
typeof(aDate) // 'object'
typeof(sayHello) // 'function'

We might expect that typeof(function(){}) = 'object' but instead is typeof(function(){}) = 'function' . It can be explained because ECMAScript specification defines typeof operator as follows:

Typeof Val	Result
Undefined	'undefined'
Null	'object'
Boolean	'boolean'
Number	'number'
String	'string'
Object (Not implement [[Call]])	'object'
Object (Implement [[Call]])	'function'

So, typeof(function(){}) = 'function' because function is an object that implements [[Call]].

Conclusion

I have explained every primitive data type and the object data type. I have focused on a simple definition of each data type and some characteristics and problems about them.

I hope that you like this post! Let me know your thoughts on the comments.

Thanks for reading!

Dividing JavaScript definition into pieces

Julián Scialabba — Thu, 06 Aug 2020 02:04:52 +0000

The goal of this post is to divide and understand each part of the Javascript definition. I will explain an overview of each concept instead of explaining each concept deeply. If you want to know more about some concept, let me know in the comments.

Definition

JavaScript (JS) is a lightweight, prototype-based, multi-paradigm, single-threaded, dynamic language with first-class functions. As a multi-paradigm language, JavaScript supports event-driven, functional, and imperative programming styles. It can be an interpreted or just-in-time compiled programming language, depending on the implementation.

Also, JavaScript is a programming language that conforms to the ECMAScript specification.

Ok, this is a complete definition of JS. But, what does each part of this definition mean?

ECMAScript

It is called ECMAScript to the specification named as ECMA-262. It contains the specification to create a general-purpose scripting language.

ECMAScript provides the rules, details, and guidelines that a scripting language must observe to be considered as an ECMAScript compliant. This was published by Ecma International, which is an organization that creates standards for technologies.

For more details about the specification: https://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf

Lightweight

A programming language is lightweight when it is easy to implement, has a minimalist syntax and features, and uses a very small amount of memory while running.

Interpreted or Just-in-time compiled (JIT)

At the beginning of JS, we could call it as an interpreted language because its engines were mere interpreters but nowadays there is a new generation of ECMAScript engines that implement just-in-time compilation (JIT) to improve its performance.

So, we cannot call JS as an interpreted language because it entirely depends on the implementation.

Multi-paradigm

A programming paradigm is a style or a way of thinking about software solutions based on some principles of programming. It is a method to solve a problem which uses tools and techniques that are available for us.

Some languages are easy to write in specific paradigms but they are difficult or imposible in other paradigms. In the case of JavaScript, it makes us easy to follow the event-driven, functional, and imperative programming styles. I will explain each one:

Event-drive programming

Event-driven programming is a programming paradigm in which the flow of program execution is determined by events. An event-driven application is designed to detect events when they occur (for example: a click or an event fired by an EventEmitter), and then deal with them using an appropriate event-handling procedure.

// WEB
const btnGreeting = document.getElementById('greeting');
btnGreeting.addEventListener("click", function () {
  console.log("I am handling btnGreeting event click");
});

// NODE
const EventEmitter = require("events");

const emitter = new EventEmitter();
emitter.on("greeting", () => console.log("I am handling the event 'greeting'"));
emitter.emit("greeting");

Imperative programming

Imperative programming is a programming paradigm that focuses on describing how a program operates. In imperative programming, you tell the program the steps it needs to do the task. Values used in variables are changed at the program runtime and control structures such as loops or conditionals are integrated into the code.

Imperative programming can be divided into: Procedural Programming and Object-oriented Programming.

Procedural Programming: it's based on putting groups of instructions into procedures. Procedures, also known as functions, simply contain a series of steps to be carried out.

Object-Oriented programming: it's based on programming objects that expose behavior (methods) and data (attributes). Then the objects send messages to communicate with each other. Object orientation can be:

Class-based: objects get state and behavior based on the class that they instantiate.

Prototype-based: objects get behavior from a prototype object.

In JS, we can program using either Procedural or Object-Oriented Prototype-based paradigms but we cannot program using the Object-Oriented Class-based paradigm because JS is a prototype-based language.

Here an example in which we will calculate an array sum with both Procedural and Object-Oriented Prototype-based paradigms.

/* Sum arrays elements with Imperative Paradigm */
const array = [10, 4, 3, 5, 3];

/* Procedural Programming */
let sum = 0;
for (let i = 0; i < array.length; i++) {
  sum += array[i];
}
console.log(sum) // 25

/* Object Oriented Programming */
function Calculator() {
  this.result = 0;
}
Calculator.prototype.sumArray = function (array) {
  for (let i = 0; i < array.length; i++) {
    this.result += array[i];
  }
}
Calculator.prototype.getResult = function () {
  return this.result;
}

const calculator = new Calculator();
calculator.sumArray(array);
console.log(calculator.getResult()); // 25

Functional programming

Functional programming is a programming paradigm that focuses on what a program must accomplish. It works with the composition of pure functions and the avoidance of shared state, mutable data and side effects. For example, a functional programming approach is using functions like map, reduce and filter instead of using loops and conditionals because your programs are more abstract and less focused on each step of the processing.

When you stop reasoning in a low level of abstraction and start thinking more at a higher level, you start thinking on functional programming.

Now, we will calculate an array sum with Functional Programming:

/* Sum arrays elements with Functional Paradigm */
const array = [10, 4, 3, 5, 3];

const sum = array.reduce((accum, currentValue) => accum + currentValue);

console.log(sum); // 25

Prototype-based

In the Imperative programming section, we defined Object-Oriented programming.

Object-Oriented programming can be Class-Based or Prototype-Based.

On the one hand, in a Class-based language, the inheritance occurs through the definition of classes. Classes describe a family of objects that have the same set of methods and properties. When you need to create an object, you have to instantiate a Class. Java or Python are languages that support Object-Oriented Class-Based programming.

On the other hand, we have languages that are prototype-based like Javascript and other ECMAScript implementations. A Prototype-based language has the notion of a Prototypical Object. A Prototypical object is an object used as a template from which you can get the initial properties for a new object. Any object can be associated as the prototype of another object, so that the second object can share the properties of the first one.

Single Threaded

JavaScript code is executed in a single thread which means that only one statement is executed at the time.

To explain it, I will explain JS Runtime.

The JS Web Runtime is composed by a JS Engine, Web API's, Callback Stack and Event Loop. In JS Runtime, we run our Javascript code.

Each web browser has a JS Runtime implementation. For this reason, we can run JS code inside it. Each web browser has its own Engine JS implementation, too. For example: Chrome has V8, Mozilla has Spidermonkey, IE has Chakra and Safari has Nitro.

JavaScript code is executed in a single thread but JavaScript runtime is not executed in a single thread. For this reason, we can execute tasks asynchronically. Thread pool exists in JS runtime but we don’t have to worry about it because Runtime takes care of it.

Then, V8 JavaScript engine has two main elements: Memory Heap and Call Stack. Memory Heap is where the memory allocation takes place and Call Stack is where the runtime keeps track of function calls. So, in the single thread, the functions loaded in Call Stack are executed. We have to be careful about blocking the Call Stack with functions which take a lot of time because any other function won't be executed in that moment. When we execute asynchronous tasks, Web API's, Callback Stack and Event Loop come into action. But this is outside the scope of this section.

Dynamic

A dynamic programming language is a programming language in which you can do many tasks at runtime. In a static programming language, you have to do the same tasks at compile time.

For example, in JavaScript it is possible to change the type of a variable or add new properties or methods to an object while the program is running. This is opposed to static programming languages, in which such changes are not possible.

First-class functions

A First-class function programming language is a programming language where the functions are treated like any other variable.

For example, in JavaScript, a function can be passed as an argument to other functions, returned by another function and assigned as a value to a variable.

Examples:

/* They can be assigned to variables */
const hello = function () {
  console.log('Hello!');
}
hello(); // Hello!

/* They can be assigned to attributes of objects */
const person = {
  name: 'Julián',
  lastname: 'Scialabba',
  sayHello: function () {
    return `Hi! I am ${this.name} ${this.lastname}`;
  }
}

console.log(person.sayHello()); // Hi! I am Julián Scialabba

/* They can be sent as an argument to others functions */
const reducerSum = function(accum, value){
  return accum + value;
}
const getSumArray = function(array) {
  return array.reduce(reducerSum);
}
console.log(getSumArray([5,4])); // 9

/* They can be returned by others functions */
const generateCalculatorMultiples = function(baseNumber) {
  return function(numberToMultiply){
    return baseNumber * numberToMultiply;
  }
}

const calculatorMultiplesOf6 = generateCalculatorMultiples(6);
console.log(calculatorMultiplesOf6(5)) // 30
console.log(calculatorMultiplesOf6(8)) // 48

Final Words

In this post, we have seen each part of JS definition.

Did I forget any other concept? Do you want to share anything else? Do you want that I explain more deeply one of the concepts before explained?

Let me know your thoughts in the comments! Thanks for reading!

CSS Flexbox Simulator

Julián Scialabba — Sun, 26 Jul 2020 23:28:46 +0000

This post is not about the main concepts of CSS Flexbox. There are a lot of excelent posts that do it, for example: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I want to share a Flexbox Simulator that I've done.
It is very simple and you can understand quickly how to build your CSS Flexbox Container according to your needs.

The main idea is to modify the flexbox-container inputs and see how the flexbox-items react.

https://juliansci.github.io/css-flexbox-simulator/

Hope you enjoy it!

Git Flow - What is it and how it works?

Julián Scialabba — Wed, 22 Jul 2020 01:25:04 +0000

Introduction

Git Flow is a Git workflow that defines different types of branches, with their responsabilities and the interaction between them.

It defines a way of using Git and its purpose is to organize the work team so that they can successfully manage the functionalities, bugfixes and releases of their projects. This workflow works great with teams of any size and with teams that have to make releases periodically.

First, I will explain the main concepts of the workflow and then the tools that help us to implement the workflow more easily.

Git Flow concepts

The workflow has two main branches: master and develop.

In the master branch, we have all the production code.

In the develop branch, we have all the development code.

Nothing unusual up to now. But Git-Flow also introduces 3 types of support branches to manage our workflow in a much more orderly way:

Feature Branch
Hotfix Branch
Release Branch

I will explain each one in more detail →

Feature Branch

A Feature Branch is a branch that only contains one functionality. If we have ten functionalities to be developed in our development stage, we will create ten independent Feature Branches.

What is interesting about Feature Branches is that they have to be created from the develop branch and they are also merged into it. In other words, the Feature Branches have no interaction with the master branch, they only have interaction with the develop branch.

Hotfix Branch

A Hotfix Branch is a branch that contains a hotfix. A hotfix is a fix to a production bug. It is called hotfix because when we make the fix it is directly merged to the master branch without going through the development stage.

We have a Hotfix Branch for each hotfix that we have to implement. The big difference with Feature Branches is that Hotfix Branches are created from the master branch and when we finished them they are merged to both master and develop branches. This is because the bug is in both environments.

Also, when we close a Hotfix Branch, we have to create a tag with the new version of the project. That is because each change we make in master branch needs a tag that represents it.

Release Branch

Once the development stage is finished we will have in our develop branch all the Feature Branches and Hotfix Branches merged.

So, if we want to have all these new functionalities in the master branch, we have to create a Release Branch.

The Release Branch is created from the develop branch. In the Release Branch, we have to make all the necessary changes to upload the release version and then we should have a testing stage before merging it into the master branch. If we find any bug as a result of the testing stage, we could fix it in the Release Branch before we close it.

Once the release version is uploaded and the testing stage is completed, the Release Branch has to be merged into both master and develop branches.
Finally, when we close the Release Branch, we have to create a tag with the new release version.

And conceptually, that is all!

The conceptual bases of the workflow are simple. So now, we will talk about how this workflow can be implemented in the real life.

Git Flow implementation

We have two ways to implement this workflow:

1- Using Git commands: create, remove and merge the branches with the well-known Git commands.

2- Using the git-flow CLI tool.

I will show you how to do it in both ways, but I recommend using the git-flow CLI tool to avoid making mistakes.

To install git-flow CLI tool, we have to run the following command:

OSX: brew install git-flow
Linux: apt install git-flow
Windows: https://git-scm.com/download/win → It is already included into Git from the version 2.5.3.

Git Flow Initialization

Basic Git commands:

The only thing we have to do is create a develop branch from the master branch.

git checkout -b develop

Git-flow CLI:

git flow init

The execution of this command will ask us several questions. We will answer everything in the affirmative. The interesting thing with this execution is that it creates our develop branch.

With this initialization, we are ready to start with the Git Flow workflow in our project!

Feature Branch

Creating Feature Branch

Basic Git commands:

git checkout develop
git checkout -b name-feature

Git-flow CLI:

git flow feature start name-feature

Finishing Feature Branch

Basic Git commands:

git checkout develop
git merge name-feature

Git-flow CLI:

git flow feature finish name-feature

Hotfix Branch

Creating Hotfix Branch

Basic Git commands:

git checkout master
git checkout -b name-hotfix

Git-flow CLI:

git flow hotfix start name-hotfix

Finishing Hotfix Branch

Basic Git commands:

git checkout master
git merge name-hotfix
git checkout develop
git merge name-hotfix
git tag name-hotfix

Git-Flow CLI:

git flow hotfix finish name-hotfix

Here we can see how useful is the Git-flow CLI since it helps us not to make mistakes.

The name-hotfix should be the next patch version for our project. For example, if our project has the version 3.1.2 and we have to create a Hotfix, the name-hotfix should be: 3.1.3. You can see more about project versions in https://semver.org/

Release Branch

Once the development stage is finished, we have to make a release with the new functionalities. Here, we have to create a Release Branch.

Creating Release Branch

Basic Git commands:

git checkout develop
git checkout -b release/1.0.0

Git-Flow CLI:

git flow release start 1.0.0

Finishing Release Branch

Basic Git commands

git checkout master
git merge release/1.0.0
git checkout develop
git merge release/1.0.0
git tag 1.0.0

Git-Flow CLI

git flow release finish 1.0.0

And that is all you have to know about Git Flow!

Things to consider:

In this section I will mention some good practices to consider when you use Git Flow workflow.

We should push every Feature, Hotfix and Release branches to remote repository. It will allow you and your team to work collaboratively and have a tracking about the status of the different implementations.
We should create a Pull Request for each branch before we finish and merge them.
The Release Branch should pass a testing stage before finish and merge it.
We should clean up the remote repository of the branches that have already been merged. A tool like git-flow-avh does it for us.

Conclusion

In this post we have seen the concepts of the Git Flow workflow and how to implement it in our projects. This workflow works great with teams of any size and with teams that have to make releases periodically.

Git Flow is not the the only workflow for Git. There are others Git workflows that fit with different types of projects and different sizes of teams. You can see some of them in https://www.atlassian.com/es/git/tutorials/comparing-workflows

Resources

Thanks for reading! Let me know your thoughts in the comments.