Forem: Neisha Rose

An Introduction to GraphQL

Neisha Rose — Sun, 26 Jul 2020 19:12:55 +0000

Introduction

We have been using REST architecture to build APIs. This structure is still very well used but it also has it's issues. REST comes with some problems such as: Having to use multiple urls and over fetching data. There needs to be a solution for us getting the exact data that we want instead of a huge object of items that will not get touched by us.This is where GraphQL comes into play.

What is GraphQL

GraphQL is an open-source query language developed by Facebook.
GraphQL structures data in the form of a graph with its powerful query syntax. Because of the data being structured like a graph we can sort through the data as we would a graph by: traversing, retrieving, and modifying data. It provides us with a more efficient way to design, create, and consume our APIs. On the backend, what GraphQL does is essentially creates a middleman service to filter what we get from an api. By doing this it avoids Over-fetching of data and the use of multiple urls.

Getting Started with GraphQL

To work, GraphQL needs a server and a client. Let's talk about the server. we can attach graphQL to a node server or any other type of server. When this is attached we essentially create a node/graphql server or express/graphql server. Now let's do this using express. The first thing to do is create a basic express server. Next, we need to create an express graphql server. This
require a plugin called express-graphql that creates a /graphql endpoint.

Setting up the server

const express = require('express')
const app = express()
const { graphqlHTTP } = require('express-graphql')

var schema = buildSchema(`
  type Query {
    welcome: String
  }
`);
// root gives us a resolver
var root = {
  welcome: () => {
    return 'Welcome to the GraphQL World!';
  },
};
app.use('/graphql', graphqlHTTP( req => {
  return {
   schema: schema,
   rootValue: root,
   graphiql: true,
  }
}))
app.listen(3000)
console.log('Listening')

Makes fetching data more efficient

Sending a request to an api can give us back more data then we need. GraphQL allows us to send a query to the api to get back what we want. It restricts data that should be fetched from the server. Let's look at an example of a query to fetch data

Fetch data example

// basic query
{
   students {
      id
      firstName
   }
}

// Result of the query

{
   "data": {
      "students": [
         {
            "id": "1",
            "firstName": "Paula"
         },
         {
            "id": "2",
            "firstName": "Greg"
         },
         {
            "id": "3",
            "firstName": "Stephanie"
         }
      ]
   }
}

Avoids using multiple urls

GraphQL Can query multiple relational data in a single request. Which decreases the need for multiple urls/endpoints. By doing this GraphQL utilizes selective endpoints.
Let’s look at an example

Who needs multiple urls? Example

// multiple url query
{
   student(id: "10"){
      firstName
      lastName
      college{
         name
         location
      }
   }
}

