DEV Community: Anand Kumar

Create your own Deno module + Github Action

Anand Kumar — Sun, 31 May 2020 11:22:35 +0000

In my last article, I mentioned my first hands-on experience on Deno. Along with that, I have demonstrated how to create REST API by using Deno with oak.

If you have missed it, here is the link to that article.

Deno is here. Todo App(React) + Deno Server (API) + Docker.

Anand Kumar ・ May 17 '20

#deno #react #tutorial #typescript

This time, I was trying to explore creating own module in Deno. So, I'll try to explain how we can do it here and will provide the source code too.

Believe me, it is quite simple and there is no complexity in using it too.

Let's get started.

As we all know that we can import any module from URL directly in Deno, so let's first create one file which we can run with Deno.

As a best practice, we should name our main module as mod.ts.

mod.ts

function getHelloMsg(name: string): string {
  return `Hello ${name}`;
}
console.log(getHelloMsg('Deno'));

If you run the above file with Deno using the below command:

deno run mod.ts

and the terminal will show the following output

Hello Deno

Now to convert it to a module that others can use, let's slightly modify the mod.ts. The updated code snippet is given below:

export function getHelloMsg(name: string): string {
  return `Hello ${name}`;
}

I have added the export keyword on line 1 before the function so that we can import it.

Now, let's create one file where we can test it.

index.ts

import { getHelloMsg } from './mod.ts';

const message = getHelloMsg('deno');
console.log(message);

Now, run it using the following command.

deno run index.ts

And the output will be similar to what we have seen before.

Hello Deno

But isn't it something that we do anyway? Yes, we do.

But when we push the mod.ts file in our GitHub, we can use it like below:

import { getHelloMsg } from "https://raw.githubusercontent.com/YOUR_GIT/REPO_NAME/master/mod.ts";

const message = getHelloMsg('Deno');
console.log(message);

Please note the first line which is highlighted above.

As you can see we are importing the module directly from the URL which is kind of cool.

We do not need any registry or any setup to publish it so that others can use it.

The main highlight here is that now, we can put this module on GitHub and we can use it from the URL.

Next, let's set up our action file for GitHub. Follow the steps given below:

Create a directory .github
Create another directory inside .github named workflows
Inside workflows create a file called deno.yml

Here is the sample file

.github/workflows/deno.yml

on: [push, pull_request]

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        deno: [1.0.0]
    name: Test run with Deno ${{ matrix.deno }}
    steps:
      - uses: actions/checkout@master

      - name: Setup Deno module
      uses: denolib/setup-deno@master
      with:
        deno-version: ${{matrix.deno}}

      - name: Print deno version
      run: deno --version

      - name: Check format
      run: deno fmt --check

      - name: Run tests
      run: deno test

A couple of things are happening here but the important one is to note are the following:

on: This tells when the action to be triggered. In our case, it will be triggered on push and pull_request
deno fmt: This one ensures that the files are formatted correctly which means badly formatted code will fail the action
deno test: This triggers the Unit tests

As you can see, these steps can ensure that module is in healthy condition till the action run on GitHub is green.

This way, whenever we will push any changes/updates to our module, the actions will trigger the build(according to the action setup).

A complete example with usage and action is available on my GitHub URL. Feel free to use it to create/scaffold your module for deno.

Deno module starter kit

Please follow the README.md on how to use it.

In a future article, I'll come up with how to publish your module to deno.land.

Till then.....

Happy Learning!

Deno is here. Todo App(React) + Deno Server (API) + Docker.

Anand Kumar — Sun, 17 May 2020 16:32:51 +0000

Hello Learners. I am sure you all are staying home and staying safe. Tough time but good opportunity to learn a lot. Be it due to different work style, life style or just getting more time due to cut down on commuting to work premises.

So, as we all heard that Deno is coming out and is created by the same guy who created much popular Node, Ryan Dahl. I was excited too and finally 1.0.0 came out.
And I started to have some hands on with it. Due to that very reason, I am writing this blog to document my experience.

I am not going to detail out on how to install deno or how to use the modules in details. They are available on official documentation page.

These are good to start with:

Manual: https://deno.land/manual
v1.0.0: https://deno.land/v1

In this post, I'll mention what I tried, what I liked about it and what I am planning to explore further. But, as technologies keeps evolving, these lists are not like finite.

Let's get started.

What is Deno?

As per official documentation, Deno is a secure runtime for JavaScript and TypeScript.
It is like node but there are lot of enhancements done with it.
To summarize few:

It has TypeScript at its core
Features of Modern JavaScript
No package manager
Has first-class await
Secure

I am pretty excited to get into it. Are you?

Why Deno?

It was announced almost 2 years ago and Ryan Dahl mentioned some of the regrets he had with some early decisions in Node.

Here is the video for reference.

https://www.youtube.com/watch?v=M3BM9TB-8yA

So Deno is like second iteration of a server side apps powered by JavaScript.

Now, it is v1.0.0 and officially stable, we can safely start using it as there won't be any breaking changes till we get to v2.0.0. :)

What I built?

Okay, so here are the points that I wanted to cover/explore:

Server: REST Api server built on Deno
Client: A client application to consume those API
Docker: Dockerise the complete working application

Server:

