Forem: Cássio Lacerda

Working with immutable arrays and objects in Javascript

Cássio Lacerda — Mon, 01 Nov 2021 12:57:07 +0000

When let and const keywords were introduced in ES2015 (ES6), many of declaring problems in javascript variables were solved. In addition to block scoping improvement, also encountered in let declarations, const could ensure the variable was declared only once and its value was not modified later.

const userName = "Walter White";
userName = "Jesse Pinkman"; // error: Assignment to constant variable.

Learn more about let and const differences.

If you are wondering, why should I use constants in my coding?

Here are some reasons:

It protects yourself, avoiding scenarios where accidental assignment happens;
It makes code more readable;
It optimizes the memory;

In short, it's good practice to use them 🙃.

Although const keyword had been a great improvement to use constants in Javascript, it's not the silver bullet for immutability as maybe you think...

Primitives vs non-primitives data types

We have been using a string as data type in const declaration to thrown an error at runtime. Other primitive data types like number and boolean behave the same way:

const seasons = 5;
seasons = 3; // error: Assignment to constant variable.

const isFinished = true;
isFinished = false; // error: Assignment to constant variable.

But now, try changing data of a non-primitive data type like array and object:

const enemies = ["Jack Welker", "Gus Fring", "Tuco"];
enemies.push("Mike");
console.log(enemies); // ['Jack Welker', 'Gus Fring', 'Tuco', 'Mike']

const user = {name: "Walter White", profession: "Teacher"};
user.profession = "Drug dealer";
console.log(user); // {name: 'Walter White', profession: 'Drug dealer'}

No errors, why?

Basically, Javascript uses call stack memory space to save references and values for primitives data types, while for non-primitive ones, it uses a separate space in memory called heap. In that case, call stack saves as value in its memory only heap memory reference ID, not the object and array values.

When we add elements for arrays or change object properties values, reference ID in call stack keeps the same and their values are changed only in heap memory, not throwing any errors.

There is an amazing post created by Ethan Nam explaining in depth the JavaScript’s Memory Model. I strongly advise you read it.

Blocking changes in arrays and objects

To achieve the desired goal, let's blocking changes for arrays and objects with Object.freeze(). Show me the docs, please:

The Object.freeze() method freezes an object. A frozen object can no longer be changed; freezing an object prevents new properties from being added to it, existing properties from being removed, prevents changing the enumerability, configurability, or writability of existing properties, and prevents the values of existing properties from being changed. In addition, freezing an object also prevents its prototype from being changed. freeze() returns the same object that was passed in.

const enemies = Object.freeze([
   "Jack Welker", 
   "Gus Fring", 
   "Tuco"
]);
enemies.push("Mike"); // error: Cannot add property 3

In array case, an error stops the execution! It works. Now, let's try the same with an object:

const user = Object.freeze({
  name: "Walter White",
  profession: "Teacher",
  address: {
    city: "Albuquerque",
    state: "NM",
    country: "USA",
  },
});
user.profession = "Drug dealer";
user.address.country = "Brazil";
console.log(user);
/*
{
  name: 'Walter White',
  profession: 'Teacher',
  address: { city: 'Albuquerque', state: 'NM', country: 'Brazil' }
}
*/

In object case, no errors occurs and something looks strange:

🙂 user.profession is unchanged.

😢 user.address.country not...

Why?

Shallow vs deep freeze

When we freeze an object, only the top-level properties are frozen. In other words, the nested objects properties can be changed, that's a shallow freeze. For deep freeze, we need to recursively freeze each property of type object and we can create a helper function to do it:

function deepFreeze(obj) {
  Object.keys(obj).forEach((prop) => {
    const value = obj[prop];
    if (typeof value === "object") deepFreeze(value);
  });
  return Object.freeze(obj);
}

const user = deepFreeze({
  name: "Walter White",
  profession: "Teacher",
  address: {
    city: "Albuquerque",
    state: "NM",
    country: "USA",
  },
});
user.profession = "Drug dealer";
user.address.country = "Brazil";
console.log(user);
/*
{
  name: 'Walter White',
  profession: 'Teacher',
  address: { city: 'Albuquerque', state: 'NM', country: 'USA' }
}
*/

From now on, any change will require to create a new object or array:

const user = Object.freeze({
  name: "Walter White",
  profession: "Teacher",
});

const newUserPropAdded = Object.freeze({
  ...user,
  age: 55,
});
console.log(newUserPropAdded);
// { name: 'Walter White', profession: 'Teacher', age: 55 }

