DEV Community: Matthew Clark

Why Node.js For Web Development in 2020?

Matthew Clark — Tue, 08 Sep 2020 03:18:12 +0000

With the rapidly growing software development industry and technology stacks, choosing the right way for web app development has become one of the complicated tasks. There are many technologies and programming languages that come and go over the years, but JavaScript is the one standalone technology that has not only maintained its position but also influence software development companies for building high-end applications.

Image Source: https://www.statista.com/statistics/793628/worldwide-developer-survey-most-used-languages/

According to the Survey, 67.7% of developers are still preferring JavaScript for web app development.

However, now Node.Js has not just become an altercation of JavaScript but also majorly based on it. According to the survey reports, 51.4% of respondents used Node.Js leaving aside some of the most powerful frameworks, libraries, and other software development tools.

Image Source: https://www.statista.com/statistics/793840/worldwide-developer-survey-most-used-frameworks/

In addition, Jeff Harrel, the Director of Engineering at PayPal says “Node.Js powers our web applications and has allowed our teams to move much faster in bringing their designs to life”.

But, what key features making Node.Js 2020 ready? Is choosing Node.js over other technologies a winning choice for startups or enterprises…Let’s learn…

If you are one of those new techs who are not much aware of Node.js, then it’s better to get started with the overview of the Node.Js!

Basic Overview of Node.Js

Node.Js is originally launched by Ryal Dahl, as a set of libraries that used to run on top of the V8 engine and allowing to run JavaScript code on the server. If putting it in simple words, then Node.js is neither a library nor a framework. In fact, Node.Js is a cross-platform, open-source JavaScript runtime that actually works on the server-side. It simply means that you can execute JavaScript codes on your computer machine by using that runtime instead of running it in the browser. Sounds interesting, right! That’s how Node.js gonna work and empowering developers.

In addition, it won’t be wrong calling Node.js a strong yet feature-rich framework, as it provides a unique combination of libraries, helpers, and various tools that make the entire web app development process far simpler and easier to operate. Moreover, it provides a strong base to build your web apps and safeguard your online presence.

What Exactly Makes Node.Js a Powerful Technology?

Elements of Node.js are V8, libuv, Http-parser, C-ares, OpenSSL, and zlib. While Node.js has been relishing developer’s attention since its launch and exceptionally used for the real-time applications. Node.Js is undoubtedly packed with the unique set of features that have helped it become a top choice for developers when it comes to web app development.
However, still many of you wondering what exactly sets Node.Js apart from other libraries and frameworks. The simple answer to this question is its Core Elements.

For better understanding let’s split Node.Js into two parts: V8 and Libuv. On the one hand, V8 is composed of 70% C++ and 30% of JavaScript, on the other hand, Libuv is completely written in C.

Image Source: https://dev.to/khaosdoctor/node-js-under-the-hood-1-getting-to-know-our-tools-1465

Let’s understand it in a simple language:

If you ever get a chance to take a closer look at the Node.js code, you will find the two main folders “Lib and SRC”. The “Lib” folder is the one that contains all the JavaScript functions and modules that required into the project where the “SRC” folder contains all the C++ implementations.

For example:

Image Source: https://dev.to/khaosdoctor/node-js-under-the-hood-1-getting-to-know-our-tools-1465

So now, you must have a fair idea about what exactly is Node.js and it’s core elements that made it stronger over others. However, the central question remains the same, that what are the top features that make Node.Js development trends for 2020.

Key Features of Node.js Making It Ready for 2020

Making an investment in the web app development is a crucial decision, so before proceeding for the top web development company, you should what makes Node.js best over others.

So when it comes to choosing the Node.js for developing web apps, undoubtedly 51% developers love using it becuase of its speed and multi-user proficiency. Secondly, since it is majorly based on JavaScript, therefore, making a real-time application becomes easier with Node.js. All-in-all, Node.Js is a combination of library, framework, and other development tools that simplifies the job of full-stack web developer and ensure effortless development.

Let’s Understand the Key Features of Node.Js in detail to make a better choice for web app development:

1. High Performance and Event-Based Model

It’s Not a Myth!

As the businesses are growing rapidly, they are looking for frameworks that can easily adaptable and scalable as the user base grow. and Node.js has the power to host any size of the audience seamlessly.

