What are the upcoming frontend changes? We present a bunch of reflections from the daily work of a frontend developer. Marcin will talk about areas and technologies that will be in demand and may eventually become part of the day-to-day duties of frontend teams.
We can observe a continuous digital transformation in the IT industry. In line with the saying:
new day, new frameworkfrontend innovations come and go, changing faster than the English weather. Among novelties, there are both valuable technologies and those that will fail over time. Here’s some frontend news to keep up to date with, as well as a summary of the changes that have occurred over the last few years.
React, Next.js, CRA – the most significant changes in frontend
React has been the most popular frontend framework for several years, and it doesn’t look like radical changes are coming in 2023. What is changing about React, however, is the approach. The choice of starter when developing an app falls on Next.js, which is increasingly pushing out Create React App. Version 13 of Next.js is already hugely popular, even though it is still in the experimental stage. New features and fixes are being added every few days, and documentation is being created virtually on the fly. Even though it should be noted that it is still not recommended to use in production.What’s new in the 13th version of Next.js?
There was a lot of excitement last year about the arrival of Next.js 13. The changes unveiled at the Next.js Conf conference raised hopes concerning new directions in frontend. Here is a brief summary of the biggest new features in Next.js 13:Improved routing
The first most visible change for developers is moving away from the old routing, which has raised constant criticism so far. The new routing in Next.js is still based on the file system, but there have been significant changes. Until now, each file was a separate path in the application. This forced the duplication of common elements, which became particularly problematic, e.g., for nested elements.
Split into Server and Client Components
In Next.js 13, we are dealing with a completely new architecture. The biggest revolution is the division of components into Server Components and Client Components. This speeds up application development due to the reduction in JS. What else does this division offer? Server Components are statically rendered on the server side, while JS is only added to Client Components through hydration. The term refers to the process of adding JavaScript code to the compiled HTML code on a page while it is being rendered in the browser. As a result, if all components are server-side, users can get a page even completely devoid of JS code into their browser, which will slim it down considerably.// app/page.js
async function getData() {
const res = await fetch('https://api.example.com/...');
return res.json();
}
// This is an async Server Component
export default async function Page() {
const data = await getData();
return <main>{/* ... */}</main>;}Code language: JavaScript (javascript)- Client Components occur where it is necessary to increase user interaction,
- The new architecture reveals lots of possibilities and facilitates activities, such as the creation of nested layouts,
- Server-side rendering components reduce the amount of code sent to the client and thus speed up page loading.
A11y, the 11 letters between a and y in the word Accessibility
Alongside A11y, the topic of performance was often pushed to the very end of frontend activities. When everything was already done, but the lighthouse showed errors, someone from the team usually took more time to think about how the a11y issues could be speeded up or improved.
Why are accessibility issues so important in application development?
Accessibility is nothing more than adapting the interfaces of an application or software to the needs of as many users as possible. As we know, more and more people are using the Internet, including the elderly and people with various dysfunctions, such as sight or mobility impairment. A number of factors contribute to the growing popularity of developing accessible apps:- Making apps accessible for everyone without any limitations
- Accessibility matters for SEO
Emphasis on testing and AI – the future of frontend?
What will change in 2023? In my opinion, there will be an increase in the popularity of testing tools that allow us to predict how our application will perform, such as lighthouse or axe, as I mentioned before. The topic of performance used to be treated rather vaguely – now the awareness of this matter is rising every year. As a result, the teams take greater responsibility for performance. Everyone who takes part in the application development process, from designers to testers, is equally involved.The popularity of Chat GPT
The topic of AI was already quite common a few years ago, but now with the popularity of Chat GPT, it is back. Many companies are looking for an outlet to use AI capabilities in their business; some are already doing it. AI solutions also find their application in frontend, for example, they can be used for solving less complex problems or even writing code from scratch for us. Let’s take a look at the following example of code generated by Chat GPT:
