Javascript application performance can be tricky, even if the application has been well-tuned for speed — there’s a big area that engineering does not own and has little control over.

It’s the tag manager and third party code in general.

I can get an app to load and finish in 2 seconds. But with all the vendor code, the reality is usually a 2–3 additional seconds. There’s not much room for improvement left within the JS app itself.

There’s two Passions I have. Architecture and performance

I refused to accept that It could not be improved by engineering, without getting…


Part 1: Advanced Tactics to reduce App startup time

There’s lots of advice, but it seems to taper off when it comes to advanced performance tactics. I’ve read the articles, but it’s either too vague, too broad, or just basic stuff I have already done. Where are the more advanced articles on performance, most importantly — why are we not combining tech and talking about a stacked implementation?

This has been my real-world experience, tools, or tactics I've used. I like web performance and am a little obsessed. These ideas can be a little quirky or abstract, there are probably better ways to handle perf.

With that said…

The Basics


Advanced implementation tactics to attach a startup sequence to micro-frontend applications designed using Module Federation.

I’ll get this out the way right from the start, something that’s been requested hundreds of times now. You can set webpack_public_path dynamically (not hardcoded in the webpack config) with startup code, but there are easier solutions now built into webpack 💯 for dynamic public paths. Startup code has more advanced possibilities, but for the sake of introduction- I’m demonstrating a manual method that uses the startup code pattern. I’ll develop some better examples soon which demonstrate complex integrations.

What is startup code?

In the context of…


Image for post
Image for post
Photo by Ilya Pavlov on Unsplash

Module Federation was already powerful. So we doubled its power by introducing an advanced API. This technology is clearly a game-changer in javascript architecture

Beta 17 has been out for a week or so. It packs a powerful punch. Despite the power that’s been introduced in the latest release. We are far from completion.

Module Federation is just getting started.

What has changed?

Some Major work went into this release. Rewritten Externals Plugin, Changes to how webpack runtime works, Changes to the webpack graph, changes to chunking systems, and the startup sequence of webpack. …


Stitching two independent bundles into one single page application, at runtime

A short and sweet guide to using Module Federation on two independently deployed web apps, so that they can work like a monolith. Sharing code between themselves at runtime.

We’re going to federate two independent, very basic little react apps.

Image for post
Image for post
Photo by Kaleidico on Unsplash

What we have started out is a bare-bones React app, hosted on port 3001

// app1 - running on localhost:3001
import React from "react";

const App = () => (
<div>
<h1>Basic Host-Remote</h1>
<h2>App 1</h2>
</div>
);

export default App;

On port 3002 we have another single page application…


Module federation allows a JavaScript application to dynamically run code from another bundle/build, on client and server.

This is the JavaScript bundler equivalent of what Apollo did with GraphQL.

A scalable solution to sharing code between independent applications has never been convenient, and near impossible at scale. The closest we had was externals or DLLPlugin, forcing centralized dependency on a external file. It was a hassle to share code, the separate applications were not truly standalone and usually, a limited number of dependencies are shared. Moreover, sharing actual feature code or components between separately bundled applications is unfeasible, unproductive, and unprofitable.

What is Module Federation?

It’s a type of JavaScript architecture I invented and prototyped. Then with the help of my co-creator and the founder of Webpack — it was turned into one…


Importing chunks from other Webpack bundles at runtime, using them as if there were always there — interleaved applications

Update: This project is being rewritten and will be incorporated into Webpack 5!

This article describes how I wrote a Webpack plugin that imports chunks from other Webpack bundles at runtime. It is part of a larger series on micro-frontend applications and techniques for managing them.

The article is low level in some places, and it’s intended to document the journey of developing tools for interleaving. I will write higher level articles focused around using the tool, providing code samples and use cases.

Context

Building modern distributed JavaScript applications is complex. Managing multiple repositories, builds, and code sharing is a challenging…


High Performance Configuration for JetBrains IDEs [IntelliJ, WebStorm, etc..]

Motivation

Once you step into the realm of multi-project development, large scale dev, or just have to have like 6 IDE’s open. You really start to feel a performance hit on JetBrains IDEs.

This configuration aims to give at least 10x performance increases across the board.

Goals

  • Faster Indexing Times
  • More Responsive IntelliSense
  • Less random freezing or UI lockups
  • Better Memory Management
  • More multi-threading
  • Quicker startup time

What you need to do

The recommended way of changing the JVM options in the recent product versions is from the Help | Edit Custom VM Options menu. …


How to modernize a legacy application with micro-frontend technology.

This article is part of a series on micro-frontend applications and techniques for managing them.

Read the next one here

We are making some big changes to frontend architecture. Check out our progress on Webpack Module Federation:

This tutorial will discuss how to decouple your frontend from a monolith and begin migrating to micro frontend architecture immediately. This was one of my past projects

The Problem

Let us assume there’s a Monolithic codebase. This monolith uses one of the backend templating engines or systems (ex. EJS or ERB), jQuery, and it has no real considerations for frontend — or worse, it comes…


extract-css-chunks-webpack-plugin — the best CSS chunking plugin yet (Webpack 4, stand-alone, SSR Friendly, HMR Built In)!

I’m sure at one point or another we have all run into the inevitable problem, “I wanna server-side render my React app, but I really want code-splitting too.” — Welcome to hell.

I myself, like many, many others in the React community, faced the same dilemma.

And many of us have probably been holding out for React 17 to save the day… according to the guys working on it, it’s a long way away. Tears were shed, the reality was faced 😂.

What did I choose?

There were…

Zack Jackson

Principal Engineer of Web @ Lululemon. Specializing in Webpack and Javascript Orchestration at scale. Creator of Module Federation

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