I wanted to have a very basic REST API which can be used for CRUD operation. So, here is what I have decided to create for API:

Route	Method	Summary
`/todos`	GET	List all todos
`/todos/:id`	GET	Get one todo by Id
`/todos`	POST	Create a todo
`/todos/:id`	PUT	Update a todo by Id
`/todos:/id`	DELETE	Delete a todo by Id

Looks familiar from Node and express perspective, right?

The first thing, I wanted to have is something similar to express or koa that we use in node.

After some look around and documentation, I found something similar to koa for Deno and it is called oak. Below is the link to the module.

https://deno.land/x/oak/

Here is the basic server setup to get started:

index.ts

import { Application } from "./deps.ts";
import { HOST, PORT } from "./config.ts";

// Instantiate the application
const app = new Application();

const listenOptions = {
  port: Number(PORT),
};

console.log(`Listening on ${HOST}:${PORT}...`);

// start the server
await app.listen(listenOptions);

deps.ts

export {
  Application,
  Router,
  send,
  Context,
} from "https://deno.land/x/oak/mod.ts";
export { v4 } from "https://deno.land/std/uuid/mod.ts";

After basic server setup, here is how I have created the routes:

routing.ts

router
  .get("/todos", getTodos)
  .get("/todos/:id", getTodo)
  .post("/todos", addTodo)
  .put("/todos/:id", updateTodo)
  .delete("/todos/:id", deleteTodo);

I have imported this into index.ts and then added the route:

import router from "./routing.ts";
...
app.use(router.routes());
...

At this point, I was able to complete and test my REST APIs and all were working fine.

Now, to serve the client page, I have added one more route into index.ts after app.use(router.routes()) line as shown below:

app.use(async (context: Context) => {
  await send(context, context.request.url.pathname, {
    root: `${Deno.cwd()}/public`,
    index: "index.html",
  });
});

The above route/code helped me to server my react app's index.html file from public folder

Running the Deno server

So, to run the server, we use deno run ENTRY_POINT_FILE. As we are ready to run the application, let me explain security part a bit.
In node, we don't specify whether the application can access the environment variables or can read/write file system or can access the network.

In Deno, these accesses are not provided by default due to sand-boxing. If required, we have to pass the arguments to our deno run command. The application that I worked on, below is the command to make it work properly.

deno run --allow-env --allow-net --allow-read --allow-write index.ts

You can see following arguments flag:

--allow-env: To read environment variables in our codebase
--allow-net: Helpful for networking
--allow-read: Allows to read filesystem
--allow-write: Allows to write to filesystem

More can be read on official documentation page.

Good to know

We can create a dependency.ts [deps.ts] to have all third-party modules at one place. This helps us to manage dependencies better. Any alternate way? Thoughts?
In the index.ts, you can observe that the last line is using await without async. This is one of the feature of Deno where it has first-class await.
Moreover, created some other files and introduced some middleware as per the oak setup.
I have used simple json file to persist the data for REST API, so no Database. ;)

Client

Nothing much here to be honest. I used create-react-app to scaffold a basic react application but in TypeScript. Used redux for statemanagement.

Good to know:

My deno application server was configured on different port than the client application. So, to make the api call, proxy was required. This can be easily achieved with create-react-app by doing a proxy entry into the package.json.
```
"proxy": "http://localhost:4000"
```
NOTE: This is for development purpose only
Nothing fancy for client application and so I have used manual process to copy the build output into server's public folder. It wasn't the primary goal.

How client app looks?

Docker

To dockerise the app, I have created two files:

Dockerfile
docker-compose.yml

For, dockerfile, I have used hayd/deno:alpine-1.0.0 image. This worked out of the box. Here is the sample file

FROM hayd/deno:alpine-1.0.0

EXPOSE 4000

WORKDIR /app

USER deno

COPY deps.ts .
RUN deno cache deps.ts

COPY . .

RUN deno cache index.ts

CMD ["run", "--allow-net", "--allow-env", "--allow-read", "--allow-write", "index.ts"]

The above file's CMD might look bit strange but as explained above, we have to pass these arguments depending on the nature of application and sandbox feature of Deno.

And the docker-compose.yml

version: "3.7"

services:
  deno:
    image: "deno-todo:0.0.1"
    build: .
    ports:
      - "4000:4000"
    networks:
      - deno

networks:
    deno: {}

What I liked about Deno

As we have seen how things progressed while I was trying out deno, here is what I liked:

No package manager
Once module is cached, the application starts really quick
Sandboxing for better security
ES6 support out of the box
TypeScript

Yet to explore

Okay, so as I mentioned, this is my first hands on with Deno and there are lot to be explored but here are few things that I want to go into deeper:

What would be the best way to manage the versioning of the third party modules.
Server side rendering
Hot reloading of deno server
Creating own module for deno
More on middlewares
Creating own middlewares
Authentication
Using github action for the module and make it available on github to be used by others
and many more....

There would be lot more to learn and explore but this is a starting point for me to take a next step. I am hoping that his will give you all some insight.

Conclusion

In short, I liked Deno so far and this is something new and refreshing which keeps human being more motivated. I will try to keep up with it and will come up with more articles as time permits.

Source code is available on github.

