Since I first started writing JavaScript, there’s always been a background feeling of slowly evolving towards something better.

A few milestones along the way included jQuery’s introduction of CSS selectors, Firebug’s introduction of sophisticated dev tooling, component libraries like Dojo and Angular 1.

Most significantly, the more recent introduction of reactive libraries like React, Vue and Angular 4+ launched a whole new level by eliminating developer-managed binding of the view to the state.

But.

It still felt more clunky than necessary. Harnessing the power of reactivity was still cumbersome and painstaking. …

The number and types of services and tools available to software developers is bewildering. This article gives a survey of the tools the flagship cloud vendors offer for application architecture, in simple context with one another.

Application Architecture Tools

How to deploy and manage the actual application business logic is the most central aspect of using the cloud. The following options are arranged generally from the most developer-hands-on to the most abstracted and managed.

Virtual Infrastructure (VI)

We being with the ability to create virtual machines (VM) and virtual networks. …

The React engine is evolving to incorporate some advanced rendering capabilities. Read on to get an overview of the new, incoming Concurrent Render Mode.

This is pretty exciting.

“…a certain amount of work in your components will always cause stutter… Concurrent Mode fixes this fundamental limitation by making rendering interruptible.”

That is from the React Docs, which does a good in-depth job of describing the upcoming Concurrent Mode. It is available now, as an experimental feature in React 16.6+.

What I’m going to do here is give a condensed overview in case you don’t have the bandwidth to plow through the whole doc. …

Having arrived at the conclusion that Functional Components are Better, let’s be clear: hooks are what makes functions as full-featured as classes. Hooks deliver the goods in a gradually-adoptable way.

When you need lifecycle callbacks, you can employ useEffect.

The prefix “use” is convention for React hooks. With useEffect the idea is that this hook will allow us to partake in “side effects”.

In functional programming, a pure-function is one that only receives arguments and returns a value. Causing changes — or relying upon non-argument input from — outside the function itself is known as consorting with side-effects.

OK, maybe not consorting, but the general idea is that pure functions are clear as to their IO and dependencies, and help to keep code understandable. …

It’s become pretty clear that straight-function components in React offer a simplicity edge on class-based components.

I did not arrive at this conclusion without some mental anguish. I like to observe software trends with an intransigent detachment. The ongoing FP vs. OOP hoopla gives all the signs of a reactionary cat fight.

It’s always useful to stand outside the debate and hold it as it were at arms length, to get a good look at the thing before participating.

Thus prepared, we shall never be carried away by opinions. — Epictetus

But the funny thing about programmers is they can get all whipped into a frenzy about the essence of coding and what is better as though it were an ethical matter. …

There’s always some new way to do things around the corner. Sometimes, its actually better.

A sigh of relief washed over me when I groked the useState plus functional component combo.

Yes! This is actually simpler.

import { useState } from ‘react’;function philosophyComponent(){
  const [profoundInsight, setProfoundInsight] = useState(“Beauty and Truth are One.”);
  return (<div>{profoundInsight}</div>)}

So the syntax is slightly off-putting at first, but it’s actually super easy. What’s happening is the useState is putting two variables into the component function’s namespace: a value and a function.

In this example, a variable called profoundInsight is created, with a default value of “Beauty and Truth are One”. …

The key idea to keep in mind when exploring higher-order components is they’re intended to support code reuse between components. That’s it. That’s why they exist.

Now, a few more ideas to bear in mind:

• Higher-order components are so called because they’re components that consume and return another component
• The name higher-order components is a reference to higher-order functions; however, they work with both class and functional components
• They can be a bit unwieldy, and they come under criticism for this (this bullet is here so if the first few times you encounter these things you find yourself thinking what the heck, you’ll know you’re not…

In React, there is a very simple way to set up communication from child-to-parent:

class Parent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
     title: "Foo"
    }
    this.onTitleChange = function(){
      this.setState({"title":"bar"})
    }
  }  
  render() {
    return (
      <div>
        <h1>The Title: {this.state.title}</h1>
        <Child onTitleChange={this.onTitleChange.bind(this)}></Child>
      </div>
    )
  }
}
class Child extends React.Component {
  constructor(props){
    super(props);
  }
  render() {
    return (
      <button onClick={this.props.onTitleChange}>Go</button>
    )
  }
}
ReactDOM.render(<Parent />, document.querySelector("#app"))

Working Fiddle here.

So what this does is takes a function onTitleChange that is defined in the Parent, and hands it into the Child component as a prop.

It’s a function prop, or put another way, a vanilla JavaScript callback. …