A JavaScript Less Future - New Browser APIs and Their Impact on the Future of React Development

Hi, there. Welcome to a JavaScript Less Future. New browser APIs and their impact on the future of front-end development. My name is Amir Sami. I'm a staff software engineer at S&C Electric Company. Just so that way we're not strangers, I'll tell you a little bit about myself. In my free time, I like to bake delicious baked goods, like this pie. I like to program. It's not just a profession, it's a hobby of mine as well. I like to hike and explore nature, and I like to lift heavy circles for some weird reason. I know it's a weird combo.

Now, I work at S&C Electric Company, which is a global provider of equipment and services for electric power systems. We were founded in 1911 in Chicago, where we design and manufacture switching and protection products. Today, our diverse global workforce develops innovative solutions for a more intelligent and resilient electrical grid. Building on this legacy of technological innovation and customer service, S&C empowers the transformation of the grid for an outage-free, sustainable electrical energy future.

So the talk title is a JavaScript Less Future, but you're probably wondering, what the heck do I mean by that? I mean a future with less JavaScript. But it's not a future with no JavaScript, just less. Now, before we talk about the future, I want to take a step back in time and look at how difficult it was to be a software engineer for the web back in the day, about 14 years ago. For some of the more seasoned software engineers in the audience, I'm sure you've probably seen Stack Overfill questions like this one, like how can I horizontally center an element? This was asked about 17 years ago, and the first accepted answer for this was just to set a margin auto with 50%, which we know now there's a lot more things we can do to center an element. Another question was, how can I modify the URL without reloading the page? And the answer to this back in 09 was just that there's no way to do that. Now we know that there are ways to do that, but back then, this wasn't something you could do. And lastly, is the question of how can you change the styling of a placeholder with an input? The answer to this back in 2010 was that this was only available or possible with browsers that were enabled with WebKit. So now we've taken a look at what it was like to be a software engineer back in the day without some of the new browser APIs that available to us now. And we have a better appreciation for browser APIs and what they enable us to do. So there's been a lot of new browser APIs that have released in the most recent years, such as the hat selector in CSS, backdrop filter, the attribute function in CSS, scope, along with many other powerful browser APIs. But for the sake of today's talk, I'm only going to be focusing on these eight browser APIs and how I believe we can use them to write less JavaScript and provide better experiences to our users. Now I'll be walking you through that by walking you through two demos, a date picker, specifically date range picker and a text formatter. What does the date picker look like? Well, this is the date picker I created. You can open and close it by clicking on the field. The panel appears below the field.

When you select a start date and you hover over any other dates after the start date, we can see that the range highlights and you can close the panel by either clicking on the field or clicking outside of the component entirely.

Now let's take a look at some code to see how this works before we integrate with the new browser APIs. Here we have the button element, which is representative of the field that we saw. And you'll notice that there's an on-click handler here, which when the user clicks on the button, we set a stateful variable to toggle whether the panel appears or not.

If we take a look at the code for the panel, we'll notice that it's conditionally rendered. And if we look further into the panel, we have multiple buttons. Each button represents each of the individual dates within the range or within the picker. And we have a mouse handler mouse over handler rather for each of those buttons.

What this mouse over handler does is if we take a look at that, we'll notice that every time user mouse is over one of those dates, we get all the children within the panel and we iterate over them. And if it's within the range of the selected start date and the date or the element that the user is hovering over, we set a background to this blue color. And if it's not, then we preset the value to nothing. So it goes back to the default styling.

Now we have to do this last bit. Otherwise, if we didn't and the user continued to hover over dates within the date picker, they wouldn't reset to their default value and they would all appear in this kind of hovered blue color.

Now to close the panel, we have to add an event listener to the document, specifically a mouse down event listener. And anytime a user clicks on the document while the component has been mounted, we have to check or intercept all those clicks. And if the click isn't within the component, then we set the panel setter panel staple variable to false.

Now that's the date range picker that I created. But there is some janky behavior where if you're hovering between the week rows, the highlight doesn't go away immediately. There's a lot of complex logic to maintain. And there's potential for multiple document event listeners if you have multiple instances of this component on the page. And there's multiple DOM updates on hover. Every time a user hovers over a date, we go through all of the elements within the panel. And we set the background color to blue or to nothing, which can be expensive.

So let's take a look at what we can do with some of the new browser APIs that are available to us now. This is the button element, but we refactored a bit. We've taken the on click handler out. And instead, we've replaced it with this popover target. So popover target is a new browser API that is part of the popover set of APIs. And what we're doing is we're telling the browser that when the user clicks on this element to toggle this date time picker panel, an element with this ID of date time picker panel, which you'll see in a moment.