const newUserPropUpdated = Object.freeze({
  ...user,
  profession: "Drug dealer",
});
console.log(newUserPropUpdated);
// { name: 'Walter White', profession: 'Drug dealer' }

const { profession, ...newUserPropDeleted } = user;
console.log(newUserPropDeleted);
// { name: 'Walter White' }

console.log('unchanged user :>> ', user);
// unchanged user :>>  { name: 'Walter White', profession: 'Teacher' }

const enemies = Object.freeze(["Jack Welker", "Gus Fring", "Tuco"]);
const index = 1;

const newEnemiesItemAdded = [...enemies, "Mike"];
console.log(newEnemiesItemAdded);
// [ 'Jack Welker', 'Gus Fring', 'Tuco', 'Mike' ]

const newEnemiesItemUpdated = enemies.map((item, i) =>
  i === index ? "Jesse" : item
);
console.log(newEnemiesItemUpdated);
// [ 'Jack Welker', 'Jesse', 'Tuco' ]

const newEnemiesItemDeleted = [
  ...enemies.slice(0, index),
  ...enemies.slice(index + 1),
];
console.log(newEnemiesItemDeleted);
// [ 'Jack Welker', 'Tuco' ]

console.log("unchanged enemies :>> ", enemies);
// unchanged enemies :>>  [ 'Jack Welker', 'Gus Fring', 'Tuco' ]

Immutable.js

One last tip, you can also use the Immutable.js library to add an easier way to work with the immutability of non-primitive data types in Javascript.

Conclusion

Understand how non-primitive data types work is very important for handle data in the correct way in JavaScript. Its memory model based in call stack and heap are essential parts of it and you should to know it.

Using array map, filter and reduce in MongoDB aggregation pipeline

Cássio Lacerda — Sat, 31 Jul 2021 20:46:34 +0000

If you work with javascript, the chances of you are using array methods like map, filter and reducer today are really great.

All simplicity offered by javascript higher-order functions makes our code more readable and concise, mainly when we work with array data transformations.

Let's remember these methods:

const numbers = [2, 8, 15];

const greaterThanFive = (num) => num > 5;
const multiplyBy2 = (num) => num * 2;
const sum = (acc, num) => acc + num;

const filtered = numbers.filter(greaterThanFive);
const mapped = numbers.map(multiplyBy2);
const reduced = numbers.reduce(sum);

console.log(filtered); // [8, 15]
console.log(mapped); // [4, 16, 30]
console.log(reduced); // 25

That's really amazing!

However, in databases scenario, querying data with this simplicity is usually unusual, unless that database is MongoDB.

Because MongoDB is a NoSQL database with JSON based model, some javascript array methods have similar expression operators
in MongoDB Aggregation Pipeline.

About its JSON nature, official website cites:

MongoDB’s document data model naturally supports JSON and its expressive query language is simple for developers to learn and use.

And that makes all difference folks...

Let's get numbers array data used in the javascript example to create a new document in a generic collection. For improve the understanding, I will use MongoDB Playground to test our queries:

[
  {
    "numbers": [
      2,
      8,
      15
    ]
  },
]

Mongo Playground

Good! Our collection is ready to receive queries now :)

$filter

Starting, let's use $filter aggregation pipeline operator.

Query

db.collection.aggregate([
  {
    $project: {
      _id: 0,
      filtered: {
        $filter: {
          input: "$numbers",
          as: "num",
          cond: {
            $gt: [
              "$$num",
              5
            ]
          }
        }
      }
    }
  }
])

Start using aggregate method to submit the query. That method enables aggregation framework;
Pipeline starts using $project aggregation pipeline stage. The specified fields inside it can be existing fields from the input documents or newly computed fields. In our case, filtered field will be created and added to response;
The computed value for filtered field will be given by $filter aggregation pipeline operator;
Inside filter operator, set input to $numbers. That's our array to be iterated;
Set as to num to get each array value to test in filter condition. You could use any name here, just like you did in javascript filter method;
Then, set the filter condition in cond using $gt expression to return a boolean if current array value $$num is greater than 5;

Response

[
  {
    "filtered": [
      8,
      15
    ]
  }
]

Mongo Playground

$map

$map operator is pretty similar to $filter, however while $filter needs a condition, $map you must set in to output a new array value according to some rule.

Query

db.collection.aggregate([
  {
    $project: {
      _id: 0,
      mapped: {
        $map: {
          input: "$numbers",
          as: "num",
          in: {
            $multiply: [
              "$$num",
              2
            ]
          }
        }
      }
    }
  }
])

