A Straight-Up Guide

Image for post
Image for post

One-Liner

Microservice is a style of architecture that composes applications out of remotely accessible components.

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

Microservice architecture is one of those ideas that is actually simple but can spiral into complexity as soon as you open your mouth to explain it.

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 might call it “remotely decoupled application architecture”. …


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.

Image for post
Image for post
Photo by Christina @ wocintechchat.com on Unsplash

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. …


Introducing the New Render Engine

Image for post
Image for post

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. …


Functional Lifecycle and Variable Watching

Image for post
Image for post

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. …


But Only by a Little

Image for post
Image for post
Me and Photopea.com

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. …


Finally, Something That Actually Makes Life Simpler

Image for post
Image for post
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 value of “Beauty and Truth are One”. …


Generic, reusable components

Image for post
Image for post

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…


ASAP: As Simple as Possible

Image for post
Image for post

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. …


Interesting Trends in Devtech

Image for post
Image for post
If you are not a dev: stop reading.

It’s Big

The worldwide public cloud services market was projected to grow 17.5 percent in 2019 to total $214.3 billion, up from $182.4 billion in 2018, according to Gartner, Inc.

Although $214.3 B is quite a large industry, the growth factor is the eye-catching feature.

Cloud growth is projected to continue on its expansion track, arriving at almost $300 Billion USD revenue during 2020 (Forrester).

That just means one huge thing to you and me: opportunity.

But What Exactly is It?

There are really two kinds of cloud software: end-user and developer. SaaS and IaaS.

The *aaS acronyms start to just be a muddle. For you and I who know, there is devtech, and then there is everything else. …


The Same Good Architecture Applies Everywhere

Although there are significant differences between React, Angular and Vue, they share architectural fundamentals. We could look at this unity like so:

Image for post
Image for post

This high-level applies equally to the big three, React, Angular and Vue (and probably emerging things like lit-html).

A core improvement that is shared by all three is the DOM Binding concept seen above, and described more fully here.

A key area of complexity in applications using these frameworks is the Application State. I ask the question, what is the best way to handle state in React here. …

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