V8 Engine: Node.js is built on Google Chrome’s V8 engine and written in C++, which not only makes it super fast but also helps in creating web applications that can handle multiple parallel connections with greater performance. In addition, both V8 and Node are often updated with the performance boosters, security patches, and support to add the touch of modern Javascript features.
Single-Threaded Architecture: The event-driven, single-threaded architecture of Node.js, make it capable of processing multiple simultaneous requests without any delay. Most of the popular platforms create an additional thread for each new request, which takes a long time to process and blocking a thread for making other requests. On the other hand, Nodejs manage requests with a single thread by making use of event loop and callbacks for I/O operations and delegating tasks.
Event-Based Model: Whether it’s about non-blocking responses, single-threaded nature, or usage of a common language for both client/server-side, Node.Js is a popular choice for various solutions that required frequent updates in data, for example, chats, video conferences and more.

Conclusion: Many leading companies like PayPal have switched their technologies to develop Node.js application and noticed 35% decrease in response time as compare to migrating it from Java.

Image Source: https://medium.com/paypal-engineering/node-js-at-paypal-4e2d1d08ce4f

2. Node.Js Supports Microservices

With the increasing demand for applications, microservices have become one of the major needs for businesses struggling with web app performance.

Every project started out small or with the basic MVP, but sooner or later it starts growing and demand the new features. As your user base grow and your app expanded with new features, you may end up with a huge project and your web development company will keep struggles to cope with. On one side you probably need to add new features and on the other hand, you need to provide the top-notch performance to the users. Well, this one of the most common problems among enterprise applications. But the simple answer to this problem is to look for a Microservice pattern.

It means “a microservice is a single self-contained unit which, together with many others, makes up a large application. By splitting your app into small units every part of it is independently deployable and scalable, can be written by different teams and in different programming languages, and can be tested individually”.

Well described by an open-source developer — Max Stoiber

For example:

When Walmart shifted to microservices architecture with Node.Js, they get immediate benefits:

Seamlessly handling over 500 million pages views with zero downtime
98% of mobile conversion growth instantly

Image Source: https://blog.risingstack.com/how-enterprises-benefit-from-microservices-architectures/

3. Easy Maintenance With Serverless Web Development

Going serverless with the Node.js can help you save a great cost and time as most of the web applications run on high-maintenance servers.

Since nowadays software development companies have a dedicated team of engineers to help manage and maintain servers, why to make it complicated for you when Node.js serverless and hardware-free solutions are here to save you.

This will not only help in reducing time and cost but also enhanced the efficiency and productivity of the developers as well as software development companies using this framework.

Some benefits of using serverless applications

Serverless applications are like a piece of code that usually functions closely like the AWS Lambda. It means, it is executed based on the kind of event triggered. Moreover, it ensures a faster deployment cycle run via a single command.

Take a look of an example:

Image Source: https://blog.logrocket.com/going-serverless-with-your-node-js-apps/

4. Rich Ecosystem For Enterprise- NPM

In simple words, NMP is a default package manager of Node.js which allows programmers to install, update, and access open-source JavaScript tools for modern web applications. With over 836,000 libraries available in NPM and over 10,000 new ones being published every week, Node.js ecosystem becomes quite rich and providing a vast variety of free accessible tools in a few clicks to developers.

Image Source:https://blog.npmjs.org/post/180868064080/this-year-in-javascript-2018-in-review-and-npms#:~:text=With%20over%20836%2C000%20libraries%20currently,entirely%20apples%2Dto%2Dapples.

According to the survey, 7% of users are using NPM to build front-end web applications whereas 77% of enterprises are building Node.js applications. One prime reason behind this is, NPM has released the “Enterprise version” of package manager that ensures high-end privacy and security of the web application.

Moreover, you can choose to hire web developer to leverage the NPM package managers and avoid writing the common features right from the scratch and eliminate the risk of adding new layers of complexity to the development process.

5. Developing Cross-Platform Apps With Node.Js

Platforms like Electron and NW.js have introduced a new way of writing cross-platform applications with Node.js like technologies. It means, now you can develop desktop apps with Node.js by simply using some code lines from your web app to create desktop versions for mainly macOS, Windows, and Linux. The best part about this, the same team working on a web app can deliver the desktop app without having the expert knowledge of programming languages like Objective-C, C#, or other required for building native apps.

Also, the majority of the Node.js tools are cross-platform, so developer’s don’t require a specific machine to write, debug, and build a Windows, macOS, or Linux apps.

