Forem: Leonardo Maldonado

Introducing Roover – a lightweight audio library for React

Leonardo Maldonado — Thu, 10 Jun 2021 13:12:02 +0000

Modern applications are using audio all the time. Audio can turn a boring application into an interesting one, adding emotion to the content. Most of the modern applications that we use daily are using audio for at least in some part.

Work with audio in React applications is painful. There are not too many good libraries to manage audio and most of the time we need to create our solutions. Manage audio in a modern application is important and should be made by using the best tools and libraries.

Introducing Roover

Roover is a powerful and lightweight library for working with audio in React apps. It is a simple custom React hook that can be used anywhere in your application.

It is very easy to get started with Roover. Inside your React project, just run the command to install it:

yarn add roover
```



Now, just import the `useRoover` hook and start to use it:



```
import React from 'react';
import useRoover from 'roover';

const src =
  'https://storage.googleapis.com/media-session/elephants-dream/the-wires.mp3';

const App = () => {
  const {
    initial,
    loading,
    ready,
    playing,
    paused,
    onPlay,
    onPause,
  } = useRover({
    src,
    autoplay: true,
  });

  return (
    <div>
      <p>Loading: {loading ? 'true' : 'false'}</p>
      <p>Ready: {ready ? 'true' : 'false'}</p>
      <button onClick={onPlay}>Play</button>
      <button onClick={onPause}>Pause</button>
    </div>
  );
};
```



The library is fully open-source on [GitHub](https://github.com/leonardomso/roover) and we have a very clear documentation page where you can check it out and the use-cases and how to use the library properly.

Your contributions are welcome! If you have any questions or want to start to contribute to this library in any form, please open an issue. Feel free to open PR.

A letter for those who want to learn JavaScript

Leonardo Maldonado — Wed, 27 Jan 2021 17:59:04 +0000

Yesterday I received an email from a young developer who told me that was having difficulties learning JavaScript. He told me that he looked at some of my open source projects and found them pretty interesting and was asking for some advice about how he could learn JavaScript.

I'm not the best JavaScript developer in the world, in fact I am really distant from where I want to be in a few years from now, but I decided to help him.

I started to write the email to him right away and after almost 1 hour writing, I wrote this mini-blog post that you guys will read. I decided to post here because I think it might have helped other developers as well how are starting to learn JavaScript.

Hope it might be useful for those who are starting to learn JavaScript. Feel free to share in case you guys like it.

Hi Developer,

I appreciate that you liked my open source contributions. I think I can help you with a few tips that helped me to get started with JavaScript:

JavaScript is the best programming language to get started right now if you don't have any programming background and want to learn it. The JavaScript ecosystem has matured over the years and new libraries are created every day, to solve an enormous range of different problems.

I think this piece of advice can help not only you but many others who are starting to learn JavaScript.

Here are a few things that I learned throughout the years and I think can help you:

Learn the basics.

You need to start learning JavaScript by the basics, after that you can start to learn and build more complex things. Your goal here is to learn JavaScript, so start to search for content for JavaScript beginners, find what works for you. Take a few courses. Read articles. Watch talk videos. Listen to podcasts. There are a lot of different ways that you can learn it, you need to find the way that works for you. Don't compare yourself with developers that are in the field for a long time, you will get frustrated. Compare yourself to who you were yesterday as a developer, try to learn new things every day. A few years from now you will see how long you have improved and mastered JavaScript.

Learn in public.

This is the fastest way to learn, you will not only learn but also build a network while helping others as well. You might have been experiencing a problem that another person might have been experiencing as well, you might provide value to them showing how you solved or how to solve it. Start to write articles, you can write about the most basic JavaScript concept, you will not only help others but learn in the process, that's a powerful way to learn in my opinion.

Build different projects.

I could easily say here to you, after have you learned JavaScript, to start to learn React. That would be unfair. You want to learn JavaScript but don't know exactly which way as a developer you're going to follow it, there are a lot of different ways that you could go from here. That's why you need to build a lot of different projects and work with a range of different JavaScript technologies. Build a REST API, learn how APIs work, and how to build using different approaches. Create a simple calculator using different projects such as React and Vue, learn what problems each one of them solves. Learn and work with different types of databases, know the difference between SQL and NoSQL databases. Build different things. You'll find yourself along the way.

Contribute to projects that you like.

Open source is the most powerful thing for a developer. You will work with different people from across the globe, create a network, solve people's problems, will help developers who want to start to contribute to that project, etc. Contribute to different projects that you like or that you use daily. You don't need to create the most complex thing for that project, you can easily start with a simple documentation suggestion. Try to mess a little bit with the code, read how the code works and how the project works under the hood. Open source contribution brings value not only for you who are contributing to the project but for people and companies who will use your code in the future to scale applications for millions of users.

These are the pieces of advice that I can give to you. You need to keep grinding and learning new things every day. JavaScript, like any other programming language, can be very hard for those who are not determined to learn it the right way.

Wish you success and hope you can learn JavaScript and become and fantastic developer.

Cheers,

Leonardo

Conclusion

Hope you enjoyed this content, follow me on Twitter and tell me which piece of advice to you have for JavaScript beginners. You will help me a lot by liking and sharing this post with your friends, it will encourage me to make more content like this one 🙏

Thanks for reading!

Why GraphQL is the future of APIs

Leonardo Maldonado — Mon, 08 Apr 2019 19:47:42 +0000

Since the beginning of the web, developing APIs has been a difficult task for developers. The way we develop our APIs must evolve with time so that we can always build good, intuitive and well-designed APIs.

In the last few years, GraphQL has been growing in popularity among developers, and a lot of companies have started adopting this technology to build their APIs. GraphQL is a query language developed by Facebook in 2012 and released publicly in 2015. It has been gaining a lot of traction and been adopted by a lot of big companies such as Spotify, Facebook, GitHub, NYTimes, Netflix, Walmart, and so on.

In this series of tutorials, we're going to examine GraphQL, understand what it is, and see what features make this query language so intuitive and easy to use.

So, let's get started by examining the problems with REST, and how GraphQL solves them. We will also find out why companies have been building their APIs with GraphQL, and why it is the future of APIs.

Oh, REST

A long time ago, when we changed our API design from SOAP to REST, we thought that move would give developers more flexibility in their work. We can't deny that it worked pretty well for some time and was a good move at the time. As the applications and the web have been getting more and more sophisticated, the APIs naturally evolved as well, following these changes.

However, REST does have a lot of problems. Let's see what they are:

A lot of endpoints

Each resource in REST is represented by an endpoint. So, in a real-world application we would end up having a lot of endpoints for a lot of resources. If you want to make a GET request, you would need an endpoint specific to that request, with specific parameters. If you want to make a POST request, you would need another endpoint just for that request.

But, what's the problem with that? Let's imagine we are building a huge social media application like Facebook. We will end up with a lot of endpoints which means more developer time is going to be spent developing and maintaining these APIs.

Over-fetching and under-fetching of information

A real problem that annoys a lot of developers is over-fetching and under-fetching information through REST APIs. This is because REST APIs always return a fixed structure. We can't get exactly the data that we want unless we create a specific endpoint for that.

So, if we need only a tiny piece of data, we have to work with the whole object. For example, if we only need to get the firstName, lastName, and age of a user in a REST API, there's no way we can get exactly this data without fetching the whole object.

There's also a problem with under-fetching of information. If we want to get data from two different resources, we need to make different calls to two different endpoints. In a huge application, this doesn't scale so well since there will be cases where we only need to get a specific piece of data, not the entire object. Now, imagine we're building an application that's going to have 100 endpoints. Imagine the amount of work and code that we need to write. This will become more difficult with time. The code also gets hard to maintain and developers feel lost in the process.

Versioning

One of the painful points in REST, in my opinion, is versioning. With REST APIs, it is very common to see a lot of APIs with v1 or v2, but in GraphQL there's no need for it since you can evolve your APIs by adding new types or removing old ones.

In GraphQL, all you need to do to evolve your API is to write new code. You can write new types, queries, and mutations without the need to ship another version of your API.

So, you won't see GraphQL APIs with endpoints like the following:

https://example.com/api/v1/users/12312

https://example.com/api/v2/users/12312

Why GraphQL is the future

Back in 2012, Facebook faced a problem while they were developing their mobile applications which led them to create GraphQL. Those problems are very common, especially when we're talking about RESTful API design. As discussed these problems are:

Poor performance
A lot of endpoints
Over-fetching or under-fetching of data
Shipping another version every time we need to include or remove something
Difficulty understanding APIs

With a lot of concepts in mind, developers from Facebook developed a better way to design APIs, and later named it GraphQL. Basically, it's the replacement for REST, with a lot of improvements.

With GraphQL, we get a lot of new features that give you superpowers when you are building your APIs. Let's examine them one by one:

Single endpoint

There's no need to build a lot of endpoints! With GraphQL, we only get one endpoint, and with that we can get as much data as we want in a single request. Basically, GraphQL wraps all of your queries, mutations, and subscriptions in one endpoint and makes it available to you. It improves your development cycle because you don't need to make two requests to get data from two different resources. Also, imagine that we're building a huge application, we won't get a lot of endpoints and a ton of code as with REST. We will get a single endpoint, and with that endpoint we can make as many requests as we want.

Also, as I said above, an "endpoint-only" approach makes your API self-documented since there's no need for you to build documentation because your developers already know how to use it. They can understand the API just by looking at the code, or by looking at the playground. We're going to learn more about it later on (next tutorial in this series). Seems magical, but it is just GraphQL!

With GraphQL you fetch only the data you need

No more over-fetching or under-fetching of information. You fetch only the data that you need. Remember the poor performance issues that we discussed initially? We don't have that anymore since GraphQL improves the performance of your API, especially in case of slow network connection.

GraphQL makes it easy to start building APIs and be consistent

A lot of people think that GraphQL is pretty complicated because it involves a schema and a single endpoint. Once you start developing APIs with it, you discover that it's easier than you thought. An "endpoint-only" API helps a lot when you're developing your website/app. It makes your API more self-documented and there's no need for you to write a lot of documentation about it.

If you don't use JavaScript as your main language, that's not a problem since GraphQL is an agnostic query language which means you can use it with any language. At the time of writing this tutorial, GraphQL has support for more than 12 languages.

GraphQL Is The Future

The fact that GraphQL is an open source query language means that the community can contribute to it and make improvements to it. When Facebook released it to the community, it gained a lot of traction and approval from developers. Now, GraphQL has been growing rapidly as more and more developers are starting to build APIs with it. However, some people have been asking if this is really going to replace REST or become the new way to build APIs for real-world applications.

At first, I thought that GraphQL was only hype and just another way to create APIs. However, when I started to study it, I found out that GraphQL has the essential features that are required to create modern APIs for modern applications because it really plays well with modern stacks.

So if I could say something to you now is: yes, GraphQL is really the future of APIs. That's why big companies are betting on it.

In November 2018, GraphQL created a GraphQL Foundation, in partnership with the Linux Foundation, which means that this query language is encouraging its developers to build more documentation, tools, and support for the language. This foundation will ensure a stable, neutral, and sustainable future for GraphQL. So, this is another reason to consider GraphQL to be the future of APIs.

Of course, it won't replace REST immediately because many apps still use it and it's impossible to rewrite them overnight. As more and more companies adopt GraphQL, both UX and DX will improve.

Conclusion

GraphQL is really the future of APIs and we need to learn more about it. That's why I decided to create a series of 4 tutorials that will show how we can work with the best of GraphQL, starting from Queries and Mutations, then Subscriptions, and Authentication.

This article was originally posted at Hashnode. If you enjoy this article read it there too so you can support me and help me to write more articles! You can read it here!

Forms with Formik + TypeScript

Leonardo Maldonado — Tue, 02 Apr 2019 14:25:25 +0000

One of the most painful topics for React developers always was how to build nice forms and have a nice clean code. Some people might think that it’s not necessary to use a third-party library, but in some cases, that’s needed especially when we need more complex forms. First, we started with Redux Form, a lot of people used it for a long time but then we started to ask ourselves if it’s a good idea and the best way to manage our form state using our Redux store. We don’t need to have our form state in our Redux store, it’s such a not good practice at all.

Then, Formik really came to change it for us and let our forms so easy to build and our code so readable and well-written that now we don’t have to worry too much about it. We know that Formik code is written in TypeScript but a lot of people still don’t know how to use it the right way.

So, in this article, we’re going to learn about how to use Formik with TypeScript, since a lot of developers has been startedto use it lately, let’s jump into this hype and see how we can improve more our forms.

Starting

First, let’s start installing some dependencies:

yarn add formik yup @types/yup

Now, we’re going to start to build our form importing some things that we’re going to need: we’re going to import the withFormik HOC that passes our props and form handlers, and also import the FormikProps. We’re going also import yup to validate our fields.

import { withFormik, FormikProps } from "formik";
import * as Yup from "yup";

Now, to start to build our forms, we need first define some interfaces. Let’s defined an interface called FormValues that’s going to define all the values
that we’re going to have in our form:

interface FormValues {
    email: string;
    password: string;
}

We’ll also define other interface called OtherProps, that in case we want to
pass other props to our component. In our case, we’re going to pass a property
called title:

interface OtherProps {
    title?: string;
}

Our last interfaces it’s going to be called MyFormProps, and with that interface, we can define some properties for our initial values, in case we want
to have some initial values.

interface MyFormProps {
    initialEmail?: string;
    initialPassword?: string;
}

Now, we’re going to write our component called InnerForm, pass the interfaces
that we created, and also put some extra code:

const InnerForm = (props: OtherProps & FormikProps<FormValues>) => {
const {
    values,
    errors,
    touched,
    handleChange,
    handleBlur,
    handleSubmit,
    isSubmitting,
    title
} = props;

return (
    <Wrapper>
        <h1>{title}</h1>
        <form onSubmit={handleSubmit}>
            <InputWrapper>
                <Label>Email</Label>
                <Input
                    width={50}
                    type="email"
                    name="email"
                    onChange={handleChange}
                    onBlur={handleBlur}
                    value={values.email}
                />
            </InputWrapper>

            <InputWrapper>
                <Label>Password</Label>
                <Input
                    width={50}
                    type="password"
                    name="password"
                    onChange={handleChange}
                    onBlur={handleBlur}
                    value={values.password}
                />
            </InputWrapper>

            <button
                type="submit"
                disabled={
                    isSubmitting ||
                    !!(errors.email && touched.email) ||
                    !!(errors.password && touched.password)
                }
            >
                Sign In
            </button>
        </form>
    </Wrapper>
);

};

We passed our props with OtherProps and we also wrapped our FormValues inside the FormikProps. The rest of the code it’s pretty self-explained, now we’re going to create our final component wrapped with the withFormik HOC.

First, let’s write our component called App and pass the MyFormProps and FormValues inside the withFormik.

const App = withFormik<MyFormProps, FormValues>({

...

Now, inside our wrapped component, inside our mapPropsToValues method, if we
want to pass an initial value to one of our fields, we can, or we can just pass
an empty string.

mapPropsToValues: props => ({
    email: props.initialEmail || "",
    password: props.initialPassword || ""

}),

We’re going to use yup to validate our fields so after the mapPropsToValues
method, let’s put the following code:

validationSchema: Yup.object().shape({
    email: Yup.string()
        .email("Email not valid")
        .required("Email is required"),
    password: Yup.string().required("Password is required")
}),

Now, let’s write the handleSubmit function and also pass the FormValues to
validate our props.

handleSubmit({ email, password }: FormValues, { props, setSubmitting, setErrors }) {
    console.log(email, password);
}

Pretty simple, now our whole App component should look like this:

const App = withFormik<MyFormProps, FormValues>({
    mapPropsToValues: props => ({
        email: props.initialEmail || "",
        password: props.initialPassword || ""
    }),

    validationSchema: Yup.object().shape({
        email: Yup.string()
        .email("Email not valid")
        .required("Email is required"),
        password: Yup.string().required("Password is required")
    }),

    handleSubmit(
        { email, password }: FormValues,
        { props, setSubmitting, setErrors }
    ) {
        console.log(email, password);
    }
})(InnerForm);

You can find all the code from this article
here.

Conclusion

As you can see, Formik is a really helpful lib to let us write better forms and
let our code more readable.

This is a simple example of how to use Formik with TypeScript, but you can improve it and use it the way you want. The goal here is to show how to use it the best way and let our code strongly-typed and safer.

A Complete React Boilerplate Tutorial — From Zero to Hero

Leonardo Maldonado — Sat, 05 Jan 2019 12:15:51 +0000

When we’re starting learn React, to make our projects we need to make a boilerplate from scratch or use some provided by the community. Almost all the times it’s the create-react-app that we use to create an app with no build configuration. Or we just make our own simple boilerplate from scratch.

From this, it comes to mind: why not make a boilerplate with all dependencies that I always use and leave it ready? The community also thought that way, so now we have several community-created boilerplates. Some are more complex than others, but they always have the same goal of saving the maximum amount of time.

This article will teach you how you can build your own boilerplate from scratch with the main dependencies used in the React community today. We’re gonna use some of the moderns features most common these days and from there you can customize it any way you want.

The boilerplate created by this article will be available here!

Getting started

First of all, we’re going to create a folder to start our boilerplate. You can name it whatever you want, I’m gonna name mine react-bolt.

Open your terminal, and create it like this:

mkdir react-bolt

Now, go to your created folder, and type the following command:

npm init -y

npm will create a package.json file for you, and all the dependencies that you installed and your commands will be there.

Now, we’re going to create the basic folder structure for our boilerplate. It’s gonna be like this for now:

react-bolt    
    |--config    
    |--src    
    |--tests

Webpack

Webpack is the most famous module-bundler for JavaScript applications nowadays. Basically, it bundles all your code and generates one or more bundles. You can learn more about it here.

In this boilerplate we’re going to use it, so install all these dependencies:

npm install --save-dev webpack webpack-cli webpack-dev-server webpack-merge html-webpack-plugin clean-webpack-plugin img-loader url-loader file-loader

Now in our config folder, we’re going to create another folder called webpack, then inside that webpack folder create 5 files.

Create a file called paths.js. Inside that file is going to be the target directory for all your output files.

Inside it, put all this code:

import path from 'path';

module.exports = {    
    root: path.resolve(__dirname, '../', '../'),    
    outputPath: path.resolve(__dirname, '../', '../', 'build'),    
    entryPath: path.resolve(__dirname, '../', '../', 'src/index.js'),    
    templatePath: path.resolve(__dirname, '../', '../', 'src/index.html'),    
    imagesFolder: 'images',    
    fontsFolder: 'fonts',    
    cssFolder: 'css',    
    jsFolder: 'js'    
};

Now, create another file called rules.js, and put the following code there:

module.exports = [    
    {
        test: /\.js$/,    
        exclude: /node_modules/,    
        use: {    
        loader: 'babel-loader'    
    }    
},    
    {    
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,    
        exclude: /node_modules/,    
        loader: 'file-loader'    
    },    
    {    
        test: /\.(woff|woff2)$/,    
        exclude: /node_modules/,    
        loader: 'url-loader?prefix=font/&limit=5000'    
    },    
    {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,    
        exclude: /node_modules/,    
        loader: 'url-loader?limit=10000&mimetype=application/octet-stream'    
    },    
    {    
        test: /\.(jpe?g|png|gif|svg)$/i,    
        use: ['url-loader?limit=10000', 'img-loader'] 
    }    
];

After that, we’re going to create 3 more files:

webpack.common.babel.js

import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';

import paths from './paths';
import rules from './rules';

module.exports = {
    entry: paths.entryPath,
    module: {
        rules
    },
    resolve: {
        modules: ['src', 'node_modules'],
        extensions: ['*', '.js', '.scss', '.css']
    },
    plugins: [
        new webpack.ProgressPlugin(),
        new HtmlWebpackPlugin({
            template: paths.templatePath,
            minify: {
                collapseInlineTagWhitespace: true,
                collapseWhitespace: true,
                preserveLineBreaks: true,
                minifyURLs: true,
                removeComments: true,
                removeAttributeQuotes: true
            }
        })
    ]
};

webpack.dev.babel.js

import webpack from 'webpack';

import paths from './paths';
import rules from './rules';

module.exports = {
    mode: 'development',
    output: {
        filename: '[name].js',
        path: paths.outputPath,
        chunkFilename: '[name].js'
    },
    module: {
        rules
    },
    performance: {
        hints: 'warning',
        maxAssetSize: 450000,
        maxEntrypointSize: 8500000,
        assetFilter: assetFilename => {
            return (
                assetFilename.endsWith('.css') || assetFilename.endsWith('.js')
            );
        }
    },
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    },
    devServer: {
        contentBase: paths.outputPath,
        compress: true,
        hot: true,
        historyApiFallback: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};

webpack.prod.babel.js

import CleanWebpackPlugin from 'clean-webpack-plugin';

import paths from './paths';
import rules from './rules';

module.exports = {
    mode: 'production',
    output: {
        filename: `${paths.jsFolder}/[name].[hash].js`,
        path: paths.outputPath,
        chunkFilename: '[name].[chunkhash].js'
    },
    module: {
        rules
    },
    plugins: [
        new CleanWebpackPlugin([paths.outputPath.split('/').pop()], {
            root: paths.root
        })
    ],
    devtool: 'source-map'
};

Basically, in our webpack.common.babel.js file, we’ve set up our entry and output configuration and included as well any plugins that are required. In the webpack.dev.babel.js file, we’ve set the mode to development. And in our webpack.prod.babel.js file, we’ve set the mode to production.

After that, in our root folder, we’re going to create the last webpack file called webpack.config.js and put in the following code:

require('@babel/register');
const webpackMerge = require('webpack-merge');

const common = require('./config/webpack/webpack.common.babel');

const envs = {
    development: 'dev',
    production: 'prod'
};

/* eslint-disable global-require,import/no-dynamic-require */
const env = envs[process.env.NODE_ENV || 'development'];
const envConfig = require(`./config/webpack/webpack.${env}.babel`);
module.exports = webpackMerge(common, envConfig);

Our webpack config is ready, so now we’re going to work on other parts of the boilerplate with Babel, ESLint, Prettier, etc.

Babel

I think that almost everyone who works with React has probably heard about Babel and how this simple transpiler helps our lives. If you don’t know what it is, Babel it’s basically a transpiler that converts your JavaScript code into plain old ES5 JavaScript that can run in any browser.

We’re going to use a bunch of Babel plugins, so in our root folder, install:

npm install --save-dev @babel/core @babe/cli @babel/node @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread @babel/plugin-syntax-dynamic-import @babel/plugin-syntax-import-meta @babel/plugin-transform-async-to-generator @babel/plugin-transform-runtime @babel/preset-env @babel/preset-react @babel/register @babel/runtime babel-eslint babel-jest babel-loader babel-core@7.0.0-bridge.0

After this, we’re gonna create a file in our root folder called .babelrc and inside that file, we’re going to put the following code:

{    
  presets:        
    [        
        [            
            "@babel/preset-env",                
            {                
                useBuiltIns:  "entry"
            }
        ],
        "@babel/preset-react"
    ],
    plugins:        
    [        
        "@babel/plugin-proposal-object-rest-spread",            
        "@babel/plugin-transform-runtime",            
        "@babel/plugin-transform-async-to-generator",            
        "@babel/plugin-proposal-class-properties"
    ]
}

Now our project is compiled by Babel, and we can use the next-generation JavaScript syntax without any problems.

ESLint

The most used tool for linting projects nowadays is ESLint. It is really helpful to find certain classes of bugs, such as those related to variable scope, assignment to undeclared variables, and so on.

First, install the following dependencies:

npm install --save-dev eslint eslint-config-airbnb eslint-config-prettier eslint-loader eslint-plugin-babel eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react

Then, in our root folder, create a file called .eslintrc and put the following code there:

{
    "parser": "babel-eslint",
    "extends": ["airbnb", "prettier", "prettier/react"],
    "plugins": ["prettier"],
    "parserOptions": {
        "ecmaVersion": 6,
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "env": {
        "browser": true,
        "node": true,
        "mocha": true,
        "es6": true,
        "jest": true
    },
    "rules": {
        "indent": ["error", 4],
        "space-before-function-paren": "off",
        "react/prefer-stateless-function": "warn",
        "react/jsx-one-expression-per-line": "off",
        "import/no-extraneous-dependencies": [
            "error",
            { "devDependencies": true }
        ],
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
        "linebreak-style": "off",
        "global-require": "off",
        "semi": "warn",
        "arrow-body-style": "off",
        "no-multiple-empty-lines": ["warn", { "max": 1 }],
        "no-unused-expressions": [
            "error",
            {
                "allowTaggedTemplates": true
            }
        ],
        "no-underscore-dangle": [
            2,
            { "allow": ["__REDUX_DEVTOOLS_EXTENSION__"] }
        ]
    }
}

Prettier

Prettier is basically a code formatter. It parses your code and re-prints it with its own rules that take the maximum line length into account, wrapping code when necessary.

You just need to install it:

npm install --save-dev prettier

And in our root folder, create a file called .prettierrc and put the following code there:

{
    "printWidth": 80,
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true,
    "bracketSpacing": true
}

React

React is an open-source JavaScript application library to build user interfaces. It was developed by Facebook and has a huge community behind it. If you are reading this article, I assume that you already know about React, but if you want to learn more about it, you can read up here.

We’re going to install the following dependencies:

npm install --save react react-dom cross-env

And inside our src folder, we’re going to create a simple HTML file index.html and put in the following code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>React Bolt</title>
    </head>

    <body>
        <div id="root"></div>
    </body>
</html>

After that, we’re going to create a simple React project. Inside our src folder, create a index.js file like this:

import React from 'react';
import ReactDOM from 'react-dom';

import App from './components/App';

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

Inside our src folder we’re going to have the following structure:

*src
    |--actions
    |--components
    |--reducers
    |--reducers
    |--store*

Create a file called App.js inside the components folder, and put in the following code:

import React from 'react';

const App = () => <h1>React Bolt</h1>;

export default App;

Redux

Redux makes it easy to manage the state of your application. Another way of looking at this is that it helps you manage the data you display and how you respond to user actions. These days a lot of people prefer other options like MobX or just the setState itself, but I’m gonna stick with Redux for this boilerplate.

First, we’re going to install some dependencies:

npm install --save redux react-redux redux-thunk

Then, we’re going to create our Redux store, and put some state there. In our store folder, create an index.js file and put that following code there:

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';

import rootReducer from '../reducers';

const middleware = applyMiddleware(thunk, logger);

const reduxDevTools =
    window.__REDUX_DEVTOOLS_EXTENSION__ &&
    window.__REDUX_DEVTOOLS_EXTENSION__();

const store = createStore(
    rootReducer,
    compose(
        middleware,
        reduxDevTools
    )
);

export default store;

Now, inside our reducers folder create an index.js and put the following code:

import { combineReducers } from 'redux';

const rootReducer = combineReducers({
    state: () => ({})
});

export default rootReducer;

Last, we’re gonna to our index.js in our src folder, and wrap the code with the <Provider /> and pass our store as props to make it available to our application.

It’s going to be like this:

import React, { Fragment } from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

import store from './store';
import App from './components/App';

ReactDOM.render(  
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

All done. Our Redux store is configured and ready to go.

React Router

React Router is the standard routing library for React. Basically, it keeps your UI in sync with the URL. We’re gonna use it in our boilerplate, so install it:

npm install --save react-router-dom

After that, go to our index.js in our src folder and wrap all the code there with the <BrowserRouter>.

Our index.js in our src folder it’s going to end up like this:

import React, { Fragment } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';

import store from './store';
import App from './components/App';

ReactDOM.render(
    <BrowserRouter>       
        <Provider store={store}>
            <App />
        </Provider>
    </BrowserRouter>,
    document.getElementById('root')
);

Styled Components

Styled Components makes CSS easy for everyone, as it helps you organize your React project. Its objective is to write more small and reusable components. We’re gonna use it, and if you want to learn more about it, read up here.

First, install it:

npm install --save styled-components

Then, in our App.js file inside our components folder, we’re going to create a simple title using Styled Components. Our title is going to be like this:

const Title = styled.h1`
    color: black;
    font-size: 2.5rem;
    font-weight: 700;
