Author: Agazi Mekonnen

The release of Firefox 127 introduces new JavaScript Set methods, including intersection(), union(), difference(), symmetricDifference(), isSubsetOf(), isSupersetOf(), and isDisjointFrom() now supported across major browser engines. Polyfills are no longer needed to make them work everywhere. These additions provide convenient, built-in ways to manipulate and compare collections aiming to simplify development and enahnce performance.

JavaScript Sets function similarly to Arrays but guarantee the uniqueness of each value. This automatic removal of duplicates makes Sets perfect for creating unique collections. For instance, here’s a simple example of creating and adding elements to a Set:

const users = new Set();
const alice = { id: 1, name: "Alice" };
users.add(alice);

users.forEach(user => { console.log(user) });
    

Sets are also typically faster for checking if an element exists compared to Arrays, making them useful for performance-sensitive applications.

The union() method returns a new Set containing elements from both the original Set and the given Set. This is useful for combining collections without duplicates:

const set1 = new Set(["Alice", "Bob", "Charlie"]);
const set2 = new Set(["Bob", "Charlie", "David"]);
const unionSet = set1.union(set2);

unionSet.forEach(name => {
  console.log(name); // Outputs: Alice, Bob, Charlie, David
});
    

The “intersection()” method returns a new Set containing only elements present in both Sets. This is helpful for finding common elements:

const intersectionSet = set1.intersection(set2);

intersectionSet.forEach(name => {
  console.log(name); // Outputs: Bob, Charlie
});
    

The symmetricDifference() method returns a new Set containing elements present in either of the Sets but not in both. This is useful for finding unique elements between two Sets:

const symmetricDifferenceSet = set1.symmetricDifference(set2);

symmetricDifferenceSet.forEach(name => {
  console.log(name); // Outputs: Alice, David
});
    

The difference() method returns a new Set containing elements present in the original Set but not in the given Set. This is useful for subtracting elements:

const set1Only = set1.difference(set2);

set1Only.forEach(name => {
  console.log(name); // Outputs: Alice
});
    

The methods isSubsetOf() and isSupersetOf() return Boolean values based on the relationship between Sets. The “isSubsetOf()” method checks if all elements of a Set are in another Set, while the isSupersetOf() method determines if a Set contains all elements of another Set.

const subset = new Set(["Alice", "Bob"]);
const superset = new Set(["Alice", "Bob", "Charlie"]);

if (subset.isSubsetOf(superset)) {
  console.log("subset is a subset of superset"); // This will be printed because all elements in subset are also in superset
} else {
  console.log("subset is not a subset of superset");
}

if (superset.isSupersetOf(subset)) {
  console.log("superset is a superset of subset"); // This will be printed because all elements in subset are also in superset
} else {
  console.log("superset is not a superset of subset");
}
    

The isDisjointFrom() method checks if two Sets have no common elements:

const set3 = new Set(["Eve", "Frank", "Gina"]);

if (set1.isDisjointFrom(set2)) {
  console.log("Set1 and Set2 are disjoint"); // This will be printed because set1 and set2 have no common elements
} else {
  console.log("Set1 and Set2 are not disjoint");
}

if (set1.isDisjointFrom(set3)) {
  console.log("Set1 and Set3 are disjoint");
} else {
  console.log("Set1 and Set3 are not disjoint"); // This will be printed because set1 and set3 have a common element "Charlie"
}
    

The community has responded positively to these new methods. In a Reddit thread, user peterlinddk said:

“Excellent – finally we can use Set for more than a ‘duplicate-detector’. I only wish that there were some way for objects to be ‘equal’ without them having to be the exact same instance. Kind of like Java’s .equals and .hashCode methods.”

Another user, Pelopida92, praised the performance benefits, stating:

“Sets are awesome. I used them extensively for some big-data scripts, as they have way better performance than arrays and are very easy to use and convenient.”

AdonisJS, a Node.js web application framework, has released its latest major release AdonisJS v6. Notable highlights include a transition to ECMAScript Modules (ESM), an improved and simplified IoC container, improved TypeScript integration, and a more straightforward approach to route and controller binding. Additionally, the release introduces a new validation library called VineJS, Vite integration for bundling frontend assets, and an overhauled scaffolding system with a codemods API.