/// result
{
   "data": {
      "students": [
         {
            "firstName": "Max",
            "lastName": "Kelly",
            "college": {
               "name": " University",
               "location": "Alabama"
              }
         },
   }
}

Normally we would need to send a request to multiple urls but with GraphQL we can do this with just one request.

Schema Example

type Query {
  Students[Students!]!
}

type Mutation {
  createStudent(collegeId:ID,firstName:String,lastName:String):String 
  updateStudent(collegeId:ID,firstName:String,lastName:String): Student!    
  deleteStudent(collegeId: ID!): Student!   
}

type Student {
   id:ID!
   firstName:String!
   lastName:String!
   college:College
}

type College {
   id:ID!
   name:String!
   location:String
   students:[Student]
}

In this schema we set up how our data will look when we request it. We also set up an optional mutation that we can implement to manipulate the data.

Mutations

Mutations are optional in queries. They are equivalent to CRUD applications in REST. Mutations are how we will modify the data on the server and get updated data back. With these mutations we can: Create, Update, and Delete data entries.

Conclusion

In conclusion, GraphQL makes it easier for us to be selective on the data we receive back from external API’s. GraphQL is language agnostic which makes it easy to incorporate in any type of language. GraphQL can use some of these same techniques and schema to interact with databases. It pairs well with both document and relational database even though it types seems more geared towards document databases

React and server side rendering with Next.js

Neisha Rose — Mon, 20 Jul 2020 01:19:49 +0000

Introduction
React, angular, and vue are traditionally client side rendered frameworks that are run in the browser. There are technologies that can run them server-side making them easier and faster to work with. We will talk about one of the frameworks and a brief intro to all of the different things this framework offers. Because Next.js is based off of using React js, to get started working with it a little react knowledge will be great. if you are a little fuzzy on some react concepts I have some great blogs breaking down core react concepts. Now let's talk about Next.js.

Whats is Next.js
Next.js is a minimalist framework for server side rendering of react applications. This framework makes using react easier because it has a lot of built in things under the hood such as:
Server rendered react-apps, page routing, automated code splitting, hot reloading, deployment and built in css support(styles jsx). Once Next.js is installed, we don’t need to do anything on the react side because it is already built in for us.

Getting Started
First thing you need to do is install Next.js
Npm install next react react-dom
After Next.js is installed we can add some scripts to our package json file

"scripts": {
   "dev": "next",
   "build": "next build",
   "start": "next start"
 }

The package json will have the start script with the server running on port 3000. There is no need to run webpack or anything else dealing with react since it's already built in, that happens behind the scenes. After we install everything and add the scripts, we can create our index.js within a folder called pages. Lets look at an example of a basic index.js.

export default function First() {
  return (
     <div className="homepage-container">
       <h1>My first page</h1>
     </div>
  )
}

This is us creating a basic index.js file that will render a header. You must use export default inside the file such as with react because this is essentially a react based framework. The export default could go at the bottom of the file but i chose to put it with the function.

Page Navigation
Next.js has a file-system based router built on the concept of pages. In next.js there's a folder called pages. This folder houses all of your react components. The pages folder has built in routing. The built in router means that react-router techniques are made easier. They take advantage of the *Link*functionality in the react router. Whenever you create a new file inside the pages folder, routing is automatically added as the path of that file. In the above example we created a index.js file inside the pages folder.The page will automatically route files with index.js to the ‘/’ root. Let's look at an example of routing by creating another page called first.js

import Link from 'next/link'
export default function First() {
  return (
     <div className="homepage-container">
       <h1>My first page</h1>
      This is for home <Link href="/"><a>To homepage</a></Link>
     </div>
  )
}

So we can start by writing the same code we did for the index.js file. Next we need to import Link so that we can have links set up to different pages. then re need to use the Link tag and give it a reference. so our reference will be set on the home page or index.js.
We can also do the same for the homepage so our updated file will look like this.

import Link from 'next/link'
export default function Home() {
  return (
     <div className="homepage-container">
       <h1>My Next.js Home page</h1>
       This is for first<Link href="/first"><a>To first page</a></Link>
     </div>
  )
}

Code Splitting
Another built in feature of Next.js is its ability to only run code that is needed at that moment. Because of this it allows the page to load and be quicker. SO that means if you're viewing the homepage then any code that is not dealing with the homepage is not running.

Api’s
API routes provide a solution to build your API with Next.js.
You first need to create an api folder inside pages folder
Any file inside the folder pages/api is mapped to /api/* and will be treated as an API endpoint instead of a Page. Let's look at an example of how this function will look:

export default (req, res) => {
 res.statusCode = 200
 res.setHeader('Content-Type', 'application/json')
 res.end(JSON.stringify({name:'Neisha'}))
}

Typescript
Another great thing about Next.js is that it provides an integrated Typescript experience out of the box.
Setup is simple, you can create a folder in the root called tsconfig.json.
Next you will config this file with default values.
When you run npm run dev the terminal will guide you on how to finish installation to start your typescript refactoring.

Deployment
The creators of Next.js have a platform called vercel for deploying. If your project is on a git platform, you can create a vercel account and link the project to the account. Once the account is linked you can then import your project. Once the project is imported, vercel will automatically detect that the project is a Next.js project and do the build config. During development of your Next.js project and deployment phase, they follow the DVP model that stands for: Develop, preview, and ship. In the preview phase vercel automatically creates a new deployment environment with a unique URL where your project can be viewed to preview it when you open a pull request on github. To ship the project just merge the pull request to the master branch, vercel automatically creates a production environment for you.

Conclusion

Next.js optimizes your application for the best performance by code splitting, client-side navigation, and easy deployment.
You can create routes as files under pages and use the built-in Link component. No routing libraries are required.
There is built in functionality that makes creating an app simple and easy which makes Next.js a great framework to learn to pair with your React knowledge.

Getting started with our PostgreSQL database

Neisha Rose — Mon, 13 Jul 2020 18:49:34 +0000

Introducton
We will be talking about how to get a database set up in PostgreSQL and establishing the connection to the database and how to do some basic query functions to get us practicing using postgres. Postgresql is an object-relational database meaning it runs with an object-oriented database model: objects, classes and inheritance can be a part of the schema. Because PostgreSQL is a SQL database it makes a good switch for someone who is familiar with databases such as MySQL and mariaDB. The setup is a little different, but the queries are very similar. Which is why the switch to PostgreSQL is not a hard task.

Setting up the database
Assuming you already have PostgreSQL installed on your local machine. There are some steps we can take to set up our database.
1) The first thing we need to do is start the postgres server. Run the command sudo service postgresql start
2) Next, we need to connect to postgres Run the command
sudo -u postgres psql

Now you should be inside the postgres shell. Now we can create our database. To create the database, we run the command
CREATE DATABASE [name]
Where name will be the name of the database. Next, we need to connect to the database so run the command: \c [name]
You should see a message that says the database is connected. At this point you have created the database and now can start adding things to it. If you are familiar with MySQL you can create a schema.sql file in your code editor, where you can list out your schema such as tables without having to create the table in the command line. To run the schema.sql file in postgres you first need to cd into the directory that the schema.sql file is located. Once in that directory run the command: \i schema.sql

Database Connection
Now that we have our schema loaded into the database, we now need to connect establish a database connection. The database connection is like setting up other SQL connections such as MySQL. You will need to know the user, password, host, database name, and port of the PostgreSQL server. The port is something that is different because with MySQL we didn’t have to know the port of the database just the server port. If you haven’t changed the port when you set up postgres its default is 5432. Assuming you are going to be use pg-promse to make queries, your database connection will look like this

const pgp = require('pg-promise')({});

const db = pgp({
  user: DB_USER,
  password: DB_PASS,
  host: 'localhost',
  port: 5432,
  database: 'My postgress db name',
});

Above, user will be set to whatever user you set up for the PostgreSQL database. By default, the user is postgres but if u changed it to maybe your name then user will be your name.
password is the password you initially set for that user. Host is of course local host. database will be the name of the database you want to connect to.

Queries
Now that we set up the database connection, we can see some example of basic PostgreSQL queries. Let us say your database has a animals table. and we wanted to get all the animals in the database. We could create a function that select all the animals in the database and returns them. Let’s look at an example below

const getAllAnimals = async(req, res) => {
  try {
    const animal = await db.any('SELECT * FROM animals');
    res.send(animals);
  } catch (err) {
    console.log(`no animals, ${err}`);
  }
};

Because we are using promises to handle the queries, we can use Async. In the above example we establish a function called getAllAnimals. Next, we use to async keyword meaning this function will return a promise. inside the function we use the try keyword which essentially means try to do this but if that is not successful, then move on. So, inside the try is where we would put our query. db.any means anything that matches this should be returned. If the query has an error, then we will have our catch keyword to catch the error.

To add something into the database we can take similar steps. We create the function and inside the function handle the query and data. The difference will be is how we receive the data. this will normally be done in a post request with an incoming body object with the data that needs to be added. Let us look at an example

 const createAnimal = async(req, res) => {
    try {
     await db.query('INSERT INTO animals (name, color, legCount, 
      diateryNeeds) VALUES ( ${animalName}, ${animalColor}, 
      ${AnimalLegs}, ${animalFood}', req.body);
     res.send({ message: 'Animal added' });
   } catch (err) {
    console.log('Sorry, no animals', err);
   }
};

Inside our query, we can see where we are inserting values into and then we see some template literals that whole the key values of our incoming object and at the end we put req.body because that will be where our object is held in the incoming response. We are essentially saying this object will have these keys and insert the value of the keys into the specific database columns.

*Conclusion
In conclusion, we have set up a database in PostgreSQL by creating it and connecting to it. We can of course manually create tables in the terminal, but I feel that having a schema already set up in the file and running it through postgres will save a lot of time. After setting up the tables we then set up the database connection so that we could start creating functions that would execute our queries. And we have set up some basic query functions to get us started with playing with PostgreSQL.

Introduction to Socket.Io

Neisha Rose — Mon, 06 Jul 2020 01:54:23 +0000

Introduction
When building an application, we can have a real-time way that allow the client and the server to communicate. such as implementing a chat application between multiple users. To implement this messages, need to be sent constantly without the page refreshing. We can implement this type of client/server communication by using web sockets. The problem with web sockets is that not every browser is compatible and web sockets do not wok well with a firewall. So, for this reason we can use an alternative library called Socket.io. This library is built off web sockets but can be used with less restrictions.

What is socket.io
Socket.IO is a JavaScript library for real time web applications. This Library utilizes the Client/Server Architecture to allow communication between the client and server. It is great to add real-time communication to a website and is based on an event-driven system that listens for specific events to be triggered.

Server-side
First, we need to install Socket.Io. and then we will need some way to connect to the server, so we can also install express.
npm install socket.io
npm install express --save
or
npm install socket.io express --save

Once we have out dependencies installed, we will now create our server and establish a connection.
In the example below we start off require what we need to set up a basic http server. We give it a port of 8080 and a we set a variable called server. this variable is us setting up the node server instance which we will need require Socket.Io because it must have a server connection

const express = require("express");
const app = express ();
const port = 8080;
const server = require("http").createServer();
const io = require("socket.io")(server);

io.on("connection", (socket) => {
/*
the socket param is the bridge that connects the user to the server so where data will be transferred through
*/
    console.log("Connected");
    socket.emit("homepage", "Server is connected to homepage");
});

