Forem: josesrodriguez610

Pusher: Real-Time Functionality

josesrodriguez610 — Sun, 15 Nov 2020 19:29:44 +0000

Every time I’m building a chat I always think about working with socket.io but this time I wanted to find something different and that’s when I came across Pusher.
Pusher is a hosted service that makes it easy for us developers to add real-time and functionality to your application. They even give you instructions on how to use the code in the website. I’ve seen a lot
Tutorials of people using it with mongoose but it can be done with Sequelize as well. I’ve been working in an application that uses Sequelize and React and I’m going to show you briefly how it works. First let’s go to Pusher and start an account.

When you go to pusher first you are going to sign for a free account.

Once you create an account lets create a Channel

and You will be asked to pick a name for your application and then what are you using for your frontend and backend.
This way Pusher will give you a couple of snippets to help you set it up in your application.

Here you have instructions on how to set it up for the backend and frontend.

Backend

Frontend

Now let’s go to our code.

First we need to install pusher

npm install pusher

I’m working with a database so I’m importing my model called Message and I’m using express router to create a specific route for my messages. I’m using dotenv to hide my keys information.
now let’s bring pusher to our backend by importing it and then
look at node.js there is a snippet on how to do it.

require('dotenv').config();
const { Router } = require('express');
const { Message } = require('../db/index');
const Pusher = require('pusher');

const messageRouter = Router();


const pusher = new Pusher({
  appId: process.env.PUSHER_ID,
  key: process.env.PUSHER_KEY,
  secret: process.env.PUSHER_SECRET,
  cluster: process.env.CLUSTER,
  useTLS: true
});


module.exports = { messageRouter };

First you are going to have a post request that will save the message information sent to the database and in there we are going to listen to any changes and send them back to show data right away!

