11. Nov 2022Frontend

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

A regular summary of the most important news, articles or tweets in the frontend world is here! For the month of October, we have prepared the top 6 news that should not be missed by any frontend developer. In addition, here you will find links to other interesting articles that are worth reading.

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.

Based on the last survey, browsers implemented several improvements that bothered CSS developers.

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

A few articles about accessibility

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.

Andrej NemečekFrontend Developer