https://github.com/elanandkumar/deno-todo-app

For now, Stay Home, Stay Safe and Keep Learning.

Happy Learning!

What editor and font you use for WebDev

Anand Kumar — Sun, 10 May 2020 12:48:22 +0000

Hello Folks,

Need two suggestions:

Editor: which one to use for web development?
- Sublime
- VSCode
- Webstorm
Font: Please suggest best font for above editor?

Thank you.

A journey of creating first flutter app

Anand Kumar — Sun, 19 Apr 2020 17:04:49 +0000

Update: New version published for the app. Covid19Info-IN-1.1.0

First thing first, I finally decided to do something different than React development or Javascript. So, I thought to give Flutter a go.
And, to be honest the journey so far went really well.

Special mention: @PublicisSapient to help with providing Udemy license.

While following along the course, I have learnt few things in both simpler and harder way. After couple of weeks, I have completed my Flutter course and thought to give it go by creating something without referencing the tutorial.

And then this Covid19 came which shook the whole world.

While writing this blog, I am locked down in my home and I am doing Work from home for almost a month now. Things have changed in lot of ways like working, communicating etc.

Nevertheless, coming to the point. I started to think on what I should build?
While following up news and all, I came across covid19indiaorg, an open-source react app and API tool for getting the latest data on Covid19 for India. Do check their github repository. https://github.com/covid19india

So, I decided to create an app which can leverage their API to show the data.

While doing the development, I had to follow couple of blogs, searching for charts plugin or sometimes to find the usage for a particular widget. In flutter world, widget is like main building block and can also be called as component.

But, overall, the learning experience while build this app were quite good and engaging. I know that the app is not 100% complete and need to have lot of code improvements/best practices etc. But I was able to run it successfully on real device including iOS and android both.

So, here I am going to mention what features it has and the list of plugins I have used to achieve it.

Features

Summary of the cases:
- Confirmed
- Active
- Recovered
- Deceased > With beautiful graph visualization
Tabular state wise data
Pull to refresh on table to update main screen data
A page with helpful links which can be navigated to find out more information
A page to have 15 recent alerts/new feed
And an FAQ section

To achieve above, I have used following extra plugins:

fl_chart: A plugin to create beautiful charts
modal_progress_hud: A plugin to show loader for async calls
http: To make API call
intl: Used for formatting. Eg. Number
url_launcher: A plugin which provides feature handle external urls opening
time_formatter: To get natural language time format from milliseconds timestamp

There were development challenges that I faced but I would like to mention one major challenge that I had.

First challenge

While I was trying to deploy to real device, I got an error where the build was failing. Somehow either flutter or cocoapod is not able to clear the App.framework for iOS device when trying to change the device from simulator to the real device.

FIX: I had to remove the folder using rm -rf ios/Flutter/App.framework. After that, I ran flutter clean and did the build. It worked.

Though, same issue occurred while switching from real to the simulator device too.

In case, if it still doesn't work, I am happy to support.

Second challenge:

When I was changing the bundle identifier for iOS app, I thought to change these for android too. All went well but after a cleanup, when I tried to do the build, android build started failing.

FIX: It was failing because after change in bundle identifier, somehow, the trace of existing one named example remained in android/app/src/main/kotlin/com/ folder. Removing that example folder from this location fixed the issue.

So far so good and I was able to run the application on both android and iOS successfully.

There are things that need to be done and couple of them are:

Error handling
Code refactoring/optimization
Adaptive UI for different devices
And more

But, I am quite happy to achieve this also and I am sure when we learn something new and create something interesting, it is always that joyful moment and a sense of great achievement.

I'll conclude this post here with the link to github source code. Feel free to look at, fork it and submit the improvements if you want to.

https://github.com/elanandkumar/covid19info-IN

Last but not the list, here is the link to apk file if you have android and want to give it a try.

Download Covid19Info-IN App (android only)

As mentioned above, there will be issues but it is always better to have something instead of having nothing.

What next?

I will be exploring MobX for flutter and React both as and when time permits.

For now, Stay home, Stay safe.

Happy learning.

DEV.TO | Telegram Posts

Anand Kumar — Tue, 14 Jan 2020 12:58:37 +0000

Today, I received one message on telegram channel of dev.to with a link to operator mono font which links to cufonfonts.

I wonder if it is legitimate. I checked Operator mono website and they don't have the font free for personal use as far as I know.

But cufonfonts says, it is free for personal use. Now, following are my concerns/points:

Is it legitimate?
If not, shall dev.to post such message in the channel which will increase the piracy?

Thoughts?

Please leave your opinion in the comment section below.

Fix: MacOS Catalina and CommandLineTools Issue

Anand Kumar — Thu, 31 Oct 2019 19:55:13 +0000

Recently, I have upgraded mac to 10.15.1 and I got a weird issue with node-gyp while working on my node project. It started failing when I was doing npm install. The issue reported was regarding the xcode-select CLT. We usually avoid installing full xcode and install the CLT (Command Line Tools) using xcode-select --install command.

Tried to run the command again but it did not work as CLT was already installed.

I did struggle for sometime to fix the issue. Finally, I found the solution and this is what I did.

