Node.js: create a basic web app with React - part 1

Primary tabs

Developing a Full-Stack JavaScript web app with Caché requires you to bring together the right building blocks. Previously, I outlined the basic steps to install and connect Node.js to Caché and make it's powerful multi-model database capabilites available for use with Node.js. You can use Caché as a NoSQL-, document- (with unique key-level access!), SQL- and object-database with Node.js. When developing JavaScript applications, you'll see how powerful this combination is and makes Caché a perfect fit for Node.js.

In the first part of this article series I will show how to get started with the React framework, one of the most popular frameworks currently taking over front-end development. In the next parts you'll learn how to connect a basic web app to a Caché back-end.

You'll see, it's very easy to get started with this technology - you can even compare the amount of basic knowledge you need to COS because you only need to know a few basic concepts to start!

First, you need to have Node.js up-and-running with Caché as I've described in a previous article about Node.js.  Once you got Node.js installed on your system, you can create this first React demo application very easily.

In fact, this part is the first step showing you how to start creating a Node.js application with React. We will create a basic front-end app we will enhance later in part 3 to connect to your Caché database.

Enough introduction, let's make our hands dirty and get started!

First, you need to open a Windows command prompt and create a directory where your Node.js web apps will be stored, my directory will be C:\react

 

To make our React life very easy, the React developers have created a Node.js module to generate a complete React app skeleton and automatically set up all needed node modules: create-react-app. This module provides you with a complete development runtime environment for debugging an running your application.

To make this powerful module available system-wide, we have to install it using the npm utility. The NPM (Node package manager) module is the utility you need to install and manage your node.js modules in your apps. It's automatically installed for you when you install Node.js. You'll use this commandline utility very often when developing node apps.

Let's install the create-react-app module globally:

 

You'll notice a lot of installation activity going on, don't bother because it uses a lot of Node.js modules under the hood.

Now that we have the create-react-app command available, we can start now by letting this tool generate an application for us:

You'll see it created an application directory for you (C:\react\test) and it downloads and installs a lot (!) of node (npm) modules in this test subdirectory. Don't panic, the majority of these modules are only needed for development and are not required in production!

This also shows you the basics of how Node.js works: the Node.js runtime contains the JavaScript language features and basic system functions you need, however the real power comes from the 450,000+ readily available modules that exist in the Node.js community!

When the test app is generated completely, you should see this:

Now all we need to do is enter inside the test app directory end run "npm start" to run the application:

This command will start a Node.js development server running on localhost at port 3000 and open the application for you in your standard (Chrome) browser:

And in your browser, you should see the following:

Congratulations! You just created your first React app! That's all you need to create a fully functional web app.

As we've not written one single code line yet, we will also set up now our development environment for editing our source code. The source code editor (or IDE) you choose is entirely up to you, but a very popular choice these days is the Atom editor. Just download and install it on your system, it's very lightweight.

Start the editor, and add your C:\react project folder in the File menu:

Open the test app folder and inside the src subfolder, open the App.js file. Add the highlighted code line to this file, hit the "Save" button and watch the application update (refresh) itself in your browser in real-time:

 

What you just saw happening in your browser is what makes Node.js tooling so powerful: it's all built already for you and you can freely use it to build and debug your applications in a very user-friendly way.

Now let's force an error now in the source code by adding some invalid JavaScript inside the render() method:

And now see what happens in your browser ...

Pretty useful for debugging, don't you think? You get a complete debug, build & deploy environment with the standard create-react-app scripts.

Now open also the Chrome Devtools using Ctrl+Shift+I:

As you see, the error is also clearly shown in the Devtools console too.

Now there are a few more tools we can add to Atom and Chrome to create an even more powerful React debugging experience.

In your Atom editor, go to File - Settings and select +Install. Search for the "react" community package and install it. This package knows everything about the React JSX syntax with syntax highlighting.

In Chrome, install the "React Developer Tools" extension. When installed, watch the Devtools in Chrome: you'll see now a React debug tab is added - click on it. You can inspect now all your React components (and what's changing & updating) and debug them at React level (not only in HTML)!

We now have a complete React development environment using Node.js to develop your front-end. If you want to know more about React and learn the basic principles, I suggest you follow some tutorials on the React website.

In the next part of this series, we will set up our Node.js/Caché back-end (yes, you'll see you can write your complete Caché application in JavaScript!).


Continue reading with the next part: Node.js: create a basic web app with React - part 2.

Comments

Wouldn't it be easier and more direct to have your react app talk to a REST API created in Cache? I wonder how the performance compares between having to go through server side nodejs instead of going through a REST API directly? Do you have any experience comparing the two?

So far NodeJS is only used as a general dev environment and build pipeline manager.

Maybe front-end would communicate with Caché backend via REST API? Or websockets?

> So far NodeJS is only used as a general dev environment and build pipeline manager.

This is just not true

 

You miss the point - Node.js / JavaScript is now one of the most used back-ends / languages.  By comparison, COS is almost unknown in the IT mainstream.  Sure, you can do everything in COS, but to do so, you need to learn COS.  If you have to learn COS to use Cache, most people in IT won't use it as the back-end to web applications.

Write your apps the way Ward suggests, and  you open up Cache to a massively bigger audience, and you can also recruit JavaScript guys to do the back-end development, without them having to learn COS, but they get all the benefits of the database.

Regarding performance, see my last comment for this article:

https://community.intersystems.com/post/building-qewd-nodejs-cache-rest-...

and see for yourself - look at the browser console network logs and look at the X-ResponseTime response header values to see the back-end response time using Node.js + Cache - here's the demo link:

http://34.201.135.122:8080/

Suggestion - put together a COS/CSP version of the RealWorld Conduit back-end and see how it performs by comparison, so you get an apples v apples comparison

You can also perfectly communicate with the back-end using CSP/REST, using Caché as the application server (as you can see in parts 2 & 3). This is a choice the developer has to make.

However, using Node.js as the application server (and Caché serving as the database - or even application server too) gives you a lot of advantages:

  • as I wanted to show in this article series, you develop using the same programming language at the front- and back-end, JavaScript is very popular for several years now and it's much easier to find JS developers
  • you can use all readily available functionality in Node.js standard modules in your back-end code: e.g. if you'd choose a front-end framework in the future that pairs out of the box with a standard Node.js back-end module, you'd need to re-implement this from scratch in COS ... modern development tends more and more to the use of existing building blocks instead of re-inventing the wheel
  • the same goes for all kinds of modules to external services you'll find on npm providing you with many thousands of building blocks out of the box
  • you even have the freedom to choose what you implement in JavaScript and what stays in COS - e.g. call a COS wrapper function from your JavaScript back-end in Caché - the function can contains parts of your business logic with all specific COS functionality you need like SQL, classes, ... communicating JSON (a temp global) in and out from/to your Node.js back-end - giving you the best of both worlds
    Additionally - IMHO - if Caché would also support JavaScript syntax internally one day as a develoment language you could really develop full-stack using one single mainstream language and allow Caché to come out of its market niche

In terms of comparing performance: if someone - as Rob suggests - can write the RealWorld Conduit example back-end in CSP, you'll have a very realistic comparison between the two options!

Great article!

Although "it's very lightweight" is up for debate. Considering I have both Atom and VSCode opened at the moment, one of them consuming 160 MB or RAM, the other eating up 25 MB. Which makes me think, aren't they both electron-based, so they should both have a huge chromium-overhead?