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

1. Next.js 13

The biggest update of Next since its release is finally here 🎉. It was presented in style at the Next.js Conf 2022 conference, which I definitely recommend watching. Here are some news:

• folder app/ (beta) that supports Layouts, React Server Components, Streaming
• Turbopack bundler (alpha): Up to 700x faster than Webpack
• New next/image (stable): Faster and with native lazy loading support
• New @next/font (beta): Without layout shift.
• Improved next/link: Simplified API.

However, the new version of Next also has several breaking changes, e.g. the minimum version of React has been moved from 17.0.2 to 18.2.0. You can also find everything important on the Next blog.

2. Turbopack

In Next.js, tools such as Babel or Terser built on JavaScript were gradually replaced by Rust alternatives. These changes brought a significant speedup of code transpilation or minification. In the case of replacing Babel with the Rust compiler (built on SWC), the acceleration was up to 17 times. And replacing Terser with SWC Minifier made minification 6x faster.

Now it's time to replace Webpack with Turbopack, also built on Rust. Here are some (marketing) comparisons:

• 10x faster than Vite and 700x faster than Webpack
• Turbopack can run an application with 3,000 modules in 1.8 seconds. In the case of the Vite, it is 11.4 seconds.

Turbopack will be used in Next.js 13 as a development server, and later it will also provide a production build. You can read everything important on the Vercel blog.

‍

The question is to what extent these are marketing numbers. Evan You, the creator of Vite, wrote a reaction to the first (marketing) benchmarks:

3. Node.js 18 LTS

Node.js 18 is in Long-term Support (LTS) 6 months after its release. You can easily develop new applications on the new Node and update older projects. Node.js 18 will be supported until April 2025. The biggest changes are e.g.:

• Update V8 JavaScript engine on 10.1
• fetch API (experimental)
• Web Streams API (experimental)
• Blob, BroadcastChannel
• Test runner module (experimental)

You can find more on the Node.js website or on the node.green website, where you can view a clear table with supported functionality for all its versions.

‍

4. The future of the web is on the Edge

We usually deploy our web applications on a server in one of the large data centers, e.g. in California, Germany... However, the future trend is different. We can already distribute static content around the world closer to users via CDN. However, this trend is also starting for dynamic web applications that you can deploy anywhere in the world. Is the future of the web on the Edge? You can find out on the Deno blog.

‍

5. State Of CSS Survey

Take a few minutes to fill out the survey: State of CSS 2022. In addition to learning about new trends in CSS from the survey, you will also help browser developers prioritize their plans and work on better cross-browser compatibility. Also based on the last survey, browsers have implemented several improvements that have troubled CSS developers until then. You can also read more on the Smashing Magazine portal.

6. The future of rendering in React

In the article The future of rendering in React, you will read about the current rendering patterns in React, their problems and how the new patterns in React 18 try to solve these problems. Even if they are not currently ready for production, it is good to prepare for them.

Other articles worth reading

• How to find all render-blocking resources with JavaScript - How to identify render-blocking resources and improve Core Web Vitals.‍
• The wasted potential of CSS attribute selectors - Styling with data-* and aria attributes improves web accessibility and code clarity.‍
• What if the team hates my functional code? - Almost any developer can write code that a computer understands, but good programmers only write code that humans understand.
• Customize and automate user flows beyond Chrome DevTools Recorder - How to export user flows from Chrome DevTools to automated tests such as Cypress.

A few articles about accessibility

• When life gives you lemons, write better error messages -  Tips on how to write better error messages and what to avoid.
• aria-description crash course - New attribute to improve accessibility, but still not ready for production.‍
• How to write good alt text - What does a good alternative text look like and what mistakes do we make when writing it?‍
• SEO and Accessibility Are Symbiotic - Why accessibility is important for good SEO.

Conclusion

If you liked the news overview, don't forget to subscribe to our newsletter. You can also read the news from last month, which we brought in the September Frontend Briefly.