General

Announcing Free Trainings - Progressive Web Apps and Using NgUpgrade for your Angular Migration

May 20, 2020

1 min read

Less than two weeks after wrapping up our inaugural JavaScript Marathon, we are thrilled to share two brand new free trainings from the team at This Dot Labs - available for you to watch anytime.

In Introduction to PWAs and Service Workers, Software Engineer Pato Vargas will walk you through creating your first PWA, implementing push notifications, testing your features, and using Firebase.

"I really enjoyed working on this training," says Vargas, "learning service workers is important for any JavaScript developer, so this training appeals to anyone writing JavaScript!"

Software Engineer, Frederick Prijk, is also excited to present his new training series, Upgrading AngularJS to Angular Using NgUpgrade, which walks you through a simple AngularJS to Angular migration in just over an hour!

You can find these trainings, and all other past trainings, including those presented in the JavaScript Marathon series, by visiting our free resources page!

Introducing a new technology to your enterprise development team, or having trouble with an existing technology? Learn more about how This Dot Labs can tailor a training program to your team by chatting with us, or by reviewing the trainings we already offer!

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

This Dot

Improving INP in React and Next.js

Improving INP in React and Next.js In one of my previous articles, I've explained what INP is, how it works, and how it may affect your website. I also promised you to follow up with more concrete advice on how to improve your INP in your favorite framework. This is the follow-up article, where I'll focus on how to improve your INP score in React and Next.js. How to prepare for INP in React and Next.js? The first thing to do is to ensure you're using the latest version of React. The React team has been working on making React more INP-friendly and has already made some improvements in the latest versions. To enhance your INP score, consider fully taking advantage of new features introduced in React 18, such as Concurrent Rendering, Automatic Batching, and Selective Hydration. However, there are also some general areas to focus on, such as SSR and SSG in Next.js, Web Workers, or optimizing your hooks and state management. Concurrent Rendering The Concurrent Mode in React uses an algorithm that breaks rendering down into so-called "fiber nodes" and schedules the renders based on their expiration and priority. This effectively allows the user to interact with the page while the rendering is still in progress. In previous React versions, all updates, such as setState calls were treated as "urgent" and once the re-render had started, there was no way to interrupt it. Concurrent Mode changes this by being able to prioritize the updates and interrupt a non-blocking state update started with startTransition. For a simple explanation of concurrency in React, you can check out Dan Abramov's explanation. As part of the Concurrent Mode, React introduced several lifecycle methods that allow you to prioritize the rendering of certain parts of your UI, such as: - useTransition hook that allows you to update the state without blocking the UI, - useDeferredValue hook that allows you to defer the rendering of certain parts of your UI, - startTransition API that, similarly to the useTransition hook lets you mark a state update as non-blocking. It lacks, however, an indication of whether it's still pending. Automatic Batching Introduced in React 18, Automatic Batching reduces the number of re-renders that happen on state changes even when they happen outside of event handlers, e.g. in a setTimeout or Promise callback. This feature comes out of the box and you don't have to do anything to enable it, and it makes a great argument for upgrading to React 18. Selective Hydration Selective Hydration allows you to take hydration off the main thread by wrapping your components in a Suspense boundary. This way, components can become interactive faster as the browser can do other work on the main thread while the hydration is happening. To fully take advantage of selective hydration, consider the following: - Prioritizing Above-the-Fold Content: Use Suspense boundaries strategically around any parts of your application that may take the server longer to deliver to ensure they don’t block critical content from becoming interactive as soon as possible. - Hydration on Interaction: Implementing hydration upon user interaction for non-critical components can drastically reduce the main thread's workload, enhancing INP. Vercel even has a small case study showing how using selective hydration improved the performance of a Next.js site. Server-Side Rendering (SSR) and Static Site Generation (SSG) in Next.js Not everything has to run client-side. Next.js excels in SSR and SSG capabilities, which can significantly impact INP by delivering content to users faster. Optimizing SSR with techniques like incremental static regeneration (ISR) or leveraging SSG for static pages ensures that users can interact with content faster, improving the perceived performance. Workers Offloading heavy computations to Web Workers can free up the main thread, enhancing the responsiveness of React and Next.js applications. This strategy is especially useful when dealing with third-party scripts. Offloading such scripts in Next.js can be easily done by specifying the "worker" strategy on your Script component. Be aware that this feature is not yet stable and does not work with the app directory, though. If you want to take things one step further, you could use Partytown, which helps you offload any resource-intensive scripts to Web Workers. It comes with a React component that you can use to wrap your third-party scripts and offload them to a Web Worker, and it's compatible with Next.js as well. Hooks and State Management State management in React applications can easily get out of hand, leading to unnecessary re-renders and effectively an increased INP. Sometimes, using a state management library like Redux or MobX can help you consolidate your state and reduce the number of re-renders. However, they are not silver bullets and can also introduce performance issues if not used properly. If you are dealing with a lot of re-renders due to prop changes, make sure you are leveraging memoization. As of now, you may need to work with useMemo and useCallback hooks to memoize your values and functions, respectively. The upcoming React 19’s Forget Compiler, however, will apparently memoize everything under the hood, making these hooks obsolete. Using memoization properly can help you reduce the number of re-renders and improve your INP. To investigate your hook dependencies and re-renders, you can leverage React Developer Tools or use this handy helper hook I found on the internet to trace your re-renders: ` Conclusion Improving INP in React and Next.js is not easy and can require much investigation and fine-tuning. Still, it's worth doing to avoid being penalized by Google in its search results and provide a better experience for your users. Adopting React 18's new features, leveraging SSR and SSG in Next.js, utilizing Web Workers, and optimizing hooks and state management can significantly boost your INP score and deliver a faster application to your users. Remember, INP is just one among many performance metrics emphasizing the need for a comprehensive approach to performance optimization...

Apr 19, 2024

5 mins

Web PerformanceReactNextJSJavaScript

Maximizing Routing Flexibility with Next.js Parallel and Intercepting Routes

Maximizing Routing Flexibility with Next.js Parallel and Intercepting Routes Introduction: Next.js, a powerful React framework, offers two essential features - Parallel Routes and Intercepting Routes - that enable developers to create highly dynamic and seamless user experiences in their applications. In this blog post, we will explore both Parallel Routes and Intercepting Routes, highlighting their functionalities, use cases, and how they can be combined to enhance application routing. What are Parallel Routes? Parallel Routes in Next.js allow the rendering of multiple pages within a shared layout. Rather than navigating to a completely separate page, Parallel Routes enable the simultaneous rendering of different pages based on certain conditions such as user roles or tab navigation. By leveraging named slots, defined using the @folder convention, multiple pages can be seamlessly integrated into a single layout, enhancing user experience and reducing code duplication. How to Use Parallel Routes: To utilize Parallel Routes in Next.js, you must define named slots for the desired pages within your application's folder structure. These slots are then passed as props to a shared parent layout component. For example, consider a social networking application where two pages, feed and notifications, must be rendered within a common layout. You can define Parallel Routes using the following structure: ` The layout component in app/layout.js will accept the @feed and @notifications slots as props and render them alongside the children prop. Here's an example of the layout component: ` It's important to note that slots do not affect the URL structure and are not considered route segments. This means the URL would be /mypage/@feed/views for a route like /mypage/views since @feed is a slot. Also, to prevent the application from rendering nothing or throwing an error, we could use the default.tsx file: ` In this example, the default.tsx file specifies the default content (or fallback) to render when none of the named slots match the current route. It acts as a catch-all for routes without a corresponding slot. Some Use Cases: *Conditional Routes:* Parallel Routes can conditionally render routes based on certain conditions, such as user roles. For example, you can render a different dashboard page for admins and users. This can be achieved by creating a layout component specific to the dashboard and checking the user role to determine which slot to render. *Tab Groups:* You can utilize Parallel Routes to create tabbed navigation within a section. This is especially useful for analytics or multi-page views. Adding a layout inside a slot allows users to navigate between different pages within that slot independently. *Loading and Error UI:* Parallel Routes can be independently streamed, allowing you to define custom error and loading states for each route. This enables better control over the user experience by providing distinct feedback for different app sections. *Modals:* Parallel Routes can be combined with Intercepting Routes to create modals with shareable URLs, preserved context on refresh, and customized navigation behavior. By intercepting certain routes and rendering them within a modal component, you can create a seamless modal experience. Understanding Intercepting Routes: Intercepting Routes in Next.js allows you to load content from another route within the current layout without changing the URL or refreshing the page. Using the (..) Convention: Intercepting routes are defined using the (..) convention, which is similar to the relative path convention ../ but for route segments. The convention allows for matching segments on the same level (.), one level above (..), two levels above (..)(..), or from the root app directory (...). For example, to intercept the photo segment from within the feed segment, you can create a (..)photo directory. Integrating Intercepting Routes with Parallel Routes - Modals: One powerful use case for Intercepting Routes is creating modals, which can be combined with Parallel Routes to solve common challenges such as making the modal content shareable through a URL, preserving context on page refresh, and handling backward and forward navigation. Let's make an example: ` Our folder structure will be: In this example, when a user clicks on a photo within the /gallery page, the route /photo/:photoId will be intercepted and rendered within the (..)photo directory, overlaying the gallery content. This means that the photo route is only one segment level higher despite being two file-system levels higher. In the example above, the path to the photo segment can use the (..) matcher since @modal is a slot and not a segment. Common Use Cases - Beyond Modals: Intercepting Routes can also be utilized in other scenarios. Some examples include opening a login modal in a top navbar while having a dedicated /login page, or opening a shopping cart in a side modal for better accessibility or creating wizards or multi-step forms within a single page. The possibilities are endless. Conclusion Next.js Parallel and Intercepting Routes offer powerful methods for enhancing the routing capabilities of your applications. With Parallel Routes, multiple pages can be seamlessly integrated within a shared layout, simplifying navigation and enhancing user experience. By incorporating Intercepting Routes, you can create dynamic overlays like modals, enabling content from different routes to be displayed within the current layout. By leveraging these features, you can unlock exciting possibilities and take your Next.js applications to new heights of user engagement....