messageRouter.post('/', (req, res) => {
  const {
    id_league, words, id_user, username
  } = req.body;

  Message.create({
    id_league, id_user, words, username
  })
    .then((response) =>  res.send('message created’))
    .catch((error) => console.warn(error));
});

So I’ve created a route to create a message that takes a body with a league id, user id, words which is the message and the username.
I’m using Sequelize so I’m using create to save it to the database and then once it it create my response is just letting me know that the message has been created.

Now right after the response we are going to add the listener.

If you look at the Pusher code snippet. When you use the trigger you need to add a channel which it will be messages, and an event which we called inserted.

messageRouter.post('/', (req, res) => {
  const {
    id_league, words, id_user, username
  } = req.body;

  Message.create({
    id_league, id_user, words, username
  })
    .then((response) => {
      pusher.trigger('messages', 'inserted', {
        id_league: response.id_league,
        id_user: response.id_user,
        words: response.words,
        username: response.username,
        createdAt: response.createdAt
      });
      res.send('message sent');
    })
    .catch((error) => console.warn(error));

Now let’s go to the front-end.

First we are going to install pusher-js

npm install pusher.js

Then we are going to import it and use useState and useEffect from react.
useEffect will be saving our messages in an array.
Then you can look at the code snippet provided by Pusher and add this to the use effect. There you are going to add your pusher key.

import React, { useState, useEffect } from 'react';
import Pusher from 'pusher-js';

function MessageBoard() {

useEffect(() => {
    const pusher = new Pusher(process.env.PUSHER_KEY, {
      cluster: 'us2'
    });

    const channel = pusher.subscribe('messages');
    channel.bind('inserted', (newMessage) => {
      setMessages([...messages, newMessage]);
    });

    return () => {
      channel.unbind_all();
      channel.unsubscribe();
    };
  }, [messages]);

Now you are listening to the messages channel and you are binding it to the event which is inserted. setState then will add it to our array and the useEffect.
Then I’m canceling the listener for better performance.

This is a quick way to show how Pusher works in your application. I encourage you to go and check out the documents. It is very easy to set up and I’ll be using it again in the future.

Firebase: Deploying a single page application in React

josesrodriguez610 — Sat, 07 Nov 2020 04:38:52 +0000

Firebase is a company founded by James Tamplin and Andrew Lee in 2011 and then acquired by Google in October 2014.
Firebase platform is used for creating mobile and web applications. Firebase gives developers many tools to develop quality apps. Firebase is a NOSQL database program.
Firebase supports: authentication, realtime database, hosting a Test lab and notifications.

Today I’m going to be focusing on how simple it is to deploy a website with Firebase.

First go to your terminal and create a folder

mkdir deploy-test

then check that it is there with 'ls' and then access your file and open vs code with code.

Vs code is going to open and now let’s create a React application that we will call deploy. If you press command + J, your terminal will open and there type

npx create-react-app deploy

This is going to take a second so let's go ahead and visit firebase.

When you get to firebase, there is a button that says get started and when you press it you will have to sign in with a google account.

Now here is where you see all your projects and if you want to add a new project you press on the Add project plus sign

Now you have to enter the name you want to give your project. I’m going to call it test-deploy and press continue

Then you will be asked about Google analytics and just press continue.
Then Configure Google Analytics which I always choose the default and I press Create project

It is going to start creating your project and while we wait for that to finish let’s go to our vs code.

Our react app has been created!
Let’s get into our app with:

cd deploy

and then let’s run,

npm start

to see our application

Great! Now we have our application running. Let’s do some clean up so we can create our own application.

Let’s go to our left side and delete a couple of files.
We are going to delete
-App.test.js
-logo.svg
-setupTests.js

Your app is going to freak out because it is looking for the logo so our next step is to go to App.js and clean that file.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Here we are going to delete the import for the logo and we are going to delete in the return everything expect that first div and we are going to write and h1 that says hello world with a rocket.

import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Hello World 🚀</h1>
    </div>
  );
}

export default App;

Now we are going to go to App.css
And delete everything. Then we are going to add

* {
  margin: 0;
}

Now let’s go back to firebase and it looks like our project is ready!

Press continue, now let’s click on web:

the next step is to give our app a nickname. I’m going to call it deploy and let’s create it

Then the next page press next and then you will see this right here!
npm install -g firebase-tools

You have to install that in your terminal.

Then the next page is going to tell you how to deploy. First you do firebase login which is your login with google in your terminal then you will do firebase init and then firebase deploy then go to continue to console and let’s go back to our react app.

Now lets open another terminal and lets go into our app with 'cd deploy' and we are going to install:

npm install -g firebase-tools

After that is installed you are going to sign in with google by putting

Firebase login

After you put your password go ahead and type the command

Firebase init

Here there are going to be a couple of options. Go all the way to Hosting and press space and it will get selected
Now you can press enter

Now you are going to press
Use an existing project

And now you are going to pick your project and press enter

This part is very important. They are going to ask.
What do you want to use as your public directory?
You need to write 'build' and press enter

Now they are going to ask if you want to configure as a single-page app and you put y
then it will ask if you want to deploy with GitHub, say N

It is going to tell you that firebase initialization is complete.

Now run in your terminal

npm run build

And now let’s type

Firebase deploy

And That’s It!
There is going to be a hosting URL and it you click it you will see your application!

Conclusion:

Firebase is a powerful tool that lets you create big applications fast and easy.

Introduction to React Context

josesrodriguez610 — Wed, 28 Oct 2020 21:18:15 +0000

Last Week I wrote about setting up Redux so today I’m going to talk about another way to keep track of your state and this comes from React.

Context, like Redux is a way to share data between components without having to pass props through components that are not using, but Context is very lightweight and easy to set up.

Let’s jump in!

Like last week, today I have this code which will have an input that we are keeping track in the input state and when you press the button it will update the user state with the input state and display to the page. I made a console log to keep track of the user as well.
I made a couple of layer deep so I can give you an example of Context.

import React, { useState } from "react";
import Layer2 from "./Layer2";

function App() {

  const [input, setInput] = useState('');
  const [user, setUser] = useState('');

  console.log(user);

  const handleClick = () => {
    setUser(input);
  }

  return (
    <div>
      <center><h1>Hello Class  🚀</h1>
        <input value={input} type='text' onChange={(e) => setInput(e.target.value)} />
        <button onClick={handleClick}>Send</button>
        <br />
        <br />
        {user}
        <Layer2 />
      </center>
    </div>
  );
}

export default App;

First we are going to create 2 files in our src folder called StateProvider.js and Reducer.js

Now let’s go into StateProvider.js and lets import createContext, useContext and useReducer from react

import React from 'react'
import { createContext, useContext, useReducer } from 'react'

createContext lets you initialize Context and useContext accepts a context object and return the current value for the context and it will help re-render the value as well.

useReducer accepts a trigger (a type) and it returns that trigger value with the help of dispatch which fires an action.

Now we have to initialize createContext and save it in a variable which we will call StateContext and export it.

Now we are going to create a variable called StateProvider and this has three props. Reducer, initialState, and children.
We are going to return a tag accessing the Provider which is in the StateContext and we are going set a value with useReducer and that is going to take the reducer (accepts a type) and the initialState (initial value)
Now we are going to wrap the children prop with this tag which will point to our App.js

import React from 'react'
import { createContext, useContext, useReducer } from 'react'
export const StateContext = createContext();

export const StateProvider = ({ reducer, initialState, children }) => (
  <StateContext.Provider value={useReducer(reducer, initialState)}>
    {children}
  </StateContext.Provider>
);

Now let’s move on to our Index.js
Here we are going to import the StateProvider from our StateProvider.js file and we are going to wrap our App component with it.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App.js";
import { StateProvider } from './StateProvider'

ReactDOM.render(
  <StateProvider initialState={} reducer={}>
    <App />
  </StateProvider>
  , document.getElementById("root"));

As you can see StateProvider takes the initialState and reducer that we set with our useReducer in our StateProvider but because we don’t have any value there yet our app is going to freak out a little but to fix it we now need to go and start working on our Reducer.js file.

In our Reducer.js file we are going to create and export our initialState and our reducer to add to our Index.js. We are going to create user and set it to null.

export const initialState = {
  user: null,
}

Now let’s create our reducer which takes a state and action. The logic of the reducer is going to be made with switch statements and the expression is going to be a type. The case will be SET_USER because we are going to set the user and we are going to make our default return state and then we are going to export reducer. Let’s put a console.log to see what action we select.

export const initialState = {
  user: null,
}

const reducer = (state, action) => {

  console.log(action)

  switch (action.type) {
    case 'SET_USER':
    // logic
      break;
    default:
      return state;
  }
}

export default reducer;

Now we are going to set our ’SET_USER’ case. We have to return our state with a spread operator so it doesn’t overwrite all our state and then we are going to set our user to a action

export const initialState = {
  user: null,
}

const reducer = (state, action) => {
  console.log(action)
  switch (action.type) {
    case 'SET_USER':
      return {
        ...state,
        user: action.user
      }
      break;
    default:
      return state;
  }
}

export default reducer;

Now we can go back to our Index.js and import our initialState and reducer.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App.js";
import { StateProvider } from './StateProvider'
import reducer, { initialState } from './reducer'

ReactDOM.render(
  <StateProvider initialState={initialState} reducer={reducer}>
    <App />
  </StateProvider>
  , document.getElementById("root"));

For our last step let's go to our StateProvider. Let’s create a variable useStateValue which will use the useContext and StateContext and useStateValue will let us access our Context state.

import React from 'react'
import { createContext, useContext, useReducer } from 'react'
export const StateContext = createContext();


export const StateProvider = ({ reducer, initialState, children }) => (
  <StateContext.Provider value={useReducer(reducer, initialState)}>
    {children}
  </StateContext.Provider>
);

// this will let us interact with our Context State
export const useStateValue = () => useContext(StateContext);

Now we are ready to use or Context in our App.js.
Let’s import useStateValue from our StateProvider.js

import React, { useState } from "react";
import Layer2 from "./Layer2";
import { useStateValue } from './StateProvider';

function App() {

  const [input, setInput] = useState('');
  const [user, setUser] = useState('');

  console.log(user);

  const handleClick = () => {
    setUser(input);
  }

  return (
    <div>
      <center><h1>Hello Class  🚀</h1>
        <input value={input} type='text' onChange={(e) => setInput(e.target.value)} />
        <button onClick={handleClick}>Send</button>
        <br />
        <br />
        {user}
        <Layer2 />
      </center>
    </div>
  );
}

export default App;

Now we are going to delete our user state, clear our logic from our handleClick and comment out our console.log(user) from App.js and use our Context.
useStateValue has a state which will let us access our current state value and the dispatch which will trigger our state to our new value.

import React, { useState } from "react";
import Layer2 from "./Layer2";
import { useStateValue } from './StateProvider';

function App() {

const [ state, dispatch ]  = useStateValue()

  const [input, setInput] = useState('');


  // console.log(user);

  const handleClick = () => {

  }

  return (
    <div>
      <center><h1>Hello Class  🚀</h1>
        <input value={input} type='text' onChange={(e) => setInput(e.target.value)} />
        <button onClick={handleClick}>Send</button>
        <br />
        <br />
        {user}
        <Layer2 />
      </center>
    </div>
  );
}

export default App;

Now let’s add our logic to our handleClick. We need to use the dispatch and select the type which will be ‘SET_USER’
And then we can set the user to our input state. Let’s deconstruct the state and get the user. Let’s uncomment our console.log(user)

import React, { useState } from "react";
import Layer2 from "./Layer2";
import { useStateValue } from './StateProvider';

function App() {

const [ { user }, dispatch ]  = useStateValue()

  const [input, setInput] = useState('');


  // console.log(user);

  const handleClick = () => {
    dispatch({
      type: 'SET_USER',
      user: input
    })

  }

  return (
    <div>
      <center><h1>Hello Class  🚀</h1>
        <input value={input} type='text' onChange={(e) => setInput(e.target.value)} />
        <button onClick={handleClick}>Send</button>
        <br />
        <br />
        {user}
        <Layer2 />
      </center>
    </div>
  );
}

export default App;

Now if we type or name in the input and look at the console you will see the action and then the Context state updated.

Now we can go to our Layer4.js and import useStateValue and use it.

import React from 'react'
import { useStateValue } from './StateProvider';

function Layer4() {

  const [{ user }, dispatch] = useStateValue();

  return (
    <div>
      <h1>Layer 4</h1>
      {user}
    </div>
  )
}

export default Layer4

And now you can see the user state in Layer 4 !

Conclusion

Context is a very simple and easy way to keep your state without prop drilling.

Setting up Redux in React with Redux Toolkit

josesrodriguez610 — Sun, 25 Oct 2020 18:10:29 +0000

Alright so imagine you have this code

import React, { useState } from "react";
import Layer2 from "./components/Layer2";


function App() {

  const [user, setUser] = useState('');


  return (
    <div>
      <h1>Hello my name is </h1>
      <input type="text" value={user} onChange={(e) => setUser(e.target.value)} />
      <br />
      {user}
      <Layer2 />
    </div>
  );
}
```



**Very simple code:** 
You are writing in the input your name and it saves it to user and displays it in the page. 
The onChange is setting up the value to your user state.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ttuvxr81j5z7jobr7szo.png)

The user state is in App.js 

What if we wanted to display it for some reason in Layer4? 
What would you do? 

You can pass it as a prop from App.js to Layer2 and then to Layer3 and then to Layer 4. 

**<h2>This is call Prop Drilling.</h2>** 
Prop drilling is when you want to get data from a parent component but you are way down your tree line leaving you with the only option to pass your prop through all the other components and the only reason you are using those components is to pass data. 

Of course you can do that but when you start working on bigger projects it can get messy and that’s when we use Redux. 

Redux will give you the option to access the state from anywhere. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wsntd3v9ra99hth6npt9.png)

Today we are going to set up Redux with redux toolkit which is a utility that 
simplifies common use cases like store setup, creating reducers, immutable update logic, and more.

This library is very powerful because it lets you write "mutative" immutable update logic, and even create entire "slices" of state automatically.

It is very effective because it lets you focus on the core logic your app needs, so you can do more work with less code. 


**The Redux Toolkit** 

This package is the standard way to write Redux logic. It was created to help address three problems about Redux:
* Configuring the store is very complicated
* Too many packages to make it work
* requires too much boilerplate code


**<h2>Let’s create redux for our existing project</h2>**



````javascript
npm install @reduxjs/toolkit

npm install react-redux
```
{% endraw %}


Then let’s create two folders inside our src folder. A folder called app with a store.js  and a features folder with a userSlice.js. All state gets separated by slices and because we are going to keep track of the user state we will put all our logic inside our userSlice.js

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2i5bhpkueg0a37qthjgt.png)

Now lets go to our index.js
Lets import our store and Provider from react-redux
And let’s wrap our App.js with Provider that comes from Redux
{% raw %}


````javascript
import React from "react";
import ReactDOM from "react-dom";
import App from "./App.js";
import store from './app/store';
import { Provider } from 'react-redux';

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

```



Provider will make the Redux store available to any nested component 

Now let’s go to userSlice.js

Let’s import createSlice and let’s create a new slice.



````javascript
import { createSlice } from '@reduxjs/toolkit';

export const userSlice = createSlice({

  });
```
{% endraw %}


Let’s give it a name and an initial value
{% raw %}


````javascript
import { createSlice } from '@reduxjs/toolkit';

export const userSlice = createSlice({
  name: 'user',
  initialState: {
    user: null,
  },

});
```



Now we have to add reducers. Reducers specify how the application’s state changed in response to actions sent to the store.



````javascript
import { createSlice } from '@reduxjs/toolkit';

export const userSlice = createSlice({
  name: 'user',
  initialState: {
    user: null,
  },
  reducers: {
    setUser: (state, action) => {
      state.user = action.payload;
    }
  },
});
```
{% endraw %}


Here we are setting up setUser to change the initialState user to an action sent to the store

Now we need to export a couple of things.

We have to export setUser, we have to make a function that access the store and we will call it selectUser and we will export userSlice reducer to use it in the store.
{% raw %}


````javascript
import { createSlice } from '@reduxjs/toolkit';

export const userSlice = createSlice({
  name: 'user',
  initialState: {
    user: null,
  },
  reducers: {
    setUser: (state, action) => {
      state.user = action.payload;
    }
  },
});

export const { setUser } = userSlice.actions;

export const selectUser = state => state.user.user;

export default userSlice.reducer;
```



Now lets go to store.js and let’s import configureStore from @reduxjs/toolkit and let’s get the reducer from userSlice.js
And let’s add it to our store



````javascript
import { configureStore } from '@reduxjs/toolkit';
import userReducer from '../features/userSlice';

export default configureStore({
  reducer: {
    user: userReducer,
  },
});
```
{% endraw %}


Now we can use Redux in our project. For example let’s go to App.js and let’s save a user to our Redux state.

We are going to import setUser and useDispatch. Dispatch will help us send information to the store. 
We’ll initialize useDispatch and we will change our onChange to accept a dispatch and the setUser function and this will add whatever we write in the input to the Redux store.
{% raw %}


````javascript
import React from "react";
import Layer2 from "./components/Layer2";
import { useDispatch } from "react-redux";
import { setUser } from "./features/userSlice";


function App() {

  const dispatch = useDispatch();

  const handleChange = (e) => {
    dispatch(setUser(e.target.value))
  }


  return (
    <div>
      <h1>Hello my name is </h1>
      <input type="text" onChange={handleChange} />
      <Layer2 />
    </div>
  );
}

export default App;
```



We can check it by going to our Redux devtools in the console 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uuc6qgwhm22hhgl5xc1c.png)


Now we can finally move our user information through our app. 

Let’s go to Layer4 and let’s access our Redux Store



````javascript 
import React from 'react'

function Layer4() {
  return (
    <div>
      <h1>Layer 4</h1>
    </div>
  );
}

export default Layer4
```
{% endraw %}


We are going to need to import useSelector from react-redux and selectUser from our userSlice.js which will help us access the store 

We we’ll create a variable call user which will contain the user information saved in Redux

And then we are going to display the user
{% raw %}


````javascript 
import React from 'react'
import { useSelector } from "react-redux";
import { selectUser } from "../features/userSlice"

function Layer4() {

  const user = useSelector(selectUser);

  return (
    <div>
      <h1>Layer 4</h1>
      <h1>{user}</h1>
    </div>
  );
}

export default Layer4
```



Now if we type something in our input from App.js we will be able to access it in our Layer4.js component

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/di58p5l1juv7gsg2zpj7.png)

That’s it,  now you can move data around! 


**<h2>Conclusion</h2>**

Redux works very well when you are building a big application because it takes away the headache of passing props around many components.

VueJS: Starting a new project

josesrodriguez610 — Mon, 19 Oct 2020 04:56:15 +0000

Liquid syntax error: Unknown tag 'endraw'

Mongo DB: Let's look at it

josesrodriguez610 — Mon, 27 Jul 2020 02:31:13 +0000

I finally started looking at the basics regarding Mongo DB and I'm fascinated by the simple way to work with it. Mongo DB is a NoSQL database and NoSQL databases are very different compare to relational databases like mysql where you need to really have a map for everything and you need to figure out the exact schema including what tables you use and what fields you'll use and even the types of fields. NoSQL databases don't have to do anything like that, (plan the structure of your database and collections...) you don't need to do any predefined structuring before you build your application. NoSQL databases are equipped to handle rapidly expanding data and the growing complexity of data structures. NoSQL databases have became very popular for giving the user a more flexible and scalable experience.

Today I'm going to be introducing Mongo DB to you!
After you download Mongo DB go ahead to your terminal and open mongo DB by typing 'mongo'.

Once you are in, type in your terminal:

show dbs

and that will show you all the databases that we have.
You will see that Mongo DB has three default databases that you start with, Admin, Config and Local. In the picture you will see more databases from other projects I have thou.

Let's go ahead and start fresh. Let's create a new database which we will call 'new' for lack for imagination, and to do that you will need to type:

use new

That will create a new database 'new' and mongo DB will switch you to that database automatically, it will give you message of 'switched to db new'. If you go ahead and now check on your databases you should probably see your database there, right? Nope. The reason because it doesn't show it yet is because we haven't created a collection yet inside your 'new' database.

If that's the case then let's go ahead and create a collection!
first lets go ahead an check what database we are in just in case and to do that you need to type in your terminal:

It will show us that we are still in our new database and then we will create our collection which we will call 'first':

db.createCollection('first')

This will create our collection and if you want to see if it is there you can type in your terminal:

show collections

and your collection will show!

now let’s write a document we can work with and to make it more readable I'm going to write it first in a separate file.
The way you add something on your collection is by using insert.

db.first.insert()

and you pass an object which can be anything you want. I am going to do a simple one that will include my first name, last name, where I am from, an array of my favorite things to do and I'm going to add a date as well.
Now that I have it on my file I am going to copy and paste it to my terminal to add it to my collection. If it was successful it will give you WriteResult({ "nInserted" : 1 })

Ok, I added a second object and now that it has been inserted to our collection, you can find the data by typing this command in your terminal

db.first.find()

Which will show you the documents we have in our collection. The problem is that it is going to look weird and it is going to be hard to read. There is a solution for this problem, there is a method call pretty that you can use to make it easier to read. You will type in your terminal:

** db.first.find().pretty()**

I did it both ways so you can see the difference.

Other features are:

You can now select the specific data with find. You just need to be more specific, for example:

db.first.find({country: 'United States'}).pretty()

This will display the documents with that value.

We can use a sort method too where 1 is ascending and - 1 is descending, for example:

db.first.find().sort({ _id: -1 }).pretty()

That will give you the documents starting with the last one added.

You can even put a limit at the number of documents with limit.

db.first.find().limit(1).pretty()

That will show you only one object form the collection.

The last thing I'm going to show you is that if you want to delete your database all you have to do is type:

db.dropDatabase()

and your database is gone!

Conclusion:

In my view Mongo DB is something I'll be using more often because of the flexibility it gives the user. Mongo DB is faster and handles highly diverse data types. I like that
Mongo DB has better ability to handle large unstructured data and there are no restrictions on schema design.

Have a wonderful day and I hope you enjoyed this blog!

Introduction to Promises

josesrodriguez610 — Mon, 20 Jul 2020 03:33:37 +0000

Today I'm going to be writing about Promises in Javascript and I'm going to do my best to keep it as simple as possible.

What is a promise?

A promise is an object which produces a value some time in the future, the value is not available yet but it will be resolved at some point in the future. For example, a promise in Javascript is like a promise in real life. If you say you promise to finish your homework by the end of the day, you either fulfill your promise or you fail. A Promise in javascript does the same thing. Promises can only be made for the future and it has two outcomes, either it is fulfilled or not, and we call these outcomes 'resolve' or 'reject' accordingly.

Even thou there are two outcomes, there are three stages in a promise object.

1. Pending: This is before anything happens, before the promise succeeds or fails.
2. Resolve: This is when the promise has been completed.
3. Rejected: This is when the promise has failed.

Before we move on, there are a couple of other questions we have to answer:

Why do we use promises?

Promises are used to handle asynchronous operations in javascript (I will explain what that means in a moment). Prior to promises we used to use callback functions but this process had limited functionality because it created unmanageable code. People know this unmanageable code as Callback Hell or the Pyramid of Doom which consists of multiple nested callbacks which makes code hard to read and debug. To summarize, promises are a more elegant way to handle asynchronous operations and that's why we use them.

Asynchronous Programing

Asynchronous programing is very relevant to javascript because we are often making requests to servers some place else and it can take some time to get your data back. Asynchronous programming is when something is going on but you don't want to wait until that thing is done to continue your program and you want to continue while is happening. This is when we use promises.

Now let's try to work on setting up a new promise with a simple example:

A new promise takes a callback function and this callback function has two arguments resolve and reject. My promise is going to be finishing my homework to follow my early example:


const homework = new Promise((resolve, reject) => {

}

Now let's put our options with will be if I finish(resolve) or if I don't finish(reject)


const homework = new Promise((resolve, reject) => {

let iDidIt = true;

if(iDidIt){

// if my promise was fulfill
resolve('going to watch tv')
} else {

// if my promise wasn't fulfill
reject('going to fail your class')
}

});

Now we have to execute this promise and we have to wait for it. The way to return a promise is to use the method then()
which tells you that this was a success and you have to chain it to our promise. It will give us an output of 'you are going to watch tv'


const homework = new Promise((resolve, reject) => {

let iDidIt = true;

if(iDidIt){

// if my promise was fulfill 
resolve('going to watch tv')
} else {

// if my promise wasn't fulfill
reject('going to fail your class')
}

});

// then the method is fired 

homework.then((fromResolve) => {

// return a promise that was fulfilled 
  console.log(`you are ${fromResolve}`)
});

// 'you are going to watch tv'

Now we need a way to let us know if we got an error and our promise wasn't fulfill. Here is when we use our method catch(). Let's imagine I didn't do my homework and let's chain our catch method. I will change our variable iDidIt to false. Our output will be 'you are going to fail your class'


const homework = new Promise((resolve, reject) => {

let iDidIt = false;

if(iDidIt){

// if my promise was fulfill 
resolve('going to watch tv')
} else {

// if my promise wasn't fulfill
reject('going to fail your class')
}

});

// then the method is fired 

homework.then((fromResolve) => {

// return a promise that was fulfilled 
  console.log(`you are ${fromResolve}`)

// catches an error
}).catch((fromReject) => {
  console.log(`you are ${fromReject}`)
});

// you are going to fail your class

There you go!

Of course I made a simple representation of how a promise works but a more accurate reason of how to use a promise is
if we request data from an outside source.
When we request data from the server by using a Promise, it will be in pending mode until we receive our data. If we achieve to get the information from the server, the Promise will be resolved successfully but if we don't get the information then the Promise will be in the rejected state.

Conclusion

Promises have many benefits when handling asynchronous operations like improving code readability, better flow and better error handling. You should definitely use them over callbacks.

I hope you enjoyed this blog!

React Hooks: Implementation of useState

josesrodriguez610 — Mon, 13 Jul 2020 05:07:42 +0000

Today I’m going to write about a React Hook. Instead of going through some of them I’m going to focus on the reason and implementation of one, the useState hook. To use this feature in your existing projects you will need to update to Node v10.8.0
 

Before we dive into this topic, there are two things we need to know:

1. Destructuring

One of the best feature of ES6 is destructuring. This feature is crucial if you want to develop using a front end framework such as React because useState is a function that relies on array destructuring. This is a Method of extracting multiple properties from an array by taking the structure and unpacking the elements through assignments by using a syntax that looks similar to array literals. Here is an example of array distructuring.


const [ one, two ] = [ 1, 2 ];

console.log(two); // 1
console.log(one); // 2

2. What is a React State?

A simple answer is that React state is an object where you store property values which belong to the component and those values can change.
 
3. What is useState?

This hook will have the capabilities that this.state provides in a class. The difference is that unlike classes the state doesn't have to be an object, with useState we can keep a string or a number.

Now let’s focus on our main topic: 

Hooks!

Hooks are functions that let you use React features and useState is a hook that lets you add React state to function components. Before this update, the way to manage a local state in a component was to create a class. We call Hooks function components because they have the ability to use the React State.

Why should we use Hooks like useState?

 
We should use Hooks because we can re-use functionality between components which gives us an advantage editing the component and updating the component state. React is not getting rid of classes but we can finally use normal functional components to manage the state. People are used to writing functional components and now they don’t have to convert them to classes to get all their functionality.

Back in a day if you wanted to add some state to a function component you needed to convert it to a class but now we can use a Hook and it is very easy. Here I will help you with the implementation.

We have a class component with a state, the old way!

then we will be changing it into a functional component using useState in a couple of steps:

import React, {Component} from 'react';

// 1. create a class component 
class ClassNumber extends Component {    

  constructor(props){
    super(props)

//  2. create a state variable set to 0
    this.state = { 
      number : 0 
    }                   
  }

/* 3. method capable of setting a new state value 
calling setState to set the new value */

  randomNumber = () => {              
    this.setState({
//random number to 10 
      number: (Math.floor(Math.random() * 10))
    })
  }

  render (){
  return (
    <div>
      <button onClick={this.randomNumber}> 
           Number? {this.state.number}</button>

/* the output is a button which number is set to 0 and if clicked will give you a random number */
    </div>
  )
  }
};

export default ClassNumber;

Implementing useState

First we import our useState from React and then we make our Number a function component.

import React, {useState} from 'react';

function FuncNumber() {    

}

export default FuncNumber

Since we have a functional component we can’t use state like before. We need a different way which will be implementing the useState Hook which is a special function that will let you add state to functional component.
The way it works is that useState is a function, so we have to call it. The function useEffect accepts an arguments which is the initial value of the state property and useState returns a pair of values which are the current state and a function that updates it.
We will use destructuring to set this function values.

import React, {useState} from 'react'

//create a function component 
function FuncNumber() {    

/* Use hook which accepts an argument of initial value, 
  returns the current value and method that updates the current value */
const [number, setNumber] = useState(0)   

}

export default FuncNumber

The variable number and setNumber are variable names set by you but it is good practice to give them the name of variable and setVariable. Current value and the updated value.

Now we add our button and on click we will use a setNumber which will be the new number which is set to a random number and because it is a function call it will become an arrow function

import React, {useState} from 'react';

function FuncNumber() {    

  const [number, setNumber] = useState(0)   

 return (
     <div>
       <button 
             /* setNumber will update the current value to a random number */
       onClick={() => setNumber(Math.floor(Math.random() * 10))}>
          Number: {number}</button>
     </div>
   );
/* the output is a button which number is set to 0 and if clicked will give you a random number */

 }

export default FuncNumber;

Conclusion

Hooks will let you use functions which provide more flexibility in extracting, testing and reusing code. Thanks to Hooks the complexity of state management has been reduced. With this implementation we need less code and it is very clear to read and understand.

Permutations: Explanation

josesrodriguez610 — Mon, 06 Jul 2020 03:14:12 +0000

Today I’m going to be explaining permutations by showing the logic behind this problem and how to approach it. I’ve been reading about permutations and I’ve noticed that permutations are a recurring must learn interview question so we can all benefit from reviewing it. Here we go!

Permutations:

Permutations are the several possible variations in which a collection of values can be ordered or arranged.
Today we are going to be taking an array of a, b and c as an example.


 // array we'll be using
[ 'a', 'b', 'c' ]

// result of permutation
[
  [ 'a', 'b', 'c' ],
  [ 'a', 'c', 'b' ],
  [ 'b', 'a', 'c' ],
  [ 'b', 'c', 'a' ],
  [ 'c', 'a', 'b' ],
  [ 'c', 'b', 'a' ]
]

The Concept:

We need to get all the possible variations and we can start with the character 'a' and put it at the beginning, the middle and the end. First we swap the first character with itself and it gives us 'a' in one branch, then 'b' in another branch and the same with 'c'.

Recursion:

This problem needs to use recursion because we are doing the same thing every time with the exception that we shift to the next character every cycle with the end of the cycle been the end of the array. To get a better understanding of why we need to use recursion let’s think about it as a tree, and our solution will be all the results together at the end of that tree:

To make sense of this picture, I would like to separate it in Five Steps:

First Step:

In the example above we are going to iterate through the array and take the first value (index = 0) which is ['a'] and remove it from our possible values to use. That leaves us with ['b', 'c'].

Second Step:

Now we are going to be iterating through the array again starting at first value (index = 0) which now is ['b'], and we will remove it from our possible values to use. Now we have ['a','b'] and we have ['c'] left.

Third Step:

Then we are going to iterate through the array again starting at the first value (index = 0) which now is ['c']. Once we hit this last value we end up with an empty array which then will hit our base case and push the values to our results array

Fourth Step:

This is the moment we have to go back to the Second Step
but because we already iterated through that step we are going to go back to the First Step. Here is when we do the index shift because we already iterated through index 0. Now we are going to have to increment our index to index 1 and that will add ['c'] to our answer which will be removed from the values we can use. Now we have ['a','c'] and we have ['b'] left

Fifth Step:

Now we will iterate to index 0 again and that would be the letter ['b'] and remove it from the values we can use which will leave us with an empty array and then we will be ready to push our values to the our results array. Now let's repeat the whole process again. We will go back to our Origin array and then increment to index 1 which will take us to our letter ['b']. We will perform all the steps through ['b'] and ['c'].

Here is an implementation of a permutation function:


// permutation function 
const permutations= (array) => {

// Our results container 
  const results = [];

// helper function
  const permute = (arr, perm = []) => {

// if the array is empty 
    if(arr.length === 0) {
// push the perm values to results
      results.push(perm);
    } else {

     // iterate through the array of ['a','b','c']
      for(let i = 0; i < arr.length; i++) {

     // create a copy of the array to keep it a pure function
        let current = [...arr];

      // move to the next index of our array
        let nextArr = current.splice(i, 1);

       /* call our permutation with our copy array
          and our permutation container joining it with our next value of the array */
        permute([...current], perm.concat(nextArr));
      }
    }
  }

// call the function on our array
  permute(array);

// return the result
return results;
}


permutations(['a', 'b', 'c']); 

/* result => [
[ 'a', 'b', 'c' ],[ 'a', 'c', 'b' ],[ 'b', 'a', 'c' ],
[ 'b', 'c', 'a' ],[ 'c', 'a', 'b' ],[ 'c', 'b', 'a' ]
] */

Time Complexity

The time complexity is the same as the number of items produced. The number of permutations of any combination of n is n!. We will have to iterate over n! permutations which makes the time complexity to complete the iteration O(n!).

Conclusion:

To find the permutations of a value has a very high time complexity but that is the price you have to pay if you want to get all the possible solutions.

I hope you enjoyed the reading!

Instantiation Patterns: Evolution

josesrodriguez610 — Mon, 29 Jun 2020 03:28:56 +0000

What are Instantiation Patterns?

At the beginning when I was first learning about Instantiation Patters, I was very confused. After hours of reading about them, I came to the realization that all Instantiation Patterns do the same thing, they create objects with methods and properties in different ways. There are 5 different patterns:

Functional
Functional Shared
Prototypal
Pseudoclassical
ES6 Pseudoclassical

Instantiation Patterns have been changing over the years and the main reason is to decrease the amount of memory they take and to answer a simple question, How can we make it simple?

Functional

Functional takes the most memory because the function has an object with properties and inside the same function it has an object with all of the methods as well. When it comes time to create a new object it will create an object with all properties and methods inside.

Here I have an example :


// Functional instantiation
const Order = function(table, entree){

// object 
  const customer = {};

// properties inside the customer object
  customer.table = table;
  customer.entree = entree;
  customer.sent = false;

// methods are inside 
customer.sendOrder = function(){
this.sent = true; 
console.log(`table ${this.table} has been sent to the kitchen`);
}

return customer;
}

// creates a customer object 
const customer1 = Order(31, 'Eggplant Parmesan');

// uses the method sendOrder and it changes the property sent to true 
customer1.sendOrder() 

console.log(customer1);
/* table 31 has been sent to the kitchen
{
  table: 31,
  entree: 'Eggplant Parmesan',
  sent: true,
  sendOrder: [Function]
}
/*

Functional Shared

In functional Shared instead of putting the methods inside the function we use "extend" which takes two parameters, an object and the methods object.
Every object references to a share object that has all the functionality and that is the reason why we can put the methods object outside. "Extend" gives access and reference to every method in our methods object.

Example:


// Functional Shared pattern
const Order = function(table, entree){

// extend function
  const extend = function(obj, methods){
    for(let key in methods){
      obj[key] = methods[key];
    }
  }
    const customer = {};

    customer.table = table;
    customer.entree = entree;
    customer.sent = false;

// gives our customer obj access to customerMethods
    extend(customer, costumerMethods);

    return costumer;
  }

  const customerMethods = {
    sendOrder: function(){
    this.sent = true; 
    console.log(`table ${this.table} has been sent to the kitchen`);
  }
  }

  const customer2 = Order(64, 'Shrimp Diablo');

  customer2.sendOrder()
console.log(customer2);

Prototypal

At this point we found a better Instantiation Pattern. We can use object.create which returns a blank object but every time somebody want to access something in it, it knows to first check on itself and if it doesn't have it, finds it in the other object. By creating a methods object and using Object.create, we are creating a prototype chain between the object and the methods object.

For example :


// Prototypal pattern 
const Order = function(table, entree){

/* make a chain with costumerMethods with Object.create */
  const customer = Object.create(customerMethods)
  customer.table = table;
  customer.entree = entree;
  customer.sent = false;

  return customer;
}

// methods
const customerMethods = {

sendOrder: function(){
this.sent = true; 
console.log(`table ${this.table} has been sent to the kitchen`);
}
}

// creates a new Order
const customer3 = Order(55, 'Lasagna');

// changes sent from false to true
customer3.sendOrder() 

console.log(customer3);
/*table 55 has been sent to the kitchen
{ table: 55, entree: 'Lasagna', sent: true } */

Pseudoclassical

At Prototypal we finally got to a point were we use the least amount of memory possible but there is still one thing we can do, syntactic sugar. Syntactic Sugar is a syntax in a programming language designed to make things easier to read and write and that's what they did in Pseudoclassical. In Prototypal you needed Object.create to chain the object to the methods object. In Pseudoclassical, the creators of Javascript added a property called .prototype that was created to hold functionality and methods. Instead of storing the methods in a methods object we created, we can store it in the function's prototype property. To create a new object we need the help of the keyword new.

For example:


// Pseudoclassical pattern
const Order = function(table, entree){

  this.table = `table ${table}`;
  this.entree = entree;
  this.sent = false;
}

// access the property prototype
Order.prototype.sendOrder = function(){
this.sent = true; 
console.log(`table ${this.table} has been sent to the kitchen`);
}

//creates a new customer object with the keyword new
const customer4 = new Order (22, 'Meatballs Marinara');

customer4.sendOrder()
console.log(customer4);

ES6 Pseudoclassical

ES6 Pseudoclassical has become one of the most used patterns in modern Javascript. It is a class which has a whole new different syntax and inside the class we need a constructor function. To create a new object we need the help of the keyword new just like in Pseudoclassical. Instead of assigning your methods to the prototype, we add them directly to the class and we assign the properties inside of the construction function.

For example:

// class 
class Order {

constructor(table, entree){

// properties are inside your constructor function 
  this.table = table;
  this.entree = entree;
  this.sent = false;
}

sendOrder(){
this.sent = true; 
console.log(`table ${this.table} has been sent to the kitchen`);
}
}

// creates a new object with the keyword new 
const customer5 = new Order(13, 'chicken Alfredo');

// changes sent from false to true
customer5.sendOrder()
console.log(customer5);
/*  table 13 has been sent to the kitchen
Order {table: 13, entree: 'chicken Alfredo', sent: true} */

Conclusion

It has been extremely interesting to see how the Instantiation Patterns have changed over the years. We have come a long way from functional pattern to ES6 pseudoclassical pattern which is easy and simple. I can't wait to see what's next.

I hope you enjoyed this article!