Top 10 Web Development Trends in 2023

While, in my particular opinion, the web development geography braked down for a many times( 2016- 2021), it started to gain lots of traction just last time( also see State of JS where the images for this composition are taken from). In this composition, I want to point out new web development trends that I've seen, which are clearly trends which I anticipate to continue sparking interest among web inventors, and which I'm agitated about for the coming time. 

META FRAMEWORKS 

Single- runner operations( gyms) and their separate fabrics(e.g.React.js,Vue.js,Svelte.js) have been through further or lower hype cycles and have been around for times now. still, with the rise of meta fabrics on top these results, we can see a clear trend with operations shifting from customer- side( CSR) to garçon- side picture( SSR). SSR is each over the place when working with JavaScript frameworks these days. 

The most popular meta frame calledNext.js comes on top ofReact.js. Andrew Clark, core React inventor, went so far calling it" the real React 18 release" in 2022, because it comes with all the batteries(e.g. suspension, streaming SSR) included that the React platoon provides as abecedarian structure blocks on a lower position of the library. Both, Vercel( the company behindNext.js) and theReact.js core platoon are working nearly together delivering a great inventor experience. 

While numerous inventors eyeball the close relationship betweenNext.js andReact.js with a concerned station, there are druthers
forReact.js like Remix( lately acquired by Shopify) out there. Remix takes a different approach on turningReact.js into a meta frame(e.g. using web norms as first- class citizen), but there are also features that meet(e.g. nested routing) between both fabrics due to their competition. 

Indeed thoughNext.js is formerly an established contender in the ultramodern SSR space, and turned numerous frontend inventors naturally into full- mound inventors, other fabrics should be on your watchlist too SvelteKit( make onSvelte.js) with its recent1.0 release backed by Vercel and SolidStart( make onSolid.js) with its bettered DX compared toReact.js. 

While the last decade( 2010- 2020) has been dominated by Single- runner operations( gyms) with their customer- side picture( CSR), starting fromKnockout.js andEmber.js over toAngular.js,React.js andVue.js, the last times have seen an adding interest in garçon- side picture( SSR) with meta fabrics. From the outside it seems like the cycle is closing again, because we've been using SSR with sprinkled JavaScript(e.g. jQuery, MooTools,Dojo.js) inmulti-page operations( MPAs) for a long time ahead( 2005- 2010). still, whereas back in the time Java(e.g. JSP) or latterly Ruby on Rails have been used for the SSR, it's different this time because we're counting on JavaScript rather. For a many timesNext.js has been the driving force behind this trend, still, other meta fabrics like SvelteKit are catching up. 

SSR has been contending with static point generation( SSG) for quite a while for the perfect performance( seeNext.js vsGatsby.js) indeed though both patterns serve entirely different purposes. While the ultimate pattern is used for static content(e.g. websites like a blog), the former is used for dynamic content(e.g. web operations). still, both SSR and SSG can make sense, If SEO is applicable. still, with the demand of largely dynamic content or stoner- centered content with authentication, inventors can not choose SSG( formerly make ahead emplace, thus static) and have to decide between SSR( on- demand figure per request with individual data on the garçon) or CSR( on- demand costing of individual data on the customer) these days. 

CSR, SSR, SSG aren't the most recent trends for rendering ways however. While SSR and SSG started the trend on performance optimization a many times agone
, further nuanced picture ways like Incremental Static Regeneration( ISR) and Streaming SSR came alive. The former advances SSG, because it allows to statically rebuild a website on a per- runner base(e.g. rebuild runner X every 60 seconds) rather of rebuilding the whole website. Indeed further, On- Demand ISR, also called On- Demand Revalidation, can be used to spark rebuilds via an operation exposed API(e.g. when CMS data updates). 

Streaming SSR on the other hand optimizes the single- threaded tailback

of garçon- side picture. While common SSR has to stay on the garçon for the data to shoot the rendered content to the customer at formerly, Streaming SSR allows inventors to divide the operation in gobbets which can be shoot precipitously in parallel from garçon to customer. 