One of the key highlights of AdonisJS v6 is the migration to ECMAScript Modules (ESM) and TypeScript, aligning the framework with modern JavaScript standards. This move ensures compatibility with the latest versions of packages and enhances security by allowing the use of the latest security fixes. AdonisJS v6 applications will now use TypeScript and ESM by default, though users can still install and use packages written in CommonJS.

The release also bids farewell to TypeScript compiler hooks, a notable feature in AdonisJS v5. In v6, the framework eliminates the need for these hooks, resulting in regular JavaScript imports without relying on the official TypeScript compiler API. This change simplifies the codebase and allows developers to choose other Just-In-Time (JIT) tools like ESBuild or SWC.

Type safety is enhanced in AdonisJS v6, featuring improvements to routes, controllers, middleware references, AdonisRC files, and event emitters. The adoption of direct imports replaces the use of magic strings in routes and controllers, resulting in improved type safety and enhanced code readability. Named middleware references and AdonisRC files are now managed through TypeScript references, contributing to better code intelligence and an improved developer experience.

The introduction of class-based events is another noteworthy enhancement in AdonisJS v6. Developers can now define events as classes, encapsulating both the event identifier and data within a single class. This approach enhances type safety and provides a cleaner way to structure events in the application.

AdonisJS v6 embraces Vite as the official frontend bundler, moving away from recommending Webpack Encore for new projects. The release also brings a new scaffolding system and codemods API, providing a more streamlined and efficient way to configure packages and scaffold resources. In addition, it introduces VineJS as the official validation system. VineJS aims to offer improved speed, comprehensive features, and a more developer-friendly API compared to the previous validation module.

The documentation for AdonisJS was also improved in the release, covering previously undocumented topics like IoC Container and Service providers. The framework aims to provide developers with comprehensive guides and references to facilitate a smoother learning curve.

Looking ahead, the AdonisJS team outlined future plans for AdonisJS v6. The focus will be on stabilizing the framework, fixing bugs, and improving the migration guide. Several packages, such as Drive, Limiter, Lucid Slugify, Attachment Lite, Route model binding, and Health checks, are expected to be migrated to AdonisJS 6 in the coming weeks.

The recent report from Rising Stars highlights the trends in the JavaScript ecosystem and showcases standout projects based on GitHub Stars in 2023. Overall, the most popular project was shadcn/ui, a collection of UI components that can be used to create custom components. The JavaScript runtime Bun continued its momentum, making it the second most popular project. Excalidraw, an open-source virtual hand-drawn style whiteboard, gained popularity.

Shadcn/ui, now a year old since its first commit on GitHub, is a collection of reusable components that can be copied and pasted into apps to build components. This eliminates the need to install the library. According to shadcn/ui FAQ page, the idea is to

… give you ownership and control over the code, allowing you to decide how the components are built and styled.

Shadcn/ui can be used with frameworks that support React such as Next js, Astro, Remix and Gatsby.

Bun, which claimed second in the overall most popular project, is a JavaScript runtime, package manager, test runner, and bundler that gained attention for its speed, efficiency, and comprehensive toolkit. Developed in the Zig programming language, Bun aims to be a replacement for Node.js.

In the frontend framework list, React continued to hold its ground as a frontrunner in the JavaScript ecosystem. Secondly, Htmx took the lead as a JavaScript library enabling developers to create interactive web applications using HTML alone. This is achieved by extending HTML with new attributes that trigger HTTP requests and handle response data, allowing the development of modern web applications without extensive JavaScript code.

Securing the third spot in front-end frameworks was Svelte. Svelte is a compiler-based frontend framework that uses declarative syntax and reactivity to build performant and maintainable web applications. The anticipated major release, Svelte 5 is expected to introduce significant improvements and new features to further enhance the development experience and application performance.

In the Vue ecosystem, the community navigated the sunset of Vue 2, with efforts to upgrade to version 3 supported by frameworks like Nuxt, Vuetify, and PrimeVue. Nuxt was ranked as the most popular Vue framework.

Next.js maintained its dominance in the back-end/full-stack category. Next.js 14 was released in 2023 and the most notable changes are Turbopack Optimizations for faster initial page load times, improved performance, and reduced code size. Server Actions Stability is now stable and Partial Prerendering(preview), a technique that pre-renders only parts of an application, is introduced as a preview feature. Astro climbed the rankings with its innovative static site generation and dynamic page generation capabilities.

