10 JavaScript Changes You Missed in 2023
Introduction
As the digital landscape continues to evolve at a rapid pace, so does the world of web development. In the ever-changing realm of JavaScript, staying up-to-date with the latest advancements is crucial for developers striving to create efficient, modern, and secure web applications.
As we bid farewell to 2023, it's time to reflect on the significant shifts and improvements that have taken place in the JavaScript ecosystem.
In this article, we'll delve into the 10 JavaScript changes that might have slipped under your radar in 2023. From language enhancements to updates in frameworks and tools, these changes are shaping how developers code, collaborate, and deliver seamless user experiences.
Almost every framework tried to re-invent itself in 2023.
Every year new language features get standardized in ECMAScript at which point they are implemented in browsers.
Let's unravel the hidden gems and explore the transformative shifts that are shaping the future of JavaScript in 2023.
1. Object.groupBy()
Object.groupBy() simplifies the process of categorizing elements from an iterable into groups based on the values returned by a callback function, resulting in a structured object where each property represents a group and holds an array of elements belonging to that group. This method is useful for tasks where you need to organize and analyze data based on specific criteria.
Imagine you have an array of objects, where the objects share a similar schema, these might be records from a database where every object has a field of age. You can use Object.groupBy() to separate children from adults.
We achieve that by defining a function that groups anyone under 21 years into children and anyone over that into adults. The result is an object organized into groups.
The syntax is as follows
Object.groupBy(items, callbackFn)
To use Object.groupBy() in your code, Install and import core-js the following is the code illustration and the output.
2. Array toSorted
Used along with toSpliced and toReversed. JavaScript already had methods for sort and reverse but the problem is that they mutate the original array in place and that's confusing because other methods like map and filter don’t do that, instead, they copy the array and return a new one.
With these methods, you can now sort, reverse, and splice an array by treating the original as an immutable value which is the more sane way to write your code.
Syntax
toSorted()
toSorted(compareFn)
Check the comparison of sort and toSorted
sort
toSorted
3. New HTML
Web devs also got some cool updates in the form of brand-new HTML elements. They include
<search />element
The search tag is a more semantic way to define a search box on a website which can replace the more generic form tag
<dialog />element
The dialog tag is more powerful and allows you to create actual modal dialogues and then control them with JavaScript using built-in methods like showModal() and closeModal(). Go ahead and try it out!
- iOS web push
After years of begging and pleading with Apple, iOS finally allows push notifications to come from web apps.
That’s a huge win for the 0.00001% of website users who allow websites to send them push notifications, which probably is your grandpa who accidentally clicked the allow button and now has no idea how to turn it off.
4. Next.Js App Dir
The world’s most popular JavaScript framework, Next.js, is an entirely different framework than it was last year. Thanks to the App directory which became stable in May with version 13.4.
The most notable difference is that you can now fetch data directly inside a React component that can run on the server.
The reception to the app directory has been somehow mixed, on one hand, it has a lot of awesome new features and simplified code but many have complained about it feeling rushed and half-baked.
People have complained about having to use the "use-client" directive everywhere due to breaking existing React libraries.
People have complained about the slow Dev Server which is powered by Rust, which is weird because anything powered by Rust is supposed to be fast.
Next.js’ new server action features are compared to PHP, one of the most offensive slurs you can make against a JavaScript framework. But the biggest issue is running Next.js outside of Vercel. This has led to projects like Open Next to take on the tedious job of getting it to run anywhere.
5. Nuxt Dev Tools
NuxtJs and the Vue ecosystem also had a lot of cool updates in 2023 like its dev tools. These tools run directly on the browser and make it much easier to understand the structure of a complex application.
But one thing you might not know about Nuxt is that many of its components are available through the unified JavaScript tools ecosystem. So if you do not care about VueJs and just want a web server you can use Nitro to build a fast server with plain JavaScript.
What’s interesting is that I think the VueJs ecosystem has changed the least in 2023 and as a consequence, it feels like the most stable and predictable ecosystem.
6. Svelte Runes
Svelte got ruined in 2023.
In a shocking announcement a couple of months ago, Svelte announced a new feature called runes that will dramatically change the developer experience in version 5.
Instead of defining reactive variables with let there’s now this thing called runes, which is essentially a compiler macro that tells the svelte compiler this value is reactive.
<script>
let oldWay = 23
let newWay = $state(23)
</script>
Svelte is also removing the dollar sign, and stores by introducing runes like derived and effect.
<script>
$:{
console.log("oldway")
}
$effect(()=>{
console.log("oldway")
});
</script>
The initial response to these changes was somewhat mixed with some users feeling like these changes make Svelte look a lot more like React which is the type of development experience they are trying to get away from. But on the other hand, a lot of people love these changes and see them as necessary to evolve the framework in the right direction.
7. Angular 17
The award for the most changed framework in 2023 though goes to Angular!
It has a long list of new features but the most notable changes for Angular haters out there would be the new template syntax which provides a cleaner way to handle conditionals and loops replacing things like ngif and ngfor.
@for(item of items; track item.title){
<p> Hello {{title}} </p>
}
In addition, Angular has also adopted Signals much like all other frameworks youth there, and brings a new feature Deferrable views which enables declarative lazy loading directly in a template.
Most importantly, Angular has a brand new logo which was the only thing holding it back from being the world’s most popular framework in the past ;).
8. Node.Js
On the backend, NodeJs is quietly getting better.
With NodeJs version 20, it released a new permissions model that improves security by controlling which features a script has access to, similar to what Deno released a few years ago.
With the release of Node 21, it introduced its web socket client which is based on the WebSocket API in the browser.
9. Bun Runtime
In the dynamic landscape of Backend JavaScript in 2023, Bun emerges as a significant disruptor, introducing a novel JavaScript runtime crafted in Zig.
Promising an exceptional development experience, Bun aims to redefine the way developers approach Backend JavaScript projects.
However, its ambitious claims about performance come hand-in-hand with the recognition that, like any groundbreaking release, the initial version uncovered quite a few bugs.
Despite these challenges, Bun remains a beacon of promise for the future of Backend JavaScript, signaling a potential paradigm shift and offering an exciting avenue for developers seeking innovative approaches to server-side JavaScript development.
10. HTMX
This is the biggest one of all!
HTMX builds upon the fundamental concept of HTML, which was originally designed as a hypertext markup language for creating documents with links, allowing users to navigate between pages.
By extending HTML, HTMX introduces new possibilities and functionalities directly within the HTML language itself. This means developers can achieve more dynamic and interactive behavior without relying heavily on external scripts or complex frameworks.
In traditional HTML, links (anchors) and forms are the primary elements that can trigger HTTP requests. HTMX, however, expands this capability to any HTML element. This means that, with HTMX, you can use elements like buttons, divs, or any other HTML tag to initiate server-side requests, enhancing flexibility and control over interactions.
HTML typically responds to events like clicks and form submissions. HTMX goes beyond this limitation by allowing any event, not just the standard ones, to trigger HTTP requests. This flexibility enables developers to create more sophisticated and responsive user interfaces by responding to a broader range of user interactions.
HTML typically responds to events like clicks and form submissions. HTMX goes beyond this limitation by allowing any event, not just the standard ones, to trigger HTTP requests. This flexibility enables developers to create more sophisticated and responsive user interfaces by responding to a broader range of user interactions.
Conclusion
In conclusion, the ever-evolving world of JavaScript has seen remarkable transformations in 2023, with significant updates impacting the way developers approach web development.
From the expanded capabilities of Object.groupBy() to the disruptive influence of Bun in Backend JavaScript, these changes signify a continuous push for innovation and efficiency in the field.
Thank you, dear readers, for investing your time in exploring these JavaScript nuances with us. Your commitment to staying informed is invaluable. Stay tuned for more insights in our future articles. Until next time, happy coding!