Highly modern enterprises are already knowing that developing your web app with Node.js is probably an optimum way to improve app performance, increasing coding efficiency, and bringing overall happiness to their development team.

Conclusion

To end this post, it is worth mentioning that that Ruby on Rail is the biggest titan of the development industry but still, a huge part of web development solutions revolves around JavaScripts frameworks. For front-end — Vue.js, React and Angular.Js are ruling but Node.js is the biggest choice for back-end development.

So with the above-given futuristic features, I see strong reasons for choosing Node.js for building web application that delivers smooth and excellent user experience. And for enterprises, still find themselves stuck anywhere in between the features, can choose to get a partner with the right team of developers, who are capable of making the most of this modern web app development framework and make your app future-ready.

3 Characteristics of Fast Growing Programming Languages

Matthew Clark — Wed, 02 Sep 2020 19:56:29 +0000

The justifications for creating a new programming language vary. If you’re a computer scientist like Mary Hawes or Grace Hopper, your concern is economics: the cost of programming generally, and for porting applications to new hardware platforms specifically. If you’re Dennis Ritchie or Ken Thompson, your issue is that the prior letter of the alphabet is too slow. Or if you’re Rasmus Lerdorf, you want something simpler to maintain your homepage so you write a surprisingly cromulent language that still powers wide swaths of the public internet.

The intent, in turn, informs the execution. COBOL is human readable, C is fast and PHP is, or at least was, simple.

None of which guarantees anything. As engineers need to be reminded regularly, not only doesn’t the best technology win in every case, it doesn’t win in most cases. The quality of the technical implementation is but one among many factors in the adoption – or lackthereof – of a given piece of technology.

A new programming language, therefore, can be designed with the best of intentions, it can be backed by well resourced organizations, it can be exceptionally well engineered and yet it can still see minimal interest and adoption. This is more true today, in fact, than it’s ever been because the rise in developer importance has led to widespread language fragmentation which has in turn created enormous competition for programming language attention, visibility and traction.

While there is no way to predict success for a particular programming language, however, there are three characteristics that languages that have outperformed their counterparts on the RedMonk language rankings over the past eight years have had in common. If you’re advocating for a current language or considering whether to write a new one, then, these patterns are worth considering.

Assimilation:

The majority of programming languages are stand alone pieces of software. The syntax is unique, or at least relatively so. Each has its own compiler and associated tooling, its own community and so on. Several of the fastest movers on our rankings in recent years, however, are languages able to seamlessly intermingle with large existing language communities.
TypeScript is perhaps the best example of this. A superset of JavaScript that offers optional type safety, TypeScript can present unique and differentiated features to developers – while operating side by side with what is by our measure the most popular language in the world. This makes the adoption of TypeScript within a given enterprise far less controversial than an incompatible language would be.

In similar fashion, Kotlin’s major boost came from its approval as a first class citizen on the Android platform. But its vault from the distant back half of our rankings to a Top 20 language was not fueled by its usage on the mobile platform alone. Instead, Kotlin’s ability to intermingle with what up until recently we ranked as the second most popular programming language in the world has allowed it to flow into enterprise settings like water. Consider that several vendors tried to capitalize on the popularity of Swift – an enormously popular language thanks to its role as the basis for iOS applications – and push it into the enterprise. These efforts, by and large, have failed. Webinars about how to use Kotlin with Springboot or otherwise mainstream enterprise frameworks, however, abound.

Speaking of Kotlin, it’s worth mentioning that that transaction goes both ways, in that while Kotlin – along with Clojure, Groovy, Scala et al – compete with Java the language, all of them leverage Java the platform. So while Kotlin’s competing with Java in one dimension, it is being absorbed by it in another.

Embrace and extend has been a technology trope for years for a reason, and the reason is that it works.

Security:

Like insurance, security is generally viewed as a necessary evil. Something that has to be done, but that is merely unsexy work in a best case scenario and more likely to be both tedious and miserable. As enterprises have shifted more and more of their business to digitally based models, however, the importance of security from an application development perspective skyrockets.

Its importance notwithstanding, security is never going to be something that a majority of developers get excited about and want to spend cycles on. If a language is able to build in some security, however, if only to protect developers from some particular subset of vulnerabilities, that is an increasingly attractive feature – particularly if it doesn’t require too many compromises.