In the mobile space, Expo, Tamagui, and Nativewind led efforts to unify web and native development experiences, maximizing code reuse and increasing accessibility for web developers. React Native maintained its dominance, but a shift toward more opinionated solutions indicated evolving paradigms in mobile development.

JetBrains JavaScript Days 2023 recently concluded, offering
developers a wealth of practical insights into the dynamic realms of Angular, AI integration, TypeScript, ECMAScript
development, React best practices, JavaScript tooling improvements, and innovative view transitions. The series of
talks featured in-depth discussions, providing valuable knowledge for developers navigating the ever-evolving
landscape of web development.

In her talk on the State of Angular v17, Simona Cotin an engineering
manager at Google, emphasized adaptability to developers’ needs. The upcoming release focuses on flexible controls,
addressing performance improvements, lazy loading with the “defer” primitive, and enhancements in server-side
rendering and static site generation. The talk highlighted a redesigned control flow syntax and additional features
like View Transitions API and Angular Signals.

Daniel Roe who leads the NUXT core team explored
malleable applications, emphasizing user-centric design and the dynamic modification of app behavior based on
individual preferences. During the live coding session, Roe practically demonstrated the implementation of this
concept, integrating an AI component with OpenAI to dynamically change the app’s behavior. The talk covers technical
details such as setting up a NUXT project, incorporating GraphQL queries, and creating a malleable component. Roe
encourages the audience to delve into the concept of malleable applications and plans to share the code on a Git
repository for those interested in experimentation.

Stefan Baumgartner, author of TypeScript Cookbook addressed
challenges in TypeScript usage, focusing on data fetching, error handling, function overloads, mutations, and
TypeScript solutions. The talk emphasized a pragmatic approach, acknowledging TypeScript’s benefits while
considering trade-offs and making informed decisions.

In his talk, web enthusiast Romulo Cintra provided an insightful overview of
the ECMAScript development process, spanning from initial ideas to language implementation. Emphasizing the
significance of standards bodies like W3C and TC39, he detailed the roles within TC39 and its consensus-driven
decision-making approach. Cintra discussed various proposal stages, illustrating examples like type annotations and
pattern matching. He highlighted challenges in proposing larger features and stressed the importance of community
involvement. The talk showcased specific proposals at different stages, including Temporal API and Duration Format
API, while encouraging participation in open source contributions and discussions within the ECMAScript community.

Cory House, drawing on a decade of React consulting experience, discussed
common mistakes in React development at JetBrains JavaScript Days 2023. He covered issues like reliance on outdated
tools such as Create React App, the underestimation of TypeScript benefits, suboptimal state management, and
disorganized component structures. House suggested exploring alternatives to Create React App for improved features
and support, emphasizing the need for adapting to newer tools. The talk underscores TypeScript’s value in enhancing
type safety and development efficiency, urging developers to consider its adoption.

Luca Casonato at Deno company critically examined
JavaScript’s limitations, comparing the ecosystem to Rust and Go. He introduced Dino, a JavaScript runtime
addressing these limitations, showcasing its simplicity and productivity benefits. The talk advocated for a
practical “batteries included” approach in programming languages.

James Snell, a principal engineer at Cloudflare and a co-chair at Web Interoperable Runtimes Community Group (WinterCG),
discussed non-browser JavaScript runtimes. He emphasized the positive impact of competition from runtimes like Deno
and Bun, stating that it provides developers with more features, improved performance,
a better developer experience, and diverse deployment options. Snell advocated for standardized APIs to ensure
portability while cautioning against potential lock-in issues. The talk also introduced WinterCG as an essential
initiative for collaborative efforts and shared standards, aiming to provide a space for JS runtimes to collaborate
on API interoperability.

Astro co-creator Fred K. Schott
discussed view transitions, a browser technology utilized in the Astro framework. The talk emphasized
server-rendered HTML, minimal JavaScript, and CSS for transitions. Astro’s journey, accessibility considerations,
and unique features like persistent elements were showcased. The presentation provided insights into the
implementation, browser support, and accessibility of view transitions.

The recordings from JetBrains JavaScript Day 2023 are available on YouTube.