Skip to content

Commit

Permalink
edits and stuff
Browse files Browse the repository at this point in the history
  • Loading branch information
@azuline
azuline committed Jul 2, 2024
1 parent 5611e53 commit 985dac4
Show file tree
Hide file tree
Showing 4 changed files with 31 additions and 29 deletions.
5 changes: 5 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# sunsetglow

Static site; posts in LaTeX, pages in Jinja. Built with Pandoc and Python script; deployed to Nomad.

JavaScript is bad.
10 changes: 3 additions & 7 deletions src/assets/css/post.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@
top: 2rem;
max-height: calc(100vh - 4rem);
overflow-y: auto;
font-size: var(--font-size-xs);
}
.pandoc #TOC a {
color: var(--color-fg-secondary);
Expand Down Expand Up @@ -86,18 +87,13 @@
padding-bottom: 1rem;
}

.pandoc h3 {
.pandoc h3,
.pandoc h4{
font-size: var(--font-size-lg);
padding-top: 1rem;
padding-bottom: .75rem;
}

.pandoc h4 {
font-size: var(--font-size-md);
padding-top: 1rem;
padding-bottom: .75rem;
}

.pandoc p,
.pandoc pre,
.pandoc blockquote {
Expand Down
3 changes: 2 additions & 1 deletion src/posts/post.html.jinja
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
entries.forEach(entry => {
const id = entry.target.getAttribute("id");
const element = document.querySelector(`#TOC li a[href="#${id}"]`);
if (!element) return;
if (entry.intersectionRatio > 0) {
element.classList.add("active");
} else {
Expand All @@ -30,7 +31,7 @@
<body>
<div class="w-content mx-auto py-8 px-6">
<div class="column">
<div class="text-sm label mono"><a class="decoration-none fg-primary" href="/">sunset glow</a></div>
<div class="text-sm label"><a class="decoration-none fg-primary" href="/">Home</a></div>
<div class="py-16 flex flex-col gap-8" />
<div class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
Expand Down
42 changes: 21 additions & 21 deletions src/posts/tex/frontend-build-systems.tex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@
like JSX are not valid JavaScript and will not run in any browser.

\item \tb{Performance:} The browser must request each JavaScript file individually. In a large
codebase, this can result in thousands of HTTP requests in order to render a single page. In the
past, prior to HTTP/2, this would also result in thousands of TLS handshakes.
codebase, this can result in thousands of HTTP requests to render a single page. In the past,
before HTTP/2, this would also result in thousands of TLS handshakes.

In addition, several sequential network round trips may be needed before all the JavaScript is
loaded. For example, if \tc{index.js} imports \texttt{page.js} and \texttt{page.js} imports
Expand All @@ -28,8 +28,8 @@
indentation characters, increasing bandwidth usage and network loading time.
\end{enumerate}

Frontend build systems process source code and emit one or more JavaScript files which are optimized
for sending to the browser. The resulting \ti{distributable} is typically illegible to humans.
Frontend build systems process source code and emit one or more JavaScript files optimized for
sending to the browser. The resulting \ti{distributable} is typically illegible to humans.

\section{Build Steps}

Expand All @@ -50,7 +50,7 @@ \subsection{Transpilation}
days, ES6/ES2015 is a common target.

Frameworks and tools may also introduce transpilation steps. For example, the JSX syntax must be
transpiled to JavaScript. If a library offers a Babel plugin, that usually means that they require a
transpiled to JavaScript. If a library offers a Babel plugin, that usually means that it requires a
transpilation step. Additionally, languages such as TypeScript, CoffeeScript, and Elm must be
transpiled to JavaScript.

Expand Down Expand Up @@ -84,7 +84,7 @@ \subsection{Transpilation}
Modules.

An alternative solution for a subset of unsupported language features is a polyfill. Polyfills are
executed at runtime and implement any missing language features prior to executing the main
executed at runtime and implement any missing language features before executing the main
application logic. However, this adds runtime cost, and some language features cannot be polyfilled.
See \href{https://github.com/zloirock/core-js}{core-js}.

Expand All @@ -99,7 +99,7 @@ \subsection{Bundling}
Bundling solves the need to make many network requests and the waterfall problem. Bundlers
concatenate multiple JavaScript source files into a single JavaScript output file, called a bundle,
without changing application behavior. The bundle can be efficiently loaded by the browser in a
single round trip network request.
single round-trip network request.

The bundlers in common use today are Webpack, Parcel, Rollup, esbuild, and Turbopack.

Expand Down Expand Up @@ -133,11 +133,11 @@ \subsection{Bundling}
Webpack, Rollup, and Parcel. Esbuild implements a basic transpiler as well as a minifier.
However, it is less featureful than the other bundlers, providing a limited plugin API that
cannot directly modify the AST. Instead of modifying source files with an esbuild plugin, the
files can be transformed prior to being passed to esbuild.
files can be transformed before being passed to esbuild.

\item \href{https://turbo.build/pack}{\tb{Turbopack}} (2022) is a fast Rust bundler that supports
incremental rebuilds. The project is built by Vercel and led by the creator of Webpack. It is
currently in beta and may be opted-into in Next.js.
currently in beta and may be opted into in Next.js.
\end{enumerate}

It is reasonable to skip the bundling step if you have very few modules or have very low network
Expand All @@ -148,7 +148,7 @@ \subsection{Bundling}
\subsubsection{Code Splitting}
}

By default, a client side React application is transformed into a single bundle. For large
By default, a client-side React application is transformed into a single bundle. For large
applications with many pages and features, the bundle can be very large, negating the original
performance benefits of bundling.

Expand All @@ -166,7 +166,7 @@ \subsubsection{Code Splitting}
Loading a page preloads all bundles used by that page in parallel. This optimizes bundle size
without re-introducing the waterfall problem. The filesystem router achieves this by creating one
entry point per page (\tc{pages/**/*.jsx}), as opposed to the single entry point of traditional
client side React apps (\tc{index.jsx}).
client-side React apps (\tc{index.jsx}).

\hypertarget{tree-shaking}{
\subsubsection{Tree Shaking}
Expand Down Expand Up @@ -203,8 +203,8 @@ \subsubsection{Static Assets}
Webpack ``loaders'' allowed the importing of static assets from JavaScript, unifying both code and
static assets into a single dependency graph. During bundling, Webpack replaces the static asset
import with its final path inside the distributable. This feature enabled static assets to be
organized with its associated components in the source code and created new possibilities for static
analysis, such as detecting non-existent assets.
organized with their associated components in the source code and created new possibilities for
static analysis, such as detecting non-existent assets.

It is important to recognize that the importing of static assets
(non-JavaScript-or-transpiles-to-JavaScript files) is not part of the JavaScript language. It
Expand Down Expand Up @@ -233,7 +233,7 @@ \subsection{Minification}
\section{Developer Tooling}

The basic frontend build pipeline described above is sufficient to create an optimized production
distributable. There exist several classes of tools which augment the basic build pipeline and
distributable. There exist several classes of tools that augment the basic build pipeline and
improve upon developer experience.

\subsection{Meta-Frameworks}
Expand Down Expand Up @@ -266,8 +266,8 @@ \subsection{Sourcemaps}

Each step of the build pipeline can emit a sourcemap. If multiple build tools are used to construct
the pipeline, the sourcemaps will form a chain (e.g. \tc{source.js} -> \texttt{transpiler.map} ->
\tc{bundler.map} -> \texttt{minifier.map}). In order to identify the source code corresponding to
the minified code, the chain of source maps must be traversed.
\tc{bundler.map} -> \texttt{minifier.map}). To identify the source code corresponding to the
minified code, the chain of source maps must be traversed.

However, most tools are not capable of interpreting a chain of sourcemaps; they expect at most one
sourcemap per file in the distributable. The chain of sourcemaps must be flattened into a single
Expand All @@ -291,11 +291,11 @@ \subsection{Hot Reload}
become slow due to the growing rebundling cost.

The \href{https://vitejs.dev/guide/why.html}{no-bundle paradigm}, currently championed by Vite,
counters this by choosing to not bundle the development server. Instead, Vite serves ESM modules,
each corresponding to a source file, directly to the browser. In this paradigm, each code change
triggers a single module replacement in the frontend. This results in a near-constant refresh time
complexity relative to application size. However, if you have many modules, the initial page load
may take longer.
counters this by not bundling the development server. Instead, Vite serves ESM modules, each
corresponding to a source file, directly to the browser. In this paradigm, each code change triggers
a single module replacement in the frontend. This results in a near-constant refresh time complexity
relative to application size. However, if you have many modules, the initial page load may take
longer.

\subsection{Monorepos}

Expand Down

0 comments on commit 985dac4

Please sign in to comment.