In case, using $multiply expression to return all array values multiplied by 2.

Response

[
  {
    "mapped": [
      4,
      16,
      30
    ]
  }
]

Mongo Playground

$reduce

$reduce operator applies an expression to each element in an array and combines them into a single value.

Query

db.collection.aggregate([
  {
    $project: {
      _id: 0,
      reduced: {
        $reduce: {
          input: "$numbers",
          initialValue: 0,
          in: {
            $sum: [
              "$$value",
              "$$this"
            ]
          }
        }
      }
    }
  }
])

Again, set $numbers array as input to iterate;
The initial cumulative value set before in is applied to the first element of the input array, initialValue is set to 0;
Finally, in expression give us two special variables: $$value is the variable that represents the cumulative value of the expression (acc in javascript example) and $$this is the variable that refers to the element being processed (num in javascript example). In case, using $sum expression to return the new accumulated value.

Response

[
  {
    "reduced": 25
  }
]

Mongo Playground

All in one

In previous examples, we worked with each operator in a separated query, however we could do a single query requesting all operators at once.

Query

db.collection.aggregate([
  {
    $project: {
      _id: 0,
      filtered: {
        $filter: {
          input: "$numbers",
          as: "num",
          cond: {
            $gte: [
              "$$num",
              5
            ]
          },

        }
      },
      mapped: {
        $map: {
          input: "$numbers",
          as: "num",
          in: {
            $multiply: [
              "$$num",
              2
            ]
          }
        }
      },
      reduced: {
        $reduce: {
          input: "$numbers",
          initialValue: 0,
          in: {
            $sum: [
              "$$value",
              "$$this"
            ]
          }
        }
      }
    }
  }
])

Response

[
  {
    "filtered": [
      8,
      15
    ],
    "mapped": [
      4,
      16,
      30
    ],
    "reduced": 25
  }
]

Mongo Playground

Going further, if you add more documents to collection, this same query computes data for each of them. Let's query a collection with 3 documents now:

Collection

[
  {
    "numbers": [
      2,
      8,
      15
    ]
  },
  {
    "numbers": [
      4,
      8,
      9,
      13
    ]
  },
  {
    "numbers": [
      1,
      3,
      7
    ]
  }
]

Response

[
  {
    "filtered": [
      8,
      15
    ],
    "mapped": [
      4,
      16,
      30
    ],
    "reduced": 25
  },
  {
    "filtered": [
      8,
      9,
      13
    ],
    "mapped": [
      8,
      16,
      18,
      26
    ],
    "reduced": 34
  },
  {
    "filtered": [
      7
    ],
    "mapped": [
      2,
      6,
      14
    ],
    "reduced": 11
  }
]

Mongo Playground

Conclusion

MongoDB for javascript developers is intuitive by nature! Aggregation framework does the hard work directly in the database server using many of features already known by us and data can be delivered ready-to-use, which normally decreases the workload for the application server.

See also the complete Array Expression Operators list in MongoDB official website.

How to syncing React state across multiple tabs with Redux

Cássio Lacerda — Fri, 16 Jul 2021 14:02:23 +0000

In the previous post of this series, we learn how to persist state across multiple tabs with simple usage of useState hook and Window: storage event features.

Now, let's go deeper and we'll see how to achieve the same behaviour, but with Redux state management.

In the case of applications developed in ReactJS that work with state control using Redux, or even useState and useContext hooks in simpler scenarios, by default, the context is kept separately for each active tab in the user's browser.

Unsynchronized State

import React from "react";
import ReactDOM from "react-dom";
import { Provider, connect } from "react-redux";
import { createStore } from "redux";

const Form = ({ name, handleChange }) => {
  return (
    <>
      <input value={name} onChange={handleChange} />
    </>
  );
};

const reducer = (state, action) => {
  switch (action.type) {
    case "CHANGE":
      return { ...state, name: action.payload };
    default:
      return state;
  }
};

const store = createStore(reducer, { name: "" });

const mapStateToProps = (state) => {
  return {
    name: state.name,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    handleChange: (e) => dispatch({ type: "CHANGE", payload: e.target.value }),
  };
};

const App = connect(mapStateToProps, mapDispatchToProps)(Form);

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

For easy understanding, I choose to work with this minimum Redux implementation. I assume you already know React with Redux, if that's not your case, see the docs for more information.

1) Get the power!

Let’s add some extra packages to the project to achieve our goal:

npm i redux-state-sync redux-persist

redux-state-sync: will be used to sync redux state across tabs in realtime when state data is changed;

