A Straight-Up Guide
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…
If you haven’t tried Svelte — Now’s the…
JavaScript Finds a Hero
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. …
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.
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
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
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…
Finally, Something That Actually Makes Life Simpler
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) {
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…
