A Straight-Up Guide


Also, “microservice” refers to an instance of such a component.

Put another way, an application is considered to be in this style if it is comprised of microservices.

Simple Idea, Seems Complex

We’re going to avoid that here. This is a straight-up guide, designed to cleave to the essential of the thing.

If I were going to put a name on the idea, I…

JavaScript Finds a Hero

Photo by Марьян Блан | @marjanblan on Unsplash

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.


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

AWS, Azure, GCP: App Architecture Tools

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.

Photo by Christina @ wocintechchat.com on Unsplash

Application Architecture Tools

Virtual Infrastructure (VI)

Introducing the New Render Engine

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…

Functional Lifecycle and Variable Watching

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…

But Only by a Little

Me and Photopea.com

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

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…

Finally, Something That Actually Makes Life Simpler

Modified from Photo by Kelly Sikkema on Unsplash

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…

Generic, reusable components

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…

ASAP: As Simple as Possible

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

class Parent extends React.Component {
constructor(props) {
this.state = {
title: "Foo"
this.onTitleChange = function(){
render() {
return (
<h1>The Title: {this.state.title}</h1>
<Child onTitleChange={this.onTitleChange.bind(this)}></Child>
class Child extends React.Component {
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…

Matthew Tyson

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store