redux-persist: will be used to keep the redux state saved in the browser storage and allows reload the state again when the app is reloaded;

2) Sync redux state across tabs

In this step, let's make some changes in our initial example to allow the app detect changes in the redux state, independently in which browser tab those changes happen, and keep state synced across all tabs where our app is opened.

The author of redux-state-sync package defines it as:

A lightweight middleware to sync your redux state across browser tabs. It will listen to the Broadcast Channel and dispatch exactly the same actions dispatched in other tabs to keep the redux state in sync.

Although the author uses the Broadcast Channel API that is not supported on this date by all browsers, he was concerned to provide a fallback to make sure that the communication between tabs always works.

Synchronized State (without persist data on reload)

import React from "react";
import ReactDOM from "react-dom";
import { Provider, connect } from "react-redux";
import { createStore, applyMiddleware } from "redux";

import {
  createStateSyncMiddleware,
  initMessageListener,
} from "redux-state-sync";

const Form = ({ name, handleChange }) => {
  return (
    <>
      <input value={name} onChange={handleChange} />
    </>
  );
};

const reducer = (state, action) => {
  switch (action.type) {
    case "CHANGE":
      return { ...state, name: action.payload };
    default:
      return state;
  }
};

const store = createStore(
  reducer,
  { name: "" },
  applyMiddleware(createStateSyncMiddleware())
);

initMessageListener(store);

const mapStateToProps = (state) => {
  return {
    name: state.name,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    handleChange: (e) => dispatch({ type: "CHANGE", payload: e.target.value }),
  };
};

const App = connect(mapStateToProps, mapDispatchToProps)(Form);

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

Let's understand what has changed in this step...

import {
  createStateSyncMiddleware,
  initMessageListener,
} from "redux-state-sync";

First, we imported createStateSyncMiddleware and initMessageListener from redux-state-sync package.

const store = createStore(
  reducer,
  { name: "" },
  applyMiddleware(createStateSyncMiddleware())
);

initMessageListener(store);

And then, we applied the State Sync middleware applyMiddleware(createStateSyncMiddleware()) when created redux store and started the message listener initMessageListener(store);.

Now, redux state is synced across all tabs instantly! 🤗

Simple, isn't it? But as you can see, when the app is reloaded, redux state is lost. If you want to persist redux state even after browser reloading, stay here a little longer and let's go to the next step.

3) Persist redux state after browser reloading

We'll use redux-persist to persist and rehydrate our redux store.

Synchronized State (persisting data on reload)

import React from "react";
import ReactDOM from "react-dom";
import { Provider, connect } from "react-redux";
import { createStore, applyMiddleware } from "redux";

import {
  createStateSyncMiddleware,
  initMessageListener,
} from "redux-state-sync";

import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import { PersistGate } from "redux-persist/integration/react";

const Form = ({ name, handleChange }) => {
  return (
    <>
      <input value={name} onChange={handleChange} />
    </>
  );
};

const reducer = (state, action) => {
  switch (action.type) {
    case "CHANGE":
      return { ...state, name: action.payload };
    default:
      return state;
  }
};

const persistConfig = {
  key: "root",
  storage,
};

const persistedReducer = persistReducer(persistConfig, reducer);

const store = createStore(
  persistedReducer,
  { name: "" },
  applyMiddleware(
    createStateSyncMiddleware({
      blacklist: ["persist/PERSIST", "persist/REHYDRATE"],
    })
  )
);

initMessageListener(store);

const mapStateToProps = (state) => {
  return {
    name: state.name,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    handleChange: (e) => dispatch({ type: "CHANGE", payload: e.target.value }),
  };
};

const App = connect(mapStateToProps, mapDispatchToProps)(Form);

const persistor = persistStore(store);

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

Let's dive in it!

import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import { PersistGate } from "redux-persist/integration/react";

persistStore and persistReducer: basic usage involves adding persistReducer and persistStore to our setup;
storage: in case of web app, defaults to localStorage;
PersistGate: In React usage, we'll wrap our root component with PersistGate. As stated in the docs: This delays the rendering of your app's UI until your persisted state has been retrieved and saved to redux.

const persistConfig = {
  key: "root",
  storage,
};

const persistedReducer = persistReducer(persistConfig, reducer);

const store = createStore(
  persistedReducer,
  { name: "" },
  applyMiddleware(
    createStateSyncMiddleware({
      blacklist: ["persist/PERSIST", "persist/REHYDRATE"],
    })
  )
);

