There’s a big buzz out there regarding which back-end technology is better Node.js or Deno. So I went ahead to create the same app using both technologies.

I made a full-stack Todo app using React for front-end and used Node.js and Deno as back-end. You can either use Deno or Node.js as a standalone back-end application.

I use Node.js for my applications all the time. But using Deno for a full-stack application was new. I referred docs on Deno official website for this purpose. React is something I just started using and I am still a beginner on the learning path. I used bootstrap for styling and kept it simple.

GitHub repository at the end of the article.

Let’s take a look at how the front-end of our full-stack application looks like

I added basic functionality like adding a new task, editing a task, and marking a task as completed.

Front-end with React and Bootstrap

Now let’s see the differences I came across while building the back-end.

1. File structure

The file structure for both apps is the same except for the package.json and node_modules folder in Node.

Node needs a package.json file to save the information needed to run the application, the packages the needed to run the application. On running the npm install command, specified packages are saved in the node_modules folder. These packages are used in the application further.

Deno doesn’t need a modules folder because it loads the modules at runtime. it does need an internet connection for the same, unlike Node where you don’t need internet after the module has been installed by npm (node package manager). It also doesn’t need the package.json because the packages needed to run the application are imported in the files and retrieved from the online repositories at runtime.

2. TypeScript Support

Node.js does not support TypeScript out of the box. You need additional packages to do that.

Deno supports both TypeScript and JavaScript out of the box. The code I used in building the Deno back-end is also in TypeScript.

3. Accessing _id in React

For editing the existing task I needed to access _id of the task object via the params in URL.

React Component

In Node was as easy as, rendering the object _id in the URL link. In the image above you can see how I simply did the render in Node.

In Deno, the Mongo API did not give direct access to the _id I had to access the object id $oid in the _id. This might be because the library is in its early stages. You can see the same in the image above.

#nodejs #deno #typescript #react #javascript