This year I’m focusing my “predictions” on broader technology trends that I strongly recommend you focus on if you are a Javascript Developer for frontend, backend or fullstack. So here we go!

Top Tech Trends for 2021 banner image

Typescript

If you are writing Javascript right now and you haven’t learned Typescript it’s exactly the right time (maybe even a little past time.) If you were waiting for a winner in the Typescript, Flow, JSDoc debate, the proof that Typescript has won is out there in plain view. The big open source projects are written in Typescript now, and from my experience the large commercial projects are already…


Micro-Frontends, where you take large UI components and live share them between applications, have huge potential, but the mechanics of implementing them can get in the way of realizing that value. In this article, and in its accompanying video, I look at how to use Webpack 5’s built in Module Federation feature to make sharing Micro-Frontend code easy.

In fact, Module Federation makes sharing components so easy that we get to think about two follow-on issues that come with Micro-FEs:

  1. How to have Micro-FEs share state without requiring the host page to add a Provider or mix the state into…


With the move to NodeJS we lost the architectural pattern of creating pluggable applications. Java application servers can be configured at runtime to override pluggable elements, like database drivers, etc. Can we get there with NodeJS? Yep! With the webpack plugin from ScandiPWA we can have our cake and eat it too!

Banner Image

Setting Up An App

The first job is to set up a Create React App. Let’s do this in a directory called scandi-test.

% mkdir scandi-test
% cd scandi-test
% yarn create react-app my-host-app

Once that’s done we can go into the host application and update it to use scandipwa-scripts

% cd…


So you want to use TypeScript in your React application, but even the hooks are giving you grief. Well, let’s get you comfortable with how to use TypeScript typing with those hooks and get you on your way.

Banner image

This article is meant to supplement the excellent React TypeScript Cheat Sheet which you should definitely take a look at.

useState

useState is a fun one because we use it all the time and most of the time it’s fine, until it’s not. Take this example:

const [myNumber, myNumberSet] = useState(10);const onClick = () => myNumberSet(20);

TypeScript is totally fine with this…


Here is an interesting question; are the types in your TypeScript project enough documentation, on their own, to allow someone to learn the library?

That was the question I asked myself when I saw the Amazon had released a React UI library for AWS. They only released the code and the TypeScript types. No documentation. No storybook or styleguidist. Just the code and the types.

Now I love digging into UI libraries. And this was a fun challenge. Can I learn the library from just the source? …


Vue 3 is a fantastic platform for creating Micro-Frontend components. And there are great frameworks out there to help with that, such as SingleSPA and OpenComponents.

Unless you plan on integrating your Vue components into applications that use a different framework you simplify your architecture dramatically by Webpack 5’s Module Federation to share and consume Micro-FE components.

Scenario

Let’s say that you and I work for a tap list service. That’s a service that bars and restaurants use to list their available beverages online. The bars enter the data into our service, and then use an iframe embedded on their site…


So you want to use useState and useContext as a state management solution, but every time the value of the context provider changes the entire tree gets re-rendered. You could use a library like Recoil, Valtio, Zustand, and Jotai to get around this problem, but you’d have to change how you store and access global state.

Is there a way to just fix the issues with useContext? Glad you asked! Yes there is! It’s react-tracked, a new library from Daishi Kato, who has been doing amazing work in the React state management space.

Banner image

Setting up Your useState/useContext Global Store

The first thing you need to do…


This recipe is based on this excellent article, but with adjustments to make it work with React 17.

  1. First let’s create a CRA React app:
npx create-react-app tw-test

2. Next install all the Tailwind, twin.macro, and emotion libraries:

yarn add tailwindcss twin.macro @emotion/core @emotion/styled @emotion/react

3. Next up, we initialize Tailwind.

npx tailwindcss init --full

This creates a tailwind.config.js file in the root directory, which we point to in the package.json .

4. Add a new babelMacros key to package.json

  "babelMacros": {
"twin": {
"config": "tailwind.config.js"
}
},

You can put the tailwind configuration anywhere you like in the tree…


There’s a lot of hype out about how Micro-Frontends are the next big technology trend of 2020. So let’s talk about what Micro-FEs are, why they are interesting, what some of the downsides are, and what the process is to go from a traditional architecture to a Micro-FE architecture.

If you want a video version of this essay check out the associated YouTube video.

What is a Micro-Frontend?

A Micro-Fronted (Micro-FE, or MFE) is the JS, HTML, and CSS required to render just a portion of a single page. That code is in it’s own project and maintained, versioned and…


For a variety of reasons vanilla JS is getting some renewed interest. If you are thinking “Vanilla JS, ugh, another framework I haven’t heard of!” I feel your pain, but vanilla JS means just writing code without a framework.

For example, to create a new tag in vanilla JS you do something like this:

const newImage = document.createElement('img');
newImage.src = '/myimage.jpg';
document.getElementById('container').appendChild(newImage);

This creates a new image tag, sets its source URL and adds it to a container element, maybe a div or something.

If you would rather do this:

const '<img src="/myImage.jpg">';
document.getElementById('container').innerHTML = html;

That’s cool, and totally…

Jack Herrington

I YouTube as the Blue Collar Coder on advanced FE topics. Check it out!

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