In createStore, we replaced the old reducer param by new customized reducer from package util persistedReducer. We also need to blacklist some of the actions that is triggered by redux-persist, to State Sync middleware excludes them from syncronization.

const persistor = persistStore(store);

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

Lastly, we wrapped the root component with PersistGate and pass persistor instance from persistStore as props to component.

And everything works now...

Conclusion

In this series, we worked with pure client-side features to keep data synced across multiple tabs. Keeping React app data synced many times will also involve server-side features as realtime databases, websockets, etc.

Mixing all available tools to achieve our goals always will be the mindset to follow.

Stack Overflow is changing: Meet Collectives

Cássio Lacerda — Fri, 25 Jun 2021 18:19:52 +0000

Stack Overflow released a new feature that promises to change the way Q&A moderation is done within the platform. We're talking about the initiative called Collectives.

Although the platform works with a gamification model with badges and points based on the user's contribution and also some initiatives to improve the quality of the Q&As that are introduced to thousands daily, the platform that on the last June 2, had its name highlighted in the press with the news of its sale to the Dutch company Prosus for $1.8 billion, seems to bet on Collectives to try to qualify the platform's content through the help of opensource companies that already have their technologies in Q&As.

Watch the video about the new feature:
https://www.youtube.com/watch?v=j-Zk1CKkCY0

Collectives™ helps technology organizations empower the community that already exists around their products on Stack Overflow. Share knowledge at scale. Find and grow your advocates. Get actionable insights. It’s all right here.

The new feature will give opensource companies the ability to directly create and moderate their communities within Stack Overflow:

Collectives is a new set of spaces on Stack Overflow where content related to certain technical languages, products, or services can be grouped together. It's a place for users who regularly interact with this content to collaborate, and for organizations who help build or maintain this technology to share their expertise.

As the initiative depends from companies create their Collectives directly inside Stack Overflow, SO invited Google as a partner to launch its first two Collectives in order to give strength to the initiative. In Google Cloud Collective page, we can see that in its context menu, in addition to the traditional platform Questions and Answers, we now have Articles, Members and Tags.

https://stackoverflow.com/collectives/google-cloud

Members

A new user type categorized as Recognized member appears on the scene. I get a piece of official announcement to understand how a traditional user can be categorized in this way and what additional features are enabled within a Collective:

With this launch we are creating a new Collective-specific user type: Recognized members are either employees of an organization, part of its Developer Recognition Program, or users selected by the organization within the Stack Overflow community that are knowledgeable about the organization's technologies. These users will have a badge identifying them when they post/edit a question, provide an answer, or write an Article that is associated with a collective through its tags. They will also have the ability to recommend an existing answer within their Collective, highlighting that, from their perspective, this is a recommended way of solving the problem.

https://stackoverflow.com/collectives/google-cloud?tab=members

Articles

This new feature allows a recognized collective member to publish about content related to your technology without using the traditional problem and solution model. How to guides and specialized content should be published in this section.

https://stackoverflow.com/collectives/google-cloud/articles/68104924/listen-for-authentication-state-in-android

The other Collective launched in partnership with Google is about Go Lang. Both collectives have the same model.

In addition to the internal changes within the company itself, some comparisons have recently emerged about the release of the Github new feature called Discussions which now competes directly with Stack Overflow, for dev Q&A publications. You can see an example of discussion page in Github, in case, NextJS repository.

Since I know Stack Overflow, I believe this is the biggest change they've ever made.

And what do you think about this change? Leave your comment and contribute to the discussion!

How to syncing React state across multiple tabs with useState Hook and localStorage

Cássio Lacerda — Fri, 18 Jun 2021 03:54:06 +0000

With the increasing complexity of frontend applications in recent years, some challenges to maintaining user experience with the products we build are emerging all the time. It's not difficult to find users who keep multiple instances of the same application opened in more than one tab in their browsers, and synchronizing the application's state in this scenario can be tricky.

In the case of applications developed in ReactJS that work with state control using useState and useContext hooks, or even Redux in more complex scenarios, by default, the context is kept separately for each active tab in the user's browser.

Unsynchronized State

import React, { useState } from "react";

function Unsynced() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  };

  return <input value={name} onChange={handleChange} />;
}

export default Unsynced;

Did you know that we can synchronize the state of multiple instances of the same application in different tabs just using client-side solutions?

Data communication between tabs

At the moment, some options for realtime data communication between multiple tabs that browsers support are:

Simple usage with useState hook