And this is baseline available as of last year, which is fantastic. Now, if we take a look at the date time picker panel, the panel that appears below the field, we'll notice that it's no longer being conditionally rendered. The ID here matches to the value of the popover target for the button that we just saw. There's this new popover attribute, which has three available values, auto, hint, and manual. What this is doing is this is telling the browser that this is a popover element. And one of the three values here is just telling the browser how this should operate. And this is baseline available as of last year as well.

And lastly, we have this toggle event listener here, where when the user toggles the panel open and close with the field, this event handler is initiated or invoked. And we can perform some logic like resetting the calendar month to the current month when the user closes or opens it. And this is baseline available as of 2023, which is also fantastic.

Now, the date time picker panel appears, but how do we control where it appears within the browser, we can set a position absolute and do a top and a left of whatever pixel value to position it. But that's not optimal if it's being cut off by the viewport, and we have to implement a lot of additional logic to move it around. But there's a new browser API that helps us with that. And it's the anchor API.

So if we take a look at the CSS for the field element, we can notice that we're using this new anchor name API. And it tells the browser that this is an element that can be anchored to it does have limited availability. So it's just missing in Firefox, but it should be added relatively soon. Next, if we take a look at the CSS for the panel, we'll notice that we're using this position anchor attribute, which is a new API. And it tells the browser what element anchor this element to.

And it tells the browser what element anchor this element to. So in this case, we're telling it to anchor to that date range field that we just configured. And this only has limited availability. So it's just missing in Firefox, but fingers crossed again, will be added soon to Firefox.

And lastly, to tell the browser how to position this on in regards to in relation to the anchored, we have this anchor API, which is a new API, and it tells the browser how to anchor position anchor. So here we can see that we have anchor bottom and anchor left to position the panel to the bottom of the anchor to the left of the anchor. And again, this has limited availability just missing in Firefox.

And lastly, for in terms of CSS, how do we style the range? So how do we highlight the ranges between the selected start date and the hover date that the user is hovering over, we no longer have to use a mouse over event handler. Instead, we can do that all in CSS. So here's this large piece of CSS. And I know it's a little hard to interpret. So let's dive into it. Specifically, I want to take a look at this not has. So here, if we want to interpret it, we can read it as select date elements that do not have a selected end date sibling after emphasis on do not have because we're using this has selector within the not. If we look a little further, there's another has that says, if we interpret this a little further, it says that select date elements that do not have a selected end date sibling after but do have a button sibling after that is being hovered. Emphasis on do have because we're using the has selector. So this applies styles to any of the elements between the selected start date and the date that the user is hovering over. All without mouse over. And then the last one here is another not has, and if we interpret it, it reads as select date element that does not have a selected end date sibling after but is being hovered. So all that to say, we're using the new has API in CSS, and it selects if the parent element has a selector provided, it can act as a parent selector, which is something that we didn't have before. And it's baseline available as of late 2023. So if you haven't used it yet, I highly encourage you to use it.

So that's the date range picker that I created using the new browser APIs. You can select a start date, select an end date, you can hover the dates, hover, we have a better user experience, it's more stable, you can open and close the panel by clicking outside of the panel or on the field. But the key key nine among you might have noticed that there's a nifty animation and you navigate between the months. So here you can see that we animate one way and the other way. That's something that we didn't have before. And it's a little kind of like extra. So how do we do that? We're using view transitions. So walk you through how to use the transition API.

Here, we can see that I've added this custom attribute to this development animation direction. And we're setting the value to a stable variable which represents which direction to animate. So when the user clicks on the forward or back button, we're setting this value to previous or next. And you'll see why in just a moment. Now if we dive into the CSS for that development, we here we can see that we have this view transition name attribute in CSS, which has a new browser API, and it configures the animation name for the element for the specifically the view transition name. But it does have limited availability is just missing in Firefox, but it should be added soon.

And then we have this attribute function. So attribute has been around for some time now, but attribute for all properties is an experimental support, but hopefully, I'll add it sometime soon, it does work in fact, and I'm Chrome, sorry. And so here, what we're doing is we're using it to grab the value from that attribute, we configured on the element animation direction, and we're setting it to this view transition name attribute. Now to trigger the animation, we have these new pseudo selectors in CSS view transition old, which accepts the name of the animation previous or next in this case, and it applies the styles to the element being animated out. And view transition new is also a new browser API and apply styles to the new element being animated it. But it does have limited availability. It's just missing in Firefox. So hopefully, they'll add this soon. And lastly, is how do we initiate this animation? Well, we can do that by using the start view transition, which is a new API. And it tells the browser to start animation that there's been some update made and to animate between that old state and the new state. But again, limited availability is just missing in Firefox. So that's the date range picker here. And we've made a lot of changes to it. But by doing so we remove two event listeners, we've added animation support, we've removed conditional rendering logic, we've added support for auto position of the panel. And most importantly, we've reduced the amount of JavaScript we've had to write by about 7%. And that's not including animations.