Over the last times rendering patterns have been relatively straightforward with SSG and SSR in gyms MPAs. still, further nuanced performances are trending these days. But not only ISR and SSR streaming get more applicable, but also Partial Hydration(e.g. Reply Garçon factors) which allows to hydrate only some of your factors on the customer, Progressive Hydration which gives further fine- granulated control over the order of hydration, Island infrastructures(e.g. Astro) for insulated operations or factors in a MPA, and using resumability rather of hydration(e.g. Qwik) are getting valid approaches these days. 

SERVERLESS AT THE EDGE 

picture ways like SSR and SSG largely relate with the trend of serverless at the edge, because both are driven by performance with the thing of furnishing a flawless stoner experience in the cybersurfer. Basically the appetite to serve druggies briskly websites and web operations sparked the interest to be serverless at the edge. 

But let's start from the morning Serverless, also known as serverless functions, serverless cipher(e.g. AWS Lambda) or pall functions(e.g. Google/ Firebase Cloud Functions) has been a big trend in pall computing for several times now. While serverless still means having a handling( remote) garçon, the inventor doesn't have to manage the garçon and its associated tasks(e.g. structure scaling on- demand). rather one has to emplace a single function as a serverless function which is taken care of by the pall provider. 

Serverless functions uncorked another advantage, because rather of planting your operation garçon to one( or a many) data center( s), there can be dozens of them around the world. thus in a perfect world, serverless functions would run as close as possible to their druggies, because it would mean the shortest customer- garçon roundtrip and therefore an bettered stoner experience. Planting serverless functions as close to the stoner as possible chased the terms edge computing and edge functions. 

numerous pall providers(e.g. Cloudflare with Cloudflare Workers, Vercel with its Edge Network, Deno with Deno Deploy) are contending in this space where everyone optimizes for the stylish time to interactive( TTI) experience for their end druggies. Edge functions aren't only serving SSG/ SSR content briskly( because the line to the end stoner is shorter), but can also cache their results closer to the stoner too. 

But not only performance matters, indeed though it's the main motorist, other benefits like dwindling cost come with calculating on the edge too. For illustration, frequently not all data shoot between customer and garçon( then edge function) needs to be reckoned by a main data center. In IoT, there's lots of inapplicable data(e.g. videotape recordings without changes per frame) shoot to a main data center which could simply be filtered on the edge rather. After all, edge functions are only the morning. 

DATABASE Belle epoque 

With the arrival of serverless( at the edge), databases witness a belle epoque as well. With a serverless function inventors snappily ran into the problem of opening up too numerous database connections, because there isn't one garçon which keeps one connection open, but numerous serverless functions with a 11 connection to a database. Connection pooling has been the result for this problem, but either one has to take care of it oneself or has a third- party service handling it. 

Popular contenders in the serverless database space are PlanetScale( MySql), Neon( PostgreSQL), and Xata( PostgreSQL) which come with numerous features like database branching, schema diffing and important searching/ analytics/ perceptivity. When it comes to serverless around the world, they give edge hiding or distributed read-only database to move your data closer to your druggies for minimum quiescence. 

still, but also your operation, Fly, If the third- party service shouldn't only distribute yourdatabase.io packages everything into one platform. Which brings us beyond just databases, where lots of movement is passing too. Railway, seen as the Heroku successor, brings everything for a Platform as a Service( PaaS) to emplace your techstack.However, you get an open source volition to Firebase with Supabase which comes with operation/ database hosting, authentication, If you want to move one step up the service chain towards Backends as a Service( BaaS). 

JAVASCRIPT RUNTIMES 

It all started when Ryan Dahl blazonedNode.js at a conference in 2009. What started as an trial which severed JavaScript from the cybersurfer and made it available on the garçon, came one of the biggest motorists for JavaScript's success story over the last decade. Basically Ryan Dahl used the JavaScript Engine called V8( enforced by the Chrome) forNode.js without the cybersurfer itself. Hence both the Chrome cybersurfer andNode.js use the same JavaScript Engine, but have their own JavaScript Runtimes(e.g. Cybersurfer APIs vs knot APIs) to interact with it. 