In this first example, we are going to use the Window: storage event feature for its simplicity, however in a real project where your application has a large data flow being synchronized, since Storage works in synchronous way, it maybe cause UI blocks. This way, adapt the example with one of alternatives showed above.

Synchronized State

import React, { useEffect, useState } from "react";

function SyncLocalStorage() {
  const [name, setName] = useState("");

  const onStorageUpdate = (e) => {
    const { key, newValue } = e;
    if (key === "name") {
      setName(newValue);
    }
  };

  const handleChange = (e) => {
    setName(e.target.value);
    localStorage.setItem("name", e.target.value);
  };

  useEffect(() => {
    setName(localStorage.getItem("name") || "");
    window.addEventListener("storage", onStorageUpdate);
    return () => {
      window.removeEventListener("storage", onStorageUpdate);
    };
  }, []);

  return <input value={name} onChange={handleChange} />;
}

export default SyncLocalStorage;

How does it work?

Let's analyze each piece of this code to understand.

const [name, setName] = useState("");

We initially register name as a component state variable using the useState hook.

useEffect(() => {
  setName(localStorage.getItem("name") || "");
  window.addEventListener("storage", onStorageUpdate);
  return () => {
    window.removeEventListener("storage", onStorageUpdate);
  };
}, []);

When the component is mounted:

Checks if there is already an existing value for the name item in storage. If true, assign that value to the state variable name, otherwise, keep its value as an empty string;
Register an event to listen for changes in storage. To improve performance, unregister the same event when the component unmounted;

return <input value={name} onChange={handleChange} />;

Renders a controlled form input to get data from user.

const handleChange = (and) => {
  setName(e.target.value);
  localStorage.setItem("name", e.target.value);
};

When the value of the controlled form input is modified by the user, its new value is used to update the state variable and also the storage.

const onStorageUpdate = (e) => {
  const { key, newValue } = e;
  if (key === "name") {
    setName(newValue);
  }
};

When the storage is updated by one of the instances of your application opened in browser tabs, the window.addEventListener("storage", onStorageUpdate); is triggered and the new value is used to update state variable in all instances tabs. Important to know that this event is not triggered for the tab which performs the storage set action.

And the magic happens...

What about Redux?

In the next post in the series, let's work with Redux state in a more complex scenario.

Automatically refresh the browser on Node / Express server changes 🚀

Cássio Lacerda — Tue, 08 Jun 2021 15:03:48 +0000

One of the first things that most developers learn when starting with ExpressJS is using Express Generator to create a basic app structure. After install, a simple working app can be seen just running npm start in the command line. Other javascript frameworks like ReactJs, have something similar with Create React App.

Who already started a ReactJs project knows how good it is to make changes in source code with your favorite editor, and see all of them to be updated in the browser automatically. However, Express Generator unfortunately doesn’t give us that behaviour by default.

Create React App 🙂

Express Generator 😔

To do that, let's make a few changes to our Express server so that it behaves the way we need it. Let's code! 🤟

1) Create an ExpressJS server from scratch

Install the express-generator package:

npm install -g express-generator

Create the app:

express express-browser-reload --view=hbs

express-browser-reload: the folder name where the files will be created inside;
--view=hbs: the default template engine used to create the project (I like handlebars .hbs);

Install dependencies:

npm install

Start your Express.js app at http://localhost:3000/ :

npm start

Now we have the above example running.

2) Get the power!

Let’s add some extra packages to the project to achieve our goal:

npm i -D nodemon livereload connect-livereload

-D: install packages as dev dependencies is a good practice here;

3) Restart the server on changes

Currently, our server doesn't even restart when we make changes in source code. Our first step is to set Nodemon to watch those changes. In the package.json, add watch script to enable it:

package.json

"scripts": {
  "start": "node ./bin/www",
  "watch": "nodemon"
},

By default, Nodemon watches for changes only to files with these extensions:

js
mjs
json

If you want to watch for changes in all project files, set additional param --ext with * or specific extensions separated with commas js,hbs,css:

package.json

"scripts": {
  "start": "node ./bin/www",
  "watch": "nodemon --ext *"
},

From now on, run the server with npm run watch instead of npm start.

Now your ExpressJS server restarts automatically on any file changes, but not yet updates the browser when they occur.

4) Refresh the browser on changes

In the app.js file, three main changes must be done.

app.js

var livereload = require("livereload");
var connectLiveReload = require("connect-livereload");

Import livereload and connect-livereload to enable the feature in our server.

app.js

const liveReloadServer = livereload.createServer();
liveReloadServer.server.once("connection", () => {
  setTimeout(() => {
    liveReloadServer.refresh("/");
  }, 100);
});