Navigated to the folder /Library/Developer/ using terminal.
Removed the folder named CommandLineTools. Use sudo if needed.
Ran the command xcode-select --install which prompts for installing the command line toos. Once done, everything is back to normal for my node project.

Putting it here serves two purpose. One, It may help someone else and so won't hamper the productivity. Two, If there is another way to solve this issue, we can share it here through comment to let others know.

Have you faced this issue? If so, how you fixed it? Tell your experience and solution in comment section below.

Happy Learning!

Image credit: Unsplash - @maxcodes

On demand & colorful console log in NodeJS

Anand Kumar — Wed, 02 Oct 2019 10:25:09 +0000

We all know and use console.log while working in JavaScript. Be it any framework (like react) or NodeJS. In case of NodeJS, we can see the console log output in our terminal. At some point of time we try to remove some or add some of the console.log during development or while trying to deploy it.
What if we can toggle the logging when needed?
And, what if we can add some color also to distinguish between different log messages.

To start with, let's create one simple server.js file. It will look something like below:

// Dependencies
const http = require('http');

//create a server:
const server = http.createServer((req, res) => {
  console.log('Write response')
  res.write('Hello NodeJS!') //write a response to the client
  res.end() //end the response
  console.log('Response ended.')
});

// start listening to the server
server.listen(8080, () => {
  console.log('Node server is listening on 8080 port.')
});

I have added some extra console messages for explanation.

Now, when we start the server using node server.js, the terminal is going to output log message as shown below:

Alright!

Now, let's modify the server.js file to enable on-demand logging.

First, modify the server.js. Updated code is given below:

// Dependencies
const http = require('http');
const util = require('util');
const debugLog = util.debuglog('server');

//create a server:
const server = http.createServer((req, res) => {
  debugLog('Write response');
  res.write('Hello NodeJS!'); //write a response to the client
  res.end(); //end the response
  debugLog('Response ended.');
});

// start listening to the server
server.listen(8080, () => {
  debugLog('Node server is listening on 8080 port.');
});

We can see couple of changes here. Let me try to explain it stepwise.

First of all, I have added one require statement at Line 3 to import util
In next line (Line 4), I have created a reference to debuglog method call done using util. Important thing to note here is the parameter provided in function call: server.
Finally, we replace our console.log statement with debugLog variable created at Line 4

Once changes are done, if we run the server using node server.js command, no console output will be shown.

So, you must be thinking that how to show the logs then?

Well, to see the log, we need to change our command a little. New command syntax would be NODE_DEBUG=server node server.js. Refer the screenshot below:

We can observe couple of changes in the above image. Let's try to understand those.

NODE_DEBUG=server -> When we set NODE_DEBUG to server, it logs only those messages that is related to the key we passed during the initialization of util.debuglog('server'). This way, we can have different on-demand logging across file.
While the output is coming, it also adds a keyword before. In the above case it added SERVER 10072:. This helps us to understand that which part of application this log belongs to or the keyword we have given to. A nice and clean way to differentiate our log too. :)

Coming to the second part where I have mentioned to have colourful console. Usually, we use console.log like this:

console.log('Hello console');

Going forward, try to use it in this way:

console.log('\x1b[36m%s\x1b[0m', 'Hello console');

And the output will be like this:

Isn't that cool?

