Page 2
Switching from Next.js to Vite + wouter
July 28, 2023
0 comments React, Node, JavaScript
Next.js is a full front-end web framework. Vite is a build tool so they don't easily compare. But if you're building a single-page app ("SPA"), the difference isn't that big, especially if you bolt on a routing library which is something that Next.js has built in.
My SPA is a relatively straight forward one. It's a React app that uses wonderful Mantine UI framework. The app is CRM for real-estate agents that I've been hacking on with my wife. SEO is not a concern because you can't do anything until you've signed in. So server-side rendering is not a requirement. In that sense, it's like loading Gmail. Yes, users might want a speedy first load when they open it in a fresh new browser tab, but the static assets are most likely going to be heavily (browser) cached by the few users it has.
With that out of the way, let's skim through some of the differences.
Build times
Immediately, this is a tricky one to compare because Next.js has the ability to cache. You get that .next/cache/
directory which is black magic to me, but it clearly speeds things up. And it's incremental so the caching can help partially when only some of the code has changed.
Running, npm run build && npm run export
a couple of times yields:
Next.js
Without no .next/cache/
directory
Total time to run npm run build && npm run export
: 52 seconds
With the .next/cache/
left before each build
Total time to run npm run build && npm run export
: 30 seconds
Vite
Total time to run npm run build
: 12 seconds
A curious thing about Vite here is that its output contains a measurement of the time it took. But I ignored that and used /usr/bin/time -h ...
instead. This gives me the total time.
I.e. the output of npm run build
will say:
✓ built in 7.67s
...but it actually took 12.2 seconds with /usr/bin/time
.
Build artifacts
Perhaps not very important because Next.js automatically code splits in its wonderfully clever way.
Next.js
❯ du -sh out 1.8M out
❯ tree out | rg '\.js|\.css' | wc -l 52
Vite
❯ du -sh dist 960K dist
and
❯ tree dist/assets dist/assets ├── index-1636ae43.css └── index-d568dfbf.js
Again, it's probably unfair to compare at this point. Most of the weight of these static assets (particularly the .js
files) is due to Mantine components being so heavy.
Routing
This isn't really a judgment in any way. More of a record how it differs in functionality.
Next.js
In my app, that I'm switching from Next.js to Vite + wouter, I use the old way of using Next.js which is to use a src/pages/*
directory. For example, to make a route to the /account/settings
page I first create:
// src/pages/account/settings.tsx
import { Settings } from "../../components/account/settings"
const Page = () => {
return <Settings />
}
export default Page
I'm glad I built it this way in the first place. When I now port to Vite + wouter, I don't really have to touch that src/components/account/settings.tsx
code because that component kinda assumes it's been invoked by some routing.
Vite + wouter
First I installed the router in the src/App.tsx
. Abbreviated code:
// src/App.tsx
import { Routes } from "./routes"
export default function App() {
const { myTheme, colorScheme, toggleColorScheme } = useMyTheme()
return (
<ColorSchemeProvider
colorScheme={colorScheme}
toggleColorScheme={toggleColorScheme}
>
<MantineProvider withGlobalStyles withNormalizeCSS theme={myTheme}>
<Routes />
</MantineProvider>
</ColorSchemeProvider>
)
}
By the way, the code for Next.js looks very similar in its src/pages/_app.tsx
with all those contexts that Mantine make you wrap things in.
And here's the magic routing:
// src/routes.tsx
import { Router, Switch, Route } from "outer"
import { Home } from "./components/home"
import { Authenticate } from "./components/authenticate"
import { Settings } from "./components/account/settings"
import { Custom404 } from "./components/404"
export function Routes() {
return (
<Router>
<Switch>
<Route path="/signin" component={Authenticate} />
<Route path="/account/settings" component={Settings} />
{/* many more lines like this ... */}
<Route path="/" component={Home} />
<Route>
<Custom404 />
</Route>
</Switch>
</Router>
)
}
Redirecting with router
This is a made-up example, but it demonstrates the pattern with wouter compared to Next.js
Next.js
const { push } = useRouter()
useEffect(() => {
if (user) {
push('/signedin')
}
}, [user])
wouter
const [, setLocation] = useLocation()
useEffect(() => {
if (user) {
setLocation('/signedin')
}
}, [user])
Linking
Next.js
import Link from 'next/link'
// ...
<Link href="/settings" passHref>
<Anchor>Settings</Anchor>
</Link>
wouter
import { Link } from "wouter"
// ...
<Link href="/settings">
<Anchor>Settings</Anchor>
</Link>
Getting a query string value
Next.js
import { useRouter } from "next/router"
// ...
const { query } = useRouter()
if (query.name) {
const name = Array.isArray(query.name) ? query.name[0] : query.name
// ...
}
wouter
import { useSearch } from "wouter/use-location"
// ...
const search = useSearch()
const searchParams = new URLSearchParams(search)
if (searchParams.get('name')) {
const name = searchParams.get('name')
// ...
}
Conclusion
The best thing about Next.js is its momentum. It gets lots of eyes on it. Lots of support opportunities and great chance of its libraries being maintained well into the future. Vite also has great momentum and adaptation. But wouter is less "common".
Comparing apples and oranges is often counter-productive if you don't take all constraints and angles into account and those are usually quite specific. In my case, I just want to build a single-page app. I don't want a Node server. In fact, my particular app is a Python backend that does all the API responses from a fetch
in the JavaScript app. That Python app also serves the built static files, including the dist/index.html
file. That's how my app can serve the app straight away if the current URL is something like /account/settings
. A piece of Python code (more or less the only code that doesn't serve /api/*
URLs) collapses all initial serving URLs to serve the dist/index.html
file. It's a classic pattern and honestly feels a bit dated in 2023. But it works. And what's so great about all of this is that I have a multi-stage Dockerfile
that first does the npm run build
(and some COPY --from=frontend /home/node/app/dist ./server/out
) and now I can "lump" together the API backend and the front-end code in just 1 server (which I host on Digital Ocean).
If you had to write a SPA in 2023 what would you use? In particular, if it has to be React. Remix is all about server-side rendering. Create-react-app is completely unsupported. Building it from scratch yourself rolling your own TypeScript + Eslint + Rollup/esbuild/Parcel/Webpack does not feel productive unless you have enough time and energy to really get it all right.
In terms of comparing the performance between Next.js and Vite + wouter, the time it takes to build the whole app is actually not that big a deal. It's a rare thing to do. It's something I do after a long coding/debugging session. What's more pressing is how npm run dev
works.
With Vite, I type npm run dev
and hit Enter. Faster than I can almost notice, after hitting Enter I see...
VITE v4.4.6 ready in 240 ms ➜ Local: http://localhost:3000/ ➜ Network: use --host to expose ➜ press h to show help
and I'm ready to open http://localhost:3000/
to play. With Next.js, after having typed npm run dev
and Enter, there's this slight but annoying delay before it's ready.
Benchmark comparison of Elasticsearch highlighters
July 5, 2023
0 comments Elasticsearch
tl;dr; fvh
is marginally faster than unified
and unified
is a bit faster than plain
.
When you send a full-text search query to Elasticsearch, you can specify (if and) how it should highlight, with HTML tags, highlights. E.g.
The correct way to index data into <mark>Elasticsearch</mark> with (Python) <mark>elasticsearch</mark>-dsl
Among other configuration options, you can pick one of 3 different highlighter algorithms:
The last one, fvh
, requires that you index more at index-time (in particular to add term_vector="with_positions_offsets"
to the mapping). In a previous benchmark I did, the total document size on disk, as described by http://localhost:9200/_cat/indices?v
grew by 38%.
I bombarded my local Elasticsearch 7.7 instance with thousands of queries collected from logs. Some single-word, some multi-word. The fields it highlights are things like title
(~5-50 words) and body
(~100-2,000 words).
Basically, I edited the search query by testing one at a time. For example:
search_query = search_query.highlight(
- "title", fragment_size=120, number_of_fragments=1, type="unified"
+ "title", fragment_size=120, number_of_fragments=1, type="plain"
)
...etc.
After doing 1,000 searches 3 different times per each highlighter type
option, and recording the times it took I recorded the following:
(milliseconds per query, lower is better)
UNIFIED: MEAN 18.1ms MEDIAN 19.0ms PLAIN: MEAN 24.5ms MEDIAN 27.5ms FVH: MEAN 16.1ms MEDIAN 17.6ms
Thin marginal win for fvh
over unified
.
Conclusion
Conclusion? Or should I say "Caveats" instead? There's a lot more to it than raw performance speed. In this benchmark, it takes ~20 milliseconds to search on 2 different indexes, each with a scoring function and indexes containing between 1,000 and 5,000 documents with hundreds of thousands of words. So it's pretty minor.
Each highlighter performs slightly differently too, so you'd have to study the outcome a bit more carefully to get a better feel for if it works the way you and your team prefer it to work.
If there's any conclusion, other than the boring usual "it depends on your setup and preferences", the performance difference is noticeable but not blowing you away. It makes sense that fvh
is a bit faster because you've paid for it by indexing more upfront (the offsets) at the expense of memory.
How I used Parcel to "manually" bundle CSS files in a Remix app
May 31, 2023
0 comments JavaScript
I recently switch from Nextjs to Remix for my personal website. One thing I struggled with was to have it merge individual .css
files into one. So I solved it with the Parcel CLI. This blog post demonstrates how.
The problem
Note, first of all, this talks about the global CSS. You can and should still employ CSS Modules or something equivalent for CSS that is tied directly to a React component.
But global CSS has its place and purpose. The problem is that there's no convenient way to bundle multiple little .css
files into one which you can then nest into routes in Remix.
The way you inject CSS into a Remix page is like this:
import highlight from "~/styles/highlight.css";
import blogpost from "~/styles/blogpost.css";
...
export function links() {
return [
{ rel: "stylesheet", href: highlight },
{ rel: "stylesheet", href: blogpost },
}
And for the record, suppose you have a nested route that needs those, and another one you do:
import banner from "~/styles/banner.css";
import { links as rootLinks } from "./_index";
...
export function links() {
return [
...rootLinks().filter((x) => !x.extra),
{ rel: "stylesheet", href: banner },
];
}
This will nicely pick up those source .css
files, minify them and produce in the final HTML SSR output:
<link rel="stylesheet" href="/build/_assets/highlight-KI4AX52K.css"/>
<link rel="stylesheet" href="/build/_assets/blogpost-75V4EYTP.css"/>
Nice. Http2 is famously good at parallel downloads. But even that has its physical limits. Especially if you have many little .css
files that make up all the CSS you need. Now you have multiple files that can get stuck on the network. Yes, you might be able to update 1 and keep caching the others if their fingerprint don't change, but this is likely to be rare.
Parcel to the rescue
I solved it by using the Parcel CLI. In package.json
I have:
"parcel:build": "parcel build --dist-dir app/styles/build app/*.css",
And in app/global.css
I have this:
/* This is app/global.css */
@import "../node_modules/@picocss/pico/css/pico.css";
@import "./styles/globals.css";
@import "./styles/message.css";
@import "./styles/nav.css";
@import "./styles/comments.css";
@import "./styles/carbonads.css";
@import "./styles/carbonads-outer.css";
@import "./styles/modal-search.css";
That means, that Parcel will bundle all of these app/*.css
files into 1 app/styles/build/global.css
Now, I can refer to that built on in the Remix app:
import global from "~/styles/build/global.css";
...
export function links() {
return [
{ rel: "stylesheet", href: global },
]
}
Build vs. dev
Ok, so that explains how to bundle individual CSS files before you actually use the bundled CSS files. Remix doesn't care (a good thing).
At this point, we've modularized the problem. Now Parcel can do what it does best (CSS bundling (among other things it can do)) and Remix can do what it does (serving the .css
files into the HTML).
But just like it's ergonomically pleasant to bundle CSS files like this, we still want it so that you don't have to manually run a separate step to build the bundle every time you edit an individual source .css
file (e.g. app/styles/nav.css
)
Here's how I solved that split up by Dev and Build
Build
"scripts": {
- "build": "remix build",
+ "build": "npm run parcel:build && remix build",
+ "parcel:build": "parcel build --dist-dir app/styles/build app/*.css",
Now, npm run build
will do both things.
Dev
"scripts": {
"dev": "npm-run-all build --parallel \"dev:*\"",
"dev:node": "cross-env NODE_ENV=development esrun --watch ./server.ts ",
"dev:remix": "remix watch",
+ "dev:parcel": "parcel watch --dist-dir app/styles/build app/global.css",
In conclusion
I admit, I'm a CSS Modules fan-boy and it saddens me how much global CSS I have. One thing at a time, I guess. They both have their powers; global and modular CSS, but I'll admit that my own personal site still relies a bit too much on global CSS. At least, little goes to waste because Remix makes it relatively easy to pick exactly which files you need for individual routes.
Be careful with Date.toLocaleDateString() in JavaScript
May 8, 2023
4 comments Node, MacOSX, JavaScript
tl;dr; Always pass timeZone:"UTC"
when calling Date.toLocaleDateString
The surprise
In my browser's web console:
>>> new Date('2014-11-27T02:50:49Z').toLocaleDateString("en-us", {day: "numeric"}) "26"
On my server located in the same time zone:
Welcome to Node.js v16.13.0. Type ".help" for more information. > process.env.TZ undefined > new Date('2014-11-27T02:50:49Z').toLocaleDateString("en-us", {day: "numeric"}) '26'
Here on my laptop:
Welcome to Node.js v16.20.0. Type ".help" for more information. > process.env.TZ undefined > new Date('2014-11-27T02:50:49Z').toLocaleDateString("en-us", {day: "numeric"}) '27'
What! Despite $TZ
not being set, it formats according to something else.
02:50 Zulu means, to me, in the US Eastern time zone, the day before.
Why this matters
I kept getting this production error from React that the SSR-rendered HTML differed from the client-side rendered HTML. Strangely, I could never reproduce this locally and the error doesn't say what's different. All the Stack Overflow suggestions and Google results speak of the most basic easy things to check. It's not unusual that this happens when dealing with dates because even though the database (PostgreSQL) stores the dates in full UTC, sometimes when data travels via app servers through JSON pipelines, date formatting can drop important bits.
But here, '2014-11-27T02:50:49Z'
is specific.
What made this so incredibly hard to debug was that it worked on one page but not on the other even though the two had the same exact component code. I broke it apart thinking there was something nasty in the content of the Markdown-rendered HTML. No. The reason it only happened on some pages was that I had a function that looked like this:
export function formatDateBasic(date: string) {
return new Date(date).toLocaleDateString("en-us", {
year: "numeric",
month: "long",
day: "numeric",
});
}
And, different pages listed, almost non-deterministic, with different dates for related content which was referred to along with their dates. So on one page, there might be a single date that formats differently in EDT (Eastern daylight-saving time) compared to UTC. For example, Apr 1 at 18:00 Zulu, is still Apr 1 in EDT.
The explanation
I'm sorry that I don't understand this better, but Node's implementation of Date.toLocaleDateString
does more than depend on process.env.TZ
. I think $TZ
is just a way to gain control.
For example, start the node
REPL like this:
On my Ubuntu 20.04 server:
$ TZ=utc node Welcome to Node.js v16.20.0. Type ".help" for more information. > new Date('2014-11-27T02:50:49Z').toLocaleDateString("en-us", {day: "numeric"}) '27'
On my MacBook:
❯ TZ=utc node Welcome to Node.js v16.13.0. Type ".help" for more information. > new Date('2014-11-27T02:50:49Z').toLocaleDateString("en-us", {day: "numeric"}) '27'
To find out what timezone your computer has:
On Ubuntu:
$ timedatectl Local time: Mon 2023-05-08 12:42:03 UTC Universal time: Mon 2023-05-08 12:42:03 UTC RTC time: Mon 2023-05-08 12:42:04 Time zone: Etc/UTC (UTC, +0000) System clock synchronized: yes NTP service: active RTC in local TZ: no
On macOS:
❯ sudo systemsetup -gettimezone Password: Time Zone: America/New_York
The solution
Setting TZ
is probably a good thing. That can get a bit tricky though. Your code needs to run consistently on your laptop, in GitHub Actions, on a VPS server, in an Edge cloud function, etc.
A better way is to force Date.toLocaleString
to be fed a timezone. Now it's controlled at the highest level:
export function formatDateBasic(date: string) {
return new Date(date).toLocaleDateString("en-us", {
year: "numeric",
month: "long",
day: "numeric",
+ timeZone: "UTC"
});
}
Now, it no longer depends on the OS it runs on.
On my Ubuntu server:
Welcome to Node.js v16.20.0. Type ".help" for more information. > new Date('2014-11-27T02:50:49Z').toLocaleDateString("en-us", {day: "numeric", timeZone: "UTC"}) '27'
On my macOS:
Welcome to Node.js v16.13.0. Type ".help" for more information. > new Date('2014-11-27T02:50:49Z').toLocaleDateString("en-us", {day: "numeric", timeZone: "UTC"}) '27'
Fun fact
I once made it unnecessarily weird for me in the debugging session, when I figured out about the timeZone
option. What I ran was this:
Welcome to Node.js v16.13.0. Type ".help" for more information. > new Date('2014-11-27T02:50:49Z').toLocaleDateString("en-us", {day: "numeric", zimeZone: "UTC"}) '26'
I expected it to be '27'
now but why did it revert?? Notice the typo? And Date.toLocaleDateString
won't throw an error for passing in options it doesn't expect.
How to run a GitHub Action workflow step if a file exists
April 24, 2023
2 comments GitHub
Suppose you have a GitHub Action workflow that does some computation and a possible outcome is that file comes into existence. How do you run a follow-up step based on whether a file was created?
tl;dr
- name: Is file created?
if: ${{ hashFiles('test.txt') != '' }}
run: echo "File exists"
The "wrong" way
Technically, there's no wrong way, but an alternative might be to rely on exit codes. This would work.
- name: Check if file was created
run: |
if [ -f test.txt ]; then
echo "File exists"
exit 1
else
echo "File does not exist"
fi
- name: Did the last step fail?
if: ${{ failure() }}
run: echo "Last step failed, so file must have maybe been created"
The problem with this is that not only leaves a red ❌ in the workflow logs, but it could also lead to false positives. For example, if the step that might create a file is non-trivial, you don't want to lump the creation of the file with a possible bug in your code.
A use case
What I needed this for was a complex script that was executed to find broken links in a web app. If there were broken links, only then do I want to file a new issue about that. If the script failed for some reason, you want to know that and work on fixing whatever its bug might be. It looked like this:
- name: Run broken link check
run: |
script/check-links.js broken_links.md
- name: Create issue from file
if: ${{ hashFiles('broken_links.md') != '' }}
uses: peter-evans/create-issue-from-file@433e51abf769039ee20ba1293a088ca19d573b7f
with:
token: ${{ env.GITHUB_TOKEN }}
title: More than one zero broken links found
content-filepath: ./broken_links.md
repository: ${{ env.REPORT_REPOSITORY }}
labels: ${{ env.REPORT_LABEL }}
That script/check-links.js
script is given an argument which is the name of the file to write to if it did indeed find any broken links. If there were any, it generates a snippet of Markdown about them which is the body of filed new issue.
Demo
To be confident this works, I created a dummy workflow in a test repo to test. It looks like this: .github/workflows/maybe-fail.yml
Automatically 'npm install'
April 6, 2023
0 comments Node, JavaScript
I implemented this at work recently and although it felt like a hack, I've come to like it and it's been very helpful to our many contributors.
As (Node) engineers, we know that you should keep your node_modules
up-to-date by running npm install
periodically or every time you git pull
from the upstream. It could be that some package got upgraded last night since you git pulled last time.
But not everyone remembers to run npm install
often enough. They might do git pull origin main && npm start
and now the code that starts up depends on some latest version that was upgraded in package.json
and package-lock.json
.
How we solved it was that we added this script:
node script/cmp-files.js package-lock.json .installed.package-lock.json || npm install && cp package-lock.json .installed.package-lock.json
And it's hooked up as a script in package.json
called prestart
:
"scripts": { ... "prestart": "node script/cmp-files.js ...", ... }
Now, every time you run npm start
to start up the local development server, it will run that piece of bash. No more having to remember to run npm install
after every git pull
.
A note on performance
The npm install
command is fast when all packages are already updated. You can see it with:
# First time
$ npm install
# Second time when nothing should happen
$ time npm install
...
2.53s user 0.37s system 134% cpu 2.166 total
So it only takes 2 seconds. Not bad.
$ time node script/cmp-files.js package-lock.json .installed.package-lock.json
...
0.08s user 0.03s system 100% cpu 0.110 total
But 0.08 seconds is better :)
The comparison script
The cmp-files.js
script looks like this:
#!/usr/bin/env node
// Given N files. Exit 0 if they all exist and are identical in content.
import fs from 'fs'
import { program } from 'commander'
program.description('Compare N files').arguments('[files...]', '').parse(process.argv)
main(program.args)
function main(files) {
if (files.length < 2) throw new Error('Must be at least 2 files')
try {
const contents = files.map((file) => fs.readFileSync(file, 'utf-8'))
if (new Set(contents).size > 1) {
process.exit(1)
}
} catch (error) {
if (error.code === 'ENOENT') {
process.exit(1)
} else {
throw error
}
}
}
The file .installed.package-lock.json
file is added to the repo's .gitignore
Note; given how well this works for running before npm start
we can probably add this to a post-checkout git
hook too.