A decade latterly Ryan Dahl blazoned Deno as successor of knot with the pledge of furnishing inventors with a more secure and briskly terrain which comes with suggesting cybersurfer APIs, TypeScript and a standard library out of the box. Deno, which also runs on V8, is only one of numerous JavaScript Runtimes these days however. 

In the contending land of edge functions, numerous pall providers apply their own JavaScript Runtime(e.g. Cloudflare Workers) which optimizes for their own structure(e.g. Cloudflare). Thereby also Deno's business model is getting a pall provider with Deno Deploy and their just- by- time on the edge rendering SSR frame( which started as evidence of conception) called Deno Fresh. pall provider independent results like Bun( running on JavaScriptCore Engine and enforced infamously in Zig) came another viral hit in the race for the fastest JavaScript Runtime lately. 

The sharp mind would see( formerly again) lots of fragmentation in the JavaScript geography due to differentruntimes.However, we'd end up in the same situation that we had with fractured JavaScript support in cybersurfers for times, but this time on the garçon where not all JavaScript may be supported inversely across runtimes when stationed on different pall providers, If effects get meddled up. thus all stakeholders(e.g. Deno, Vercel, Cloudflare) joined the WinterCG to unite on API interoperability between their JavaScript Runtimes. 

MONOREPOS 

In the once monorepos have substantially been used for large- scale operations where one design contains lower systems in one interpretation controlled depository. Each of these lower systems can be anything from individual operation(e.g. Gym, MPA) to applicable package(e.g. functions, factors, services). The practice of combining systems dates back to the early 2000 when it was called a participated codebase. 

still, these days monorepos aren't only exclusive to large- scale operations, but also lower companies and open source systems who would clearly profit from them. For illustration, a company could have colorful packages in a monorepos ranging from participated UI factors, a participated design system(e.g. reusable cooperate design), and generally used mileage functions for their separate sphere. 

These packages can be imported in colorful operations the factual operation(e.g.app.mywebsite.com with customer- side picture) which uses all of these participated packages, the home/ product/ wharf runner(e.g.mywebsite.com with garçon- side picture or static point generation) with SEO in mind uses only the participated design system package, and the specialized attestation runner(e.g.docs.mywebsite.com) which uses the participated UI factors and participated design system packages. 

Turborepo( acquired by Vercel) brought up the monorepo hype in JavaScript/ TypeScript again. Turborepo allows brigades to produce figure channels for all their operations and packages within a monorepo. The eye- catcher hiding of shapes within the channel on a original machine or in the pall across brigades. Turborepo paired with other vital monorepo tools similar as npm/ yarn/ pnpm workspaces( reliance operation) and changesets( versioning) makes this toolchain a space to watch this time. 