`;

And inside our file, we need to import styled-components, so our file is going to end up like this:

import React from 'react';
import styled from 'styled-components';

const Title = styled.h1`
    color: black;
    font-size: 2.5rem;
    font-weight: 700;
`;

const App = () => <Title>React Bolt</Title>;

export default App;

Jest & React Testing Library

Jest is an open-source JavaScript testing library from Facebook. It makes it easy to test your application, and gives us a lot of information about what is giving the right output and what’s not. React Testing Library is a very light-weight solution for testing React components. Basically, this library is a replacement for Enzyme.

Every application needs some kind of tests. I’m not gonna write tests in this article but I’m gonna show you how you can configure these tools to start testing your applications.

First, we’re gonna install both:

npm install --save-dev jest jest-dom react-testing-library

After that, go to our package.json and put the following after all:

 "jest": {
    "setupFiles": [
        "<rootDir>/config/tests/jest.config"
    ],
    "transform": {
        "^.+\\.js$": "babel-jest"
    }
 }

Then, go to our config folder, and inside it created another folder called tests and inside that folder, create 2 files.

First, create a file called jest.config.js and put in the following code:

module.exports = {
    automock: false,
    browser: false,
    bail: false,
    collectCoverageFrom: [
        'src/**/*.{js,jsx}',
        '!**/node_modules/**',
        '!**/vendor/**'
    ],
    coverageDirectory: '<rootDir>/coverage',
    globals: {
        __DEV__: true
    },
    moduleFileExtensions: ['js', 'json', 'jsx', 'node'],
    transform: {
        '^.+\\.js?$': 'babel-jest'
    },
    verbose: true,
    setupTestFrameworkScriptFile: './rtl.setup.js'
};

Then, create a file called rtl.setup.js and put in the following code:

// See https://github.com/kentcdodds/react-testing-library#global-config
import 'jest-dom/extend-expect';
import 'react-testing-library/cleanup-after-each';

All done. Our boilerplate is ready to go and you can use it now.

Now go to our file package.json and put in the following code:

"scripts": {
    "start": "cross-env NODE_ENV=development webpack-dev-server --open",
    "build": "cross-env NODE_ENV=production webpack",
    "lint": "eslint ./src/**/**.js",
    "lint:fix": "eslint ./src/**/**.js --fix",
    "test": "jest",
    "test:watch": "npm run test --watch",
    "test:cover": "npm run test --coverage"
}

Now, if you run the command npm start and go to localhost:8080, we should see our application working fine!

If you want to see my final code, the boilerplate created by this article is available here!

I have some ideas for some features that I’d love to include in the boilerplate, so please feel free to contribute!

🐦 Follow me on Twitter!
⭐ Follow me on GitHub!

A Beginner’s Guide to GraphQL

Leonardo Maldonado — Sat, 05 Jan 2019 11:45:31 +0000

One of the most commonly discussed terms today is the API. A lot of people don’t know exactly what an API is. Basically, API stands for Application Programming Interface. It is, as the name says, an interface with which people — developers, users, consumers — can interact with data.

You can think of an API as a bartender. You ask the bartender for a drink, and they give you what you wanted. Simple. So why is that a problem?

Since the start of the modern web, building APIs has not been as hard as it sounds. But learning and understanding APIs was. Developers form the majority of the people that will use your API to build something or just consume data. So your API should be as clean and as intuitive as possible. A well-designed API is very easy to use and learn. It’s also intuitive, a good point to keep in mind when you’re starting to design your API.

We’ve been using REST to build APIs for a long time. Along with that comes some problems. When building an API using REST design, you’ll face some problems like:

1) you’ll have a lot of endpoints

2) it’ll be much harder for developers to learn and understand your API

3) there is over- and under-fetching of information

To solve these problems, Facebook created GraphQL. Today, I think GraphQL is the best way to build APIs. This article will tell you why you should start to learn it today.

In this article, you’re going to learn how GraphQL works. I’m going to show you how to create a very well-designed, efficient, powerful API using GraphQL.

You’ve probably already heard about GraphQL, as a lot of people and companies are using it. Since GraphQL is open-source, its community has grown huge.

Now, it’s time for you start to learn in practice how GraphQL works and all about its magic.

What is GraphQL?

GraphQL is an open-source query language developed by Facebook. It provides us with a more efficient way design, create, and consume our APIs. Basically, it’s the replacement for REST.

GraphQL has a lot of features, like:

You write the data that you want, and you get exactly the data that you want. No more over-fetching of information as we are used to with REST.
It gives us a single endpoint, no more version 2 or version 3 for the same API.
GraphQL is strongly-typed, and with that you can validate a query within the GraphQL type system before execution. It helps us build more powerful APIs.

This is a basic introduction to GraphQL — why it’s so powerful and why it’s gaining a lot of popularity these days. If you want to learn more about it, I recommend you to go the GraphQL website and check it out.

Getting started

The main objective in this article is not to learn how to set up a GraphQL server, so we’re not getting deep into that for now. The objective is to learn how GraphQL works in practice, so we’re gonna use a zero-configuration GraphQL server called ☄️ Graphpack.

To start our project, we’re going to create a new folder and you can name it whatever you want. I’m going to name it graphql-server:

Open your terminal and type:

mkdir graphql-server

Now, you should have npm or yarn installed in your machine. If you don’t know what these are, npm and yarn are package managers for the JavaScript programming language. For Node.js, the default package manager is npm.

Inside your created folder type the following command:

npm init -y

Or if you use yarn:

yarn init

npm will create a package.json file for you, and all the dependencies that you installed and your commands will be there.

So now, we’re going to install the only dependency that we’re going to use.

☄️Graphpack lets you create a GraphQL server with zero configuration. Since we’re just starting with GraphQL, this will help us a lot to go on and learn more without getting worried about a server configuration.

In your terminal, inside your root folder, install it like this:

npm install --save-dev graphpack

Or, if you use yarn, you should go like this:

yarn add --dev graphpack

After Graphpack is installed, go to our scripts in package.json file, and put the following code there:

"scripts": {
    "dev": "graphpack",
    "build": "graphpack build"
 }

We’re going to create a folder called src, and it’s going to be the only folder in our entire server.

Create a folder called src, after that, inside our folder, we’re going to create three files only.

Inside our src folder create a file called schema.graphql. Inside this first file, put the following code:

type Query {    
    hello: String    
}

In this schema.graphql file is going to be our entire GraphQL schema. If you don’t know what it is, I’ll explain later — don't worry.

Now, inside our src folder, create a second file. Call it resolvers.js and, inside this second file, put the following code:

import { users } from "./db";

const resolvers = {    
    Query: {    
        hello: () => "Hello World!"    
    }    
};

export default resolvers;

This resolvers.js file is going to be the way we provide the instructions for turning a GraphQL operation into data.

And finally, inside your src folder, create a third file. Call this db.js and, inside this third file, put the following code:

export let users = [    
    { id: 1, name: "John Doe", email: "john@gmail.com", age: 22 },    
    { id: 2, name: "Jane Doe", email: "jane@gmail.com", age: 23 }    
];

In this tutorial we’re not using a real-world database. So this db.js file is going to simulate a database, just for learning purposes.

Now our src folder should look like this:

src
  |--db.js
  |--resolvers.js
  |--schema.graphql

Now, if you run the command npm run dev or, if you’re using yarn, yarn dev, you should see this output in your terminal:

You can now go to localhost:4000. This means that we’re ready to go and start writing our first queries, mutations, and subscriptions in GraphQL.

You see the GraphQL Playground, a powerful GraphQL IDE for better development workflows. If you want to learn more about GraphQL Playground, click here.

Schema

GraphQL has its own type of language that’s used to write schemas. This is a human-readable schema syntax called Schema Definition Language (SDL). The SDL will be the same, no matter what technology you’re using — you can use this with any language or framework that you want.

This schema language its very helpful because it’s simple to understand what types your API is going to have. You can understand it just by looking right it.

Types

Types are one of the most important features of GraphQL. Types are custom objects that represent how your API is going to look. For example, if you’re building a social media application, your API should have types such as Posts, Users, Likes, Groups.

Types have fields, and these fields return a specific type of data. For example, we’re going to create a User type, we should have some name, email, and age fields. Type fields can be anything, and always return a type of data as Int, Float, String, Boolean, ID, a List of Object Types, or Custom Objects Types.

So now to write our first Type, go to your schema.graphql file and replace the type Query that is already there with the following:

type User {    
    id: ID!    
    name: String!    
    email: String!    
    age: Int    
}

Each User is going to have an ID, so we gave it an ID type. User is also going to have a name and email, so we gave it a String type, and an age, which we gave an Int type. Pretty simple, right?

But, what about those ! at the end of every line? The exclamation point means that the fields are non-nullable, which means that every field must return some data in each query. The only nullable field that we’re going to have in our User type will be age.

In GraphQL, you will deal with three main concepts:

queries — the way you’re going to get data from the server.
mutations — the way you’re going to modify data on the server and get updated data back (create, update, delete).
subscriptions — the way you’re going to maintain a real-time connection with the server.

I’m going to explain all of them to you. Let’s start with Queries.

Queries

To explain this in a simple way, queries in GraphQL are how you’re going to get data. One of the most beautiful things about queries in GraphQL is that you are just going to get the exact data that you want. No more, no less. This has a huge positive impact in our API — no more over-fetching or under-fetching information as we had with REST APIs.

We’re going to create our first type Query in GraphQL. All our queries will end up inside this type. So to start, we’ll go to our schema.graphql and write a new type called Query:

type Query {    
    users: [User!]!    
}

It’s very simple: the users query will return to us an array of one or more Users. It will not return null, because we put in the !, which means it’s a non-nullable query. It should always return something.

But we could also return a specific user. For that we’re going to create a new query called user. Inside our Query type, put the following code:

user(id: ID!): User!

Now our Query type should look like this:

type Query {    
    users: [User!]!    
    user(id: ID!): User!    
}

As you see, with queries in GraphQL we can also pass arguments. In this case, to query for a specific user, we’re going to pass its ID.

But, you may be wondering: how does GraphQL know where get the data? That’s why we should have a resolvers.js file. That file tells GraphQL how and where it's going to fetch the data.

First, go to our resolvers.js file and import the db.js that we just created a few moments ago. Your resolvers.js file should look like this:

import { users } from "./db";

const resolvers = {    
    Query: {    
        hello: () => "Hello World!"    
    }    
};

export default resolvers;

Now, we’re going to create our first Query. Go to your resolvers.js file and replace the hello function. Now your Query type should look like this:

import { users } from "./db";

const resolvers = {    
    Query: {    
        user: (parent, { id }, context, info) => {    
        return users.find(user => user.id == id);    
        },    
        users: (parent, args, context, info) => {    
            return users;    
        }    
    }    
};

export default resolvers;

Now, to explain how is it going to work:

Each query resolver has four arguments. In the user function, we’re going to pass id as an argument, and then return the specific user that matches the passed id. Pretty simple.

In the users function, we’re just going to return the users array that already exists. It’ll always return to us all of our users.

Now, we’re going to test if our queries are working fine. Go to localhost:4000 and put in the following code:

query {    
    users {    
        id    
        name    
        email    
        age    
    }    
}

It should return to you all of our users.

Or, if you want to return a specific user:

query {    
    user(id: 1) {    
        id    
        name    
        email    
        age    
    }    
}

Now, we’re going to start learning about mutations, one of the most important features in GraphQL.

Mutations

In GraphQL, mutations are the way you’re going to modify data on the server and get updated data back. You can think like the CUD (Create, Update, Delete) of REST .

We’re going to create our first type mutation in GraphQL, and all our mutations will end up inside this type. So, to start, go to our schema.graphql and write a new type called mutation:

type Mutation {    
    createUser(id: ID!, name: String!, email: String!, age: Int): User!    
    updateUser(id: ID!, name: String, email: String, age: Int): User!    
    deleteUser(id: ID!): User!    
}

As you can see, we’re going to have three mutations:

createUser: we should pass an ID, name, email, and age. It should return a new user to us.

updateUser: we should pass an ID, and a new name, email, or age. It should return a new user to us.

deleteUser: we should pass an ID. It should return the deleted user to us.

Now, go to our resolvers.js file and below the Query object, create a new mutation object like this:

Mutation: {    
    createUser: (parent, { id, name, email, age }, context, info) => {    
        const newUser = { id, name, email, age };    
        users.push(newUser);    
        return newUser;    
},   
    updateUser: (parent, { id, name, email, age }, context, info) => {    
        let newUser = users.find(user => user.id == id);    
        newUser.name = name;    
        newUser.email = email;    
        newUser.age = age;

        return newUser;
    },    
    deleteUser: (parent, { id }, context, info) => {    
        const userIndex = users.findIndex(user => user.id == id);

        if (userIndex === -1) throw new Error("User not found.");

        const deletedUsers = users.splice(userIndex, 1);

        return deletedUsers[0];     
    }    
}

Now, our resolvers.js file should look like this:

import { users } from "./db";

const resolvers = {    
    Query: {        
        user: (parent, { id }, context, info) => {      
            return users.find(user => user.id == id);       
        },      
        users: (parent, args, context, info) => {       
            return users;       
        }       
    },    
    Mutation: {    
        createUser: (parent, { id, name, email, age }, context, info) => {    
            const newUser = { id, name, email, age };    
            users.push(newUser);    
            return newUser;    
    },   
        updateUser: (parent, { id, name, email, age }, context, info) => {    
            let newUser = users.find(user => user.id == id);    
            newUser.name = name;    
            newUser.email = email;    
            newUser.age = age;

            return newUser;
        },    
        deleteUser: (parent, { id }, context, info) => {    
            const userIndex = users.findIndex(user => user.id === id);

            if (userIndex === -1) throw new Error("User not found.");

            const deletedUsers = users.splice(userIndex, 1);

            return deletedUsers[0];         
        }    
    }    
};

export default resolvers;

Now, we’re going to test if our mutations are working fine. Go to localhost:4000 and put in the following code:

mutation {    
    createUser(id: 3, name: "Robert", email: "robert@gmail.com", age: 21) {    
        id    
        name    
        email    
        age    
    }    
}

It should return a new user to you. If you want to try making new mutations, I recommend you to try for yourself! Try to delete this same user that you created to see if it’s working fine.

Finally, we’re going to start learning about subscriptions, and why they are so powerful.

Subscriptions

As I said before, subscriptions are the way you’re going to maintain a real-time connection with a server. That means that whenever an event occurs in the server and whenever that event is called, the server will send the corresponding data to the client.

By working with subscriptions, you can keep your app updated to the latest changes between different users.

A basic subscription is like this:

subscription {    
    users {    
        id    
        name    
        email    
        age    
    }    
}

You will say it’s very similar to a query, and yes it is. But it works differently.

When something is updated in the server, the server will run the GraphQL query specified in the subscription, and send a newly updated result to the client.

We’re not going to work with subscriptions in this specific article, but if you want to read more about them click here.

Conclusion

As you have seen, GraphQL is a new technology that is really powerful. It gives us real power to build better and well-designed APIs. That’s why I recommend you start to learn it now. For me, it will eventually replace REST.

Thanks for reading the article, please give a comment below!

🐦 Follow me on Twitter!
⭐ Follow me on GitHub!