If I had added animation, that would be a lot more code. So let's move on to the text formatter. So this text formatter is something I built on my personal site, you can check it out if you want. It works kind of like Grammarly, where you can enter some text, and if there's any sort of error, it highlights it. I haven't added hover support in the live version, just as an FYI. But you're probably wondering how the heck does this work? Or how do things like this, like Grammarly, or even the carbon code, image exporter work? Well, they work on this concept of layers. So you'll see that in just a moment once I'm done typing in this.

So if I expand the layers, we can see that there's actually two layers. There's an input layer, and there's a highlight layer, the input layer sits on top. And that's the layer that the user is interacting with that you're typing into. But the layer below that is the highlight layer, which actually has the elements with the CSS applied for the highlighting. So if we take a look at some code, we'll notice, again, like I just mentioned, there's two layers, there's a highlight layer, and there's a text area, which is the input layer element. Now, the reason why we have to have two layers is because it's hard in this previous way, or this old way, to apply styles in the same element that the user is actively typing within without causing some weird jank behavior. So that's why you have to maintain two separate layers.

Now, since we have two layers, we have to keep them in sync. And since the user is only interacting with one of them, we have to add an event listener, at least one, probably more than this. So here we have a scroll event listener, which when the user scrolls on the text area, we have to change the scroll positioning of the highlight layer to make sure that they stay in sync. Now, if we take a look at this rather large use effects, we'll notice that we're doing quite a bit here. But importantly, is that we're reconstructing the highlight layer content every time the user inputs in text into the text area, which isn't the most optimal way of doing this. But it is the way that a lot of these implementations do it. So we dive into the code, we'll see that here we are constructing the HTML string, and any unhighlighted content we're appending to this string. And then if there is, you know, something to highlight, we are creating a span element and appending that to the HTML string. And lastly, is we're setting this inner HTML for the highlight layer. And we're creating this DOM update by doing so. So that's the text formatter. But so overly complicated code. And it has expensive, repeated mutations to DOM elements. So how can we refactor this? Let's take a look. Well, first, let's remove the duplicate layers. And let's have a single layer, a content editable layer.

Specifically, we have a plain text only content editable layer. So plain text only is a new API. And it allows for raw text input only. And it's baseline available as of this year. So it's a new API. But basically what plain text only means is, here we can see in this nice demo, if you copy some code, or copy some text rather into a content editable area, it brings over all the formatting, the plain text strips all that out and paste just the raw text, which is exactly what we want in this case.

Now, once we've matched the text that the users inputted into the content editable div, and we say, Hey, you know, there's some issue that we need to highlight, we have to create a range object, which is a object available to us in JavaScript. And importantly, is we have to define the start and end date range here. So we start the, we set the start for the match, and we have to pass it to parameters. So first being a reference to the DOM element. And the second being the index of the match. So for set start, it's the starting index, and set and it's the end index.

Now, how do we create the highlights once we created these range range objects? Well, we do that by just these two lines here. Most importantly, is we create this new highlight object, which is a new API. And it represents all the ranges that we want to highlight. And it's baseline available as of this year. So again, a new API. And to tell the browser to create the highlights, once we created the highlight object, we call the CSS dot highlights that set, which is again, a new browser API. And we provide it two parameters. First is the name of the highlight group. And second is the highlight object that we created in the previous step.

Now this creates the highlights, but it doesn't actually apply to styles. So how do we do that? Well, we have to dive into some CSS. And specifically, there's this new pseudo selector highlight, which accepts a group name as the parameter, and it allows us to highlight those groups accordingly. And any styles within this selector will be applied to the highlight. Now this has limited availability, it's just missing a Firefox, but should be added relatively soon.

Now there's one more API I want to point out here, which is the relative color API, which is a new API that allows you to convert a color from one format to another without having to manually do so. So in this case, we're converting from a CSS variable, which is a hex color to an RGB, and we're also applying an opacity to it. So this is something I've been really enjoying using this year. And it is baseline available as of this year as well.

And it's available with these other color functions as well as not just RGB, but also HSL, HWVLAB, LCH, OKLAB, and OKLCH. So that's the text formatter. And here we can see that this is the refactor text formatter with those new browser APIs. We maintain the functionality where you can highlight any errors in the text. But again, how does this work? Well, we remove the layers, the duplicate layers like we saw in the code. And we've also removed two event listeners. We've removed the duplicate layer. We remove logic to duplicate text on change, all while reducing the amount of JavaScript by about 7%, which is again fantastic.