A Look Ahead at Web Development in 2025

Rate this content
Bookmark

Web development is undergoing a rapid transformation, new technologies based on standards are reshaping the way we build web applications.


This talk will explore the big ideas, new web standards, advancements in AI, WASM and Web GPU, alternative JavaScript runtimes, and new CSS APIs that are driving the next generation of web dev. We will also cover exciting proposals for the future of JavaScript, as well as the latest in dev tooling that will rocket your development into being at least a 1.5× developer.

This talk has been presented at JSNation US 2024, check out the latest edition of this JavaScript Conference.

FAQ

Wes Boss discusses exciting new features and improvements in web development, focusing on HTML, CSS, and JavaScript advancements that developers can look forward to using by 2025.

Developers can stay informed by engaging with the community, following relevant Twitter accounts like Intent2Ship, reading W3C meeting notes, and listening to podcasts and watching YouTube videos on web development topics.

AI in web development can be integrated using libraries like Transformers JS to perform tasks such as emotion detection and background removal directly in the browser, enhancing performance and reducing server dependence.

Scope CSS allows styles to be scoped to specific elements, reducing CSS leakage and potentially influencing how styles are managed in frameworks, similar to how Svelte processes CSS.

Customizable selects allow developers to put any HTML, CSS, and JavaScript inside a select element, enabling the creation of custom-styled select boxes while maintaining backward compatibility.

The Speculation API allows for pre-rendering and pre-loading of pages by prefetching HTML or pre-rendering entire pages in the background, which enhances page load speed and user experience.

The Temporal API is a standardized API for working with dates, times, and durations in JavaScript. It addresses issues with time zones and allows for the creation of time zone-independent dates and durations.

Web components encapsulate HTML, CSS, and JavaScript into reusable elements that are framework agnostic and standardized, simplifying UI development and ensuring long-term component usability.

New CSS features include calc size for animating height auto, starting style for seamless animations, and CSS relative colors for adjusting color properties directly in CSS.

The CSS Anchor API allows developers to position elements based on another element’s location, even if they are not in the same parent container, which is useful for tooltips and context menus.

Wes Bos
Wes Bos
32 min
18 Nov, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Today, Wes Boss introduces the new features of the web, including customizable select and temporal, a standardized API for working with dates, time, and duration. The current date API in JavaScript has some problems related to time zones and date manipulation. With the temporal API, you can create dates without a time zone, specify dates without a year, and create durations without being attached to a specific date. The API also provides features for finding the difference between two dates. Invokers is a declarative click handlers API that eliminates the need for JavaScript. Speculation API enables pre-rendering and pre-loading of pages, improving performance. The CSS Anchor API allows positioning elements based on another element's location. Web components are encapsulated, framework-agnostic, and easy to use, offering a standardized approach for building reusable UI components. Building media UI components, like video players, is made easier with web components like Shoelace. Transformers JS allows running AI models in JavaScript for tasks like emotion detection and background removal. Python doesn't run in the browser, but JavaScript does. Small AI models can be loaded and executed faster in the browser using technologies like WebGPU. Animate height auto transition using calc size. Apply starting styles to elements for smooth animations. Use Vue transition for CSS and JavaScript animations. Syntax website with Vue transition for smooth page transitions. CSS relative colors allow for lighter or darker shades. Scope CSS ensures styles only apply to specified div containers. Web primitives facilitate modern JavaScript code. You can create web requests and receive web responses using the same primitives on both the client and server. There are many new web standards that work everywhere and frameworks like Hano and Nitro are built upon them. The select and Popover elements are accessible by default. Most of the discussed features will be available in all browsers by 2025. The future of web development with AI is uncertain, but web developers should embrace AI tools to improve efficiency. Implicit CSS lazy loading depends on whether it's prefetching or pre-rendering. Wes Boss discusses the specific features he is excited about in web development, including starting style, calc auto, and allowed discrete. He shares his preferred way of staying informed on new web development discoveries, emphasizing the importance of being part of the community and keeping up with industry discussions. Wes also mentions reading W3C meeting notes and recommends following the Twitter account Intent2Ship to stay updated on upcoming CSS features. Lastly, he discusses the potential impact of the new Scope CSS feature on developers' management of styles.

1. Introduction to New Web Features

Short description:

Today, Wes Boss introduces the new features of the web, including customizable select and temporal, a standardized API for working with dates, time, and duration.

Thank you. Thank you. All right. I'm just so curious what my slides look like on this big-ass monitor. Holy. I thought about just doing 20 minutes of hacking and showing it on there, but I think that looks ... Yeah.

All right. So what's up, everybody? My name is Wes Boss. I am Canadian, as we just said. And I do a couple things. I make web dev courses, and I have a podcast and YouTube channel called Syntax. Anyone ever heard of Syntax here? Woo. Yeah.

So today, I'm here to tell you about how awesome the web is. It feels like HTML, CSS, JavaScript. It feels like the last couple years, and maybe you haven't even heard of it, but there's a lot of stuff that has landed. It's quickly improving. Things are moving extremely fast right now. So today, we're going to look at some of the new features that you can either start to use or look forward to using in 2025.