server.listen(port, () => {
    console.log("Server Is Running on Port: " + port);
});

the next thing we see is us establishing the connection between the http server and the socket. The first param takes is an event. and in this case the event is a "connection" meaning once something connects to it, then it will activate a callback function that will first log that its connected. The next thing we do is to set up a custom event on the server using socket.emit. In this example whenever the homepage event is connected, we will have it send a message to the user or client "Server is connected to the homepage".

Client-side
We have established a server and have a way for the server and client to communicate. Now we need to set up the client to complete the connection. The first thing to do is to install the Socket.IO client library.

npm install socket.io-client

Next, we need to require the library and establish a socket variable which we be the connection to the server. Remember we have that socket param in the callback function on the sever side, so we need to keep the name the same. this is where the bridge between the client and server is set up.
The socket variable will be set to the host and port that our server will be listening on so they must be the same. Let us look at the example below to visualize this:

const io = require("socket.io-client");
const socket = io("http://localhost:8080");

socket.on("homepage", (data) => {
  */
  when the homepage event is triggered then we have a callback that will be triggered
  */
   console.log('we received data from the server', data);
});

The data param will hold the data that the server sends to us through the emit we saw on the server side. which in this case will be the "Server is connected to homepage" message. In this instance the data was a string but socket.IO can send all different types of data such as: images, videos, audios and JSON etc.