TypeScript in particular, as mentioned, has benefitted from this approach, being able to present itself to developer and executive alike as JavaScript, but with some security baked in. Even Kotlin with its Null Safety feature has benefitted from the growing emphasis on secure development in some cases.

Versatility:

Lastly, one of the things developers prize, and to a lesser extent the enterprises they work for, is versatility. There are many instances of successful specialized languages, of course – R being perhaps the most obvious. Languages that have the ability to traverse a wide range of use cases, however, offer enormous value to developer and employer alike.

Perhaps the best example of this is Java. Originally created to provide software for cable set top boxes, the language went on to storm the world as an industry standard for enterprise applications. For years industry observers and analysts would write reports about how “Java Was Dead.” This “dead” language would later go on to serve as the foundation for everything from Android’s application ecosystem to the majority of Big Data software infrastructure. With so much competition from more recent languages that were developed in reaction to the perceived shortcomings of Java and other long time stalwarts, one of the more common questions about our language rankings has been concerning Java’s ability to sustain its performance even amidst all the predictions of its imminent demise. There are many answers to that question, inertia among them, but the language’s versatility is perhaps the most accurate. It keeps finding new workloads to run, and in so doing has kept itself relevant.

Python, the new number two language on our rankings, has never had the profile that Java’s had, but the breadth of use cases has not only sustained its performance but grown its usage even as one time competitors like Ruby have fallen off. From VB-style local apps to cross-platform developer scripting requirements to data science, the combination of Python’s accessibility and variety of potential entrypoints have ensured that Python is at least as relevant today as it was a decade ago.

And while it would be incorrect to solely attribute JavaScript’s popularity to its versatility, the language’s ability to traverse from the front end of an application to the back, beginning with the introduction of Node.js in 2009, opened up entirely new vistas for the language. It would be enormously popular even absent that back end presence, but that has been a selling point both for developers looking to learn the language and enterprises considering adopting it for better than ten years now.

To be clear, if you look across the Top 20 languages that we’ve ranked, both now and in years past, you will find many languages that don’t fit one of the above patterns. But given how difficult language growth is to achieve today, and the fact that the fastest growing languages we’ve tracked with the exception of Swift exhibit one of these tendencies, they’re certainly worth considering when trying to move the needle around a particular language.

Particularly if, like TypeScript, you can incorporate more than one at the same time.

Ignore Console.log() From Now On!

Matthew Clark — Tue, 01 Sep 2020 23:16:30 +0000

Adding console.log() to our code is probably one of the most common practice among developers. However, I have spent a lot of time in my life to persuade beginners (and sometimes proficient coders) to stop using it for debugging JavaScript. Here’s why.