The first one we have here is customizable select. So the great thing about built-in inputs to the browser is they're built-in, and that's about it. The rest of them, they suck. Nobody uses the built-in inputs or the built-in UI things in the browser because you can't style them. You can't get them to do what you want. And that is starting to change. One of the very first ones we have is this customizable select, which will allow you to put any HTML, CSS, and JavaScript inside of a select, and you can build any select box that you want. And it's all backwards compatible, and it's still a select element at the end of the day.

The next one we have is temporal. Temporal is standardized API for working with dates, time, and duration.

2. Issues with Date API and Introduction to Temporal

Short description:

The current date API in JavaScript has some problems related to time zones and date manipulation. With the temporal API, you can create dates without a time zone, specify dates without a year, and create durations without being attached to a specific date. The API also provides features for finding the difference between two dates.

So here's a couple problems we have with the current date API in JavaScript. So you make a – let's say you want to tell your employees, hey, you have January 22nd off, right? You create a new date, January 22nd. You tell the New York office, hey, remember you have January 22nd off. And then you go to those losers on the west coast, and you tell them that the – they have the – just joking, just joking, just joking. You go to the San Francisco office, and hey, you parse that out to a date, and they – oh, all of a sudden they have the 21st off because you forgot about time zones, right? Who here has been bit by a time zone bug before, right? That's really annoying. So with temporal, you can – there's a whole time zone API. It's actually really flexible. But you can create dates in temporal without a time zone attached. So you simply just say January 22nd, 2025, and that's not specifically attached to any time zone. Another one is you can specify dates without a year, right? Or you can go ahead and add a year. So if you want to say I was born on December 15th, and you want to figure out what your birthday is in 2023, it will tell you what day that actually is. Or if you want to create durations, right now if we want to create durations that are not attached to a date, we just use milliseconds, right? So temporal durations will allow us to do things like one minute and 30 seconds. There's a nice API for adding them. And then there's also a really nice API for finding the difference between two dates, right? So you can take now. You can take your birthday, and you can say what is the time since that birthday? Really cool API.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Don't Solve Problems, Eliminate Them
React Advanced 2021React Advanced 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
Jotai Atoms Are Just Functions
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
State management in React is a highly discussed topic with many libraries and solutions. Jotai is a new library based on atoms, which represent pieces of state. Atoms in Jotai are used to define state without holding values and can be used for global, semi-global, or local states. Jotai atoms are reusable definitions that are independent from React and can be used without React in an experimental library called Jotajsx.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
Watch video: Debugging JS
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
The Epic Stack
React Summit US 2023React Summit US 2023
21 min
The Epic Stack
Top Content
Watch video: The Epic Stack
This Talk introduces the Epic Stack, a project starter and reference for modern web development. It emphasizes that the choice of tools is not as important as we think and that any tool can be fine. The Epic Stack aims to provide a limited set of services and common use cases, with a focus on adaptability and ease of swapping out tools. It incorporates technologies like Remix, React, Fly to I.O, Grafana, and Sentry. The Epic Web Dev offers free materials and workshops to gain a solid understanding of the Epic Stack.
Fighting Technical Debt With Continuous Refactoring
React Day Berlin 2022React Day Berlin 2022
29 min
Fighting Technical Debt With Continuous Refactoring
Top Content
Watch video: Fighting Technical Debt With Continuous Refactoring
This Talk discusses the importance of refactoring in software development and engineering. It introduces a framework called the three pillars of refactoring: practices, inventory, and process. The Talk emphasizes the need for clear practices, understanding of technical debt, and a well-defined process for successful refactoring. It also highlights the importance of visibility, reward, and resilience in the refactoring process. The Talk concludes by discussing the role of ownership, management, and prioritization in managing technical debt and refactoring efforts.
AHA Programming
React Summit Remote Edition 2020React Summit Remote Edition 2020
32 min
AHA Programming
Top Content
The Talk discusses the concept of AHA programming, which emphasizes thoughtful abstractions. It presents a live-coded example of the life-cycle of an abstraction and demonstrates how to fix bugs and enhance abstractions. The importance of avoiding complex abstractions and the value of duplication over the wrong abstraction are highlighted. The Talk also provides insights on building the right abstractions and offers resources for further learning.

Workshops on related topic

React, TypeScript, and TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Web3 Workshop - Building Your First Dapp
React Advanced 2021React Advanced 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
Remix Fundamentals
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Kent C. Dodds
Kent C. Dodds
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetsov
Mikhail Kuznetsov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
Build Modern Applications Using GraphQL and Javascript
Node Congress 2024Node Congress 2024
152 min
Build Modern Applications Using GraphQL and Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Come and learn how you can supercharge your modern and secure applications using GraphQL and Javascript. In this workshop we will build a GraphQL API and we will demonstrate the benefits of the query language for APIs and what use cases that are fit for it. Basic Javascript knowledge required.