Apr 5, 2024

3 mins

NextJSJavaScript

A Breakdown of RxJS 7.0 Performance Improvements

It’s official. RxJS 7.0 has been deemed stable and is now available in its beta form. The core team, committed to maintaining a dependable and adaptable reactive programming tool, has built this new release to improve many aspects of developer experience without triggering changing breaks to existing code. Through a partnership with Google, the RxJS core team was able to test its latest release by integrating the library into the Google 3 monorepository. In doing so, they ran RxJs against thousands of build targets, and across countless applications, to identify where code breaks were happening, and what could be done to ensure stronger stability. Updated Typing RxJS 7.0 is written in Typescript 3.8, which allows users to leverage all of Typescript’s latest features. For example, RxJS’ typing inference capacity, especially with respect to how the library handles generics, has significantly improved. Previous versions struggled to type larger rests of arguments, with prior upper bound limits not usually exceeding 8 or 9 values. These limitations, however, have been removed, allowing developers to pass an infinite number of values with one call. The team was also able to fix many antiquated types that did not reflect the runtime behavior of actual APIs. As a result, several Observables, including *'toPromise()'*, have been deprecated in order to mitigate the challenges of legacy behavior without significantly impacting existing code. New Features animationFrames(): an Observable that returns the milliseconds elapsed since the start of the Observable, which is especially useful for coding animation, and replaces previous methods of incrementing numbers. lastValueFrom() and firstValueFrom(): Observables that return the last and first values in a promise, respectfully. They improve upon *‘toPromise()’* by returning an ‘EmptyError’ when passing promises without values, and giving users more flexibility when selecting the values they want returned. AsyncIterable support: Any areas of code that previously accepted a Promise, or an Observable, now also accept AsyncIterables. rxjs-for-await: a separate library which supports async-await for-await loops via AsyncIterables. *'retry({resetOnSuccess: true})'*: In 6.0, if you had a source that errored with, for example, a retry count valued at 5, it would only error a total of 5 times, no matter how many successful messages it had passed. With *'retry({resetOnSuccess: true})'*, the retry count value will reset every time a successful message is passed. TimeStamp: an interface with a *‘now()’* method that returns a number. Name Changes: In order to create fewer collisions between four legacy operators, and creation methods with the same name... *'zip(other$)'* is now *'zipWith(other$)'*. *'combineLatest(a$, b$)'* is now *'combineLatestWith(a$, b$)'*. *'merge(partner$)'* is now 'mergeWith(partner$)'. *'concat(ender$)'* is now *'concatWith(ender$)'*. Deprecations In 7.0, no critical elements have been removed from the library, but several features have been deprecated. These include: ResultSelectors, which have been deprecated since 5.0. The process of passing scheduler arguments through functions such as ‘of()’ or ‘range()’ has been deprecated, and should be replaced by using ‘scheduled()’ or ‘observeOn()’. This has been done in order to remove scheduling logic from operators that don’t need it. Some subscription signatures will be deprecated. With this newest release, subscriptions should only be called with a single function, or a partial or complete Observable. The same will also go for tap signatures. This will simplify the development process and help eventually make the library more lean with future releases. Functions that pull in schedulers are now deprecated as of this release in order to prepare users for the eventual phase-out of passing schedulers to certain functions. Looking Forward to 7.1 and Beyond In order to support future changes to the library, the RxJS team will begin introducing ESLint transformations. These updates will help developers remove deprecated code, such as APIs, from their applications, and prepare users for future, major releases as the library becomes faster and leaner. However, Ben Lesh, RxJS core team lead, ensures that no breaking changes will be scheduled until version 9.0 at the earliest. How You Can Contribute The RxJS core team welcomes enthusiastic RxJS experts to help contribute to refining version 7’s future updates. Those experienced with ESLint transformations, or who want to update documentation are welcome to contribute to this open-source library. And of course, the RxJS team relies on the amazing work of authors, bloggers, content creators, and those working in developer relations, to share insights into the library with the development community. If you’re just getting started with RxJS, check out this fantastic “1 Hour to Learn RxJS” tutorial by Ben Lesh from This Dot Labs' Javascript Marathon, where you can learn about Observables and operators, including how to build an Observable from scratch!...