I know, a bit of explanation is needed. So, the first parameter in console.log is instructing the terminal to change the text color. And %s is the placeholder for our log message. Now, to change the color to different value, simply play around with the number after [ and before m. In the above example, we can update 36 to 31 to get red variant.

This works with the on-demand logging also (explained above). And we can get something like below:

Looks gorgeous, right.

In similar fashion, we can change the background of the log message instead of text color. I am providing the values for reference here. Go ahead and try these.

Reset = "\x1b[0m"
Bright = "\x1b[1m"
Dim = "\x1b[2m"
Underscore = "\x1b[4m"
Blink = "\x1b[5m"
Reverse = "\x1b[7m"
Hidden = "\x1b[8m"

FgBlack = "\x1b[30m"
FgRed = "\x1b[31m"
FgGreen = "\x1b[32m"
FgYellow = "\x1b[33m"
FgBlue = "\x1b[34m"
FgMagenta = "\x1b[35m"
FgCyan = "\x1b[36m"
FgWhite = "\x1b[37m"

BgBlack = "\x1b[40m"
BgRed = "\x1b[41m"
BgGreen = "\x1b[42m"
BgYellow = "\x1b[43m"
BgBlue = "\x1b[44m"
BgMagenta = "\x1b[45m"
BgCyan = "\x1b[46m"
BgWhite = "\x1b[47m"

In the example given above, replace the content from start till m letter with any one of the above and check the output. Feel free to add comments below with some nice looking console messages here and with the code used.

Thank you for reading.

Happy learning!

MacOS Catalina: Top 3 features I liked most

Anand Kumar — Wed, 12 Jun 2019 15:06:35 +0000

Hello Folks,

I recently installed MacOS Catalina on my macbook pro. Pretty stable TBH.

First thing I noticed is that now we have zsh as default shell instead of bash. I think it is great. And i am pretty excited about it in stable releasw. What is your thought on this?

Next thing that i really liked about is sidecar which can help to use our ipad as secondary display. I did not try it yet but it sounds awesome and i am eagerly waiting to give it a try. I will put down my experience in comment section later.

Last but not the least, I liked the uodate came for photos app. We have various options and aling with that app is gettting intellugent to display our best pictures.

What are the top 3 features you like most in MacOS Catalina?

Note down your thoughts in comment section below.

What should I learn next?

Anand Kumar — Tue, 28 May 2019 16:14:46 +0000

Hello to all__.

Thanks to dev.to for providing such a nice platform and to the great community that we have.

From past 3 years, i am working on React. Recently I wrote some of articles too.

This one is more about the help I want from our community friends, that what should i pick next to learn except React? What are the suggestions, options i have?

Please help/guide me with this.

Thank you in advance.

Happy learning!

React component lifecycle with Hook§

Anand Kumar — Sat, 25 May 2019 01:39:34 +0000

In previous post, I have explained how to convert a class component into functional component so that we can leverage the hooks.
Here is the link to article:

React Hooks: Migrate class component to functional and use hooks

Anand Kumar ・ May 12 '19

#react #reacthooks #javascript

In this post, I will help you to understand how to get the same output that we used to achieve using component lifecycles with react hooks.

I'll be covering following lifecycle methods:

componentWillMount
componentDidMount
componentDidUpdate
shouldComponentUpdate
componentWillUnmount

Before we start, let's get some understanding about following hooks:

useState
useEffect ### useState useState returns a stateful value and a function to update it. #### Syntax: ### useEffect With functional component, we are not allowed to have side effects like mutations, timers, mutations or any other side effects inside the main body of the component.

So, here we have useEffect which runs after the render happens. By default, effects run after every render but there are ways to control it which we will look into it later in the article.

Syntax:

For more details on hooks or for any other hooks provided by react, look at the official documentation.

So, let's start with the component lifecycle and try to understand the replacement of the same with hooks.

Pro Tip: Do not use hooks inside any code blocks. It must be at the top level hierarchy of the functional component.

Let's see the running example of a small application. This usage react class based component and lifecycle. At the end of the article, you can check the same application created using functional component and has the similar lifecycle execution.

Let's begin.

componentWillMount

When we convert any class component to functional component, we can write the code after defining our states (if any) using useState or before the code reaches the render (jsx) part to achieve the componentWillMount behaviour. As we know the code execution happens from top to bottom.

componentDidMount

As explained before about useEffect, we can pass the second optionalParameter to achieve the componentDidMount behavior. Let's have a look at the following code snippet.

React.useEffect(()=>{
  console.log('Robot: componentDidMount');
  // ...code goes here...
  fetchData();
}, []);

In the above code, we have blank array [] as the second argument at line 5. Why? 🤔

Well, because the second argument when provided helps react to invoke the effect only if it detects a change in any of the entries provided. This array is dependencies for the function that we pass as first argument in useEffect.

In this case, it is blank which means it is never going to detect any change and so it will invoke only once. Isn't that what componentDidMount does? Invokes only once, right?

Please note that if the second argument is not passed in useEffect, it will execute always after render.

componentDidUpdate

Let's say, we need to invoke api call again if any props changes for the component, we do it in here once the component updates. We can achieve it using useEffect. Though, this time, we need to pass an entry to the second argument.

React.useEffect(() => {
  console.log('Robot: componentWillUpdate');
  // code goes here
  fetchData();
}, [props.selectedRobotId]);

This time, we have passed a prop selectedRobotId in the array. So, whenever this prop is going to change, the effect will run and we get the updated component.

shouldComponentUpdate

This one is a bit tricky but let me help you to understand this. As we all know, this lifecycle method helps us to control the rendering of the component by our self. Following is an example:

shouldComponentUpdate(nextProps, nextState) {
  console.log("Robot: shouldComponentUpdate");
  return (
    nextProps.selectedRobotId !== this.props.selectedRobotId ||
    nextState.loadedRobot.id !== this.state.loadedRobot.id ||
    nextState.isLoading !== this.state.isLoading
  );
}

But, with functional component, we can not use react component lifecycle methods this way. So, how to achieve this same result?

Well, with react, we have something called React.memo. We can wrap out component with this as shown below:

export default React.memo(Robot);

Does this look right as an alternate to shouldComponentUpdate. No.....

Ok, so here is the thing. React.memo accepts a second argument (a function) which provides the access to nextProps and prevProps. This can help us to achieve the same thing as shouldComponentUpdate.

export default React.memo(Robot, (prevProps, nextProps) => {
  console.log('Robot: shouldComponentUpdate');
  return nextProps.selectedRobotId === prevProps.selectedRobotId;
});

There is one thing to note here. This works opposite of shouldComponentUpdate. You return true if you do not want to re-render. You return false if you want it to render.

React handles this beautifully and so the second function is only needed if you do not want a re-render for any props change. Else, let React handle it for you. :)

componentWillUnmount

Remember, in the explanation of useEffect, I mentioned about an optional return function inside the useEffect. This return function serves the purpose of cleanup.

React.useEffect(() => {
  console.log('Robot: componentDidUpdate');
  //...code goes here
  fetchData();
  return () => {
    console.log('cleaning up...');
  }
}, [props.selectedRobotId])

