Keeping up with the latest JavaScript developments

JavaScript, originally known as a language for web development, has swiftly expanded its reach to dominate mobile app development and, more recently, even the realm of back-end frameworks. The power of this scripting language has not only transformed the way we build interactive web experiences but has also opened new horizons for developers seeking a unified language for all aspects of software development.

What’s new in JavaScript?

As advocates of high software quality and security, we make it a priority to stay up-to-date with the latest developments in JavaScript. Recently, we also had the privilege of attending some insightful talks at JSNation 2023 that shed light on the advancements within the JavaScript ecosystem.

A modern way to handle asynchronous tasks in JavaScript

Web and app developers often face challenges when dealing with inconsistencies between their views and the underlying data or state. This issue arises from the asynchronous nature of fetching data and the synchronous updating of the user interface (UI). Various front-end frameworks address this problem differently, but each framework introduces its own set of challenges when it comes to handling asynchronous inconsistencies.

Three approaches can be adopted to handle these inconsistencies:

1. Displaying placeholders
   While waiting for an asynchronous task to complete, a placeholder can be shown in the user interface.
2. Displaying the past state
   Alternatively, developers can choose not to inform the user about the ongoing async task and instead show the last known state or data.
3. Displaying no state
   And last but not least, a developer can choose to show no data until the async task completes.

The selection of these approaches depends on your own or your designer's perspective on what you believe the best user experience is.

One promising solution introduced is the concept of "Suspense", which offers a way for displaying fallback or placeholder content until asynchronous resources have been successfully fetched. Many modern front-end frameworks, such as React, Vue, and SolidJS, have integrated Suspense as a built-in component, making it developer-friendly and easily accessible.

Suspense simplifies the process of handling asynchronous operations by providing a straightforward way to manage loading states within the user interface. Developers can utilise Suspense components to define fallback content, which is displayed to users while waiting for async resources to be retrieved. Once the data is fetched, the fallback content is replaced with the actual content, resulting in a smooth and seamless user experience.

Top Core Web Vitals Recommendations for 2023

Improving web app performance is a crucial aspect of delivering a great user experience.

There are 3 vital metrics to enhance the performance of your web app.

Largest Content Paint (LCP)

Largest Content Paint is a measure of load performance of your web page. Only half of all current websites meet the recommended threshold, which is loading within 2 seconds.

One crucial aspect to consider is the load time of your HTML elements. Among these elements, videos and images tend to be the most time-consuming. Unfortunately, many developers overlook the fact that images which are not directly discoverable by HTML (e.g., when using a URL instead of the src attribute) can significantly impact site loading time.

Besides improving the load time, try to prioritise your resources. With the fetchpriority="high" attribute you can prioritise the proces of fetching your resource. This instructs the browser to load it earlier, rather than waiting for your scripts to complete.

First Input Delay (FID)

First Input Delay is a measure of a page's responsiveness to user interactions. A lot of sites score fairly good on this but there are some tips you can apply to your web app:

• Avoid unnecessary JavaScript
  Many web apps incorporate JavaScript code that is not essential for the core functionality of the app. This includes third-party packages or legacy code that is no longer utilised. It is highly recommended to remove such unnecessary code as it can adversely impact the responsiveness of your app.
• Avoid large rendering updates
  Not only JavaScript can impact the responsiveness, rendering can be a type of expensive work. Try to keep your DOM size small, use CSS Containment and avoid using the requestAnimationFrame() API for non-visual work.

Cumulative Layout Shift (CLS)

The following recommendations aim to mitigate the frustrating layout shift issue that occurs during page load. This problem often arises when resources are lazily loaded, causing the page to constantly shift back and forth, impacting the User Experience (UX) significantly!

Here are some tips to avoid CLS:

• Set an explicit size on your images
  By setting a fixed height and width on your images/videos, you reduce the layout shift on page load.
• Ensure pages are eligible for bfcache
  Browsers employ a navigation mechanism known as the back/forward cache (bfcache) to enhance user experience when navigating between pages. It allows the browser to store a page in memory when a user navigates away from it, enabling quicker retrieval when the user returns to the same page using the back or forward buttons.
• Avoid animations/transitions that use layout-inducing CSS properties

To gain further insights on enhancing your web app, we recommend reading the official blog article on web.dev. This resource provides a comprehensive and detailed overview of techniques and best practices for improving web app performance.

The State of Passkeys on the Web

Passwords vs Passkeys

When we discuss authentication, the first thing that often comes to mind is the traditional combination of usernames and passwords. However, many of us are well aware of the frustrations that come with creating and remembering secure passwords, let alone juggling multiple passwords for different sites and applications. As developers, we strive for authentication systems that prioritise both security and a seamless user experience. Unfortunately, passwords often fall short in delivering on both fronts, typically excelling in one area while leaving room for improvement in the other.