Jul 31, 2020

4 mins

RxJS

6 Steps to AI Adoption: Building with AI APIs

Tracy Lee, Jerome Hardaway, and Rob Ocel continue their six part series on the six steps for AI adoption. In this episode they discuss AI API integration and better building with AI models. One key takeaway was the importance of choosing the right tools for specific tasks. Jerome emphasized the significance of using content moderation APIs for filtering inappropriate content as an example. These tools help developers improve user experiences by ensuring content accuracy and appropriateness. However, Jerome also warned against blindly relying on AI tools and encouraged programmers to assess their benefits and limitations before implementation. The discussion also touched on how AI impacts coding abilities and problem-solving. AI-powered tools can boost developer productivity by automating repetitive tasks and offering helpful suggestions. Yet, it's important to strike a balance and not become overly dependent on AI, which could hinder critical thinking and problem-solving skills crucial for programmers. One challenge discussed was the difficulty of working with poorly documented APIs, which makes it hard for developers to understand and utilize AI tools effectively. While AI has the potential to enhance productivity and user experiences, it's important for developers to choose the right tools and avoid over-reliance. By carefully evaluating AI tools and investing in clear documentation, developers can leverage AI effectively to improve their coding abilities and problem-solving skills. Download this episode here!...

Apr 15, 2024

2 mins

AIArtificial Intelligence

Announcing Free Trainings - Progressive Web Apps and Using NgUpgrade for your Angular Migration

This Dot

You might also like

Improving INP in React and Next.js

Maximizing Routing Flexibility with Next.js Parallel and Intercepting Routes

A Breakdown of RxJS 7.0 Performance Improvements

6 Steps to AI Adoption: Building with AI APIs

You might also like

Improving INP in React and Next.js

Maximizing Routing Flexibility with Next.js Parallel and Intercepting Routes

A Breakdown of RxJS 7.0 Performance Improvements

6 Steps to AI Adoption: Building with AI APIs