Challengers of Turborepo are Nx, Rush, and Lerna( not maintained for a while, also acquired by Nx' company Nrwl). 

UTILITY- FIRST CSS 

inventors either love or detest it Headwind CSS is the bill child for mileage-first CSS. While the one side of inventors detest it for appearing circumlocutory in their UI law, the other side of inventors loves it for its great DX. As a inventor, you configure it formerly in your design and use itspre-defined CSS right down in HTML. 

This love and hate divide about mileage-first CSS may come to an end with the recent rise of garçon- side picture( SSR) however. For a many times CSS- in- JS results like Styled Components( SC) and Emotion have been the prevailing force for baptizing ultramodern element- grounded web operations. still, if performance in the world of SSR is one of the primarily pretensions, CSS- in- JS comes with negative impacts increased pack size( SC with12.7 kB, Emotion with7.9 kB) and more importantly runtime above due to CSS serialization before fitting it into the DOM. 

thus we may be seeing inventors migrating towards SSR friendlier results like mileage-first- CSS(e.g. Headwind CSS, UnoCSS) paired withpre-defined UI element(e.g. DaisyUI), other inversely popular druthers
like CSS Modules, or killers called zero- runtime/ collect- time CSS- in- JS(e.g. vanilla- excerpt, linaria, astroturf, collected). 

END- TO- END TYPE SAFETY WITH TYPESCRIPT 

The elaboration from JavaScript to TypeScript is impregnable. In this big migration of web development, E2E type safety for full- mound operations is clearly an important trend. The perpetration of this conception stands and falls with the communication subcaste( API) which is needed to bridge compartmented realities(e.g. type stoner, type BlogPost) from the garçon to the customer operation. 

The usual suspects in web development for customer- garçon communication are REST and GraphQL. Both can be used with OpenAPI for REST and GraphQL Code Generator for GraphQL to induce a compartmented schema train for the frontend operation. 

still, there's a new rising star for type safe APIs called tRPC which can be used as REST/ GraphQLreplacement.However, tRPC enables you to export all types from the backend to the frontend operation without any intermediate generation of a compartmented schema, If you're working in a TypeScript monorepo where frontend and backend are participating law. latterly the frontend can call the backend's API by just using compartmented functions which are wired by HTTP under the hood to enable the factual customer- garçon communication. The overall trend clearly moves toward using further of these type-safe results for full- mound operations like tRPC, Zod, Prisma, and TanStack Router which all give type safety at the edge of an operation. 

make TOOLS 

In React- land, produce- reply- app( CRA) dominated the geography for a many times. It was a little revolution at its time, because newcomers were given a ready- to- go Reply starter design without having to configure a custom Webpack with React setup presently. still, over the last time Webpack came outdated rather snappily. 

Vite is the new sprat on the block when it comes to single- runner operations( gyms), because it works with all the popular fabrics(e.g.React.js) for creating a starter design. enforced by Evan You the creator ofVue.js, it coins itself as coming generation frontend tooling. Under the hood it gains its power from esbuild, which compared to other JavaScript packet is written in Go, and thus packets dependences 10- 100x faster than its challengers(e.g. Webpack). 

While Vite's ecosystem thrives with additions like Vitest( testing volition to Jest), other challengers like Turbopack by Vercel surfaced just lately. Turbopack is chased as the successor of Webpack, because it has been commanded by Tobias Koppers the creator of Webpack. BecauseNext.js is still using Webpack and Turbopack is developed by the same company, we can anticipateNext.js and Turbopack presumably being a perfect match in the future. 

AI DRIVEN DEVELOPMENT 

Will AI take a inventor's job ultimately? There's no answer to this question yet, still, AI driven development came a thing in 2022. With the release of GitHub Copilot, inventors were suitable to get paired with a AI programmer in their favorite IDE. It's as simple as writing law( or writing a comment stating what you want to decode) and GitHub Copilot will bus-complete the perpetration details to its stylish understanding. 

But it doesn't stop then ChatGPT by OpenAI is a more general language model which takes care of programming tasks too. While you can ask ChatGPT free form questions, it's also suitable to perform rendering tasks. numerous inventors formerly caught themselves using ChatGPT as StackOverflow relief. In numerous situations, ChatGPT delivered helpful answers( not always indefectible however) when used as a hunt machine relief. Because the ultimate has to deal with lots of SEO spam( not only for development related content), ChatGPT is seen as a feasible volition at the moment. 

" At the moment" is the important term then however. From a raspberry's eye view AI created content can( and will) also harm the world wide web. Where manually created SEO content was formerly a problem before, no bone
stops someone from producing further bus- generated SEO content with ChatGPT. Will ChatGPT train on its own generated content ultimately? 

There are a many noteworthy mentions that I do not want to forget but which did not make it into the listed trends Tauri as a volition to Electron for desktop operations enforced by JavaScript/ CSS/ HTML, Playwright as volition to Cypress for E2E testing, Warp and Fig as coming generation outstations, CSS Container Queries as an CSS Media Queries indispensable for responsive design, and last but not least htmx as fortified HTML for creating interactive stoner interfaces without JavaScript. Since I only gave a small summary then, I encourage you to check them out yourself! 

Anyway, hopefully I was suitable to give you with a great overview of the status quo in the web developmentecosystem.However, feel free to subscribe to my newsletter below, If you liked the composition. I also intend to write further about a many of these technologies this time, so if you're working for one of them, hit me up and we can perhaps unite on it.