Conclusion
We have set up a basic socket connection between the client and server that can eventually be used to implement some real time communication such as chat features and even other real time features of communication. With Socket.Io we do not have to worry about the connection being interrupted due to different browsers or firewalls such as if we were to use strictly web sockets.

Navigating single page applications with React Router.

Neisha Rose — Mon, 29 Jun 2020 03:23:07 +0000

When developing an application, we may want to start with a single page application (SPA). A SPA is a website that re-renders its content to a new set of content without making a request to the server to fetch new HTML. A single page application utilizes navigation to give the user the feel of multiple pages in one. One way to incorporate navigation into our SPA is to use react router

Getting started with React Router
If using React as a front-end framework, we will not be able to route through different parts of our application solely with react. We will need the help of another library called react-router. If using the node package manager, we First we need to

npm install react-router-dom

After installing the dependency, we can now create a component that will house these navigation links and routes. We can put these routes in the parent component of the app., but these routes may be larger and space consuming so let us just create a component called Navigation.jsx.

Using React Router
Next, we will need to get access to the library we just installed. We need to Import react-router-dom and all the built-in goodies it gives us access to. HashRouter or its alias Router will be the outer tags that all our routes and links will be contained in. For now, we will import Link in.

import React, { useState, useEffect } from 'react';
import {
  HashRouter as Router,
  Link,
} from 'react-router-dom';

Now that we have what we need imported in we can create a class or functional component. Here I chose to you functional. Inside the return we add our router tags and inside them some structural tags such as divs, li, and ul. Next, we will put a Link to tag. this is equivalent to putting a href tag, it creates a clickable link to the multiple pages we will render. With this tag we create a path that we will use later and the name of the link e.g. Home, Login, Profile. Tak a look at the code below.

