How To Setup Continuous Integration (CI) With React, CircleCI, and GitHub

To ensure the highest grade of quality code, we need to run multiple checks on each commit/pull request. Running code checks is especially useful when you’re working in a team, and making sure everyone follows the best and latest practices.

What kind of checks are we talking about? For starters, running our unit tests to make sure everything passes, building and bundling our front end to make sure the build won’t fail on production, and running our linters to enforce a standard.

At my current company, we run many checks before any code can be committed to the repository.

Code checks at Newly

CI lets us run code checks automatically. Who wants to run all those commands before pushing code to the repository?

Getting Started

I’ve chosen CircleCI because of its generous free tier, GitHub because of its community, and React because it’s easy and fun to use.

5 React Performance Tips

React is popular because React applications scale well and are fun to work with. Once your app scales, you might consider optimizing your app. Going from 2500ms wait time to 1500ms can have huge impacts on your UX and conversion rates.

So without further ado, here are some performance tips I use with React.


React.memo

If you have a stateless component and you know your component won’t be needing re-render, wrap your entire stateless component inside a React.memo function.

Becomes the following;

How to setup a powerful API with GraphQL, Koa and MongoDB -- deploying to production

Our GraphQL runs smoothly locally, but what if we want to share it with the world?

In order to make our graphQL api available to the public, we’ll need to deploy it on a production server. I chose Heroku for it’s simplicity.

Head over to Heroku, create a user if you haven’t, and create a new project. We don’t have to pay anything for our demo.

Head over to the deploy tab and sync the Heroku with Github. Easiest way is to deploy via our Github repository.

And finally, add the mlab Heroku add-on.

Heroku Dashboard

pm2 set-up

Next, let’s get our pm2 ready for production. Since Heroku runs our scripts , we’ll need to add pm2 to our package.json.

How to setup a powerful API with GraphQL, Koa and MongoDB -- scalability and testing

Welcome to our part III series where we set up a powerful API. So far, we have achieved basic CRUD functionality.

As our app grows, so does our mutation count. In order to have as clean codebase as we can, we should extract the mutations to dedicated files. This way we can assure our code is modular and separated into maintainable chunks.

Let’s create a folder graphql/mutations and inside the folder create addGadget.js, updateGadget, and removeGadget files..

We simply place the mutation objects into the files and export them.

Moving addGadget mutation to separate file

graphql/mutations/addGadget.js

const { GraphQLObjectType, GraphQLString } = require('graphql');
const gadgetGraphQLType =  require('./../gadgetType');
const Gadget = require('./../../models/gadget');

module.exports = {
  type: gadgetGraphQLType,
  args: {
    name: { type: GraphQLString },
    release_date: { type: GraphQLString },
    by_company: { type: GraphQLString },
    price: { type: GraphQLString }
  },
  resolve(parent, args) {
    const newGadget = new Gadget({
      name: args.name,
      release_date: args.release_date,
      by_company: args.by_company,
      price: args.price,
    })

    return newGadget.save();
  }
};

How to setup a powerful API with GraphQL, Koa and MongoDB -- CRUD

This is a series where we learn how to set-up a powerful API with GraphQL, Koa and Mongo. The primary focus will be on GraphQL. Check out part I if you haven’t yet.

Mutations

So far we can read our data, but there’s a big chance we need to edit our data records/documents. Any complete data platform needs a way to modify server-side data as well.

Okay, imagine this– a company launched a new gadget. How would we go on about adding the record to our database with GraphQL?

Mutations to the rescue!

Think of Mutations like POST or PUT REST actions. Setting up a mutation is quite straight-forward.

Let’s jump in!

How to setup a powerful API with GraphQL, Koa and MongoDB

Building API’s is super fun! Especially when you can leverage modern technologies such as Koa, GraphQL and MongoDB.

Koa is a Node framework, just like Express is a Node framework. We’ll replace Express with Koa since Koa uses async/await syntax over callbacks.

Koa Github repository


Express Github repository


Getting started

The prerequisites for building our API are the following;

  • Node installed
  • Text Editor; I pick Visual Studio Code
  • Terminal
  • Browser

How to improve your asynchronous Javascript code with async and await

How to improve your asynchronous Javascript code with async and await

If you’ve had the chance to observe modern Javascript code — chance are high you have seen the async and await syntax somewhere.

Async/await is arguably one of the best-received new additions to the language. Async/await makes asynchronous code appear and behave like synchronous code. Async/await are promise-based.

Before we jump into async/await, we must understand what are promises and the role they play.

Promises

The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.”)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Why do we need asynchronous code, anyway?

Here are some of the best resources to improve your coding skills

There are lots of high-quality coding tutorials, books, and overall resources on the web. I’ve gathered the very best for you and put them in a convenient list. Without further ado, let’s dive in!

Devhints

Devhints has the biggest collection of cheat-sheets on the Internet. Big time saver and a great way to familiarize yourself with all the concepts.

How to use destructuring and arrow functions to improve your JavaScript code

Without further ado, here are some everyday “tricks” to make your Javascript code much more readable.

Destructuring

Take this (intentionally) deeply nested object. Reading the age of a mammal would lead us to a very verbose and repetitive code.

Instead of doing that, we can use shorten our code by a huge margin with object destructing.

Object destructuring

Destructing bear and deer

Much better and less verbose. Note that we’re using constants since we don’t want to change the age. But think about it: age is not a constant… once per year in fact the age does increment.

Here are the most interesting developer podcasts — 2019 edition

Who doesn’t love to hear the opinions of peer developers? Frankly put, Some of the most useful resources I’ve picked up is from listening to different opinions and thoughts. I’ve put together a small but comprehensive list of my favorite podcasts. The core topics revolve around coding, well-being philosophy, and how to cope with a different set of challenges.

I find myself listening to podcasts while doing the dishes, while on an airplane, driving, and commuting. Learning from podcasts adds up really quickly — there’s so much to learn yet so little time — why not try to maximize ways to improve?

If yours didn’t make it to the list, please post it in the comments and I’ll make sure to check it out!

Assume that the Person You’re Listening to Might Know Something You Don’t —Jordan Bernt Peterson

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×