First, I must admit that I’m still doing console.log() statements in my code — old habits die hard. I’m not alone: Around 75% of Node.js developers report using it (in 2016, https://www.clarkio.com/2017/04/25/debugging-in-nodejs/) for finding errors in their applications.

In a couple of situations it is either the simplest thing to do because you know exactly what and where to log information, or it’s the only thing to do because you are in constrained production/embedded environments with no other tool. However, this not an excuse to make the exception lead your daily practice. Indeed, as a general rule, console.log() is painful and prone to errors — as you will see hereafter. There are much more sophisticated solutions available.

Missing Contextual Information

console.log() forces you to consciously select which information to be logged prior to debugging. And what you display in the first place isn’t sufficient or even completely irrelevant because you usually don’t yet have any idea of what’s going on.

Every time you launch your app, you go a step further — whether it be realizing you’re still not logging the right information at the right time or wasting hours changing your statements again and again to display new information and hide irrelevant info.

Counterattack with a debug tool:

Display/watch any JS variable inline while debugging (function arguments, local variables, global variables, etc.)
Explore the call stack to get the complete context in which your problem appear

Too Much Information

Algorithms are usually designed to automate a large number of small tasks — loops and recursion being fundamental building blocks for this. Along with console.log(), it results in a large number of lines displayed in front of you, so you may have a hard time coming to find the right information.

Counterattack with a debug tool:

Create conditional breakpoints[https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#conditional-loc] to pause the execution when a specific condition is met so you can take time to analyse what’s going on
Watch custom JS expressionshttps://developers.google.com/web/tools/chrome-devtools/javascript/reference#watch so you don’t waste time deriving the same expression at each step of a loop
Create a debug log classification[https://blog.risingstack.com/node-js-logging-tutorial/] in addition to your standard application log in order to activate debug messages on-demand for the domain of interest (e.g., file, service, class, etc.).

Untrustworthy Information

You cannot always trust information reported by console.log() because there is simply no standardized behavior about it. You don’t really know what happens under the hood.

Most of the time, calling console.log() when the console is not yet active only results in a reference to the object being queued[https://stackoverflow.com/questions/23392111/console-log-async-or-sync], not the output the console will contain.

As a workaround, you’ll need to either clone the information or serialize snapshots of it. The rendering happens asynchronouslyhttps://stackoverflow.com/questions/23392111/console-log-async-or-sync alongside future interactions with the logged objects (e.g., expanding object properties in the browser console).

Counterattack with a debug tool:

Asynchronous stack traceshttp://mrbool.com/how-to-debug-asynchronous-javascript-with-chrome-devtools/33573 allow you to inspect function calls beyond the current event loop, just like a context-aware travel in time to the originators of your asynchronous callbacks

Altered Code Behavior

The standard way to debug asynchronous code is to console log 1, 2, 3, 4, etc. (i.e., all executed steps before the output you’re expecting until you get the right order).

As a consequence, you modify the code and thus the way it runs, which can lead to really hard-to-track, unsteady behaviors. After you finish debugging, you also have to remember to delete all the stray console logs in your code.

Counterattack with a debug tool:

When it comes time to really understanding the flow of an application, going step by step[https://developers.google.com/web/tools/chrome-devtools/javascript/reference#stepping] is mandatory
When it comes time to really understand the timing of asynchronous callbacks, breakpoints[https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints] are your best friends (select the type that best suits your problem)

The Debugging Toolkit for JavaScript

To help you debug a full stack JS application, you actually really need a few tools:

Chrome DevTools[https://developers.google.com/web/tools/chrome-devtools/] now supports Node.js debugging[https://medium.com/the-node-js-collection/debugging-node-js-with-google-chrome-4965b5f910f4] in addition to JS code running in a local or remote browserhttps://developers.google.com/web/tools/chrome-devtools/remote-debugging/
Node.js debug[https://github.com/visionmedia/debug] module

And if you believe you can’t use the debugger when running your tests, consider reading this article[https://peterlyons.com/js-debug/] and other similar resources you might easily find on the internet.

There is probably no one-size-fits-all solution anyway, so if I have not convinced you and you don’t still want to use the debugger as your main debug tool, I would suggest you read this article[https://medium.com/@shanebdavis/debuggers-are-broken-become-a-console-log-samurai-f352accd9ef6] to make your logging smarter. One can also mention third-party modules like winston[https://github.com/winstonjs/winston] or loglevel[https://github.com/pimterry/loglevel] for JavaScript as fairly good customisable loggers, but on my side I prefer to use them for production-grade logs only (e.g., information, warnings, errors, etc.). Others modules like debug[https://github.com/visionmedia/debug] are more appropriate for debug/trace logs.

Thank you for your watching!

JS Coding Patterns that give you away as a Junior Developer

Matthew Clark — Mon, 31 Aug 2020 23:23:25 +0000

Computer programming is somewhere between an art and a science. Your code must match the syntax that the computer expects and understands, but the style and flow of your program are ultimately up to you.

Most programming problems can be solved in many different ways and judging one as better than another can be tricky. Sometimes, things come down to personal preference, and other times one approach is just better than another. This could be for performance, conciseness, or readability.

This post explores two patterns that are more likely to be used by junior developers than senior ones. The examples below are written in JavaScript, but the general principles extend to other programming languages as well.

1. Overuse of “if” and “else” Statements

Let’s say we are writing a class used to represent Simpsons characters. The constructor of the class accepts a first name, last name, and occupation for that character.
The code below creates the class and instantiates an example character, edna.

class Character {
  constructor (firstName, lastName, occupation) {
    this.firstName = firstName
    this.lastName = lastName
    this.occupation = occupation
  }
}
const edna = new Character(
  'Edna',
  'Krabappel',
  'Elementary School Teacher'
)

Now, let’s say that we want to add a getter property to our class that returns a boolean, describing whether the character is a member of the Simpson family or not.
Edna Krabappel is not a member of the Simpson family, but Lisa Simpson would be. Here is one way that this might be achieved, but it isn’t very good.

class Character {
  constructor (firstName, lastName, occupation) {
    this.firstName = firstName
    this.lastName = lastName
    this.occupation = occupation
  }

  get isSimpson () {
    if (this.lastName === 'Simpson') {
      return true
    } else {
      return false
    }
  }
}
const edna = new Character(
  'Edna',
  'Krabappel',
  'Elementary School Teacher'
)
console.log(edna.isSimpson) // Logs false, as expected

This code works as expected, but is unnecessarily verbose.
For starters, the else block isn’t needed. If the condition is found to be true, then the function will return a value and terminate — the else alternative will never be reached.

This fact allows us to simplify the method to the following:

get isSimpson () {
  if (this.lastName === 'Simpson') {
    return true
  }
  return false
}

Generally speaking, it’s stylistically preferable to avoid else blocks because it reduces code nesting. Although this isn’t always possible, it often is.

But even with that improvement, the method is still a bit silly. Since the getter intends to return a boolean as the output, an if statement isn’t needed at all.

This code does the same job:

get isSimpson () {
  return this.lastName === 'Simpson'
}

That’s much nicer. Comparison operators are often combined with if statements, but they don’t have to be. Sometimes, it’s better to just return a boolean directly.

2. Using Functional Programming in a Nonfunctional Way

JavaScript arrays can be manipulated either procedurally or functionally.

A functional approach is often preferable because it avoids mutation and unnecessary variables, but a procedural approach can be appropriate in certain situations as well.

While your choice of paradigm may be a matter of taste, misuse of functional programming techniques can identify you as a beginner. To illustrate, here’s an example.

Let’s say that we have an array of Character objects available, and want to use this data to create an array of names.

// An example input array could look like this:
const characters = [
  new Character(
    'Edna',
    'Krabappel',
    'Elementary School Teacher'
  ),
  new Character(
    'Lisa',
    'Simpson',
    'Student'
  ),
  new Character(
    'Moe',
    'Szyslak',
    'Bartender'
  ),  
]
// In that case the output we are looking for would look like this:
[
  'Edna Krabappel',
  'Lisa Simpson',
  'Moe Szyslak'
]

The first step is going to be adding a getter to our Character class that returns the full name of the character:

get fullName () {
  return `${this.firstName} ${this.lastName}`
}

With that available, we can move on to getting an array of full names. Here is one solution that works, but leaves room for improvement:

const names = []
characters.forEach(character => {
  names.push(character.fullName)
})

This implements forEach and provides a callback function, but it might as well have been implemented procedurally.
Instead of returning a value, each iteration of the loop mutates the external names variable. A for loop could easily achieve the same thing:

const names = []
for (let character of characters) {
  names.push(character.fullName)
}

forEach just isn’t the right choice for this. To ensure that the callback function remains “pure”, we should use another array method — let’s try reduce.

const names = characters.reduce((names, character) => {
  return names.concat(character.fullName)
}, [])

This attempt avoids the problems associated with forEach but still isn’t great.

The problem lies with the verb “reduce”. As well as preventing externally declared variables and mutation, one important benefit of functional programming is readability.

A functional method like “filter” or “reduce” can make for more expressive and readable code when used correctly.

For example, when a programmer sees that an array is being “filtered” they can assume that a set of items are being inputted, and only a subset of those items will be outputted. The items that were not outputted were “filtered out”.

Likewise, when a programmer sees an array being “reduced” they can assume that the function will take the input set and “reduce it” to a more compact output. You might “reduce” a list of test scores to a single average.

This gives readers of your code a helpful hint of what it does. If the array was being operated on procedurally, then readers would need to dig into the code at a lower level to understand what is happening.

Getting back to the example, this solution is not ideal because the verb “reduce” does not accurately describe what is happening. Since the goal is to return one output item for each input item, “map” is a much better choice. It’s also much more concise:

const names = characters.map(character => character.fullName)

Summary

Writing code that works is good but we should also strive to write code that is succinct, performant, and readable to others.

Eliminating redundant if and else conditions and selecting array methods appropriately are a good step towards this goal.

Seemingly small details such as these are one way that experienced programmers can be distinguished from less experienced ones.

Converting an iterable to an array in JavaScript?

Matthew Clark — Sun, 30 Aug 2020 20:44:36 +0000

JavaScript ES6 introduced, among many other things, the spread operator (...)[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax], which allows an iterable to be expanded in places where zero or more arguments or elements are expected.

We can use the spread operator to convert iterables or, as they are sometimes referred to, array-likes. Let's take a look at some examples:

String

When the spread operator is applied to a string, the result is an array of strings each one representing a character of the original string:

const name = 'Zelda';
const letters = [...name]; // 'Z', 'e', 'l', 'd', 'a'

Set

A Set is a collection of unique values. When the spread operator is applied to it, the result is an array of the stored values:

const data = [1, 2, 3, 1, 2, 4]
const values = new Set(data);
const uniqueValues = [...values]; // [1, 2, 3, 4]

Note that the above example is the basis for the uniqueElements snippet[https://www.30secondsofcode.org/js/s/unique-elements].

NodeList

A NodeList is a collection of nodes, returned by methods such as document.childNodes() or document.querySelectorAll(). While it implements some methods that help manipulate it as an array (e.g. NodeList.prototype.forEach()), it's oftentimes desirable to convert it to an array. When the spread operator is applied to it, the result is an array of the contained nodes:

const nodes = document.childNodes;
const nodeArray = [...nodes]; // [ <!DOCTYPE html>, html ]

Note that the above example is the basis for the nodeListToArray snippet[https://www.30secondsofcode.org/blog/s/js/s/node-list-to-array].

Introducing React-Three-Fiber

Matthew Clark — Thu, 27 Aug 2020 23:54:21 +0000

What’s React-Three-Fiber?

React-Three-Fiber or R3F is a powerful React renderer for three.js scenes, both for the web and with React Native.

Why should I use it?

To help you increase the speed of creation of your scenes. With R3F you’ll spend less time doing boring stuff and more time defining custom components, R3F will do all of these for you:

Creating the canvas
Binding events
Creating Three.js objects
Starting the render loop

Component-based scene

3JS allows us to write three.js objects in a declarative way. That means we can build up our scene creating re-usable React components, leveraging props, states, and hooks.

Built-in helper

It comes with some useful functions like raycaster and on each mesh it gives you access to all the useful pointer events like onClick, onPointerOver, onPointerOut, etc.

Hooks

It comes with lots hooks, such as useFrame or useThree, from which we can get useful objects like renderer, scene, camera, etc.

Dependency-free

Since it’s “just” a renderer it doesn’t rely on the three.js version, so you’re free to choose your preferred version.

Re-render only when needed

It works like any React component, updating itself on a dependency change (state, store, etc).

Installation

To install it with npm:

   npm install three react-three-fiber

To install it with Yarn:

   yarn add three react-three-fiber

You only need to add three (three-js) and this great module, no other dependencies and it’s only 33kB!

How Do I Use It?

Simply use the Canvas component to create a three-js canvas — this will take the whole height and width of its container.

Then, within the Canvas node, you’ll be able to add all your dynamic components — like your nested hierarchy of react components as well as custom ones. In this case, we created a Box component with some custom behaviors.

We used useRef to access the mesh of the cube. After it’s initialized by three-js, inside, canvas is able to keep a connection to it, altering scale or changing direction when hovered over with mouse or touch. If you scroll down and take a look at the Canvas you will see other official components from three-js, such as ambientLight and pointLight.

   <Canvas>
    <ambientLight />
    <pointLight position={[10, 10, 10]} />
    <Box position={[-1.2, 0, 0]} />
    <Box position={[1.2, 0, 0]} />
   </Canvas>

To sum up, you will need to use just these functions/hooks from Fiber if you want to start using this great library to add more 3D:

   import { Canvas, useFrame } from 'react-three-fiber'

If you enjoy your experience with this library I suggest you to start looking at a more grounded introduction to the three-js and WebGL world here: https://threejsfundamentals.org/.

If then you feel you’d like to explore more of the capabilities of fiber, you can read more in the official documentation.

What’s Your Opinion of This Library?

There are other high-level libraries, like A-FRAME, that build similar experiences and pages with a 3D element on the web.

But the real power of R3F is being able to access the low-level API of three-js, helping you become more familiar with this incredible WebGL library. It also helps you keep a clearly defined hierarchy of components, to be reused all over.

CodeSandbox React-Three-Fiber Playground

https://codesandbox.io/s/react-three-fiber-poc-udkii/

If you want to learn more about Hooks

I have personally read “Learn React Hooks” when I started using hooks and it helped me understand them to use tools such as useFrame or Canvas hook: https://amzn.to/2Y8hoX9