6. Oct 2023Frontend

Frontend Briefly - News and insights from the world of frontend development #13

After a longer break, we have the latest updates, articles, and tweets from the frontend world again! 🎉 In September, we've prepared the top 8 updates that shouldn't be missed by any frontend developer. In addition, here you will find links to other interesting articles that are worth reading.

Andrej NemečekFrontend Developer

1. Node.js 16 died prematurely

Node.js 16 is dead since September 11, 2023. Support for version 16 ended seven months early to coincide with the end of support for OpenSSL 1.1.1. The current LTS version is Node 18, but I recommend you already migrate directly to Node 20. Active support for Node 18 ends in a few days, on October 18, 2023. Then, from October 25, 2023, there is a new LTS version of Node 20 with support until April 30, 2026. In addition, there is also native support for.env files in Node 20, which is another reason to migrate to version 20 🎉.

What's the difference between LTS and Current versions?
LTS versions are considered stable and intended for production environments. They are supported for a longer period of time, typically 30 months from the release date. During this time, critical bug fixes and security updates are regularly provided for the LTS version.
The current version includes the latest features, improvements, and updates. However, they may still undergo testing and are not recommended for use in a production environment. Current releases are a preview of what the next LTS version will be after testing, stabilisation, and community feedback.

Resource : `https://nodejs.dev/en/about/releases/`

2. Bun 1.0

Bun 1.0 is a new and fast JavaScript runtime. Kind of like Node.js but faster. Its goal is to make developers' work easier and save time on setting up various JS tools. What is Bun?

A replacement for Node.js, so you don´t need:

node
npx — bunx is 5 times faster
dotenv, cross-env — Bun can read .env files (now also in Node.js 😜)
nodemon, pm2 — built-in watch mode
ws — built-in WebSocket server
node-fetch, isomorphic-fetch — built-in fetch (now also in Node.js 😜)

Transpiler — Bun can work with .js, .ts, .cjs, .mjs, .jsx, a .tsx files, so you can replace:

tsc
babel, .babelrc, @babel/preset-*
ts-node, ts-node-esm
tsx

Bundler — Bun is JavaScript bundler, so you don´t need:

esbuild
webpack
parcel, .parcelrc
rollup, rollup.config.js

Package manager — Bun is an npm-compatible package manager, so you can replace:

npm, .npmrc, package-lock.json
yarn, yarn.lock
pnpm, pnpm.lock, pnpm-workspace.yaml
lerna

And lots of other "improvements." You can find all the new features on the Bun blog.

2.1 Is it time to replace Node with Bun?

There's a big hype around Bun.js in the community. Does it mean we should replace Node.js?

I would still wait and not make premature decisions. I recommend reading the article: Bun hype. How we learned nothing from Yarn. It's one of the best articles I've read recently. The ideas in the article don´t just apply to the hype around Bun, but to any hype in the developer community. If I have to pick one idea from the article, it´s this one: "Okay, so Yarn came around, forced npm to get better, and then died." Another interesting article is My thoughts on Bun and other Adventures. Also, check out the comparison of Node, Deno, and Bun in the article: Node.js vs. Deno vs. Bun: JavaScript runtime comparison.

3. Next.js 13.5

If you found Next.js slow and resource-intensive, try updating it to the latest version. Next.js 13.5 comes with the following improvements:

22% faster local server startup
29% faster HMR (Hot Reload)
40% less memory usage with the next start
Optimised package imports
next/image improvements
Find more on the blog

4. Server Components

React has celebrated its 10th anniversary, yet it continues to bring groundbreaking improvements. A few months ago, React introduced Server Components. It will be a big change for React and frontend developers. That's why a lot of questions arise: what is it, how does it work, what are the benefits, or if it's the same as SSR...If you're also looking for answers to these questions, I found two great articles where you can find the answers:

You can also find the first experience with Server Components from a speed perspective in this article: React Server Components Made Our Site Faster.

5. Browser News

The biggest news that will ease developers a lot of nerves and work are exit/entry animations. Finally, we don't have to install different animation libraries just to animate display: none. Now, the browser can handle these animations natively thanks to the transition-behavior: allow-discrete attribute or @starting-style rule. More can be found in the article: Four new CSS features for smooth entry and exit animations. Support is only in Chrome and Edge as of version 117. For other Chrome browser news, check out the article: New in Chrome 117.

A lot of new features have also been added to Safari. You can find all the new features on their blog at WebKit Features in Safari 17.0

6. Astro 3.0

Astro 3.0 is the first major web framework that supports the View Transitions API. It offers smoother web navigation with animation support, which was previously possible only in single-page applications (SPA). If you want to know more about the View Transitions API, read the article: View Transitions API & meta frameworks: a practical guide.

Other big updates in Astro v3 are:

Image optimization (stable)
Faster rendering
SSR improvements for serverless
HMR improvements for JSX
Optimized build

7. State of HTML & CSS

Frontend developers often focus only on JavaScript and CSS, but nothing what we do would be possible without HTML. It may seem that HTML isn't evolving, but in reality, new elements and functionality are being added to HTML. If you want to know what's new in web development, check out the State of HTML 2023 and also the State of CSS 2023.. If you participate in the survey, you'll help s et the trend for the next evolution of web development.

8. New React Courses

The Joy of React and react.gg are two modern courses that are worth taking. They offer an interactive way to master modern React. I'm also a bit jealous that these courses didn't exist when I started with React. However, even more experienced React developers can benefit from these courses. You'll learn about new features like server components, suspense, or concurrent rendering.