Category Archives: Tutorials

ES 7 and ES8 Features

Recently I wrote a blog post and even created an online course on ES6/ES2015. Guess what? TC39—the mighty overseer of JavaScript—is moving forward with ES8 so let’s cover ES7 and ES8 (or ES2016 and ES2017 officially). Luckily, they are much, much, much smaller than the best of a standard that was ES6. Really! ES7 has only two (2) features!

ES7 features:

  1. Array.prototype.includes
  2. Exponentiation Operator

ES8 is not finalized yet as of this writing (Jan, 2017) but we can assume all finished proposals (stage 4) and most of stage 3 (more on stages here and in my course). The finished 2017 (ES8) proposals are:

  1. Object.values/Object.entries
  2. String padding
  3. Object.getOwnPropertyDescriptors
  4. Trailing commas in function parameter lists and calls
  5. Async Functions

I won’t include stage 3 proposals in this post, but you can check the status of proposals from stage 1 to 3 here.

Let’s dive deeper into the proposals and features…

The rest of the article: https://node.university/blog/498412/es7-es8

How Node Event Loop REALLY Works: Or Why Most of the Event Loop Diagrams are WRONG

When Bert presented his keynote at Node Interactive Europe 2016 on Event Loop, he started by saying that most of event loops diagrams are WRONG. I’m guilty of using one of them in my talks. :)

This is it. In it, event loop is spinning data back at clients like hot-cakes.

His diagram is closer to the real stuff. In it, event loop starts, works and then quits eventually (pun intended).

Continue reading

Node.js in Containers Using Docker

Node.js in Containers Using Docker

Container technology is one of the best options for software development and deployment. It allows you to share some of the OS resources while encapsulating the code and other concerns. You can think of containers as virtual machines but with less footprint.

Containers are great for micro services where you replace monoliths with many services. Each of them works in isolation and communicates with other services via a well defined interface (typically REST).

Docker is one of the most popular implementations of containers. Docker’s What is Docker? page has a a neat comparison of containers with VMs. In a nutshell, VMs use hypervisor and each VM has it’s own OS while containers share OS and only separate libraries, bin, executables, etc.

Continue reading

Autocomplete Widget with React

This project will guide you through building an autocomplete function similar to the one that you might see in Slack (a popular messaging app), as shown in figure 1, when you type something in the search box. For simplicity, our widget will work with room names (the rooms in a chat application).

Figure 1

Figure 1

The autocomplete widget will have (figure 2):

  1. An input field
  2. A list of options filtered according to the entered characters
  3. An Add button (figure 3)
Figure 2

Figure 2

The filtering of the matches will be done using the entered characters as the first characters of the option. In other words, there is a simple comparison that allows us to autocomplete the name of the room (figure X). For example, if you type “mac” and you have “Mac OS X” and “Apple Mac,” then only “Mac OS X” will be shown as a match, not both options.

Continue reading

React Native Quickly: Start Learning Native iOS Development with JavaScript NOW!

React Native Quickly: Start Learning Native iOS Development with JavaScript

This book is a guide on getting started with React Native for mobile iOS development. You can find source code and the manuscript in https://github.com/azat-co/react-native-quickly. You can read this book online here, or at reactnativequickly.com, or if you prefer videos, you can watch project videos at Node.University: http://node.university/courses/react-native-quickly.

In this book, I’ll introduce you to React Native for native mobile iOS and Android development… and do it quickly. We’ll cover topics such as

  • Why React Native is Awesome
  • Setting up React Native Development for iOS
  • Hello World and the React Native CLI
  • Styles and Flexbox
  • Main React Native UI components
  • Importing Modules into an Xcode Project
  • Project: Timer
  • Project: Weather App

This book is about getting started with React quickly and not about React Native, which is technically a separate library (or some might even call it a framework). But I figured after eight chapters of working with React for web development, it would be fun to apply our knowledge to mobile development by leveraging this awesome library. You’ll be amazed how many React Native skills you already know from React.

Continue reading

Learn HTTP/2 Server Push by Building Express Middleware

Learn HTTP/2 Server Push by Building Express Middleware

In the previous post, we learned how to perform HTTP/2 server push in a Node server. We also covered the benefits of server push there so to avoid duplication we won’t list them here. We used spdy for server push and H2. But most of the times Node developers don’t work with core HTTP server, they use a framework like Express. So let’s see how we can implement server push in Express.

Continue reading

Optimize Your App with HTTP/2 Server Push Using Node and Express

Optimize Your App with HTTP/2 Server Push Using Node and Express

HTTP/2 is the new standard of the web. It has many great features which will make the web faster and simplify the development. For example, no need to concatenate files thanks to multiplexing, or a server push which can send files before a browser knows it need them.

This post won’t cover all advantages of HTTP/2. You can read about them online. No need to go into all the details and duplicate text here. Instead, we’ll focus on server push and implement it in Node.js using Express and the spdy library.

Continue reading

Easy HTTP/2 Server with Node.js and Express.js

Easy HTTP/2 Server with Node.js

The modern Internet with its TCP/IP protocol started around 1975 which is astonishing 41 years ago. For the most part of its existence, we used HTTP and it’s successor HTTP/1.1 (version 1.1) to communicate between clients and servers. It served the web well but the way developers build websites has dramatically changed. There are myriads of external resources, images, CSS files, JavaScript assets. The number of resources is only increasing.

HTTP2 is the first major upgrade to the good old HTTP protocol in over 15 years (first HTTP is circa 1991)! It is optimized for modern websites. The performance is better without complicated hacks like domain sharding (having multiple domains) or file concatenation (having one large file instead of many small ones).

Continue reading

JSON is Not Cool Anymore: Implementing Protocol Buffers in Node.js

JSON is Not Cool Anymore: Implementing Protocol Buffers in Node.js

There’s a better alternative to the ubiquitous JSON as the communication protocol of the web. It’s Protocol Buffers (protobuf). In a nutshell, protobuf offers a more dense format (faster processing) and provides data schemas (enforcement of structure and better compatibility with old code).

Protocol Buffers were introduced by Google. You can read, more about them at the official Protocol Buffers Developer Guide. For something shorter, read 5 Reasons to Use Protocol Buffers Instead of JSON For Your Next Service which will give you a quick overview of the protobuf benefits over JSON.

The purpose of this article is not to highlight why protobufs are better or sell you on the concept. There are many article online that’ll do it for you. The purpose of this article is to show you how you can get started with this format in the Node.js environment.

Continue reading

Reactive Web Stack: 3RES – React, Redux, RethinkDB, Express, Socket.io

This post has been written by Scott Hasbrouck. You can find him on Twitter or his website.

It’s been nothing but wonderful to see JavaScript truly catch fire the past few years in web technology, ultimately becoming the most used language in 2016, according to StackOverflow data. My history with JavaScript began about 15 years ago, not all that long after it was first released as part of Netscape Navigator 2, in 1996. My most used learning resource was DynamicDrive, and their tutorials and code snippets of “Dynamic HTML” or DHTML – a term coined by Internet Explorer 4. Really, DHTML was a set of browser features implemented with JavaScript, CSS, and HTML that could get you nifty elements like rollover buttons and stock tickers.

Fasting forward to today, we now live in a world where JavaScript has grown to take over web technology. Not just in the browser, but it is now the most popular backend language according to that same StackOverflow report! Naturally, there are always those who dislike the language citing things like the ease of creating a global variable, or null being an object and undefined being its own datatype. But I’ve found that every language I pick up has quirks that are easily avoidable once you learn to properly use it. And we do want to become experts in our craft and truly learn to master our tools, do we not?

Continue reading