const Navigation = () => {
  return (
    <Router>
      <div>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/login">Login</Link>
            </li>
            <li>
              <Link to="/profile">Profile</Link>
            </li>
          </ul>
      </div>

Switching between pages

The next two things to add to the imports is the Switch and Route tag. Under the link tags we can add the switch tag. the switch tags will allow us to switch between different pages. so, within the switch tag we will set up our routes to the multiple pages we will have. You will also notice that we imported some other components. We will be setting up the routes to these components.

import React, { useState, useEffect } from 'react';
import {
  HashRouter as Router,
  Switch,
  Route,
  Link,
} from 'react-router-dom';
import Profile from './Profile.jsx';
import Home from './Explore.jsx';
import Login from './Login.jsx';

const Navigation = () => {
  return (
    <Router>
      <div>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/login">Login</Link>
            </li>
            <li>
              <Link to="/profile">Profile</Link>
            </li>
          </ul>
        <Switch>
          <Route path="/login">
            <Login />
          </Route>
          <Route path="/profile">
            <Profile />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
};

Above, in the switch tag we put a route tag and here we will set the route for a certain path. the path is the path to the page you want. So, in our case we need a path to the home page, profile page, and explore page. Once we set the paths, we will render those components. So right now in our application, when we click on the link to either page it should render what ever is inside that component.

Conclusion

We have just set up a basic routing system that makes it so that we can have multiple pages in our single page application. React router comes with more build in things that allows us to make our navigation more dynamic the more complicated our components get. There is ae some built in hooks that also makes our life much easier with navigation.

In Sync with Asynchronous Request Methods: Axios

Neisha Rose — Mon, 01 Jun 2020 01:52:31 +0000

Introduction

When developing a full stack application with outside resources such as an API, we need a way for the front end to communicate with the server in the back end to get some data. There are multiple ways to do this such as using the reacts built in fetch API method and the XMLHttpRequest or we could use jQuery’s AJAX requests. The issue with using AJAX is that there are a lot of components that go with making a request and most of all we would love to distance ourselves from jQuery. Today we will be discussing an alternative, using Axios.

What is Axios

Axios is a promise-based HTTP request library that allows us to interact with rest API's. Because Axios is a promise-based library it supports making asynchronous request so that your browser can function normally while waiting for the request to be handled. We will now talk about how to make HTTP requests using Axios.

GET Request

When we want to get some data we can make an axios.get() request. The first parameter is a URL to perform the request on. The response that comes back, if the promise is resolved, will be contained in the .then() and will be an object that consists of keys of data, status, status text, and headers. The data key will contain the data we set out to request. Let us look at an example.

One way to make a GET request

In the example above, we see the first way we can get data using the axios get method. It consists of and object with keys for the method and endpoint for the URL we want to get the data from.

Another way to make a GET request

In this example, we can attach the HTTP method on axios and just pass in the URL as the parameters then chain on our then and catch on to it. This way is much easier to read and does not take up a lot of space.

POST Request

If we want to post some data to a specific endpoint, we can use the axios.post() method. The first parameter is a specific URL or endpoint. the second parameter is and object containing the data we want to send to our server.

One way to make a POST request

In the above example we pass in a second parameter which is an object of the data we want to send to the server

Another way to make a POST request

In this example we see an easier wat to write the same request

Axios.all

Because axios utilizes promises, it uses a familiar promise method. We can have multiple request happen simultaneously with the axios.all() method. This method takes in an array of requests and returns and object if both request resolves. even though it can take multiple request we only need to chain on one then() and one catch() to it. Let us look at an example.

Axios.all example

Conclusion
In conclusion, Axios is a library used to make HTTP requests. Because of its asynchronous nature we can be sure that our browser can function without interruption while waiting for the request to be resolved. Axios comes with a lot of built in methods that make making these request easy to write.

Express Routing

Neisha Rose — Mon, 25 May 2020 03:25:25 +0000

Introduction
When we use the GPS in our car we put in a certain destination. the GPS then gives us a route to take to get to our destination. If we deviate from that route the GPS re-routes us to get to that same endpoint. Webpages are the same in that, when we put in a specific endpoint on a site the server routes the request to a certain file in our code to handle that request. We will look at a framework that makes this possible.

What is Express
Express is a free unopinionated node.js framework whose features allow for building out an application. Some features of using express includes: routing, handling middleware, creating API's, rendering HTML view, and many more things. The thing we will focus on today is routing.

Routing
When a client makes a request for information, it is usually to a specific endpoint. For example, if we search www.google.com/ we are routed to googles home page. if we add '/imghp' to the endpoint then google servers will reroute us to the google image home page. Routing is used to determine how an application responds to a client request to an endpoint and a specific HTTP request methods such as get, post, put, and patch. We can have different http methods on a specific endpoint, but we can have the same methods on the same endpoint. for example, two GET methods both routing to the same endpoint. Let us look at an example of establishing a route in a index.js file.

Routing example

In the example above, we first need to require express in our files. Once express is required we can set a variable like app to express and use that whenever we want to utilize a method. Each route can have one or more handler functions, which tells our server what to do when a request to the specific endpoint is made. most of the time we can route it to a specific file that will handle all the functionality.

Route Chaining
Having multiple routes to various endpoints can become space consuming. Let us look at an example of having multiple multiple routes:

In this example we have multiple routes set up. As we can see some of these routes are to the same endpoint. Express gives us a method called route that gives us a way to chain on HTTP methods that go with the same endpoint. Let’s look at how we would chain on these methods using the express route method.

In the example above, we have our app.route() method. Inside of that we can put our route. Next, we can chain on multiple HTTP methods to that one route. This frees up a lot of space and allows us to reuse code.

Conclusion
In conclusion, Express gives us a way to organize our code in a way that we can handle requests to endpoints in a certain way that benefits our MVC style. We start of by importing express into our files. and organizing our in a file. when the request is routed to the handler it can execute according to the code we built.

React LifeCycle Methods

Neisha Rose — Sun, 17 May 2020 20:46:33 +0000

Introduction
Just like we have stages in our life, react components has their own stages. There are different methods dependent on what stage the component is in. The method in these stages happen in a sequential order so it is best to be comfortable with them to best utilize them and make our code cleaner. With these different stages come a structured way to manipulate our elements. We can break a react lifecycle into three main parts: Mounting – When it is initializing, Updating– When the component changes and Unmount – When it is destroyed. Before we start talking about the lifecycle, we will briefly discuss components.

What is a React Component
The structure of an app is broken down into smaller specialized elements called components. Each component is made to contribute to a feature of an eventual User Interface (UI). There are two types of components: class components and functional components. We will focus on the class component in taking a journey through Reacts Lifecycle methods. Below we will show and example of a simple component for creating a fake background component based on the weather.

here in our simple component we have a state with a weather value and a color value. this is the start of this component life cycle.

Mounting
This is the stage of a component being initialized. In this stage some prominent lifecycle Methods include: render() and componentDidMount().
Render is one of the most used lifecycles methods because it is the only one needed to make the component class work. We use render to put elements on the user interface.

Whatever is inside the render function will be shown on the user interface (UI).
This method happens during the mounting and updating stages of your component. Whenever something needs to be shown on the screen or changes be made, render will always be called. One thing we can't do is change the state inside the render function so we need other ways to do this that won’t produce problems in our component. Now we will look at another method in the mounting lifecycle called componentDidMount().

componentDidMount

This method is immediately invoked, it renders before the browser comes on the screen. Because of this, if ever we needed to initiate api calls, they can be placed in this method and we can guarantee that the data we need will be displayed on the screen before it loads. This method also allows the use of setState(), so it is also ideal for changing the state inside this method. Let us look at an example of changing the state in this method.

Updating
Just like it sounds, these are methods for updating a change on the DOM. One popular method to use is componentDidUpdate(). This methods usually consist of a conditional to check if a change occurred and if true what needs to be shown on the screen. for example:
we will check if the previous color doesn’t equal the current color then we will change the color.

having this method is useful when a website or app have user interactions. we can have update methods to be able to maintain the UI based on these possible interactions.

Un-mounting

When a component has met the end of its journey, we have methods to cleanup code before they're destroyed or removed. Things like setIntervals and api calls do not have to constantly run. If they do it can cause constant rendering which can affect our page. Common cleanup activities performed in this method include, clearing timers, cancelling api calls, or clearing any caches in storage. let's look at componentWillUnmount().

Let’s say we added a set Interval function that fetch the weather for us every 30secs. the only way this will stop is with a clear Interval function. The best place to put a clear Interval function is in a componentWillUnmount function which will trigger the end.

Conclusion
In conclusion, react components comes with some built in lifecycle methods that will make it easier to manipulate elements in our components and certain points. As we progress through a components lifecycle there is an order of execution. These methods allow our code to be much cleaner.

Client/Server Architecture

Neisha Rose — Mon, 11 May 2020 00:21:39 +0000

Introduction

How do I boil an egg? Why is the sky blue? Why can’t I sneeze with my eyes open? These are philosophical questions we ask google all day when we think about it. When we get the answer in a millisecond, we may not realize the complexity of requesting and getting that information. Where do the information come from? The sky of course. There is an architecture that describes the way we request and receive this information and the ends and out of how it happens.

What is a Client

A client is a machine or program such as: A Desktop computer, laptop, tablets, and smartphones that allows users to make request for information through the web. A single client can connect to numerous servers at a single time, where each server provides a different set of services to that specific client. when we type www.facebook.com our computer is the client now request the Facebook page to load up. now when we see the page pop up on our device that is a response gifted to us from facebook’s server.

What is a Server

Just like a client a server is a computer or computer program. A server manages, store, send and process data 24-hours a day. A server can contain web resources, host web applications, and store user or program data. Most servers have a one-to-many relationship with clients, meaning a single server can provide resources to multiple clients at one time. Even though servers can handle multiple clients sometimes so many clients can overwhelm a server so a platform may use multiple servers to handle the traffic. for example, google, when you are typing in the search through google you are making a request to googles 900,000 servers. And since we may want to know how many legs a snake has at 11:00pm a server stays listening for a request

Now that we distinguished the difference between a client and server let’s talk about the structure in which they interact with each other

Client/Server Model

A client/Server model is an architecture on the web that splits computers into two sections. Computers that ask for and request services (Clients) and Computer's that service or give a response (Servers). The client sends across the request to the Server in the form of XML or JSON which both entities (Client and Server) understand. After understanding the request Server responds with appropriate data by sending back a Response. The client and servers can be two different computers in different parts of the world that are connected through the Internet. The client and the server could also reside miles apart or within the same building as well. But they also can be running on the same machine. The client and server model allows a separation that can make data storage and retrieval more efficient. Next, we will discuss hot the client and serve communicate

Hyper Text Transfer Protocol Secure (HTTP)

As we can see in the name HTTP is a protocol or set of rules used to communicate and exchange data between the client and server. HTTP is a specific set of languages along with a communication standard, for the interaction of two systems. HTTP is connectionless meaning, after making the request the client disconnects from the server. Then the server re-connects to the client to give the response. Clients establish a connection to the server via HTTP protocol. We know these protocols as GET, POST, PUT, PATCH, and DELETE.

Let’s say we want to request information about pets our HTTP verbs will look like this

What we are talking about now is the request/response cycle with the client/server architecture

Request/Response Cycle

The client server model work through a request/response cycles via HTTP methods
In the client-server architecture, the client computer sends a request for data to the server through the internet in the form of an HTTP message, The server accepts the requested, processes it and deliver the data packets requested back to the client also in the form of an HTTP message. The data packet sent back from the server includes a status code on if the request was successful or not, and if successful the requested material contained in a message body. A successful request would be a status code of “200” and an unsuccessful request would be a “404”.

Conclusion

In conclusion, even though its complex the client/server architecture at its core is not as complicated as it seems. Taking a deep dive there are many layers to it that makes it easy for us to get information quickly and efficiently.

Inheritance: Prototypal vs Pseudoclassical

Neisha Rose — Mon, 04 May 2020 08:17:18 +0000

When we are conceived, we inherit genes from both of our parents while being able to function as our own being. In functions there's a way to do the same. there are a handful of methods we used to create inheritance paterns. Prototypical instantiation requires that the object be created and returned, where as the pseudoclassical instantiation pattern does this by insertion of the keyword 'new' in front of the class name.

Pseudoclassical vs Prototypal

here we have a chart that shows the different ways on how prototypal differentiate from pseudoclassical we will later discuss more detail.

Prototypal Instantiation

This type of instantiation pattern is different then functional-shared that you may have learned about before this. Instead of initializing a variable to an empty object, you initialize it to equal Object.create which creates a new empty object that will then be use to have a prototype to the methods. Basically the classes will all have a special relationship called prototype delegation where if there’s a class method invocation then the class will check the prototype if there are any methods that match.

Prototypal inheritance uses:

'Object.create' (to create a new object)
A parameter object (the prototype for the new object) As mentioned above, here we are creating new objects directly from existing ones, without any notion of classes.

Example of Prototypal

In this example we use a method called Object.create to create a new object that has reference to prototpes that our function can use if needed. We also add the name variable to reference back to using the this keyword.

Pseudoclassical Inheritance

Same as Prototypal except that it doesn’t even need an object to be created. You can use the “this” keyword and it will automatically know that you’re using the Pseudoclassical style and thus will generate a “var this — Object.create(whatever-name-of-class.prototype)”
This pattern involves creating pseudoclasses using constructor functions, then it uses the 'new' keyword to create instances of the pseudoclass. The prototype property is inherited by all instances and contains the methods common to it.

Pseudoclassical inheritance uses:

The 'constructor' function to create objects
The 'new' operator to create objects
The 'prototype' property to build the inheritance chain

Example of Pseudoclassical

In this example we can see that we dont need the Object.create and also we dont need to return the object. The 'new keyword handles both operations for us. But the way we handle the prototype is the same. There is another we we can manipulate pseudoclassical and thats with the es6 classes

Example of es6 Pseudoclassical Classes

In this example we replace the const keyword with the class keyword and add a constructor inside. Also we change the we we write out our methods without having to use the prototype keyword

Conclusion

In conclusion, Looking back at our tree constructor, the two most important parts were creating the object and returning it. Without creating the object with Object.create, we wouldn’t be able to delegate to the function’s prototype on failed lookups. Without the return statement, we wouldn’t ever get back the created object. With Prototypal the 'new' keyword handles that and also protect against failed lookups.

Callbacks vs Promises

Neisha Rose — Sun, 05 Apr 2020 21:03:57 +0000

The Goal

The goal is to achieve asynchronous code. Async code allows multiple things to happen at the same time. When you start an action, your program continues to run. When the action finishes, the program is informed and gets access to the result. We can achieve async code using two methods: callbacks and promises. With callback we pass a callback into a function that would then get called upon completion. With promises, you attach callbacks on the returned promise object.

Callbacks

A callback is a function that is to be executed after another function has finished executing. Async callbacks are functions that are passed as arguments. and when that function is called it will start executing code in the background. When the background code finishes running, it calls the callback function to let you know the work is done. We use these callbacks because we want to avoid executing things out of order. If we want to wait for something in JavaScript, we need to use a callback.

Let’s make that pb&J from scratch using callbacks

synchronous code

This synchronous Peanut Butter & Jelly function runs in order, one function after another. but what if we had a function that needed to be ran first and other functions couldn't be ran until after this function finishes. Let’s think of making bread from scratch. you can’t put the peanut butter and jelly on the bread until it’s made so you must wait until its done. With synchronous code it doesn’t wait it just does it. How can we fix it?

Async Callbacks

We make an async callback so that we can make sure no other function runs until our bread is made. Let’s picture inside all the other functions there’s ample amounts of code to run. This can cause an issue because you can have plenty of nested callbacks inside one another. That leads to what we call callback hell. Callback hell can riddle code with bugs that are hard to catch. For this we need a way to make aync code while avoiding so many nested callbacks.

Promises

Promises are native to JavaScript, but you can also install promises libraries such as: Bluebird and Q. Promises are JavaScript objects that represent an eventual completion or failure of an asynchronous operation. A promise is a returned object where you attach callbacks, instead of passing callbacks into a function. the place where you attach the callback after a successful completion of a task is called, .then(). inside this you pass a callback through. What makes promises a way to avoid callback hell is that you can chain multiple .then() on each other which avoid nested callbacks and a neater line of code. For the failure of completing a task you can pass it through a .catch().

Let’s change our callback to a promise

Here we take our PB&J function and turn it into a promise. We will first return the makeBread function and then on the successful completion of that function we will return a promise that will pass in the next callback to be ran. Next, we will chain on the other function that will be ran after that in order. thus, making async function. As you can see the code is neither and we avoid callback hell.
We can also chain on an error message to the .catch() method and on that message "ewww crunchy peanut butter" because that will just ruin my sandwich.

Final Promise

Let’s make our promise a little bit neater by just passing in the callbacks.

Conclusion
Both callbacks and promises help make our code asynchronous. Making callbacks async can cause issues such as callback hell, so to avoid this we can use promises instead, doing this helps us avoid this pitfall while keeping our code async and neat.

React: Passing Data between Components

Neisha Rose — Mon, 30 Mar 2020 15:51:18 +0000

React Overview

React is a JavaScript library for building user interfaces (UI). What makes react so popular for developers is its ability to build UI's more easily and manageable. React uses a syntax called JSX to describe how the UI will look.
instead of putting JavaScript into HTML, JSX allows us to put HTML into JavaScript. react needs a trans compiler called babel to bridge the gap between the languages to something the computer understands.

State/Props

React manages its data through a state. State is a JavaScript object whose values are mutable. State can only be used inside of the parent component so if we wanted access to the state data in other components, we will need props. Props like state is also a JavaScript object but values are immutable. the props are what other components will use to have access to the data within the state. and props is how we will pass data from a parent component to a child component.

Passing data from a Parent to a Child

To pass data from a parent component to a child component we will need access to the state data outside of the state. so, for this we will use props. let's see an example.

here we declare child one and give it values equal to {this.props.value}

child 1

Passing data from a child to a parent

             **Let’s add a second component**

new parent

We added child two as a div and gave
it props from the state

child2

In this new component we want to change the value of my prop, but as stated earlier, props are immutable so to change the value of my prop we need a way to change the value in the state. The easiest way to do that is to add a function in the component to manipulate the state in the parent component. to do this we added a method that onclick will trigger the change of state int he parent component so we can have a new value to color. let’s see how the second component and new parent component will look

Component 2 with added function

here you can see we bind the function
to the scope we want.

New parent function

In the parent function we added a
function to the state that will be triggered

The ladder

Passing data from a child to a parent is fine when there is one child component. When there is more than one, we have to make sure the data is also passed to those components from the siblings. We have an order in which we change the parent component. we can’t just jump from component 3 to the parent while skipping pass component 2Lets add the new prop to component one so that it can take in the new value of the state also.

Child 1

Conclusion

It’s easy to pass props from a parent to a child but to pass values from a child to a parent is a little extra, we must create a function. We must create a function in the component that will trigger a change to the state. then create that function in the parent component's state. It is also very easy for us to get to pass data between siblings to make sure they get the same interactions