The Node.js Update - #Week 31 - 3 August, 2018

Below you can find RisingStack's collection of the most important Node.js updates, tutorials & announcements from this week.

New Release:

  • Node v10.8.0 (Current) Released

Great Tutorials:

  • Building a Video Converter App with Node.js, Express and React
  • D3.js Tutorial: Building Interactive Bar Charts with JavaScript
  • Enforcing a single web socket connection per user with Node.js, Socket.IO, and Redis
  • How to server-side render React, hydrate it on the client and combine client and server routes
  • We’re under attack! 23+ Node.js security best practices
  • GraphQL Authentication using OAuth & JSON Web Tokens
  • All you need to know about the Web Audio API
  • Deep Learning in JS - Ashi Krishnan - JSConf EU 2018

Important Announcements:

  • NearForm introduces Clinic Bubbleproof
  • IBM launches resources for cloud-native Node.js apps
  • Uber Introduces Fusion.js: A Plugin-based Universal Web Framework

Node v10.8.0 (Current) Released

deps: Upgrade npm to 6.2.0.

  • npm has moved. This release updates various URLs to point to the right places for bugs, support, and PRs.
  • Fix the regular expression matching in xcode_emulation in node-gyp to also handle version numbers with multiple-digit major versions which would otherwise break under use of XCode 10.
  • The npm tree has been significantly flattened. Tarball size for the npm package has gone from 8MB to 4.8MB.

Building a Video Converter App with Node.js, Express and React

This tutorial shows you how to build a video encoder with Node.js. We will use express.js on the backend to run a web server, multer for uploading files and socket.io for broadcasting real-time encoding progress to the user. We will use handbrake-js to encode videos which under the hood, spawns HandBrakeCLI process and lets us listen to events. We will use React to build our Frontend where a user can upload videos, view real-time encoding progress, download and view their converted videos.

D3.js Tutorial: Building Interactive Bar Charts with JavaScript

Recently, we had the pleasure to participate in a machine learning project that involves libraries like React and D3.js. Among many tasks, I developed few charts that help to process the result of ML models like Naive Bayes in form of a line chart or grouped bar chart.

d3.js tutorial bar chart made with javascript

In this article, I would like to present my progress with D3.js so far and show the basic usage of the library through the simple example of a bar chart.

Enforcing a single web socket connection per user with Node.js, Socket.IO, and Redis

Recently, I have been working on a real-time multi-player browser game and ran into the “single-session” problem. Essentially, I wanted to prevent a user from connecting more than once via web sockets. This is important because being logged on to the same account multiple times could create unfair scenarios and makes the server logic more complex. Since web socket connections are long lived, I needed to find a way to prevent this.

How to server-side render React, hydrate it on the client and combine client and server routes

In this article, I would like to share an easy way to server-side render your React application and also hydrate your Javascript bundle on the client-side. If you don’t know what “hydrate” is, I’ll try to explain: imagine that you render your React component to a string using the ReactDOMServer API, you will send HTML to the client, that is static.

In order to deal with the dynamic events you’ve set in your component, you will have to attach this HTML markup to its original React component. React does so by sending an identification to the generated markup so it is able to resolve later which event should be attached to which element in the DOM. (Kind of). You can read more at the official docs.

We’re under attack! 23+ Node.js security best practices

Web attacks explode these days as security comes to the front of the stage. Yoni Goldberg, Kyle Martin & Bruno Scheufler compiled over 23 Node.js security best practices from all top-ranked articles around the globe.

node-js-best-practices

GraphQL Authentication using OAuth & JSON Web Tokens

Essentially, we are going to encode a JWT on the server using a secret server key and send it back to the client as a cookie. After the response back to the client, the server doesn’t know anything about the JWT locally because it is not persisted. On every request from the client that needs to be authenticated, the client will send back that JWT using the cookie that it received.

jwt-node--1-

Then the server can read the incoming request, get the cookie’s JWT value, decode it using the secret key again, and if everything is good, do whatever it needs to with the decoded info and pass it to the protected route. This, in a nutshell, is how JWT works. It’s pretty straightforward once you wrap your head around a few of the key ideas. I’ll show you how I implemented it with graphql-yoga and the existing passport strategy I had in place to get the access token for the Spotify API.

All you need to know about the Web Audio API

Did you know Javascript has a constantly evolving high-level API for processing and synthesizing audio? How cool is that!

node-js-update-web-audio-api

The goal of the audio API is to replicate features found in desktop audio production applications. Some of the most prominent features are mixing, processing, filtering, etc.

Deep Learning in JS - Ashi Krishnan - JSConf EU 2018

It’s clear by now that the robots are coming for us.

Breakthroughs in AI fill our streams and news feeds, themselves the products of AI, the echoing algorithmic screams of a new kind of mind being born.

Using deeplearn.js, we’ll find out how deep learning systems learn and examine how they think. The fundamental building blocks of AI have never been more accessible. Let’s explore the architecture of these new minds, which are growing to mediate our every interaction.


NearForm introduces Clinic Bubbleproof

Bubbleprof has a unique new approach to profiling your Node code so that you can visualise exactly where and how that code is busy. You can quickly uncover whether bottlenecks are in your code, in Node modules or in an external system.

bp01

In a nutshell, Bubbleprof observes the async operations of your application, groups them, measures their delays, and draws a map of the delays in your application’s async flow.

IBM launches resources for cloud-native Node.js apps

CloudNativeJS is a community project that provides assets and tools to help you to build best-practice Cloud Native Node.js applications and deploy them to Docker and Kubernetes based clouds.

cloudnativejsio

Uber Introduces Fusion.js: A Plugin-based Universal Web Framework

A little-known fact is that Uber builds a lot of web-based applications, hundreds of them and counting, in fact. Many of them are internal apps for managing various aspects of the business while others are public facing.

fusionjs

To address this challenge, Uber’s Web Platform team built Fusion.js, an open source web framework that makes web development easier and produces lightweight, high-performing apps.


Previous Node.js Updates:

From the previous Weekly Node.js Update:

  • Google Chrome Labs introduces ndb
  • LinkedIn is offering 6 totally FREE courses covering Node.js development
  • You Can Now Write Google Cloud Functions with Node.js 8

& more...

We help you to stay up-to-date with Node.js on a daily basis too. Check out Node.js Daily!