Create a Livereload server and listen to connection events. When Nodemon restarts the ExpressJS server on changes, Livereload recreates the server and sends to the browser a refresh command when connected liveReloadServer.refresh("/");.

app.js

app.use(connectLiveReload());

Lastly, we use connect middleware for adding the Livereload script to the response.

After all modifications, our app.js will be like this:

app.js (done)

var createError = require("http-errors");
var express = require("express");
var path = require("path");
var cookieParser = require("cookie-parser");
var logger = require("morgan");
var livereload = require("livereload");
var connectLiveReload = require("connect-livereload");

var indexRouter = require("./routes/index");
var usersRouter = require("./routes/users");

const liveReloadServer = livereload.createServer();
liveReloadServer.server.once("connection", () => {
  setTimeout(() => {
    liveReloadServer.refresh("/");
  }, 100);
});

var app = express();

app.use(connectLiveReload());

// view engine setup
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "hbs");

app.use(logger("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, "public")));

app.use("/", indexRouter);
app.use("/users", usersRouter);

// catch 404 and forward to error handler
app.use(function (req, res, next) {
  next(createError(404));
});

// error handler
app.use(function (err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get("env") === "development" ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render("error");
});

module.exports = app;

.. and the magic happens!

Note that a javascript is added to our HTML page and that points to the server created by Livereload on port 35729.

Conclusion

Eliminating repetitive actions during development helps to optimize our performance as developers. Taking a few minutes to properly setup our application before you even start development is something you should always consider.

Get this working example in Github.

Using Bootstrap in ReactJS: reactstrap or react-bootstrap?

Cássio Lacerda — Wed, 02 Jun 2021 00:07:14 +0000

It's hard to find developers who have been working with client-side development in the last years, and who haven't at least once used frameworks like Bootstrap, Foundation or Material Design in your frontend projects, to be more productive and save time by reusing pre-made components with ease of customization.

For those who have specifically used Bootstrap for years in development with server-side rendered pages (SSR) and who are now using SPA frameworks like ReactJS, it's normal to start looking for alternative packages in the NPM directory that make it easier to use the built-in Bootstrap with ReactJS.

If you've arrived here, you've probably already researched that the two most popular alternatives within this scenario today are React Bootstrap and Reactstrap. But what's the difference between them? Are they significant?

Official documentations:

Both work in the same way, from the perspective of use:

They need npm install bootstrap to import Bootstrap stylesheet file inside index.js or App.js to enable Bootstrap default styling with import 'bootstrap/dist/css/bootstrap.min.css';. ReactJS, by default, will append all Bootstrap CSS code in a style tag inside head of HTML page.

import { StrictMode } from "react";
import ReactDOM from "react-dom";

import "bootstrap/dist/css/bootstrap.min.css";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
);

Give us ready-to-use Bootstrap Components redesigned internally as JSX, without the need to use JQuery or Javascript with direct DOM manipulation (using Virtual DOM, as React already works by default);
Behind the scenes, using React.createElement to render the components;

Props

The props passed to the components can have different names depending on the package. See the Button color usage: https://codesandbox.io/s/reactbootstrapvsreactstrap-7y87c-7y87c?file=/src/App.js

import React from "react";

import { Button as ReactBootstrapButton } from "react-bootstrap";
import { Button as ReactstrapButton } from "reactstrap";

const App = () => (
  <>
    <ReactBootstrapButton variant="danger">React BootStrap</ReactBootstrapButton>
    <ReactstrapButton color="danger">Reactstrap</ReactstrapButton>
  </>
);

export default App;

The props names are different color and variant, but rendered HTML is pretty much the same, as we can see in DevTools:

Behind the scenes

You can view both implementations, comparing a basic component as Button in the packages source code:

node_modules\react-bootstrap\cjs\Button.js (React Bootstrap ^1.6.0);
node_modules\reactstrap\dist\reactstrap.cjs.js line:930 (Reactstrap v^8.9.0);

React Bootstrap

var Button = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
  var bsPrefix = _ref.bsPrefix,
      variant = _ref.variant,
      size = _ref.size,
      active = _ref.active,
      className = _ref.className,
      block = _ref.block,
      type = _ref.type,
      as = _ref.as,
      props = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["bsPrefix", "variant", "size", "active", "className", "block", "type", "as"]);
  var prefix = (0, _ThemeProvider.useBootstrapPrefix)(bsPrefix, 'btn');
  var classes = (0, _classnames.default)(className, prefix, active && 'active', variant && prefix + "-" + variant, block && prefix + "-block", size && prefix + "-" + size);

  if (props.href) {
    return /*#__PURE__*/_react.default.createElement(_SafeAnchor.default, (0, _extends2.default)({}, props, {
      as: as,
      ref: ref,
      className: (0, _classnames.default)(classes, props.disabled && 'disabled')
    }));
  }

  if (ref) {
    props.ref = ref;
  }

  if (type) {
    props.type = type;
  } else if (!as) {
    props.type = 'button';
  }

  var Component = as || 'button';
  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, {
    className: classes
  }));
});