Over the years, various tools and methods have emerged to address the security and user experience challenges associated with passwords. Password Managers, Social Logins, and Two-Factor Authentication have made significant strides in enhancing both security and UX, alleviating some of the burdens of traditional password-based authentication. But there is a new way of authenticating which covers both Security and User Experience, called Passkeys.

Passkeys approach relies on a public and private key model, where the public key is shared while the private key remains securely stored on the user's device. Biometrics, such as fingerprint or facial recognition, are commonly used to generate the Passkey, ensuring both enhanced security and a seamless user experience. With Passkeys, the frustrations of traditional passwords are left behind, paving the way for a more secure and user-friendly authentication process.

Improve your authentication with Passkeys

How can we incorporate Passkeys into our web app? Let's start by making some small yet impactful changes to enhance security and user experience. One approach is to utilise the autocomplete attribute in HTML, enabling browsers to generate and store passwords automatically. Another option is to leverage the Credential Management API, which facilitates the secure storage and retrieval of passwords.

When it comes to Passkeys specifically, the good news is that most modern browsers support the Web Authentication (Web Authn) API. By leveraging this powerful API, developers can seamlessly generate public/private key pairs directly within the browser. Implementing Passkeys in your application becomes a feasible task, eliminating unnecessary complexities.

To learn more about Web Authn API and explore its capabilities, we recommend referring to the official documentation.

Drawback of using Passkeys

While Passkeys offer significant advantages over traditional passwords, it's important to consider some of the drawbacks associated with this authentication method. Here are a few key points to keep in mind:

1. Reliance on Authenticators
   Passkeys depend on the availability of authenticators, which often involve relying on platforms like Google or Apple that utilise biometric data for key generation. This reliance on external platforms introduces a potential dependency and raises concerns about privacy and data security.
2. Limited Browser Support
   Currently, widespread browser support for Passkeys is not yet fully established. While the Web Authentication API is gaining traction, it may take time for Passkeys to become universally supported across different browsers. Developers need to consider browser compatibility when implementing Passkeys in their applications.
3. Device Specificity
   Passkeys are tied to specific devices. This means that if a user switches to a different device, they may face challenges accessing their accounts until syncing functionality becomes widely available. However, some password managers and operating systems are gradually introducing syncing capabilities to address this limitation.

As Passkeys continue to evolve, these drawbacks are expected to be addressed through advancements in technology and widespread adoption. It is crucial for developers and users alike to stay informed about the latest developments in Passkey authentication to fully understand its benefits and limitations.

Accessible Component System Through Customisation in JavaScript

While most current UI libraries offer a wide range of components and deliver an excellent user experience, they often fall short when it comes to heavy customisation and non-standard scenarios. These limitations can make managing, scaling and maintaining performance a challenging task.

At JSNation, a talk covered how to create a UI library that gives users the utmost freedom to customise components while keeping our performance and scalability optimal.

Properties of a component in a component library

To ensure the creation of accessible components within a component library, it is essential for each component to adhere to specific properties. Here is a summary of these crucial properties:

1. Reusability
   A component should be designed to be highly reusable, allowing developers the flexibility to customise it as needed. For instance, a sidebar component can be utilized for displaying a menu or presenting the current status of a shopping cart.
2. Stylability
   It is important for a component to be easily stylable, enabling developers to modify its colors and styling to convey its purpose clearly. For example, a toast message might have different background colors based on the message's significance, such as a red background for error messages and a green one for success messages.
3. Customisability
   In addition to styling, providing developers with the ability to customise a component is crucial. For instance, allowing the addition of text to an icon-only button can enhance its accessibility and usability.
4. Accessibility
   Often overlooked, accessibility is a critical aspect of component development. Components should render correctly across various viewports, ensuring their functionality is supported across a wide range of devices and device settings.
5. Responsiveness
   Components should be designed to be responsive, adapting their layout and behaviour to support both mobile and desktop views. This ensures a consistent and user-friendly experience across different devices.
6. Isolation and Testability
   Components should be isolated from one another, meaning they should have no impact on other components. This allows for easier testing and maintenance, ensuring that modifications or updates to a specific component do not affect the functionality of other components.

The above properties can be categorised into two main categories: Visual Consistency and Functional Consistency. Visual Consistency emphasises elements such as consistent paddings, colors, and typography, while Functional Consistency focuses on ensuring components have consistent functionality.

Want to learn more about building a highly accessible component library? You can always have a look at the recorded talk here.

Wrapping up

We are planning to use these new insights in the development of our products/services. Furthermore, we are committed to staying up-to-date on the latest advancements to provide the highest quality to our customers.