The above code snippet is similar to componentDidUpdate code block except it has a return function now. So, whenever props.selectedRobotId changes, this effect runs and the return function invokes on completion of effect where we can do cleanup.
But, this is not what happens with componentWillUnmount. Right?
Ok, so to achieve the componentWillUnmount we can add one more useEffect in our code and pass the second argument as a blank array ([]). Similar to the componentDidMount but the useEffect will have a return function this time inside, which will work as componentWillUnmount.

React.useEffect(() => {
  //...code goes here
  fetchData();
  return () => {
    console.log('cleaning up...');
  }
}, [props.selectedRobotId]);

React.useEffect(() => {
  //...code goes here
  fetchData();
  return () => {
    console.log('Robot: componentWillUnmount');
  }
}, []);

That gives us the way to do clean up at two level. One, when component updates and one when it is ready to unmount.

Summary

In this article, we covered useState and useEffect. Then we used useEffect and memo to achieve the component life cycle methods that we have with class based component.

At first, this might look confusing but do not worry. Here is the codepen for same application (shown above) but using React hooks.

Please checkout the code and practice. Also, feel free to share it or reach out to me for any questions/concerns.

Happy learning!

React Hooks: Migrate class component to functional and use hooks

Anand Kumar — Sun, 12 May 2019 09:02:47 +0000

We all are aware that react hooks is ready for prime time and we started using it already. But, what if we have any existing project and we want to move to react hooks? Definitely, we have components which is written as class component.

This post will guide you to change an existing class based component to react hook based component. But, this post is not intended to go into the details of hooks.

This is what react documentation says about hooks.

Hooks let us use state and other React features without writing a class.

Let's begin with an example application. It is a simple counter application. The code is given below:

const initialData = {
  count: 0,
  maxLimit: 10
};

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: this.props.initialCount
    };
  }
  onIncrement = () => {
    this.setState({ count: this.state.count + 1 });
  };
  onDecrement = () => {
    this.setState({ count: this.state.count - 1 });
  };
  render() {
    return (
      <div>
        <button
          onClick={this.onDecrement}
          disabled={this.state.count === this.props.initialCount}
        >
          -
        </button>
        <div>{this.state.count}</div>
        <button
          onClick={this.onIncrement}
          disabled={this.state.count === this.props.maxLimit}
        >
          +
        </button>
      </div>
    )
  }
}

class CounterApp extends React.Component {
  render() {
    const { initialData } = this.props;
    return (
      <React.Fragment>
        <h2>Counter Example</h2>
        <Counter
          initialCount={initialData.count}
          maxLimit={initialData.maxLimit}
        />
      </React.Fragment>
    );
  }
}

ReactDOM.render(
  <CounterApp initialData={initialData} />,
  document.getElementById('root')
);

As you can see, I have created a simple counter app. The class component that I have created are:

CounterApp: This is the main app component
Counter: The actual counter component

Please note that, this code is intended for this post and for explanation purpose only. Please ignore any improvement areas that you may see. ☺

So, to convert a class component to functional/hooks component, here are the steps:

Pick the smallest class component first i.e. bottom to top approach would be better.

Move all of the code that a class component has into the render method and make it work. Eg. event handler functions or any other functions or code.
Update the code to use object de-structuring for props & states.
Once, #2 is complete, Add a line before the class syntax like shown below.

const Counter = () => {};
class Counter extends React.Component {
  /*...code goes here */
};

Move everything from render method to the updated function component code block.

const Counter = () => {
  //...code inside render methods of class component goes here
};
class Counter extends React.Component {
  //...Rest of the code
  render() {
    // This will be blank now
  }
};

Move the de-structured code of props inside the paratenthis of functional component. Remove the code from inside the code block.

const Counter = ({ maxLimit, initialCount }) => {
  /*...rest of the code */
};

Update the component to use hooks like useState or any other hooks that might be needed. Eg.

const Counter = ({ maxLimit, initialCount }) => {
  //...Rest of the code
  const [count, setCount] = React.useState(initialCount);
  //...Rest of the code
};

If you have more that one state property, please change it to use hooks for all of them individually.

I am not explaining the syntax for how to write hooks here. Please read official documentation for the same.

Finally, update the return statement code block to use newly created props (de-structured) or the states using hooks. Or any other changes done, should be incorporated accordingly. And remove the class component line of code altogether.

Alright, that might look too much and not very clear. So let's work on the example that we have.

Counter Component

Move the onIncrement and onDecrement code block inside the render method. Define it as const and update the functions this.onIncrement and this.onDecrement to onIncrement and onDecrement respectively.
Use object de-structuring for props and state inside render method. In our example, you can do something like below:

const { maxLimit, initialCount } = this.props;
const { count } = this.state;