Button.displayName = 'Button';
Button.defaultProps = defaultProps;
var _default = Button;
exports.default = _default;
module.exports = exports["default"];

Reactstrap

var Button = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(Button, _React$Component);

  function Button(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;
    _this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
    return _this;
  }

  var _proto = Button.prototype;

  _proto.onClick = function onClick(e) {
    if (this.props.disabled) {
      e.preventDefault();
      return;
    }

    if (this.props.onClick) {
      return this.props.onClick(e);
    }
  };

  _proto.render = function render() {
    var _this$props = this.props,
        active = _this$props.active,
        ariaLabel = _this$props['aria-label'],
        block = _this$props.block,
        className = _this$props.className,
        close = _this$props.close,
        cssModule = _this$props.cssModule,
        color = _this$props.color,
        outline = _this$props.outline,
        size = _this$props.size,
        Tag = _this$props.tag,
        innerRef = _this$props.innerRef,
        attributes = _objectWithoutPropertiesLoose(_this$props, ["active", "aria-label", "block", "className", "close", "cssModule", "color", "outline", "size", "tag", "innerRef"]);

    if (close && typeof attributes.children === 'undefined') {
      attributes.children = /*#__PURE__*/React__default.createElement("span", {
        "aria-hidden": true
      }, "\xD7");
    }

    var btnOutlineColor = "btn" + (outline ? '-outline' : '') + "-" + color;
    var classes = mapToCssModules(classNames(className, {
      close: close
    }, close || 'btn', close || btnOutlineColor, size ? "btn-" + size : false, block ? 'btn-block' : false, {
      active: active,
      disabled: this.props.disabled
    }), cssModule);

    if (attributes.href && Tag === 'button') {
      Tag = 'a';
    }

    var defaultAriaLabel = close ? 'Close' : null;
    return /*#__PURE__*/React__default.createElement(Tag, _extends({
      type: Tag === 'button' && attributes.onClick ? 'button' : undefined
    }, attributes, {
      className: classes,
      ref: innerRef,
      onClick: this.onClick,
      "aria-label": ariaLabel || defaultAriaLabel
    }));
  };

  return Button;
}(React__default.Component);

Despite some differences such as the approach with the use of prototype that reactstrap implements, and specifically in this component, the handling of some additional props, in general, there are no significant differences between them.

Components List

Available components are 80% to 90% the same, and some of them just have different names.

React Bootstrap: Alerts, Accordion, Badge, Breadcrumb, Buttons, Button Group, Cards, Carousel, Dropdowns, Figures, Forms, Input Group, Images, Jumbotron, List Group, Modal, Navs, Navbar, Overlays, Pagination, Popovers, Progress, Spinners, Table, Tabs, Tooltips, Toasts.

Reactstrap: Alerts, Badge, Breadcrumbs, Button Dropdown, Button Group, Buttons, Card, Carousel, Collapse, Dropdowns, Fade, Form, Input Group, Jumbotron, Layout, List, List Group, Media, Modals, Navbar, Navs, Pagination, Popovers, Progress, Spinners, Tables, Tabs, Toasts, Tooltips.

You can find out how to use them all in the official documentations showed previously in this post.

Differences so far? Very few ... I'm still undecided ...

You're not the only one. Relax!

To be honest, just the numbers show any significant difference here. Adoption of React Bootstrap is higher.

https://www.npmtrends.com/react-bootstrap-vs-reactstrap

OK, it's older and it maybe makes the difference.

More numbers here:

https://npmcompare.com/compare/react-bootstrap,reactstrap

And you?

I worked with both of them, but I particularly like to use React Bootstrap, but not because of a Reactstrap deficiency, but because I have been using it for a while and have always attended to my needs. Don't you like Bootstrap? Do you prefer another component library? Yes? I like another libraries too, but that is subject to another post.

If you have any special reasons for using React Bootstrap or Reactstrap, if you know any significant performance differences, help the Community and share in the comments!