Now, just before the class Counter extends React.Component { line, create a line similar to following:

const Counter = () => {};

Cut everything from render method and paste it in between the curly brackets of the const Counter = () => {}
Move the de-structured props into parenthesis. Line 2 is commented out and Line 1 has the props now {maxLimit, initialCount}.

const Counter = ({ maxLimit, initialCount }) => {
  // const { maxLimit, initialCount } = this.props;
  const { count } = this.state;
  // ....Rest of the code
}

Next, we need to change our this.state. We will be using useState hooks here. Update the code at Line 2 as shown below:

const Counter = ({ maxLimit, initialCount }) => {
  const [count, setCount] = React.useState(initialCount);
  // ....Rest of the code
}

The code that we changed is syntax of using hooks.

Now is the time to update our function to use setCount we defined using hooks. Change the code this.setState that we have inside onIncrement and onDecrement. Updated code will look something like below:

const Counter = ({ maxLimit, initialCount }) => {
  // ....Rest of the code
  const onIncrement = () => {
    setCount(count + 1);
  };
  const onIncrement = () => {
    setCount(count - 1);
  };
  // ....Rest of the code
}

Now, update the code of return statement accordingly to use the new count state (created using hooks) and de-structured props. AND, remove the class Counter extends React.Component {} code completely.

The final code for Counter component should look like:

const Counter = ({ maxLimit, initialCount }) => {
  const [count, setCount] = React.useState(initialCount);
  const onIncrement = () => {
    setCount(count + 1);
  };
  const onDecrement = () => {
    setCount(count - 1);
  };
  return (
    <div>
      <button
        onClick={onDecrement}
        disabled={count === initialCount}
      >
        -
      </button>
      <div>{count}</div>
      <button
        onClick={onIncrement}
        disabled={count === maxLimit}
      >
        +
      </button>
    </div>
  )
}

So, you must notice that at the end, there is no this being used and code also looks lot more cleaner.

CounterApp

The main CounterApp component doesn't have much in it and so we can convert it to functional component without hassle. The final code for CounterApp will look like below.

const CounterApp = ({ initialData: {count, maxLimit} }) => {
  return (
    <>
      <h2>Counter Example</h2>
      <Counter initialCount={count} maxLimit={maxLimit} />
    </>
  )
}

Wondering what <> and </> is? This is an approach to avoid extra layer of elements that we used to created earlier. So, use this or use React.Fragment as shown at the beginning of the article.

As, we have refactored our code now, the complete counter app code is given below:

const initialData = {
  count: 0,
  maxLimit: 10
};
// added style to make it look better, in case you want to see
const counterStyles = {
  h1: {
    maxWidth: "185px",
    boxShadow: "5px 5px 4px #888888"
  },
  container: {
    display: "flex",
    alignItems: "center"
  },
  button: {
    width: "30px",
    borderRadius: "50%",
    borderStyle: "none",
    fontSize: "22px",
    backgroundColor: "khaki",
    height: "30px",
    paddingBottom: "5px",
    cursor: "pointer"
  },
  countDiv: {
    minWidth: "80px",
    padding: "0 15px",
    textAlign: "center",
    height: "30px",
    lineHeight: 2,
    border: "1px solid",
    borderRadius: "10px",
    margin: "0 5px"
  }
};

const Counter = ({ maxLimit, initialCount }) => {
  // styles...
  const { container, button, countDiv } = counterStyles;
  const [count, setCount] = React.useState(initialCount);
  const onIncrement = () => {
    setCount(count + 1);
  };
  const onDecrement = () => {
    setCount(count - 1);
  };
  return (
    <div style={container}>
      <button
        style={button}
        onClick={onDecrement}
        disabled={count === initialCount}
      >
        -
      </button>
      <div style={countDiv}>{count}</div>
      <button
        style={button}
        onClick={onIncrement}
        disabled={count === maxLimit}
      >
        +
      </button>
    </div>
  );
};

const CounterApp = ({ initialData: {count, maxLimit} }) => {
  return (
    <>
      <h2 style={counterStyles.h1}>Counter App: Hooks</h2>
      <Counter initialCount={count} maxLimit={maxLimit} />
    </>
  );
};

ReactDOM.render(
  <CounterApp initialData={initialData} />,
  document.getElementById('root')
)

Summary

Through this post, we have learnt couple of tips on how to convert a class based component to functional and hook based component. I hope this will help you to migrate your existing code base.

I have also recorded a video to accompany this article. Here is the link.

Feel free to subscribe to the channel and explore other videos too.

In case of any questions/concerns, feel free to reach out.

Happy Learning!

ES6 and Beyond > Part 2

Anand Kumar — Sat, 04 May 2019 16:26:20 +0000

This post is second part of the previous one. If you haven't read it yet, read it here:

ES6 and Beyond > Part 1

Anand Kumar ・ 6 min read

#es6 #javascript #intermediate

In this article, we are going to learn about promises and the new & improved/alternate way to achieve asynchronous task using async/await instead of promise.

The objectives are to learn following:

Promise
Promise.prototype.finally
async/await
for...await...of

Promise: An Introduction

So, what is promise?

It is an object, which guarantees us to return a single value some time in future for an asynchronous operation.

Let's understand it a bit more by understanding the states that a promise can have. A promise is an object (mentioned above) can have 3 states:

fulfilled: When promise is resolved/fulfilled.
rejected: When a promise failed to get fulfilled.
pending: Neither rejected not fulfilled is the pending state.

Now here is the syntax on how to write a promise in javascript:

An explanation on above code.

Line 2: We are creating/constructing a promise object. state would be pending and result will undefined
Line 7: Promise is getting resolved here so the state would be fulfilled with a returned value of the string inside resolve.
Line 10: Promise is getting rejected here. The state would be rejected and sets the result to error with the error value provided.

Now, we can use the promise object as shown below:

promise.then(
  success => console.log(success),
  error => console.log(error)
);

So, promise provides then-ability which is what guarantees us to get the data once a promise is resolved/rejected.

Finally, we can derive some rules regards to Promise:

A promise provides then() method.
A pending promise can result to either 'fulfilled' or 'rejected' state
A fulfilled or rejected promise is considered as settled. So, it must not transition to any other state.
Once a promise is settled, it should have a value which must not change.

A bit more on then is needed. Right? Ok, let's first look at the syntax of then:

promise.then(onFulfilled[, onRejected]);

onFulfilled: Callback for resolved/fulfilled promise
onRejected (optional): Callback for rejected promise

One of the great thing about promise is chaining

To achieve the chaining, we use then() method provided by promise. Let's have a look at following example.

const promise1 = promiseOne()
const promise2 = promise1.then(onFulfilled, onRejected)
// OR
const promise = promiseOne().then(onFulfilled, onRejected)

So, each promise represents the completion of another asynchronous step in the chain.

Before promise arrived, we fall in a classic callback pyramid of doom trap. Let's have a look:

But, with promise, we use the callback on returned promise instead to form the promise chain which makes code better and more readable.

catch looks new here, right? Ok. so catch is another method provided by promise which catches any kind of error that might have happened while promise tries to fulfil.

It is completely possible to chain after catch using then.

Promise.prototype.finally

This is again part of promise Promise.prototype.finally. It is useful when we wants to execute some sort of code regardless the outcome of the promise (be it fulfilled or rejected). Syntax is given below.

Let's move to our next point which is async/await

async/await

async/await is nothing more than syntactic sugar for promises that we learnt above. Let's look at the syntax first:

Let's say we need to fetch json file from a url. Here is how we will write it using promise.

const getJson = url => fetch(url).then(json => console.log(json))
// call the getJson method
getJson('https://jsonplaceholder.typicode.com/todos/1')

Now, let's have a look on how we can use async/await for this.

Both implementation are doing the same thing but async/await is more readable. As I have mentioned before about chaining, promise/then makes code less readable when we start doing the chaining but with async/await, you get more neat and clean code. Example given below to explain it. Here, I have created three promises:

Now have a look at the usage of promise and async/await

The promise way

The async/await way:

So, which one you prefer. Let me know in the comment section. Personally, I like async/await. It makes code more readable in synchronous way which leads to more manageable code.

Tip:

await can only be used inside async function.

Go ahead and do practice this at your own. Have questions, feel free to drop a comment with your question.

for...await...of

This one is related to await that we learnt just now. This helps us to iterate over async iterable objects as well as on sync iterables which includes built in string, array or array like objects (eg. arguments). Syntax:

for await (let item of iterable) {
    // code goes here...
}

Let's take an example. Suppose, we need to fetch data from 3 urls. The urls are stored in an array.

I am sure you also realise how clean it is and how useful it can be. So, practice, practice and practice.

Summary

Today we learnt about Promise. The newer and nicer way to use the Promise by using async/await. We also looked at finally along with how to iterate on await using for...await...of. Some of the terminology to remember are:

Promise
resolve/fulfilled
reject
settled
chaining
then
catch
finally
async
await
for...await...of

There are chances that you have questions around some of the points above which is not explained. It is kind of done intentionally so that you can come up with questions and also start exploring at your own. For any questions, drop a comment and own awesome community folks or myself will help you to get it answered.

Here are two questions from me for you to answer.

Q1: How to use multiple promises in parallel?

Q2: How can we solve Q1 with async/await

Thanks for reading. Happy learning.

--
Originally published at https://elanandkumar.com/blog/es6-and-beyond-II

DEV Community: Anand Kumar

Create your own Deno module + Github Action

Deno is here. Todo App(React) + Deno Server (API) + Docker.

Anand Kumar ・ May 17 '20

Deno is here. Todo App(React) + Deno Server (API) + Docker.

What is Deno?

Why Deno?

What I built?

Server:

Running the Deno server

Good to know

Client

Good to know:

How client app looks?

Docker

What I liked about Deno

Yet to explore

Conclusion

Source code is available on github.

What editor and font you use for WebDev

A journey of creating first flutter app

Features

First challenge

Second challenge:

What next?

For now, Stay home, Stay safe.

DEV.TO | Telegram Posts

Fix: MacOS Catalina and CommandLineTools Issue

On demand & colorful console log in NodeJS

MacOS Catalina: Top 3 features I liked most

What should I learn next?

React component lifecycle with Hook§

React Hooks: Migrate class component to functional and use hooks

Anand Kumar ・ May 12 '19

Syntax:

componentWillMount

componentDidMount

componentDidUpdate

shouldComponentUpdate

componentWillUnmount

Summary

React Hooks: Migrate class component to functional and use hooks

Counter Component

CounterApp

Summary

ES6 and Beyond > Part 2

ES6 and Beyond &gt; Part 1

Anand Kumar ・ 6 min read

Promise: An Introduction

Promise.prototype.finally

async/await

Tip:

for...await...of

Summary

ES6 and Beyond > Part 1