DEV Community: Matt Angelosanto

Using semantic-release to automate releases and changelogs

Matt Angelosanto — Thu, 25 Jan 2024 21:22:38 +0000

The focus of this article is to demonstrate how to automate releases and release notes with semantic-release in GitLab. semantic-release is a Node CLI application, but it can be used to publish any type of package. This article will explore how to publish npm packages in a private GitLab registry.

An introduction to semantic-release

It is not a trivial task to decide when and how to increase version numbers and sync them with release notes. The goal of semantic-release is to take over this job based on established software engineering patterns:

Semantic Versioning: An established convention for version numbers following the pattern MAJOR.MINOR.PATCH
Conventional Commits: A spec to establish human- and machine-readable commit messages. In our case, semantic-release is analyzing commit messages following this convention
Publish releases on distribution channels with distribution tags (dist-tags)

semantic-release parses the commit messages and extracts certain information, such as the release type and scope. Based on this, the Git history, and the used and configured semantic-release plugins, a new version is calculated, a release is created — which might be published to some registry — and release notes are updated.

In the next section, we’ll set up semantic-release with GitLab. After that, I’ll provide a detailed use case of various commit messages on different branches leading to different versions and release notes.

How to work with the companion project

This article is based on a Node project that represents a simplified addition and subtraction CLI tool. Although the actual application code is not important, I decided to use a somewhat realistic example so the commit messages, release types, changelogs, and version changes are understandable.

You can follow along with this GitLab project in parallel while reading the article.

Configuring a semantic-release workflow

The goal of this article is to execute the semantic-release bot in a pipeline step whenever a new commit is pushed to a branch, which is configured in semantic-release's release.config.cjs config file.

In this simplified project, the .gitlab-ci.yml looks like this:

# .gitlab-ci.yml

image: node:latest
stages:
  - lint
  - release
lint:
  stage: lint
  script:
    - npm run lint
release:
  stage: release
  only:
    - main
    - next
  script:
    - echo "@doppelmutzi:registry=https://${CI_SERVER_HOST}/api/v4/projects/${CI_PROJECT_ID}/packages/npm/" > .npmrc
    - echo "//${CI_SERVER_HOST}/api/v4/projects/${CI_PROJECT_ID}/packages/npm/:_authToken=${NPM_TOKEN}" >> .npmrc
    - npm i -g semantic-release @semantic-release/gitlab @semantic-release/changelog @semantic-release/git @semantic-release/npm @semantic-release/commit-analyzer conventional-changelog-conventionalcommits
    - npx semantic-release --debug

With that config in place, the release pipeline step runs for the main or next branches if the lint step is successful. Let's look at the release job in more detail:

release:
  stage: release
  only:
    - main
    - next
  script:
    # ...
    - npm i -g semantic-release @semantic-release/gitlab @semantic-release/changelog @semantic-release/git @semantic-release/npm @semantic-release/commit-analyzer @semantic-release/release-notes-generator conventional-changelog-conventionalcommits
    - npx semantic-release --debug

There are two variants to install semantic-release: local or global installation. We’ll opt for installing all npm packages globally with the global flag -g. semantic-release constitutes the actual tool, whereas the packages with scope @semantic-release are optional plugins.

conventional-changelog-conventionalcommits is a package used for creating conventional commits and has a bit more configuration possibilities with changelogs in contrast to the default Angular commit scheme.

Here is a brief overview of the plugins used in this article:

@semantic-release/gitlab to publish GitLab releases
@semantic-release/changelog to create or update changelog files
@semantic-release/git to commit changes to the Git repository, e.g., an updated package.json version or updates to changelog files
@semantic-release/npm to publish npm packages in a public or private registry
@semantic-release/commit-analyzer to analyze commit messages with respect to conventional commit conventions
@semantic-release/release-notes-generator to generate content for the changelog file

Another approach to set up semantic-release for GitLab is to just install the package semantic-release/gitlab-config, which represents a shareable config that comes with the following:

@semantic-release/commit-analyzer
@semantic-release/release-notes-generator
@semantic-release/npm
@semantic-release/gitlab

It isn’t required to install all the plugins because some are shipped with the semantic-release package.

The plugins @semantic-release/gitlab, @semantic-release/npm, and @semantic-release/git require authentication to push commits, create GitLab releases, and publish to GitLab's private registry. Therefore, we need to create a project access token (PAT)( Settings > Access Tokens) with the following scopes: Next, copy the token and create an environment variable (Settings > CI/CD > Expand > Add variable): According to the semantic-release documentation, you need a variable name of GITLAB_TOKEN or GL_TOKEN to authenticate semantic-release for GitLab.

We need one more token to enable semantic-release to publish into GitLab's private npm registry. Create a deploy token (Settings > Repository > Deploy tokens > Expand > Add token) with the following scopes: Copy the created deploy token and create another environment variable as described above. This time, the name needs to be NPM_TOKEN.

Now, let's look at the .gitlab-ci.yml again:

# required authentication https://semantic-release.gitbook.io/semantic-release/usage/ci-configuration#authentication-for-plugins
# NPM_TOKEN and GL_TOKEN provided as Gitlab environment variable
# ...
release:
  stage: release
  only:
    - main
    - next
  script:
    - echo "@doppelmutzi:registry=https://${CI_SERVER_HOST}/api/v4/projects/${CI_PROJECT_ID}/packages/npm/" > .npmrc
    - echo "//${CI_SERVER_HOST}/api/v4/projects/${CI_PROJECT_ID}/packages/npm/:_authToken=${NPM_TOKEN}" >> .npmrc
    - npm i -g semantic-release @semantic-release/gitlab @semantic-release/changelog @semantic-release/git @semantic-release/npm @semantic-release/commit-analyzer conventional-changelog-conventionalcommits
    - npx semantic-release --debug

The two echo commands in the script section of the release step are important to dynamically create the contents for a .npmrc file. With this file, @semantic-release/npm can publish releases into the GitLab registry.

The code above makes use of the previously created environment variable NPM_TOKEN to store the authentication token in .npmrc. It is considered best practice to use environment variables instead of exposing credentials in plain text.

If you want to learn more about publishing packages to private registries with different package managers, you can consult this article.

Tweaking the semantic-release plugins

In the previous section, we configured the GitLab pipeline and made sure that the semantic-release script was able to make changes in the GitLab project. This section highlights how to provide a semantic -release configuration to tweak the provided semantic-release plugins and their interplay.

In this project, we opt for a JavaScript config file (release.config.cjs):

/**
 * @type {import('semantic-release').GlobalConfig}
 */
module.exports = {
  branches: ["main", "next"],
  plugins: [
    [
      "@semantic-release/commit-analyzer",
      {
        preset: "angular",
        releaseRules: [
          {
            breaking: true,
            release: "major",
          },
          {
            type: "feat",
            release: "minor",
          },
          {
            type: "fix",
            release: "patch",
          },
          {
            type: "docs",
            scope: "README",
            release: "patch",
          },
          {
            type: "chore",
            release: "patch",
          }
        ],
        parserOpts: {
          noteKeywords: ["BREAKING CHANGE", "BREAKING CHANGES", "BREAKING"],
        },
      },
    ],
    [
      "@semantic-release/release-notes-generator",
      {
        /*  
            use conventionalcommits instead of conventional-changelog-angular (default)
            to introduce new sections in changelog
        */
        preset: "conventionalcommits",
        presetConfig: {
          types: [
            { type: "feat", section: "Features", hidden: false },
            { type: "fix", section: "Bug Fixes", hidden: false },
            { type: "docs", section: "Miscellaneous Chores", hidden: false },
            { type: "chore", section: "Miscellaneous Chores", hidden: false },
          ],
        },
        parserOpts: {
          noteKeywords: ["BREAKING CHANGE", "BREAKING CHANGES", "BREAKING"],
        },
      },
    ],
    ["@semantic-release/npm"],
    [
      "@semantic-release/changelog",
      {
        changelogFile: "CHANGELOG.md",
      },
    ],
    [
      "@semantic-release/git",
      {
        assets: ["package.json", "CHANGELOG.md"],
      },
    ],
    "@semantic-release/gitlab",
  ],
};

Let's break this config down. The branches array defines which branches the tool should be active for. semantic-release works with some conventions — the main and next branches have special meanings. Later, we'll see that the main branch releases are published on the latest distribution channel and the next branch on the next distribution channel. Therefore, it uses npm distribution tags.

In the plugins array, every plugin needs to be listed with an optional configuration in case we want to differ from the shipped default. The order of the plugins is important.

With the plugin @semantic-release/commit-analyzer, we define which conventional commit convention to use. We’ll use the default Angular convention, but there are more options, such as ESLint:

[
  "@semantic-release/commit-analyzer",
  {
    preset: "angular",
    releaseRules: [
      {
        breaking: true,
        release: "major",
      },
      {
        type: "feat",
        release: "minor",
      },
      {
        type: "fix",
        release: "patch",
      },
      {
        type: "docs",
        scope: "README",
        release: "patch",
      },
      {
        type: "chore",
        release: "patch",
      }
    ],
    parserOpts: {
      noteKeywords: ["BREAKING CHANGE", "BREAKING CHANGES", "BREAKING"],
    },
  },
],

We can skip releaseRules if we are satisfied with the default release rules. In this example, we want to extend the list of release types to use chore and docs with scope README for patch releases. In addition, we want to create major releases for breaking changes.

We can specify parseOpts to create breaking changes whenever one of the listed variants is part of the body of the commit message. We'll look at what that means in the next section.

With the plugin @semantic-release/release-notes-generator, we have the chance to tweak the changelog contents. This example shows how to create three sections: Features, Bug Fixes, and Miscellaneous. The hidden property controls whether certain release types are listed in the changelog or not:

[
  "@semantic-release/release-notes-generator",
  {
    /*  
        use conventionalcommits instead of conventional-changelog-angular (default)
        to introduce new sections in changelog
    */
    preset: "conventionalcommits",
    presetConfig: {
      types: [
        { type: "feat", section: "Features", hidden: false },
        { type: "fix", section: "Bug Fixes", hidden: false },
        { type: "docs", section: "Miscellaneous Chores", hidden: false },
        { type: "chore", section: "Miscellaneous Chores", hidden: false },
      ],
    },
    parserOpts: {
      noteKeywords: ["BREAKING CHANGE", "BREAKING CHANGES", "BREAKING"],
    },
  },
],

If we are satisfied with the default configurations of @semantic-release/npm and @semantic-release/gitlab, we just need to list them in the plugins array.

With the @semantic-release/changelog config, changelogs are stored in the CHANGELOG.md file. The @semantic-release/git config tells the plugin to pick up CHANGELOG.md and package.json and commit changes as we see in the next section:

[
    "@semantic-release/changelog",
    {
      changelogFile: "CHANGELOG.md",
    },
  ],
  [
    "@semantic-release/git",
    {
      assets: ["package.json", "CHANGELOG.md"],
    },
  ],

Testing the workflow with a dry run

Let’s shift the focus to the last line of .gitlab-ci.yml, which executes the semantic-release script:

  - npx semantic-release --debug --dry-run

It is a good approach to add the --dry-run flag while working on the project setup. This flag doesn’t create any releases, but potential version changes or setup issues can be seen in the pipeline's output, especially with the verbose --debug flag.

Let's create a conventional commit:

$ git commit -m "feat: initial CLI tool with addition functionality"

This tutorial works with the Angular commit conventions. Each commit message consists of a header, body, and footer. The most important part is the header that includes the release type (here, feat for feature), an optional scope, and a subject:

<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>

Later we will see an example of using a scope (docs(RELEASE)) and the footer (for breaking changes).

After we pushed the commit to remote, the log of the release step didn't reveal any problems. It just states which release version would have been created without the dry-run flag: We are now ready to work with our semantic-release workflow.

semantic-release in action

The previous sections highlight how to set up a GitLab project to make use of semantic-release. The following section will describe how different releases on different distribution channels can be created with this setup.

First release

After a dry run didn't reveal any problems, we can make another local commit to enable semantic-release by removing the --dry-run flag in .gitlab-ci.yml:

$ git commit -m "chore: enable semantic release by removing --dry-run option"

This constitutes our very first "working" commit that triggers a release.

After pushing this commit to remote, the pipeline is triggered. Because we made a commit to the main branch, which is referenced in release.config.cjs as a trackable branch, a pipeline is triggered with a release step.

After the pipeline has succeeded, the commit graph reveals that the technical user semantic-release-bot has created another commit: chore(release): 1.0.0 [skip ci]. The part in the brackets is GitLab's mechanism to prevent another pipeline run: This first release (v1.0.0) includes two conventional commits (feat and chore) that lead to two entries in the created changelog file (CHANGELOG.md) by the plugin @semantic-release/release-notes-generator.

In addition, the version number of package.json was updated by the plugin @semantic-release/npm: When you click on 1 Release, you see how these conventional commits were transferred to release notes by the @semantic-release/release-notes-generator plugin: The technical commit chore(release): 1.0.0 [skip ci] reveals what was changed by @semantic-release/git in conjunction with @semantic-release/npm : Because we want to publish an npm package in GitLab's registry, a technical commit with an updated package.json represents the desired behavior.

If you have a project where you don't publish an npm package, you can also prevent publishing to an npm registry.

As we see in the next image, the @semantic-release/npm plugin published v1.0.0 with the latest dist-tag:

Accessing the published package

Let's take a short excursion to use the released package. We need to provide an npm registry config to get access to GitLab's package registry. One approach is to store a .npmrc file in your home folder like this:

# ~/.npmrc
@doppelmutzi:registry=https://gitlab.com/api/v4/projects/<project-id>/packages/npm/
//gitlab.com/api/v4/projects/<project-id>/packages/npm/:_authToken=<NPM_TOKEN>

The NPM_TOKEN is the value of the deploy token we stored in GitLab's environment variable. The project ID can be retrieved from the project's home screen: Then, the following Shell command is all it needs to execute the executable doppelmutzi-addition of the latest version of the package @doppelmutzi/semantic-release-git-workflow stored in the private registry:

$ npx @doppelmutzi/semantic-release-git-workflow@latest doppelmutzi-addition

Creating more releases

Next, we’ll update the README.md with some information on how to use the CLI tool and create the following commit:

$ git commit -m "docs(README): how to use the CLI tool"

It uses the type docs with the single scope we configured to trigger a patch release. Here is the important part of the configuration of @semantic-release/commit-analyzer in release.config.cjs:

// ...
[
  "@semantic-release/commit-analyzer",
  {
    preset: "angular",
    releaseRules: [
      // ...
      {
        type: "docs",
        scope: "README",
        release: "patch",
      },
      // ...
    ],
    // ...
  },
],
// ...

Due to this setup, the previous commit triggers a release with version 1.0.1: The Git history should look like this: In the package registry, there is a new package with version 1.0.1, which has the latest dist-tag. Executing the previous npx Shell command will now execute this package version:

Working with the `@next` distribution tag

Let's work on a new feature that allows us to perform subtractions. We want to test this with a smaller group of users so we’ll develop this in the next branch.

With the following commit, a package with version 1.1.0 and a @next distribution tag is published:

$ git commit -m "feat: allow subtraction"

This works because the next branch is configured as a trackable branch in release.config.cjs:

module.exports = {
  branches: ["main", "next"],
  // ...
}

Now, this is what the Git history looks like: Users can use this package like this:

$ npx @doppelmutzi/semantic-release-git-workflow@next doppelmutzi-calculator

While users are testing the new feature on the next branch, we’ll find a general problem with the calculator. The command cannot handle empty spaces and multiple operands. We can fix this on the main branch and create a commit with type fix:

$ git commit -m "fix: command accepts whitespaces and unlimited numbers can be added"

This leads to version 1.0.2 with a latest tag: The Git history reveals two branches with v1.0.2 on main and v1.1.0 on next: Let's port this bugfix to the next branch by merging the main branch into the next branch. After resolving the merge conflicts, we get the version 1.1.1 with the next distribution tag: A Git tag v1.1.1 is created on the next branch after merging the main branch into it: We are satisfied with our next version and want to port it back to latest. Therefore, we’ll merge the next branch into main.

Handling breaking changes

During development, it became clear that our application requires a newer Node version as a minimum requirement. This is a breaking change as the application no longer works with Node <18.19.0:

$ git commit -m "chore: upgrade engines field \n\n BREAKING CHANGE: the CLI tool only works with Node 18.19.0 or greater"

According to the Angular conventions, it's important for this type of commit that BREAKING CHANGE be in the body of the commit, so the two line breaks are crucial. This commit leads to a major version bump (2.0.0): The newest version on the latest distribution tag is now 2.0.0: This is how the Git history looks after the breaking change:

Working with merge requests

Let's use another approach to develop a new release. We want to develop a complex feature containing many commits, so we’ll provide a CLI option to our script.

We’ll branch off a new branch from main named feature/cli-option. The advantage of this approach is that we can build the feature with multiple commits that do not have to use the conventional commit convention.

After we're done developing, we’ll create a merge request with the squash commits and edit commit message options to provide custom messages. In the squash commit message, we again have the chance to use the Angular convention to make sure that we create one commit of type feat: After merging the merge request, a new release v2.1.0 is created with the latest distribution tag: The final Git history also shows that the final commit leads to a Git tag of v2.1.0:

Conclusion

The focus of this article is to demonstrate how to achieve a semantic-release workflow with GitLab to automate releases and changelog generation. Of course, semantic-release can be used with other popular CI services, such as GitHub Actions. Most of the shown configurations will be the same — the only difference is to set up authentication for the respective service.

The semantic-release workflow is very flexible, e.g., you can choose a conventional commit convention other than Angular, such as Atom or ESLint.

If you want to have a more rigorous workflow that allows only conventional commits, you can think about using Git pre-commit hooks with commitlint. A setup with lint-staged, husky, and commitlint would also minimize the chance that developers push inadequate commit messages to remote, which would lead to undesirable results.

200’s only Monitor failed and slow network requests in production

Deploying a Node-based web app or website is the easy part. Making sure your Node instance continues to serve resources to your app is where things get tougher. If you’re interested in ensuring requests to the backend or third party services are successful, try LogRocket.

LogRocket is like a DVR for web and mobile apps, recording literally everything that happens while a user interacts with your app. Instead of guessing why problems happen, you can aggregate and report on problematic network requests to quickly understand the root cause.

LogRocket instruments your app to record baseline performance timings such as page load time, time to first byte, slow network requests, and also logs Redux, NgRx, and Vuex actions/state. Start monitoring for free.

D3.js adoption guide: Overview, examples, and alternatives

Matt Angelosanto — Thu, 25 Jan 2024 16:09:21 +0000

Written by Eze Sunday
✏️

D3.js is a JavaScript library that allows you to create tailored data visualizations. While most tutorial examples use charts to illustrate its usage, D3.js is a lot more powerful than a traditional charting library. It allows you to create highly custom, flexible data visualizations in many different formats.

In this guide, our goal is to give you all the information you need to convince your team to use D3.js or determine whether an alternative might better suit your needs. If you are considering D3.js for your project, let’s get into the details so you can make your final decision.

Background and history of D3.js

D3.js originated from Protovis, a declarative JavaScript graphical data visualization library that was created by Mike Bostock and Jeff Heer of the Stanford Visualization Group, with significant help from Vadim Ogievetsky.

Protovis was first released in April 2009 and was discontinued after its final v3.3.1 on June 28, 2011. D3.js was invented by the same team and built on many of the concepts of Protovis, making a big leap forward from Protovis with improved support for animation, interactions, and flexibility.

Why use D3.js?

There are several data visualization libraries in the JavaScript ecosystem. However, D3.js has been at the forefront for several years. Not only this, but D3.js is also the underlying library behind many other available data visualization libraries.

Some of the reasons why I typically prefer D3.js over other data visualization libraries include:

Flexibility: D3.js makes it possible to create high-level tailored visualizations for your specific needs. This type of flexibility is one you can’t really get from other libraries. It gives you the power to create whatever visualization you desire
Scalability: D3.js is designed to be scalable. In the past, browser limitations caused performance to become an issue for projects with massive data in the billions. But today, that is no longer an issue — we can leverage server-side rendering to transfer data-intensive visualizations to the server. This should make D3.js suitable for large datasets and complex visualization at scale
Customizability: Every aspect of the data visualizations you create with D3.js will likely involve writing the code yourself, giving you full control over how it looks and behaves. It’s the type of data visualization library you’ll want to use when you need to create a specific kind of visualization that describes your data in the best way possible, tailored to your own needs
Active community: D3.js has an active developer community with over 107k GitHub stars and regular updates to their GitHub repository. This is something I always look out for when choosing a library for my project, as a well-maintained project with an active community is likely to provide a high level of support
Framework agnostic: A lot of other data visualization libraries are tailored to a particular JavaScript library or framework. For example, Victory and Visx are visualization libraries designed to work with React only. However, D3.js can be implemented for any framework at all

While I admire D3.js, I think it’s also fair to mention that it’s not a perfect library. It also has some cons, including:

Steep learning curve: Since you get to build every part of the visualisation from the ground up, you need a reasonable grasp of the fundamentals of D3, SVG, HTML, and CSS. Otherwise, it might take much longer to get what you need done
Not ideal for basic chart visualization: If you only need to create simple charts for basic data exploration, D3.js might be overkill. Other libraries offer simpler solutions for these cases
Lack of prebuilt templates: Unlike a lot of other visualization libraries, D3.js does not have prebuilt templates, like charts that allow you to just feed them some data. Keep in mind that there is a long list of charting libraries and tools that leverage D3.js to enable you to build visualizations a lot faster without worrying about the low-level D3.js details

How D3.js works

Now that we’ve gone over the background, benefits, and drawbacks of D3.js, let’s explore how it works.

D3.js takes both the data to be visualized and the graphics you want to use for the visualization and binds them to the DOM in a flexible way, allowing you to manipulate, add, or update your data easily. This makes it possible for you to build very complex visualizations customized to your needs.

For example, the code below will render a simple bar chart in the browser. You can easily copy and paste it into your code editor to test it:

<!DOCTYPE html>
<div id="simple-chart"></div>
<script type="module">
import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
// Set chart dimensions.
const width = 300;
const height = 150;
// Sample data.
const data = [10, 20, 30, 40, 50];
// Create SVG container.
const svg = d3.create("svg")
    .attr("width", width)
    .attr("height", height);
// Create bars for each data point.
svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", (d, i) => i * 60)
    .attr("y", d => height - d)
    .attr("width", 50)
    .attr("height", d => d)
    .attr("fill", "steelblue");
let chartContainer = document.getElementById("simple-chart");
// Append SVG to the chart container.
chartContainer.append(svg.node());
</script>

The code above will render the following bar chart: Let’s break down a few notable parts of the code block above. One thing you’ll notice is that every part of the bar chart is drawn on top of an svg container:

const svg = d3.create("svg")
    .attr("width", width)
    .attr("height", height);

This is because SVG makes it a lot easier to draw shapes. For example, a rect is a built-in SVG element that defines a rectangle shape.

We selected all existing rect elements — and made sure to create a new rect for each data element if it didn’t already exist — with the help of the enter() function:

svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", (d, i) => i * 60)
    .attr("y", d => height - d)
    .attr("width", 50)
    .attr("height", d => d)
    .attr("fill", "steelblue");

Finally, we append the SVG we created to the D3 object, as shown in this part of the code:

<div id="simple-chart"></div>
let chartContainer = document.getElementById("simple-chart");
// Append SVG to the chart container.
chartContainer.append(svg.node());

This is just the tip of the iceberg for what you can do with D3.js. To get a better sense of this library’s capabilities, let’s look at some of its standout features.

Key D3.js features to know

Digging deep into the D3.js documentation is the recommended way to gain in-depth knowledge of the tool. However, if you’re looking to evaluate the functionalities and start practicing immediately, here are some key features to look out for.

Visualization tools

D3.js gives you the tools to create any kind of data visualization you can imagine by leveraging your skills in D3.js, JavaScript, HTML, and CSS.

You can create graphs, charts, scatter plots, and several other types of visuals. It’s also possible to combine D3.js with other graphics libraries like Three.js to build even more amazing graphics. For example, here is an example of a 3D globe created with D3.js and Three.js:

Selecting elements

D3.js allows you to select HTML elements with the select and selectAll methods as shown in our initial example. These methods can be used like so:

svg.selectAll("rect")

//or

svg.select("rect")

In the above snippet, d3.select allows you to select the first matching rect element. Meanwhile, d3.selectAll selects all matching rect elements.

DOM manipulation

D3.js allows you to leverage JavaScript and CSS to manipulate the DOM to achieve your desired visualization result. You can directly create, update, and delete elements based on data or your project requirements.

For example, you could use append to add new elements, remove to delete, and attr to set attributes, like so:

// Select the body element
var bodySelection = d3.select("body");

// Append a paragraph
bodySelection.append("p")
  .text("This is a new paragraph.");

// Wait for 2 seconds and then remove the paragraph
setTimeout(function() {
  bodySelection.select("p").remove();
}, 2000);

// Append a div with a class and style
bodySelection.append("div")
  .attr("class", "my-div")
  .style("width", "100px")
  .style("height", "100px")
  .style("background-color", "lightblue")
  .text("I'm a div with attributes!");

// Wait for 2 seconds and then change the text content
setTimeout(function() {
  bodySelection.select(".my-div").text("Text updated!");
}, 4000);

Data joining

Data joining in D3.js is about connecting your data to the visual elements you're creating.

In a previous example, we used selectAll() to select all the rect elements — even though they did not yet exist — and then loaded data to the rect. We then used enter and append to join the data to each rectangle. That’s exactly what data joining is.

In the below example, we’re joining data to selected rectangles directly:

svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")

There are a lot of other methods like this that you can find in the D3.js documentation.

Use cases for D3.js

There are several use cases for D3.js, but let’s highlight three key use cases:

Real-time data visualization: Picture a scenario where you want to display real-time updates with dynamic charts and graphs that adjust as new data arrives. That’s a perfect candidate for D3.js, as this library plays nicely with dynamic data and interactivity
Interactive charts and graphs: If you are looking to create tailored, dynamic, and interactive charts for data presentation on websites, D3.js is a great JavaScript library for that sort of thing
Geospatial data visualization: D3.js allows you to show geographical data visually, like interactive maps or choropleth maps. The image below is an example of an interactive map that can be built with D3.js:

These are some of the most common use cases for D3.js, but since the library allows you to create completely custom data visualizations, the only limit is your imagination!

Styling and animating D3.js

D3.js allows you to use native CSS to style your data visualizations. It provides a styling method that allows you to pass conventional CSS styles to your visualizations as shown below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div id="map"></div>
    <script type="module" src="https://cdn.jsdelivr.net/npm/d3@7"></script>
    <script type="module">
        const svg = d3.select("#map").append("svg").attr("width", 100).attr("height", 100);
        svg.selectAll("circle")
            .data([1, 2, 3])
            .enter().append("circle")
            .attr("cx", d => d * 20)
            .attr("cy", 50)
            .attr("r", 10)
            .style("fill", "blue")
            .style("stroke", "white")
            .style("stroke-width", 2);
    </script>
</body>
</html>

In the code above, we used the providing styling method to change the color of the SVG stroke to white, paint each circle’s background with a blue hue, and add a stroke-width of 2.

You can also choose to write your styles in the style tag or in a different CSS file. For example, here is the same code, but with the CSS file separated in the style tag:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .svg-elements {
      fill: blue;
      stroke: white;
      stroke-width: 2;
    }
    #map {
      border: 1px solid #ccc;
      width: 100px; /* Adjust the width as needed */
      height: 100px; /* Adjust the height as needed */
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script type="module">
    import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
    // Create an SVG element
    const svg = d3.select("#map").append("svg");
    // Add circles to the SVG
    svg.selectAll("circle")
      .data([1, 2, 3]) // example data, replace with your own
      .enter().append("circle")
      .attr("cx", d => d * 20)
      .attr("cy", 50)
      .attr("r", 10);
    // Apply the class to style the circles
    svg.selectAll("circle").classed("svg-elements", true);
  </script>
</body>
</html>

The output will look like so:

Deploying your D3.js project

D3 project deployment is straightforward. Just run your normal library or framework bundler and it will be bundled together!

You don’t need to do anything special to make D3.js work, since D3.js code is just JavaScript, HTML, and CSS. So, you’ll deploy it together with your existing project without any additional requirements.

Other factors to weigh when considering D3.js

We’ve learned a lot about D3.js already, but there are a few additional considerations you should keep in mind while deciding whether or not to adopt this library into your project.

Performance: Even though D3.js was optimized to handle large datasets, the browser might not be able to handle extreme amounts of data. As we mentioned earlier, you might want to offload some of the data processing to the backend and render your visualization in batches with aggregations
DX/Ease of use: D3.js is straightforward for very simple visualizations, but for more complex needs, you’ll need a better understanding of the D3.js library. If all you need is a simple charting library, you may be better off using libraries that provide templates where you can simply supply the required data to generate your charts. On the other hand, D3.js is an excellent tool for creating highly custom data visualizations, in which case the trouble of learning the fundamentals and practicing using this library tends to pay off in the long run
Bundle size: The D3.js library file size is about 873kB as of the time of this writing. It’s also tree-shakable, which means it will include only the code required by your application to work effectively in your production bundle, so you won’t end up with an over-bloated build
Documentation: One of the best things about D3.js documentation is that it has lots of examples. For almost every concept, there is a theoretical explanation along with an example to show you exactly how it works, from basic examples to more complex ones
Supported data sources: D3.js supports many data sources, including JSON, CSV, GeoJSON, HTML table data, and JavaScript arrays and objects. This allows you to load your data in almost any format you want to

There are special methods that allow you to load your data into D3.js for different data sources. Let’s see some of the methods for popular data sources like CSV, JSON, arrays and objects, tabular HTML data, and GeoJSON.

CSV:

d3.csv("your_data.csv").then(function(data) {
    // Process csv data here
});
svg.selectAll("rect")
    .data(data)
    .enter()
...

JSON:

d3.json("your_data.json").then(function(data) {
    svg.selectAll("rect")
        .data(data)
        ...
});

Arrays/objects:

var data = [1, 2, 3, 4, 5];
// Or
var data = { key1: value1, key2: value2, ... };
svg.selectAll("rect")
    .data(data)
    ...

Tabular data in HTML:

var data = d3.selectAll("table tr").data();

GeoJSON:

d3.json("your_geojson_data.json").then(function(geoData) {
    svg.selectAll("rect")
    .data(geoData)
});

D3.js vs. similar libraries

There are lots of libraries that allow you to create data visualizations, but none currently beats the flexibility and depth of D3.js. We’ve compared the top charting libraries— including D3 — in previous posts on the LogRocket blog, which you can peruse under “Further reading” below.

It’s important to acknowledge that D3.js has taken a huge market share in the data visualization space. A lot of other similar options actually use D3.js behind the scenes. Those that don’t use D3.js under the hood also don’t give you the type of flexibility that D3.js provides.

Conclusion

D3.js is an amazing JavaScript data visualization library designed for highly performant, tailored visualizations. It’s the type of visualization library you want to use when you want to visualize your data in very custom ways or to meet particular project requirements.

While D3.js is a great choice for many use cases, sometimes, you might just want to create simple charts and graphs. In such cases, you might want to use simpler data visualization options or tools that allow you to leverage D3.js without worrying about the low-level details.

Make sure you weigh all your project requirements to determine whether D3.js is appropriate for your needs. Feel free to comment below with questions or to share your D3.js projects. Happy visualizing!

Get set up with LogRocket's modern error tracking in minutes:

Visit https://logrocket.com/signup/ to get an app ID.
Install LogRocket via NPM or script tag. LogRocket.init() must be called client-side, not server-side.

NPM:

$ npm i --save logrocket 

// Code:

import LogRocket from 'logrocket'; 
LogRocket.init('app/id');

Script Tag:

Add to your HTML:

<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>

3.(Optional) Install plugins for deeper integrations with your stack:

Redux middleware
ngrx middleware
Vuex plugin

Get started now

Exploring Effect, a meta-state RxJS-like framework

Matt Angelosanto — Wed, 24 Jan 2024 16:14:54 +0000

Written by Isaac Okoro
✏️

While TypeScript does a great job of statically typing JavaScript code, certain drawbacks might arise. These drawbacks can include managing the complex nature of asynchronous code, handling types in asynchronous scenarios, and error handling. The Effect library was created as a way to address these drawbacks.

In this tutorial, we’ll get to know Effect, how it works, and why you may benefit from using it. We’ll also compare it to RxJS, a JavaScript library for reactive programming.

What is Effect?

Effect is a functional library for building and composing asynchronous, concurrent, and reactive programs in TypeScript. It focuses on providing a robust and type-safe way to manage side effects in your programs.

A great use case for Effect is building a streaming platform. Ideally, you want to fetch and display recommended content and real-time updates concurrently.

With Effect's async support, you can initiate these tasks without blocking the main thread. This ensures a smooth streaming experience for users while the app handles various asynchronous operations in the background.

The reactive nature of Effect allows you to respond dynamically to events, like new content availability or user interactions, making the streaming platform more responsive and interactive.

Effect helps you structure your code in a way that makes it easier to handle async operations, concurrency, and reactivity while maintaining type safety. It's particularly useful for developers who want to apply functional programming techniques to build reliable and maintainable software in TypeScript.

Why use Effect?

The team behind Effect created this library as an ecosystem of tools that enable you to write TypeScript code in a better and more functional way. You can use Effect to build software in a purely functional manner.

However, Effect’s core function — probably its most unique function — is to provide you with a way to use the type system to track errors and the context of your application. It does this with the help of the Effect type, which is at the core of the Effect ecosystem.

The Effect type allows you to express the potential dependencies that your code will run on, as well as to track errors explicitly. You can check out an example of the Effect type in the code block below:

type Effect<Requirements, Error, Value> = (
  context: Context<Requirements>,
) => Error | Value;

The Effect type takes in three parameters:

Requirements: The data to be executed by the effect, which is stored in a Context collection. You can also pass in never as the type parameter if the effect has no requirements
Error: Any errors that might occur during execution. You can also choose to pass in never to indicate that the effect will never fail
Value: This represents the success value of an effect. You can pass void, never, or the exact value type you are expecting here. If you pass in void, then the success value has no useful information. If you pass in never, then the effect runs forever

Below is an example of an Effect type:

function divide(a: number, b: number): Effect.Effect<never, Error, number> {
  if (b === 0) {
    return Effect.fail(new Error("Cannot divide by zero"));
  }

  return Effect.succeed(a / b);
}

In the code block above, we have a division function that subscribes to the Effect pattern.

We passed never in the Requirements parameter, a type Error in the Error parameter, and a type number in the Value parameter. This means this Effect takes in no requirements, might fail with an error of type Error if the second number is zero, and succeeds with a success value of type number.

When writing TypeScript, we always assume that a function will either succeed or fail. In the case of a failure, we can throw an exception to handle error conditions.

However, what then happens when we are writing code, but we forget to use a try...catch block or throw an exception? Take a look at the example below:

const getData = () => {
  const response = await fetch("fetch someething from a random API");
  const parseResponse = await response.json();
  return dataSchema.parse(parseResponse);
};

The above example makes a fetch request to an API, makes sure that the response is in JSON, and then returns it. The problem with the above code is that each line could crash separately and throw a different error that you may choose to handle differently.

So, how do we fix the above code using the Effect library? Let’s see:

import { Effect, pipe } from "effect";

const getData = (): Effect.Effect<never, Error, Data> => {
  return pipe(
    Effect.tryPromise({
      try: () => fetch("fetch something from a random API"),
      catch: () => new Error("Fetch returned an error"),
    }),

    Effect.flatMap((res) =>
      Effect.tryPromise({
        try: () => res.json(),
        catch: () => new Error("JSON parse cant be trusted also😭"),
      }),
    ),

    Effect.flatMap((json) =>
      Effect.try({
        try: () => dataSchema.parse(json),
        catch: () => new Error("This error is from the data schema"),
      }),
    ),
  );
};

The code above is similar to the example we first discussed. However, this time around, we are taking note of each point where our code might potentially fail and handling each error separately.

This code shows a real-life example of how to use Effect. If you take a look at the code block without the Effect type, we see that the function handles three operations: data fetching, JSON parsing, and dataSchema parsing.

In the example with Effect, we created the type Effect<never, Error, Data> in line three. Now, if you have different error handlers for each specific operation, then you can rewrite the Effect to use those error handlers as follows:

type Effect<never, FetchError | JSONError | DataSchemaError, Data>

With that done, when the getData function runs, you have a specific idea of which of the operations failed and why. You also know that if the getData function passes, it passes with type Data, which you defined above.

Admittedly, the above solution is more verbose than, say, using a try...catch block to wrap the entire function and throw an exception. Even so, Effect ensures that each error is specifically handled, making your code easier to debug.

Features of Effect

So far, we’ve seen how to use the Effect library to build and compose purely functional programs in TypeScript. Now, let’s look at some of its standout features:

Concurrency: Effect offers facilities for concurrent programming through the use of fibers, which are lightweight threads of execution that we can schedule independently, enabling efficient and scalable concurrency
Error handling: Effect implements a robust error-handling mechanism using functional constructs. This includes the Either data type for explicit error handling and the ability to define error channels within effects
Resource management: Effect provides a structured approach to managing resources. The library ensures that resources are acquired and released safely, preventing resource leaks and improving resource management
Composability: Effect emphasizes composability and modularity. Since it’s easy to compose effects, you can also easily build complex programs from smaller, reusable components
Type safety: Effect leverages the TypeScript type system extensively to provide strong type safety. This helps catch many errors at compile-time, reducing the likelihood of runtime issues

These features, alongside the actual Effect type we saw in action earlier, all make Effect a great tool for developers who want to manage side effects in async, concurrent, and reactive TypeScript programs in a robust and type-safe manner.

Pros and cons of using Effect

Using Effect in your projects comes with several benefits, along with a couple of drawbacks to keep in mind.

Some of the pros of Effect include:

Structured asynchronous programming: Effect introduces a structured approach to handling asynchronous operations. This enables developers to compose and manage asynchronous code in a declarative and functional manner
Gradual adoption: An added benefit of using the Effect library is that it can be gradually adopted into TypeScript projects, allowing developers to choose how and if they want to continue with the library without imposing a radical shift in development practices
Maintenance and debugging ease: Using Effect allows you to maintain and easily debug your code because the predictable nature of Effect code can contribute to easier maintenance and debugging

Meanwhile, some of the drawbacks of using Effect include:

Learning curve: The learning curve for Effect is quite steep, as Effect introduces functional programming concepts to TypeScript, which might pose a challenge for developers who are not familiar with it. However, since you can adopt Effect gradually in your projects, you can take your time to learn how best to apply effects to your TypeScript programs
Ecosystem maturity: While Effect has an active community, the ecosystem might not be as mature or extensive as some other libraries or frameworks. This could impact the availability of documentation, third-party libraries, and resources

It’s important to consider these factors before choosing whether or not to adopt Effect into your TypeScript projects.

How does Effect compare to RxJS?

RxJS is a library for reactive programming using Observables, which is a powerful and versatile way to handle asynchronous and event-based programming. RxJS is featured around a reactive programming paradigm that uses Observables, Observers, and Subjects to handle events.

So, how does RxJS compare to Effect? Below is a table that compares the features of RxJS and Effect:

Features	Effect	RxJS
Programming paradigm	Functional programming	Reactive programming
Main features	Effects and fibers	Observables
Error handling	Yes	Yes
Pros	Type safety: robust error handling, promotes testability	Composability, state management, and error handling
Cons	Steep learning curve, verbose code base	Requires data immutability, makes writing tests complex
Community and ecosystem	Has an active community with a growing ecosystem	Has an active community with a well-established ecosystem

Effect and RxJS are both important libraries. Here are some tips to know which option to choose for different situations:

Choose a library that suits your project needs
Choose Effect when strong type safety, composability, and functional programming are key
Choose RxJS for asynchronous and event-based projects

While these libraries can be used together, this approach is not advised, as it can lead to potential complexity.

Conclusion

Throughout this article, we explored Effect, a powerful library for writing TypeScript. Effect provides a robust set of abstractions and features that contribute to code reliability, maintainability, and predictability.

We looked at the Effect type, which is at the core of Effect, as well as the various features of Effect. We also compared this library to RxJS to better understand when and how to strategically use each in your TypeScript projects.

Have fun using Effect in your next project. You can find out more in the Effect documentation.

LogRocket: Full visibility into your web and mobile apps

LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page and mobile apps.

Try it for free.

Exploring Redux Toolkit 2.0 and the Redux second generation

Matt Angelosanto — Tue, 23 Jan 2024 19:23:55 +0000

Written by Stephan Miller
✏️

State management in web applications is a hot topic. But while React's Context API, MobX, and a handful of other libraries might be great alternatives to Redux, Redux is still king.

Redux has earned its stripes. It's predictable, reliable, and has a huge community of users. But even those of us who use it have to be honest: there used to be a lot of boilerplate to deal with, which added complexity and could make tracing variables through your source code a pain.

But if you're still dealing with this boilerplate, then you need to catch up. Redux Toolkit has been around since 2019 and is now the standard method of creating Redux apps, streamlining your state management, and reducing the amount of boilerplate code you need to write. And if you are already using Redux Toolkit and RTK Query, Redux Toolkit 2.0 was released to production in November 2023, so it's ready to use.

Redux Toolkit 2.0 overview and installation

Redux Toolkit 2.0 is the first major version of Redux Toolkit in four years and while it's a big overhaul and there are some breaking changes, Redux documentation states that "most of the breaking changes should not have an actual effect on end users" and that "many projects can just update the package version with very few code changes." Here is an overview of the changes:

Modernization

Packaging updates: The modern ESM build lives in ./dist/ with a CJS build included for compatibility
Deprecations removed: Several options that were marked as deprecated in the past have been removed, such as the outdated object syntax in slices and reducers

Better workflow

New combineSlices method: Lazy load slice reducers for improved performance and modularity
Object vs. callback syntax: Both createSlice and createReducer now use a cleaner callback syntax instead of the deprecated object approach
Dynamic middleware: You can now add middleware on the fly

Dependency changes

Updated dependencies, like Reselect and Redux Thunk, which you don't have to install separately
Requires TypeScript 4.7 or later for optimal compatibility
Requires React Redux 9.0 for React apps, which you have to install separately
Requires React 18 if you're using React Redux

Installing Redux Toolkit

Now that we have an idea of the changes and improvements in this new version of Redux Toolkit, let's look at how to migrate a web app to this new version. If you are still using old school, non-Toolkit Redux, I will point you to other posts along the way that will guide you through migrating to the newer way of using Redux.

The first step is to install the new version, which is v2.0.2 at the time of writing this article:

# with npm
npm install @reduxjs/toolkit
# or with yarn
yarn add @reduxjs/toolkit

This will bring Redux core 5.0, Reselect 5.0, and Redux Thunk 3.0 along with it. If you are installing this in a React app, the new version of React Redux requires updating to React 18.

Once you have upgraded React or if you are already running this version, install React Redux 9.0 with one of these commands:

# with npm
npm install react-redux
# or with yarn
yarn add react-redux

Moving to Redux Toolkit 2.0 and Redux core 5.0

If you are still using vanilla Redux, you should check out this article on moving to Redux Toolkit. This installation won't change that because you can still use vanilla Redux with this version, but who would want to? Redux Toolkit changes the following three files into one file:

// Actions
const ADD_TODO = 'ADD_TODO';

function addTodo(text) {
  return { type: ADD_TODO, payload: text };
}

// Reducer
function todoReducer(state = [], action) {
  switch (action.type) {
    case ADD_TODO:
      return [...state, action.payload];
    default:
      return state;
  }
}

// Store
import { createStore } from 'redux';

const store = createStore(todoReducer);

Here is the resulting file:

import { createSlice } from '@reduxjs/toolkit';

const todoSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo(state, action) {
      state.push(action.payload);
    },
  },
});

export const { addTodo } = todoSlice.actions;
export default todoSlice.reducer;

Redux ToolKit changes in 2.0

Now let's look at how Redux Toolkit improved in the latest version and what changes have to be made during an upgrade.

Minor TypeScript changes

Here are some of the simple changes you have to make because of TypeScript compatibility updates:

UnknownAction replaces AnyAction: Treat any action's fields as unknown unless explicitly checked. Use type guards like .match() from Redux Toolkit or the new isAction utility to verify action types before accessing fields
Middleware action and next parameters are also unknown: Use type guards to safely interact with actions within the middleware
PreloadedState type is gone: It has been replaced by a generic in the Reducer type

Callback syntax in `createSlice` is now required

This change applies to both createSlice.extraReducers and createReducer. Up until this version, you could use either type of syntax. Here is an example of how to make this change.

This is the code block before making the change. We’re using the object syntax:

const mySlice = createSlice({
  // ... other reducers
  extraReducers: {
    [fetchTodos.pending]: (state) => {
      state.status = 'loading';
    },
    [fetchTodos.fulfilled]: (state, action) => {
      state.todos = action.payload;
      state.status = 'idle';
    },
    [fetchTodos.rejected]: (state, action) => {
      state.status = 'error';
    },
  },
});

And this is after the change. We’re using the callback syntax:

const mySlice = createSlice({
  // ... other reducers
extraReducers: (builder) => {
    builder
      .addCase(fetchTodos.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchTodos.fulfilled, (state, action) => {
        state.todos = action.payload;
        state.status = 'idle';
      })
      .addCase(fetchTodos.rejected, (state, action) => {
        state.status = 'error';
      });
  },
})

Changes to `configureStore`

According to the Redux docs, createStore is now deprecated and configureStore should be used instead. However, this has been the case since version 4.2.0, so it is not a new development. They are just reiterating this; createStore won't be removed because configureStore uses it internally, but it shouldn't be used directly.

Both configureStore.middleware and configureStore.enhancers must now be callbacks. Here is an example of these changes:

import { configureStore } from '@reduxjs/toolkit';
import logger from 'redux-logger';
import { batchedSubscribe } from 'redux-batched-subscribe';

const store = configureStore({
  // other configuration options
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
  // NOT THIS: middleware: (getDefaultMiddleware) => return [myMiddleware],
  enhancers: (getDefaultEnhancers) => getDefaultEnhancers().concat(batchedSubscribe()),
  // NOT THIS: enhancers: (getDefaultEnhancers) => return [myEnhancer],
});

The order of middleware and enhancers matters. For internal type inference to work, middleware has to come first.

You now have to use the Tuple type to provide an array of custom middleware or enhancers to configureStore. A plain array often leads to type loss, while Tuple maintains type safety. Here is an example:

import { configureStore, Tuple } from '@reduxjs/toolkit';
import logger from 'redux-logger';

configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    new Tuple(getDefaultMiddleware(), myCustomMiddleware, logger),
});

Changes to customizing `reactHooksModule`

Previously you could introduce your own custom versions of useSelector, useDispatch, and useStore but there was no way to check that all three were added. This module is now under the key of hooks and there is a check to determine whether all three exist:

// What you could do before
const customCreateApi = buildCreateApi(
  coreModule(),
  reactHooksModule({
    useDispatch: createDispatchHook(MyContext),
    useSelector: createSelectorHook(MyContext),
  })
);

// How you do it now
const customCreateApi = buildCreateApi(
  coreModule(),
  reactHooksModule({
    hooks: {
      useDispatch: createDispatchHook(MyContext),
      useSelector: createSelectorHook(MyContext),
      useStore: createStoreHook(MyContext),
    },
  })
);

New Thunk support in `createSlice.reducers`

Redux Toolkit 2.0 introduces the ability to add async thunks within createSlice.reducers.

To do so, first set up a custom version of createSlice using buildCreateSlice with access to createAsyncThunk. Then, use a callback for reducers to define thunks and other reducers. Finally, employ create.asyncThunk within the callback.

Here is an example:

const createSliceWithThunks = buildCreateSlice({
  creators: { asyncThunk: asyncThunkCreator },
});

const todosSlice = createSliceWithThunks({
  name: 'todos',
  reducers: (create) => ({
    // Normal reducers
    deleteTodo: create.reducer(...),
    // Async thunk
    fetchTodo: create.asyncThunk(
      async (id, thunkApi) => {
        const res = await fetch(`myApi/`);
        return (await res.json());
      },
      {
        pending: (state) => { ... },
        fulfilled: (state, action) => { ... },
        rejected: (state, action) => { ... },
        settled: (state, action) => { ... },
      }
    ),
  }),
});

// Access thunks like regular actions using slice.actions.
export const { addTodo, deleteTodo, fetchTodo } = todosSlice.actions;

Making selectors part of your slice

You can now define selectors directly within createSlice. Here are some points to note:

Selectors assume the slice state is mounted at rootState.{sliceName}
Use sliceObject.getSelectors(selectSliceState) to customize selector generation for alternate state locations

Here’s a code example:

const mySlice = createSlice({
  name: 'todos',
  reducers: {
    // ... reducers
  },
  selectors: {
    selectTodos: state => state.todos,
    selectTodoById: (state, todoId) => state.todos.find(todo => todo.id === todoId),
  },
});

// Accessing selectors:
const { selectTodos, selectTodoById } = mySlice.selectors;

const todos = selectTodos();
const todo = selectTodoById(42);

Lazy loading and code split slices

Redux Toolkit 2.0 introduces combineSlices to enable code splitting and lazy loading reducers. It accepts individual slices or an object of slices and automatically merges them using combineReducers. The reducer function it generates provides the following methods:

inject(): Adds slices dynamically, even after the store is created
withLazyLoadedSlices(): Generates TypeScript types for slices to be added later

Here is an example:

// Combine slices and add lazy loaded type
import { combineSlices } from '@reduxjs/toolkit';
import slice1 from './slice1';
import slice2 from './slice2';
import lazyLoadedSlice from './lazyLoadedSlice';

const rootReducer = combineSlices(slice1, slice2).withLazyLoadedSlices<
    WithSlice<typeof lazyLoadedSlice>
  >();

// Later, inject new slice lazy loaded slice:
import lazyLoadedSlice from './lazyLoadedSlice';

rootReducer.inject(lazyLoadedSlice);

Dynamically add middleware

It used to take a hack or a separate package to add middleware at runtime, which can be useful for code splitting. Now you can do this with Redux Toolkit 2.0:

// Import, create dynamic instance, and configure your store with it.
import { createDynamicMiddleware, configureStore } from '@reduxjs/toolkit'

const dynamicMiddleware = createDynamicMiddleware()

const store = configureStore({
  reducer: {
    myThings: myThingsReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().prepend(dynamicMiddleware.middleware),
})

// Add your middleware at runtime
dynamicMiddleware.addMiddleware(loggerMiddleware);

// Add other middleware based on conditions, user input, etc.
if (someCondition) {
  dynamicMiddleware.addMiddleware(otherMiddleware);
}

createDynamicMiddleware also comes with React hook integration (if you have React Redux 9.0 installed).

Reselect 5.0: Changes and new features

Reselect now uses a WeakMap-based memoization function called weakMapMemoize by default. It offers better performance and memory management compared to the previous defaultMemoize function. The cache size is effectively infinite, but it now relies exclusively on reference comparison.

The older defaultMemoize function is now available as lruMemoize for those who need a Least Recently Used (LRU) cache. If you want to create custom equality comparisons, you can make createSelector use lruMemoize.

You can then pass options to createSelector for more control over memoization and debugging:

memoize: Specifies a custom memoization function (e.g., lruMemoize)
argsMemoize: Customizes memoization behavior for selector arguments
inputStabilityCheck: Enables a development-time check for input selector stability
identityFunctionCheck: Warns if the result function returns its input directly

Here is an example of specifying the older memoize function instead of the default weakMapMemoize along with some of these new options:

import { createSelector } from 'reselect';

const mySelector = createSelector(
  state => state.todos,
  todos => todos.filter(todo => todo.completed),
  {
    memoize: lruMemoize, // Use LRU cache, runs the input selectors and compares their current results with the previous ones
    memoizeOptions: { resultEqualityCheck: (a, b) => a === b } // Custom equality comparison
    argsMemoize: defaultMemoize, // Use default memoize function, compares the current arguments with the previous ones
    argsMemoizeOptions: { isEqual: (a, b) => a === b }, // Custom equality comparison for argsMemoize
    inputStabilityCheck: true, // Enable input stability check
  }
);

Changes to RTK Query 2.0

Now, if you aren't using Redux Toolkit, you definitely aren't using RTK Query. I started using Toolkit around two years ago and just happened to run into RTK Query about six months ago when I was looking for a simplified way of fetching data for the dashboard. I wish I had found it earlier!

While it doesn't replace React Toolkit, RTK Query is great for fetching data. It will even take out your service files if you currently have them, which means less boilerplate.

Only a few things were changed in RTK Query 2.0. The development team stated that the focus for 2.0 was improvements to the core Redux Toolkit libraries and now that they’re done with that, they can shift attention to improving the RTK Query library. But some issues were fixed, including:

Some users reported issues with manually skipping subscriptions and running multiple lazy queries. These bugs were due to RTK Query not tracking cache entries in certain scenarios
Running multiple mutations consecutively could cause problems with tag invalidation (updating related data based on changes). RTK Query now lets you choose how tag invalidation happens. By default, it waits briefly to group multiple invalidations, preventing unnecessary processing, but if you prefer the old behavior, you can switch it back in the configuration by setting invalidationBehavior to immediate

Not much changed with React Redux 9.0

Redux Toolkit 2 requires React Redux 9 in React-based apps. The changes to React Redux were relatively minor, mainly to make it compatible with the other Redux changes.

Conclusion

Redux Toolkit 2.0 is here, and it is not yesterday's Redux, but it hasn't been for a while. Redux Toolkit and RTK Query have been around for four years now and reduced a lot of the boilerplate, which was the biggest complaint about Redux.

But this new version adds even more reasons to give it a try, including streamlined, modern packaging and the removal of outdated and deprecated features. Slices can now be lazy loaded and string-based action types simplify debugging. Finally, upgrading doesn't require many code changes and, according to the docs and my experience, won't affect your users.

Get set up with LogRocket's modern error tracking in minutes:

Visit https://logrocket.com/signup/ to get an app ID.
Install LogRocket via NPM or script tag. LogRocket.init() must be called client-side, not server-side.

NPM:

$ npm i --save logrocket 

// Code:

import LogRocket from 'logrocket'; 
LogRocket.init('app/id');

Script Tag:

Add to your HTML:

<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>

3.(Optional) Install plugins for deeper integrations with your stack:

Redux middleware
ngrx middleware
Vuex plugin

Get started now

Exploring Next.js no-code platforms for rapid development

Matt Angelosanto — Tue, 23 Jan 2024 15:18:01 +0000

Written by Oyinkansola Awosan✏️

Developing fast, dependable, and user-friendly web applications requires staying up-to-date with the constantly changing web development landscape. The combination of Next.js and no-code platforms has revolutionized the web development process, enabling frontend developers to create complex applications without deep coding knowledge.

This article explores the advantages, drawbacks, and best practices associated with using Next.js no-code platforms to speed up frontend development.

Benefits of no-code platforms for frontend development

Accessibility and inclusivity: No-code platforms provide individuals with the opportunity to engage in frontend development, regardless of their technical background. These platforms are generally easy to use and have intuitive interfaces, freeing designers, entrepreneurs, and non-developers from the limitations of complex code and enabling them to construct user interfaces
Rapid prototyping: Prototyping often happens faster with no-code platforms since developers don't have to dig into complex code intricacies to transform concepts into observable prototypes and mockups quickly. This speeds up the development process, promotes teamwork, and enables stakeholders to see the finished product early
Cost effectiveness: Development expenses may be significantly reduced using no-code platforms, particularly for initiatives with tight budgets. By reducing complex code requirements, companies may better manage their resources
Flexibility and< customization: Although no-code platforms are sometimes considered simple, many technologies offer some degree of customization and flexibility. Developers can customize user interfaces, include unique features, and create great user experiences without sacrificing the advantages of a no-code methodology

Let’s review some popular no-code platforms for Next.js. We’ll look at Plasmic, Retool, Stackbit, and Notion.

Plasmic

Plasmic is a visual page builder and headless CMS tool that functions perfectly with contemporary web development frameworks like Next.js. This platform offers a creative way for developers and designers to close the gap between code and visual design. Plasmic’s integration with Next.js improves the entire web development process, making it easier for designers and developers to work collaboratively and productively.

Plasmic integration with Next.js

The first step to integrating Plasmic with Next.js is to install it locally or globally using npm or Yarn:

npm install @plasmicapp/loader-nextjs
yarn add @plasmicapp/loader-nextjs

To initialize Plasmic, create a plasmic-init.ts module that defines the project's ID and public API token globally, which can be obtained from the Plasmic Studio. The specifics will depend on the demands of your project. For thorough instructions, including code samples and thorough descriptions, see the documentation.

Advantages

There are two primary benefits associated with using Plasmic with Next.js:

Seamless integration: Plasmic is tailored for and provides a seamless interface with Next.js. Developers using Plasmic's visual tools through this connection get access to Next.js capabilities, like file-based routing, server-side rendering (SSR), and static site creation
Enhanced designer-developer collaboration: Thanks to Plasmic, designers do not need to write code to develop or alter UI components graphically. There’s less back and forth between developers and designers because modifications can be performed in the Plasmic editor and instantly reflected in the coding

Disadvantages

Here are some disadvantages to keep in mind if you’re considering using Plasmic with Next.js:

Learning curve: Adopting Plasmic may require a steep learning curve for teams that are not used to visual design tools or are firmly entrenched in traditional coding processes
Overdependence potential: Developers who desire a thorough grasp of every part of the codebase may find that relying too much on a visual builder can cause a gap in their comprehension of the underlying code
Limited control for advanced customization: Plasma my limit developers who are seeking the ability to create highly customized and intricate designs

Retool

Retool is a low-code platform intended to facilitate the rapid development of internal tools by developers. It simplifies the development of bespoke apps for internal corporate activities by providing a wide choice of pre-built components and integrations.

Retool integration with Next.js

Retool integration with Next.js applications requires a few steps, from the initial setup of the Next.js app to the integration of Retool with Next.js:

Step 1: Set up Next.js

npx create-next-app@latest my-nextjs-app
cd my-next-js-app

Step 2: Create a Retool account
Create a basic account on the Retool platform if you do not already have one, and familiarize yourself with how tools are used within the Retool environment.

Step 3: Connect Retool to Next.js
If you’re using the REST API Query for Retool, follow these steps:

Use an existing app or build a new one in your Retool dashboard
Establish a connection with your Next.js API route, using Retool's REST API Query
If you're working locally, set the URL to your Next.js API endpoint, such as http://localhost:3000/api/retool

To manage CORS, follow these steps:

Retool will send queries to your Next.js API, so make sure your Next.js app is set up to support Cross-Origin Resource Sharing (CORS)
You may manually set up CORS in your API routes or use the nextjs-cors package

Advantages

Using Retool with Next.js offers several benefits:

Quick development: Retool's user-friendly interface with drag-and-drop components allows more rapid application development than writing code from scratch; it reduces the work and time required for frontend development
Pre-built components: Retool provides many readily available, easily customizable, and application-integrable components, such as forms, tables, buttons, and charts
Integrations: Retool offers a wide range of connectors with third-party services, databases, and APIs, enabling smooth data exchanges and interactions in the program

Disadvantages

Here are some disadvantages associated with using Retool with Next.js:

Learning curve: Retool streamlines development, but there is still a learning curve to grasp its features and potential
Limitations: The combination of Retool and Next.js has limited use in consumer-facing applications
Cost: Retool can be costly, especially for small enterprises or startups, depending on the extent of utilization

Stackbit

Stackbit is a cutting-edge technology created to improve and expedite the creation process of Jamstack websites. The core of Stackbit's functionality is the Jamstack design, which emphasizes client-side JavaScript, utility APIs, and predefined markup. Stackbit is unique in the web development space for several reasons, and its ability to interact with frameworks such as Next.js increases its usefulness even more.

Integrating Stackbit with Next.js

To integrate Stackbit with Next.js, start by initializing a new Next.js project, like ao:

npm init next-app your-nextjs-project

Next, configure the stackbit.yaml file in your project root to create content models and their corresponding fields. This is a necessary step for Stackbit to comprehend the organization and content of your project.

Here’s an example configuration:

ContentModels:
  BlogPost:
    type: data
    file: 'content/data/blog-post.md'
    fields:
      - type: string
      - name: title
      - label: Title

Now you can use Stackbit to fetch and display data. You can use the page's data-fetching methods, such as getServerSideProps or getStaticProps, to fetch content controlled by Stackbit and then display it in your Next.js pages.

Advantages

There are several benefits to using Stackbit with Next.js:

Headless CMS with a visual editor: Stackbit combines a headless CMS with a visual editor, providing a user-friendly solution for content management
Supports multiple data sources: The platform supports multiple data sources, facilitating flexibility in integrating various content types
Speed and performance: Using the Jamstack methodology, Stackbit websites have superior loading speeds and an enhanced user experience by default. Jamstack websites are fast by default, due to pre-rendering and location-based servers. Stackbit claims its websites load 2x faster than traditional websites

Disadvantages

Here are a couple of potential disadvantages to using Stackbit:

Limited customization for complex projects: Stackbit works great for simple web projects, but may need help to handle more complicated or unique applications
Dependency on< third-party services: Stackbit integrates many platforms and services, so any modifications or interruptions to those services may affect projects using Stackbit

Notion

Notion is an all-in-one workspace program that is well-liked for its flexible methods for handling databases, taking notes, managing tasks, and working in groups. This application lets users generate and arrange work in whichever best fits their needs by combining the features of a spreadsheet, document editor, and customized content management system.

Integrating Notion with Next.js

The first step to integrating Notion with Next.js is to set up your Notion workspace. This requires creating a Notion database and obtaining the right Notion API credentials to fetch data.

Next, run the following command in your terminal to install the required packages:

npm install @notionhq/client

Now you can use the Notion SDK in your Next.js application to retrieve data from your database.

Advantages

There are several benefits associated with using Notion with Next.js:

Collaboration platform with no-code capabilities: Notion is a versatile collaboration platform with no-code capabilities that allows for collaborative content creation
Database functionalities for content organization: The platform offers database functionalities, enabling the structured organization of content for various purposes
Versatile for project management needs: Notion is versatile and can be adapted for various project management needs, enhancing collaboration among team members

Disadvantages

Here are some disadvantages associated with using Notion with Next.js:

Limited for complex web applications: While powerful, Notion may have limitations for developers working on highly complex web applications
Lack of suitability for large-scale projects: For large-scale projects, developers may need to carefully assess whether Notion meets their scalability requirements

Next.js no-code platform comparison

	Plasmic	Retool	Stackbit	Notion
Open source	No	No	Some components/themes are open source	No
Customization	High customization through visual UI.	Retool is very customizable as it allows embedding of custom code	Customizable themes; allows custom code	Limited customization compared to the other platforms
Speed	Generally fast with a visual development approach	Pre-built components and tools are available to make it fast	Efficient jamstack deployment, optimized for speed so generally very fast	Fast but optimized more as a collaborative and note-taking tool
Community support	Community is not very large, but it is growing and users can ask questions via its forum or on Slack	Active community, well-documented, and strong developer support via Discord and their support forum	Growing community; good documentation	Boasts a large user base, an active community, and an extensive documentation

Conclusion

The use of no-code platforms with Next.js has the potential to revolutionize frontend development, particularly for Next.js applications. These platforms drastically cut down on development time and complexity by allowing for the quick, visual production and administration of online content without requiring specialized code.

Both developers and non-developers can create and manage complex web applications more effectively with the help of these technologies. This combination of standard development frameworks with no-code capabilities is a big step toward improving the accessibility and agility of online development.

LogRocket: Full visibility into production Next.js apps

Debugging Next applications can be difficult, especially when users experience issues that are difficult to reproduce. If you’re interested in monitoring and tracking state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.

LogRocket is like a DVR for web and mobile apps, recording literally everything that happens on your Next.js app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Modernize how you debug your Next.js apps — start monitoring for free.

Bootstrap adoption guide: Overview, examples, and alternatives

Matt Angelosanto — Thu, 18 Jan 2024 15:22:30 +0000

Written by Elijah Asaolu
✏️

Bootstrap is a CSS framework that has revolutionized the ease and efficiency of web development. It primarily provides a collection of pre-styled components and layouts that can easily integrate into any web project. This collection includes everything from navbars and buttons to forms and modals, all pre-styled for instant use.

In this guide, we’ll explore the origins of Bootstrap and how it has evolved over the years. We'll also go into key Bootstrap features, its use cases, why you should choose Bootstrap, and briefly explain how Bootstrap compares with other top CSS frameworks.

Introduction to Bootstrap

The origins of Bootstrap can be traced back to 2011 when its creators, Mark Otto and Jacob Thornton, were working at Twitter. Since the previous styling libraries they used caused design discrepancies and were difficult to maintain, they opted to create their own.

Initially, the team designed Bootstrap as an internal tool to improve design consistency and further unify the platform's frontend standards. Recognizing the project's potential outside of Twitter's internal use, the team opted to open source it, making it public later that year.

Since then, Bootstrap has changed considerably — most notably, in its relationship with JavaScript libraries.

Originally, Bootstrap relied heavily on jQuery to implement dynamic components such as dropdowns and modals. However, Bootstrap v5 made a significant shift by abandoning jQuery in favor of vanilla JavaScript — an intentional attempt to adopt new JavaScript standards and improve performance.

How Bootstrap works

Behind the scenes, the Bootstrap team and other contributors have compiled a file containing numerous CSS style definitions linked to specific class names. This file, which is called bootstrap.css, allows you to rapidly apply these styles to your project by referencing the appropriate class names.

Additionally, utilizing these styles in your project is pretty straightforward. First, you link Bootstrap's CSS and JavaScript files in your markup, as shown below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Example</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <h1>Hello, Bootstrap!</h1>
    <!-- Bootstrap JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

With the files linked, you can start using Bootstrap in your HTML by adding Bootstrap's class names to your markup elements. For example, to create a primary-colored button, you would use:

<button type="button" class="btn btn-primary">Primary Button</button>

Over time, developers have enhanced Bootstrap's adaptability by integrating it with various JavaScript frameworks. For instance, BootstrapVue exclusively caters to Vue.js, while React-Bootstrap is specifically designed for React.

Why choose Bootstrap?

Bootstrap for web development offers numerous benefits:

Performance and bundle size: Bootstrap is optimized for performance. It provides a lean and efficient CSS and JavaScript bundle, ensuring it doesn't bloat your website with unnecessary code
Ease of use: One of Bootstrap’s standout features is its ease of use. The framework's intuitive classes and consistent design principles allow developers to quickly create layouts and components without extensive CSS or JavaScript knowledge
Responsive design: The framework is built with a mobile-first approach, ensuring websites are responsive and visually appealing on all devices, from phones to desktops
Documentation, community, and ecosystem: Another major strength of Bootstrap is its comprehensive documentation and strong community support. The well-organized documentation makes it easy to find information and learn how to use the framework
Seamless integrations: Bootstrap’s compatibility with various JavaScript frameworks further enhances its versatility. Tools like BootstrapVue and React-Bootstrap, or ReactStrap, allow developers to integrate Bootstrap's styling and components within Vue.js and React projects, respectively

These benefits make Bootstrap a great choice for almost any project. However, Bootstrap has occasionally faced criticism for its distinctive, recognizable style, which some may consider its most significant drawback — possibly even its only major one. Let’s discuss this next.

Why do all Bootstrap websites look similar?

The similarity in appearance across Bootstrap websites, particularly in elements like buttons and navbars, has led to the narrative that all Bootstrap websites look alike. This criticism holds some truth, especially in earlier versions where customization options were more limited and developers used similar design templates.

However, recent versions of Bootstrap have significantly addressed these concerns. The framework now offers enhanced extensibility and customization options. Developers can easily personalize components to fit their unique design needs without being confined to the default styles.

While Bootstrap's enforced style was once a point of debate, the framework's evolution has made it more adaptable and versatile, enabling developers to override default styles and create unique, visually distinct web designs.

Key Bootstrap features to know

Bootstrap is packed with many components and features. Let's quickly explore some of its most common elements in an everyday application.

Grid system

Bootstrap's grid system is a powerful and flexible tool that forms the foundation of most layouts within the framework. Central to this system are the concepts of containers, rows, and columns: Containers are Bootstrap's most basic layout element and are required when using the grid system. They contain, pad, and align your content within a device or viewport.

Inside a container, you can create rows using the .row class. Each row is considered a single horizontal group for your columns. Significantly, each row is divided into 12 equal columns, providing a consistent and flexible way to layout content.

Columns are created with classes like .col-md-*, where * can be any number from 1–12. This number indicates how many of the 12 available columns in the grid system the column should span. For example, using .col-md-4 means the column will span four out of the 12 available columns.

Here's a basic example of a row with four columns:

><div class="container">
  <div class="row">
    <div class="col-md-3">Column 1</div>
    <div class="col-md-3">Column 2</div>
    <div class="col-md-3">Column 3</div>
    <div class="col-md-3">Column 4</div>
  </div>
</div>

In this code, we've added col-md-3 to each column, allocating one-quarter of the horizontal space per column in a medium-sized viewport: Bootstrap's grid system is responsive by default, meaning these column sizes will be automatically adjusted based on the viewport's size. Additionally, you can use Bootstrap Flex utility classes to change the direction and alignment of these grid systems.

Background and text colors

Bootstrap offers a range of utility classes designed to rapidly customize background and text colors within HTML elements. To change the background color of an element, you can use the .bg-[color] class. Additionally, to alter a text color, the .text-[color] class is available.

Here, [color] represents a color from Bootstrap's predefined color schemes — such as primary, secondary, and success — and not traditional color names like red or orange:

In addition to individual text and background classes, Bootstrap introduces a combined class, .text-bg-[color].

This combined class merges the functionalities of .text-[color] and .bg-[color], providing a convenient way to set both text and background colors simultaneously. It smartly adjusts the text color for optimal contrast against the specified background color:

Furthermore, in recent Bootstrap versions, you can adjust an element's opacity via the .text-opacity-[percentage] class. This allows you to set the opacity to 25 percent, 50 percent, or 75 percent of its original value:

Tables

Styling HTML tables for both responsiveness and visual appeal can be challenging. Fortunately, Bootstrap simplifies this task with a variety of utility classes. You can start by adding the .table class to your HTML <table> tag to instantly transform a basic table into a more professionally styled one, as shown below: Further customization is possible with color-specific classes. For example, you can apply a color theme to an entire table or specific table cells using .table-[color] classes, such as .table-dark, for a dark color theme:

Bootstrap's table class list is extensive, allowing for various styling options:

Striped tables: Add .table-striped to create a zebra-stripe effect on table rows
Bordered or borderless tables: Use .table-bordered for borders around all parts of the table and cells and .table-borderless for a borderless design
Responsive tables: The .table-responsive class ensures your table remains responsive and scrolls horizontally on smaller devices, accommodating numerous columns without breaking the layout

With the help of this set of Bootstrap table classes, you can quickly create tables that are both aesthetically pleasing and functional.

Alerts

Alerts are key visual elements that convey important messages to users, ranging from success notifications to warnings or error information. Bootstrap significantly simplifies the creation of these alerts with its utility classes.

To create a styled alert, you only need to add the .alert class along with a .alert-[color] class to a div or any other suitable container element. In the .alert-[color] class, [color] reflects the nature and severity of the message. For example:

<div class="alert alert-success" role="alert">
  This is a success alert--check it out!
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert--check it out!
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert--check it out!
</div>

The code above produces the following output: To further enhance the functionality of these alerts, Bootstrap allows them to be dismissible. This feature is particularly useful for messages that do not need to remain on the screen indefinitely.

You can add a button within the alert that triggers its dismissal and the .alert-dismissible class on the alert element itself, as shown below:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  Click <strong>X</strong> to close this alert!
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
</div>

The code above will produce the following output: The Bootstrap alert component is a fantastic tool for presenting information in an aesthetically pleasing and intuitive way.

Buttons

One of the simplest yet most impactful features of Bootstrap is the styling options for buttons. Bootstrap offers various classes to create visually appealing buttons with minimal effort. To create a styled button, add the .btn and .btn-[color] classes to your HTML button elements:

Bootstrap also includes outline button designs for a more minimalistic look. These are created using the .btn-outline-[color] class, which renders a button with only the border and text colored. The background only gets filled in on hover or focus:

Beyond basic styling, Bootstrap makes it easy to customize button sizes. For example, you can create larger or smaller buttons by adding .btn-lg or .btn-sm to your button tag. Bootstrap's button documentation provides information for more advanced button features and customization options.

Cards

Bootstrap cards serve as modern, modular containers for displaying content. They offer a sleek and organized way to present a mix of images, text, links, and more.

To create a Bootstrap card, you typically structure the card into different sections: the card header, body, and an optional footer for actions like buttons or links. Here's an example:

<div class="card" style="width: 32rem">
  <img
    src="https://source.unsplash.com/random/?nature&1"
    class="card-img-top"
    alt="..."
  />
  <div class="card-body">
    <h5 class="card-title">Your Card Title Here</h5>
    <p class="card-text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro . . .
    </p>
    <a href="#" class="btn btn-dark">Action Button</a>
  </div>
</div>

The code above creates a basic card with an image at the top, followed by a title, text, and a button within the card body, as shown below:

Additionally, Bootstrap offers a card variant with image overlays, where the text is positioned over the image. This is particularly useful for creating more visually striking cards:

<div class="card text-bg-dark">
  <img
    src="https://source.unsplash.com/random/?dark&cover"
    class="card-img"
  />
  <div class="card-img-overlay">
    <h5 class="card-title">Your Card Title Here</h5>
    <p class="card-text">
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro . . .
    </p>
    <p class="card-text"><small>Last updated 3 mins ago</small></p>
  </div>
</div>

The code above creates a card where the text content overlays the image, providing a more engaging and cohesive visual experience: Bootstrap's card component demonstrates its flexibility and efficiency in web design, providing a complex yet easy-to-implement solution for displaying content in a structured and attractive way.

Utility classes

Bootstrap is more than just components and design elements. It also includes a comprehensive set of utility classes, providing flexibility in customizing layout and appearance.

For example, you can use the m-* classes for setting margins and the p-* classes for padding. These classes follow a simple naming convention where the asterisk * represents the size of the margin or padding. For instance, m-3 applies a moderate margin, and p-2 applies a smaller padding.

Bootstrap also includes:

Utility classes for adjusting the width w-* and height h-* of elements
shadow-* classes, which come in handy for adding box shadows. These range from small (shadow-sm) to large (shadow-lg), allowing for varied levels of depth and emphasis on elements
position-* classes to quickly change the CSS position of an element. These include static, relative, absolute, fixed, and sticky

Bootstrap's utility classes cover various functionalities, from display properties and text alignment to visibility and sizing. For a comprehensive list of all available utility classes and detailed explanations of their usage, the Bootstrap documentation is a valuable resource.

Accessibility

An often underappreciated yet crucial aspect of Bootstrap is its commitment to accessibility. Its interactive components are designed to work for touch, mouse, and keyboard users. Beyond this, Bootstrap also includes a range of classes specifically designed to make web content more accessible to the visually impaired.

For example, Bootstrap provides a .visually-hidden class to hide information intended only for screen readers from the page layout. This feature is particularly useful for visually impaired users for adding additional context or descriptions:

<p class="text-danger">
  <span class="visually-hidden">Danger: </span>
  This action is not reversible
</p>

As demonstrated in the example above, the text Danger will not be visible on the browser, but it will be captured by screen reader technologies.

Bootstrap icons

In addition to its vast array of components and utility classes, Bootstrap also offers a rich library of icons. This library is designed to be generic and easy to incorporate, with elements such as arrows and user icons, as well as more specific symbols such as file types and tools.

To use Bootstrap icons in your project, you must first include the icon library in your HTML markup.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">

Once the icon library is linked, you can start referencing the icons in your HTML by using <i> tags with the appropriate class names. Each icon has a unique class that starts with bi-, followed by the icon's name.

<i class="bi bi-rocket-fill"></i>

This line of code will display a rocket icon from the Bootstrap icons library. It’s also worth mentioning that Bootstrap icons are SVGs, which means they scale well for all screen sizes and are customizable via CSS.

How to customize Bootstrap

One of the simplest methods for customizing Bootstrap is creating a new CSS file where you can override the default styling. This approach is particularly user-friendly for those who may not be familiar with Sass or are less comfortable with deeper code manipulations.

To do this, link your custom CSS file after Bootstrap's stylesheet to ensure your custom styles take precedence over Bootstrap's default styles:

<!-- Link to Bootstrap CSS -->
<link rel="stylesheet" href="path/to/bootstrap.css" />
<!-- Your custom styles -->
<link rel="stylesheet" href="path/to/your-stylesheet.css" />

You can now redefine Bootstrap's classes in your CSS file to match your desired aesthetics.

Furthermore, you can download Bootstrap's source Sass files for more in-depth customization and modify the Sass variables to suit your needs. This customization can range from changing the default color scheme to adjusting the global font size, border-radius values, or even the box-shadow intensity:

// Customizing primary color
$primary: #yourCustomColor;
// Customizing border-radius
$border-radius: 0.25rem;

After adjusting the variables, simply compile your Sass files to generate a new CSS file that will reflect all your customizations.

Use cases for Bootstrap

Bootstrap's versatility makes it a go-to framework for a wide range of web development projects, ranging from creating simple landing pages to building complex, interactive dashboards:

Furthermore, you can seamlessly integrate Bootstrap with JavaScript frameworks like React, Vue, and Capacitor to develop responsive mobile apps, expanding its usage beyond traditional web applications.

Below is an example of a mobile page I designed with Bootstrap, complemented with custom CSS for additional styling:

If you're looking for inspiration or want to learn more about the framework's possibilities, you can check out resources like Awwward's best Bootstrap websites and the official Bootstrap themes web page, which has options for free and paid templates.

Comparing Bootstrap with Tailwind, MUI, and Bulma

While Bootstrap is an all-around excellent option for styling applications, other popular CSS libraries like Tailwind CSS, Material UI (MUI), and Bulma also offer unique strengths and ideal use cases.

For example, Bootstrap is known for its quick-start capabilities, offering pre-designed components for rapid development.

In contrast, Tailwind CSS focuses on utility-first CSS, providing more granular control over styling, while MUI is known for its Material Design components. Similarly, Bulma stands out for its simplicity and usage of Flexbox, providing a modern, minimalist approach that prioritizes responsiveness and ease of use.

Below is a table comparing key points to help you quickly choose from these frameworks:

Factor	Bootstrap	Tailwind CSS	Material UI (MUI)	Bulma
Design philosophy	Pre-built components and styles; grid system for layout	Utility-first, low-level utility classes for custom designs	Pre-built components and styles based on Google’s Material Design	Flexbox-based, simple, with some pre-built components
Predefined styles	Many predefined styles and components	No predefined styles; utility classes for custom designs	Predefined styles and components following Material Design	Basic components and elements; focuses on layout
Customization	Global customization using Sass or theme variables	Utility-first approach for specific style customization	Global customization using theme variables	Customizable via Sass variables
Learning curve	Relatively low, easy to start	Steeper, requires learning utility classes	Moderate, requires understanding of prebuilt components and customization	Easier due to simplicity and layout focus
Speed of development	Quick with prebuilt components	Quick for custom designs, but requires understanding of utility classes	Quick with many prebuilt components	Balanced with ready-to-use components and layout options
Accessibility	Good, but varies with implementation	Manual effort required for accessibility	Good adherence to accessibility standards	Good, varies with implementation

For an in-depth comparison of Bootstrap, Tailwind CSS, and MUI, check out the following LogRocket article: Comparing Bootstrap vs. Tailwind CSS vs. Material UI (MUI).

Conclusion

Throughout this article, we've explored Bootstrap's core features, adaptability in various projects, and customizability. We also compared it to frameworks like Tailwind CSS and Material UI.

Bootstrap stands out as a user-friendly, versatile framework, perfect for quick development and offering extensive customization for unique design needs. Its ease of use, supportive community, and comprehensive documentation make it reliable for creating responsive, modern applications.

Get set up with LogRocket's modern error tracking in minutes:

Visit https://logrocket.com/signup/ to get an app ID.
Install LogRocket via NPM or script tag. LogRocket.init() must be called client-side, not server-side.

NPM:

$ npm i --save logrocket 

// Code:

import LogRocket from 'logrocket'; 
LogRocket.init('app/id');

Script Tag:

Add to your HTML:

<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>

3.(Optional) Install plugins for deeper integrations with your stack:

Redux middleware
ngrx middleware
Vuex plugin

Get started now

Using Deno with Jupyter Notebook to build a data dashboard

Matt Angelosanto — Wed, 17 Jan 2024 19:09:20 +0000

Written by Agustinus Theodorus
✏️

In this guide, we will explore building a data analysis dashboard using Deno and Jupyter Notebook. Recently, the Deno team announced compatibility with Jupyter Notebook, allowing users to leverage the power and flexibility of Deno for their data analysis workflows by using Deno as a kernel within their Jupyter Notebook.

Introduction to the Deno and Jupyter Notebook integration

Deno is a modern JavaScript runtime for server-side and client-side applications. Even though you can still run pure JavaScript, Deno provides built-in support for TypeScript.

Deno uses strict type checking by default, as the TypeScript development team recommends, leading to a more type-safe environment. The main theme behind Deno is to provide a more secure runtime environment and a module system with explicit dependencies.

Jupyter Notebook is a tool to help you visualize and analyze data interactively and collaboratively. You don’t need to run code from a console, and you can run the code directly within the notebook cells, making it easier to visualize, experiment, and iterate on data analysis tasks.

This integration opens up new possibilities for data scientists and analysts, giving them access to Deno’s modern JavaScript runtime and its extensive module ecosystem that can import existing npm packages.

Jupyter Notebook: A gateway to data science

Jupyter Notebook has become the go-to tool for data scientists to explore and understand data.

These notebooks provide a convenient way to combine code, execute it, and show visualizations and explanatory text in a single document. This combination makes it easier to use Jupyter Notebook as a collaboration tool among data scientists, allowing for knowledge sharing and reproducibility in data analysis workflows.

Jupyter Notebook supports multiple languages, including Python, R, Rust, Julia, and Deno. This wide language support makes it easy for data scientists to work with the suitable programming language of their choice, depending on the nature of their data analysis tasks and preferred tools. One of the main goals behind using a notebook is to iterate quickly and use interactive computing effectively for data exploration and analysis.

Interactive computing allows data scientists to execute code and iterate on it directly without the hassle of using command lines or traditional code execution environments. Compared to executing code via a terminal or debugger, testing code and iterating on data analysis tasks in Jupyter Notebook is exceptionally easier.

Exploring data science libraries in Deno

The benefit of using Deno is that you can access modern JavaScript libraries available within the Node and npm ecosystem. There are already a lot of powerful libraries for data science and data visualization in npm, and you can plug and play these libraries in your Deno-powered Jupyter Notebook.

Here are a few examples of popular data science libraries in Deno that you‘ll interact with in this article:

D3.js: A robust library to visualize your data and create interactive data-driven visualizations.
Observable Plot: A library built on top of D3.js used to visualize data and iterate more quickly on different plot chart
Polars: A blazingly fast DataFrame library written in Rust for data manipulation and analysis

With a foundational understanding of Deno and Jupyter Notebook established, let’s delve into how to set up your environment to start building robust data analysis dashboards.

Preparing your environment

To prepare your environment, you must install both Deno and Jupyter. Assuming you’re using macOS/Linux, you can install Deno using the following command:

curl -fsSL https://deno.land/x/install/install.sh | sh

Next, ensure you have Python 3.x and pip installed. Jupyter Notebook is written in Python, so you will need pip to install it by running the following command:

pip install jupyterlab notebook

Test run your local Notebook server by executing:

jupyter notebook

The command above will run a Jupyter Notebook local server: If everything is set up correctly, you should see the Jupyter Notebook interface launching in your browser on http://localhost:8888/.

Compiling and running TypeScript in Jupyter with Deno

To use Deno in your notebook, you must have the Deno kernel installed. First, you can test run your Deno kernel by running the following command:

deno jupyter --unstable

If the kernel is already installed, you should receive a return message:


<output>✅ Deno kernel already installed.
</output>

Otherwise, if you haven’t installed the kernel yet, run the following:

deno jupyter --unstable --install

The above command will ensure you have installed the most recent Deno kernel for your local Jupyter Notebook.

N.B., while the Deno kernel is already shipped with the most recent version, it is still marked as unstable. This means that there may be some bugs or issues that could arise while using the Deno kernel in Jupyter Notebook.

Once you have Deno and Jupyter Notebook configured, you can start building your data analysis dashboard.

Building a data analysis dashboard with Deno and Jupyter Notebook

To help you understand how the new Deno kernel works, it’s better if we do a basic data visualization exercise using Jupyter Notebook and Deno.

You will build a financial data dashboard that analyzes your income and expenses. This dashboard will provide visualizations and insights into your financial data, helping you understand your expenses over time and make informed financial decisions. It will also allow you to track your net income and identify trends.

Here is a sample dataset of what the data would look like:

Date,Income,Expenses,NetIncome,BudgetIncome,ActualIncome,BudgetExpenses,ActualExpenses,Salaries,R&D,Marketing,Utilities,Rent,Equipment,Software,Hardware,Consulting,Office Supplies,DiffIncome,DiffExpenses
2022-01-01,281,218,63,284,281,221,218,41,24,45,43,22,35,2,2,2,2,3,3
2022-01-02,328,244,84,323,328,240,244,46,45,34,35,31,37,1,4,8,3,-5,-4
2022-01-03,266,223,43,269,266,222,223,31,49,38,30,22,40,2,6,1,4,3,-1
2022-01-04,287,226,61,279,287,229,226,43,47,31,48,21,26,5,1,3,1,-8,3
2022-01-05,307,214,93,309,307,217,214,48,37,40,23,34,20,1,3,4,4,2,3

The dataset for the dashboard is publicly available here.

Choosing the right tools for data visualization

In addition to D3.js, Observable Plot, and Polars, mentioned above, you‘ll also use the following packages for this exercise:

You’ll use Skia Canvas to create a canvas for rendering the data visualizations, display to render the plot on the canvas, D3 for data visualization, Observable Plot for creating interactive plots, and Polars to load the data into DataFrames.

Building the dashboard

You can start by importing the necessary libraries and modules in your Jupyter Notebook to build the financial data dashboard. Begin by importing the nodejs-polars library and the display module:

import pl from "npm:nodejs-polars";
import { display } from "https://deno.land/x/display@v0.1.1/mod.ts";

Once you import the required libraries, you can start fetching the sample dataset:

let response = await fetch(
  "https://gist.githubusercontent.com/agustinustheo/195f32a4a6c68c493056c883d959ca35/raw/c7363d8b916ab00a2d1747adb89fca120da29f42/mock_financial_data.csv",
);

let data = await response.text();

let df = pl.readCSV(data, { sep: "," });

await display(df.sample(10));

Integrating D3 with Deno for advanced visualizations

Integrating different types of visualizations, such as line charts, bar charts, and pie charts, to effectively showcase your financial data trends and patterns over time.

To start visualizing your data, you can use the D3.js library. Import it with the skia_canvas module to create a canvas to render the chart:

import * as d3 from "npm:d3";
import { createCanvas } from "https://deno.land/x/skia_canvas/mod.ts";

Once you have imported the necessary libraries, you can build your data visualization using D3. You will build a simple pie chart to track the percentage of expenses. Get the tail end of the data using df.tail(1).toRecords()[0] and then print the results:

const lastDataPoint = df.tail(1).toRecords()[0];
console.log(lastDataPoint);

Next, create the sample data by selecting the necessary columns from the DataFrame and converting them into a format suitable for a pie chart:

let categories = ['Salaries', 'R&D', 'Marketing', 'Utilities', 'Rent', 'Equipment', 'Software', 'Hardware', 'Consulting', 'Office Supplies'];

// Sample data
const sampleData1 = [];
for(let i = 0; i < categories.length; i++) {
    const category = categories[i];
    sampleData1.push({
        category,
        amount: lastDataPoint[category],
    });
}

Now you can create a canvas and use D3 to render the pie chart. Here’s an example of how you can achieve this:

const width = 500;
const height = 500;
const radius = Math.min(width, height) / 2;

// Create a pie function
const pie = d3.pie().value(d => d.amount);

// Create an arc generator for the slices
const arc = d3.arc()
    .innerRadius(0)
    .outerRadius(radius);

// Create an arc generator for the labels
const labelArc = d3.arc()
    .innerRadius(radius - 40) // Adjust to position the labels
    .outerRadius(radius - 40);

// Create the canvas
const canvas = createCanvas(width, height);
const ctx = canvas.getContext("2d");

// Translate to center the pie chart
ctx.translate(width / 2, height / 2);

// Draw the pie chart
pie(sampleData1).forEach((d, i) => {
    // Draw the slice
    ctx.beginPath();
    arc.context(ctx)(d);
    ctx.fillStyle = d3.schemeCategory10[i % 10];
    ctx.fill();

    // Draw the label
    ctx.fillStyle = "#000"; // Label color
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";

    const centroid = labelArc.centroid(d);
    ctx.fillText(d.data.category, centroid[0], centroid[1]);
});

// Display the canvas
await display(canvas);

In the code snippet above, we visualized the percentage distribution of your expenses in a simple pie chart. This is just one example of how you can use D3 to visualize your data in Jupyter Notebook.

Using Observable Plot for rapid iteration

To further enhance the data visualization capabilities in Jupyter Notebook, consider using Observable Plot. Compared to D3, it has a significantly lower learning curve — you don’t need to write custom functions to render visuals. You can use Plot and define the type of chart you want to start rendering.

Start by importing the necessary dependencies, initializing your document canvas, and defining the records you want to show:

import * as Plot from "npm:@observablehq/plot";
import { DOMParser, SVGElement } from "npm:linkedom";
const document = new DOMParser().parseFromString(
  `<!DOCTYPE html><html lang="en"></html>`,
  "text/html",
);

let records = df.tail(40).toRecords();

The @observablehq/plot library doesn’t rely on skia_canvas to render the charts. In the example above, we are using a regular HTML document.

Now, you will make a line chart for your net income. It will appear as though the net income has no significant trend, but rest assured, it’s expected — the data is randomized:

let convertedArray = records.map(item => {
    return {
        NetIncome: item.NetIncome,
        Date: new Date(item.Date)
    };
});

await display(
  Plot.plot({
    x: { type: "band" },
    y: { grid: true },
    marks: [
      Plot.line(convertedArray, {x: "Date", y: "NetIncome"}),
    ],
    document,
  }),
);

Judging by how the line chart looks, @observablehq/plot gives you a more refined template compared with D3, where you have to do things from scratch.

Now, let’s continue visualizing the expenses. Remember the pie chart? Let’s make a stacked bar chart showing the expenses over some time with a clear visual of what kind of expenses account for the most spend:

let sampleData2 = [];
for (let i = 0; i < records.length; i++) {
  const currentRecord = records[i];
  for (let x = 0; x < categories.length; x++) {
    const currentCategory = categories[x];
    sampleData2.push({
      date: new Date(currentRecord["Date"]),
      category: currentCategory,
      count: currentRecord[currentCategory],
    });
  }
}

await display(
  Plot.plot({
    x: { type: "band" },
    y: { grid: true },
    marks: [
      Plot.barY(sampleData2, { x: "date", y: "count", fill: "category" }),
      Plot.ruleY([0]),
    ],
    color: { legend: true },
    document,
  }),
);

In the code snippets above, the @observablehq/plot library creates two visualizations: a line chart for net income and a stacked bar chart for expenses over time. Both charts are created using the Plot.plot function.

Summary

You‘ve finished creating the financial dashboard using Jupyter Notebook and Deno!

You have effectively utilized D3 and Observable Plot to create advanced visualizations of your financial data in Jupyter Notebook using Deno. By incorporating D3, you could create a simple and clear visualization of your expenses in the form of a pie chart.

Additionally, you used Observable Plot to generate a line chart for net income and a stacked bar chart illustrating expenses over time. This library provides a more refined template with minimal effort, making it perfect for rapid iterations and prototyping.

Additional use cases and examples

In addition to our example above, where we created a financial dashboard, this section will cover some other case studies demonstrating how to use Deno with Jupyter Notebook for data analysis and dashboard design.

Use case #1: Statistical model dashboard

You can make statistical models to predict future trends or analyze data patterns using Jupyter Notebook and Deno. Jupyter Notebook is very popular in machine learning, mainly used in tandem with Python to create interactive notebooks for training models and experiments with different algorithms.

The only difference here is that Deno uses TypeScript and does not offer the same number of open source data science libraries as Python. While Deno benefits greatly from being cross-compatible with npm, it still isn’t as robust with respect to ML libraries.

However, you can still utilize libraries such as Polar and scikitjs in Deno to perform statistical modeling tasks, and its integration with Jupyter Notebook makes it a powerful tool for building a statistical model dashboard.

Use case #2: Data cleaning and transformation

Data cleaning and transformation are common tasks in data analysis, and the combination of Jupyter Notebook and Deno can streamline the process. Jupyter Notebooks provides an interactive environment where you can write and execute code for data cleaning and transformation using Deno.

Using the aforementioned libraries for processing data, along with Deno’s built-in modules such as fs, you can easily read, manipulate, and transform data in Jupyter Notebook using Deno.

Most of the code within this guide is used for data processing. Data engineers benefit from using Jupyter Notebook because it gives them a quick and easy environment to perform data cleaning and transformation, allowing them to iterate faster.

Conclusion, further reading, and resources

Jupyter Notebook is a platform that facilitates interactive, collaborative data visualization and analysis. It is possible to execute code directly within notebook cells, eliminating the requirement for a console, which accelerates task iteration.

Together with Deno, Jupyter Notebook can simplify data analysis activities like data transformation and cleansing. With this integration, data scientists and analysts now have access to Deno’s modern, secure JavaScript runtime and vast module ecosystem, allowing them to import existing npm packages.

To learn more about using Jupyter Notebook with Deno for data analysis and building dashboards, you can refer to the following resources:

Here are some notable packages for data analysis with Jupyter Notebooks and Deno:

Leveraging the potential of Deno in conjunction with Jupyter Notebook will undoubtedly enhance your data analysis practices and open up further opportunities for advanced visualization and modeling quickly and more efficiently.

Get set up with LogRocket's modern error tracking in minutes:

Visit https://logrocket.com/signup/ to get an app ID.
Install LogRocket via NPM or script tag. LogRocket.init() must be called client-side, not server-side.

NPM:

$ npm i --save logrocket 

// Code:

import LogRocket from 'logrocket'; 
LogRocket.init('app/id');

Script Tag:

Add to your HTML:

<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>

3.(Optional) Install plugins for deeper integrations with your stack:

Redux middleware
ngrx middleware
Vuex plugin

Get started now

Analog.js vs. Next.js vs. SolidStart: Comparing modern meta-frameworks

Matt Angelosanto — Wed, 17 Jan 2024 16:01:13 +0000

Written by Clara Ekekenta✏️

The meta-framework has been gaining lots of traction recently due to its ability to extend base frameworks, giving developers advanced and simplified tools to aid their development process.

In this tutorial, we'll dive into the three notable meta-frameworks that are all built on existing JavaScript frameworks: Analog.js for Angular, Next.js for React, and SolidStart for SolidJS. We'll look at each of these frameworks, highlighting their similarities and unique features in terms of usability, ease of use, and performance.

The modern meta-frameworks

Analog.js

Analog.js is a new framework built on top of the Angular framework that is known for its robustness in building enterprise-level applications. Analog.js extends the features of Angular.js, offering an enhanced development experience. It streamlines common Angular development tasks, integrates advanced build optimizations, and provides a more intuitive way of building Angular applications. This framework focuses on improving development speed and simplifying complex Angular concepts.

Next.js

Next.js is a popular React meta-framework known for its server-side rendering capabilities and quick build mechanism. It makes it easier for developers to build scalable and highly performant web apps by handling routing, page layout, and server-side rendering in React applications. Next.js also has features that improve the performance and speed of React applications, such as automatic code splitting and static site generation.

SolidStart

SolidStart is an advanced version of SolidJS. It improves SolidJS by providing a standardized way to build applications with a better application structure, improved server rendering functionalities, and a suite of development tools that make it easier to develop fast and reactive web apps. It is intended to make the most of SolidJS's features, providing an efficient and streamlined development process.

Analog.js vs. Next.js vs. SolidStart

Analog.js, Next.js, and SolidStart are all built upon existing JavaScript frameworks to provide additional features for improved developer experience and application performance. These meta-frameworks share common functionalities that make them powerful tools for modern web development.

All three meta-frameworks support server-side rendering (SSR) for better SEO and faster initial load times, as well as static site generation (SSG) for improved performance. Analog.js, Next.js, and SolidStart offer features like dynamic routing with data fetching capabilities, enabling rich and interactive user experiences. Each of these meta-frameworks also has API routes to allow the implementation of API endpoints, with code splitting capabilities aimed at optimizing load times by only sending the necessary code for each page or component.

To further understand the similarities and strengths of each meta-framework, let’s compare them in terms of improved usability, ease of use, and performance.

Usability

Frameworks that have good usability make complex tasks simpler and more intuitive. They also have accessible and easy-to-understand concepts, which is particularly important to new developers.

The usability of Next.js is enhanced through its file-system-based routing and automatic code splitting features. SolidStart improves its usability by providing a straightforward approach to reactive programming, which simplifies state management. Analog.js improves its usability by streamlining complex Angular.js tasks.

Ease of use

Ease of use is an important factor for rapid development and adoption. An easy-to-use framework reduces the time spent on boilerplate code and debugging and enables developers to start a new project quickly with minimal configuration, leaving more time for focusing on building the app's features.

Next.js addresses ease of use by offering a developer-friendly setup with minimal configuration required to start a new project. SolidStart is a minimalistic framework that is easier for new developers to use. Both Next.js and SolidStart promote their ease of use or adoption, but this is one of Analog.js's unique selling points due to the intuitive way it handles the complexities of Angular applications.

Performance

Performance is a framework’s most important feature, enabling developers to build applications that are user friendly and have improved SEO. Frameworks that offer efficient, server-side rendering enable webpages to load faster and provide an enhanced user experience.

Next.js is optimized for performance, offering automatic server-side rendering and static generation features. It uses a feature called Lazy to improve component load times. SolidStart offers a rendering mechanism, especially in updating the DOM, that aids in the development of performant applications. Analog.js is built on top of Angular.js; it offers performance improvements in areas like change detection and component rendering.

Let’s take a look at Analog.js, Next.js, and SolidStart in action by creating sample projects to demonstrate the uniqueness of each framework.

Building a basic project in Analog.js

The Analog.js framework aims for a guided and structured approach, making it easier for beginner developers to create a project. To get started, let’s run the following command to scaffold a new Analog.js application:

npm create analog@latest

This command prompts us to select our preferred configuration for the project without having to manually set it up. Our sample app is a blog project, so our selection will look like this:

✔ Project name: … analog-project
✔ Select a template: › Analog
✔ Select a variant: › blog
✔ Would you like to add Tailwind to your project? … yes

Scaffolding project in /Users/ekekentaodionyenfe/comparison/analog-project...
Initializing git repository:

Done. Now run:

  cd analog-project
  npm install
  npm run dev

We’ve successfully created a simple blog project! All we need to do now is change the directory into the project folder, install the required packages, and run the application with the following commands:

cd analog-project
npm install
npm run dev

Let’s look at the performance of our Analog.js project: According to Chrome DevTools, our Analog.js application took 3ms to load and 28ms to render the components.

Creating a basic project in Next.js

Now, let’s build a project in Next.js. To get started, we’ll run the command below to create a new project:

npx create-next-app@latest

Similar to the Analog.js framework, Next.js prompts us to select our preferred configurations for our project. After running the create-next-app command, our selection looks like this:

✔ What is your project named? … my-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/ekekentaodionyenfe/comparison/my-app.

Using npm.

Initializing project with template: app-tw

The Next.js framework leans toward flexibility and customization, enabling developers to build application architecture without being confined to a specific template. This is why we aren’t prompted to select a particular variant or template to work with.

Now, let’s change directory into the project folder and start the application:

cd my-app
npm run dev

Now, let’s use Chrome DevToolslook at the performance of our Next.js application: Our Next.js application took 1ms for initial load and 6ms to render the components.

Creating a basic project in SolidStart

SolidStart takes a guided approach similar to that of the Analog.js framework but gives developers access to more templates to choose from. To see the SolidStart framework in action, let’s build a simple project.

To get started, we’ll run the below command to create a new project:

npm init solid@latest

Here’s the preferred configurations for our project:

bare
hackernews
with-auth
with-mdx
with-tailwindcss
with-vitest

For this tutorial, our selection looks like this:

✔ Where do you want to create the app? … my-app-new
✔ Which template do you want to use? › notes
✔ Server Side Rendering? … yes
✔ Use TypeScript? … yes

Now let’s change directory into the project folder, install the required dependencies, and run the application:

cd my-app-new
npm install
npm run dev -- --open

Let’s look at the performance of our SolidStart app: According to Chrome DevTools, our SolidStart application took 0ms for initial load and 10ms to render the components.

Should you choose Analog.js, Next.js, or SolidStart?

Analog.js, Next.js, and SolidStart are all excellent options for easily building well-optimized applications.

If you're already comfortable using React, Next.js is a strong choice. It's widely used and well-supported, making it a good option for developers who want to build fast, SEO-friendly websites. It also provides features like server-side rendering, which helps pages load faster and improves their visibility on search engines. This meta-framework can be used to build both small and complex web applications.

SolidStart is an exciting option to consider if you're looking to explore new web technologies. It is built on SolidJS, which is known for its simplicity and efficiency.

If performance is a top priority for your application, SolidStart could be the right choice. However, as of this writing, SolidStart is still relatively new and in beta, so you could encounter bugs or limited resources.

If you are already using Angular, but are looking for an upgrade, Analog.js could be your best choice to streamline some of Angular's more complex tasks and simplify its use. A potential tradeoff is that Analog.js has a smaller user community and fewer resources compared to more established frameworks like Next.js and the emerging SolidStart.

Ultimately, your choice should align with the technologies you're comfortable with, the size and nature of your project, and your specific performance and usability needs. Next.js is a safe, well-trodden path ( especially for React developers), SolidStart offers a fresh approach with a focus on performance, and Analog.js might suit you if you're looking to enhance your Angular experience.

Conclusion

In this tutorial, we examined three meta-frameworks: Analog.js, Next.js and SolidStart. We compared their similarities, strengths, and weaknesses in terms of ease of use, performance, and usability. We also created a sample project using each meta-framework to demonstrate how they work and compare their performance.

To learn more about these frameworks, visit their official documentation pages: Analog.js docs, Next.js docs, and SolidStart docs.

I hope you’ve enjoyed this journey as much as I have. See you in the next one.

Are you adding new JS libraries to improve performance or build new features? What if they’re doing the opposite?

There’s no doubt that frontends are getting more complex. As you add new JavaScript libraries and other dependencies to your app, you’ll need more visibility to ensure your users don’t run into unknown issues.

LogRocket is a frontend application monitoring solution that lets you replay JavaScript errors as if they happened in your own browser so you can react to bugs more effectively.

LogRocket works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app’s performance, reporting metrics like client CPU load, client memory usage, and more.

Build confidently — start monitoring for free.

Angular signals vs. observables: How and when to use each

Matt Angelosanto — Tue, 16 Jan 2024 18:53:25 +0000

Written by Lewis Cianci✏️

The new signals feature introduced in Angular 16 is an exciting update to how we handle async operations. However, observables already exist in Angular — so why should we care about signals?

As developers, we kind of have a love/hate relationship with learning new things. It’s great when new updates, features, or software can help us solve problems and code better. On the other hand, with so much software development information already out there, learning yet another new thing can be overwhelming.

It’s critical to get straight to the point about why something matters so we can avoid missing out on the possible benefits. Let’s do that now by exploring why signals and observables each exist in Angular, along with how and when to use each.

Understanding the role of signals and observables in Angular

The first question we have to answer is, what issues do signals and observables set out to solve? And the answer is simple: asynchronous operations.

Sometimes, when we request data or carry out an operation, the result may change over time. When this happens, we can refer to the source of these events as the emitter. When the emitter updates the value, subscribers can receive the new value.

To make it easier for us to understand, let’s consider a practical example. Imagine that our application receives real-time data from a WebSocket. In this simple example, it simply receives an incrementing number every second.

Over time, the WebSocket could emit the following data:

No data (Connecting to WebSocket)
Data received (1)
Data received (2)
Data received (3)
Error (due to network disconnection or equivalent)

In all of the above cases, we need to tell our user what’s going on with the connection, what data has been received, and if any errors occurred along the way. This information allows the user to decide whether to try again or not.

For a long time, the only way to achieve this within Angular was to use an observable or something that implemented an observable. Usually, we could accomplish this with the “async pipe,” where an observable could be called like so and the bound variable within the template would update over time:

{{observableVariable | async}}

Now, with signals, using asynchronous data has changed. We should understand the differences between signals and observables, to make the best choice as to what to use within our application.

How Angular observables work

The Angular documentation describes observables as a technique developers can use for things like:

Event handling
Asynchronous programming
Handling multiple values emitted over time

Observables don’t come from within Angular itself; rather, they are supplied to Angular by RxJS. An observable can emit more than once over time, so what do you do if you want to combine multiple emitters? What if you want to consolidate results from more than one source?

All of this is possible within RxJS, but none of it is necessarily easy. Even the Angular team admits that "RxJS has a steep learning curve and sometimes bewildering behavior.”

Processing signals occurs through the pipe operator in RxJS. The idea is that you can put emitted values through the pipe and set up a chained list of operators to massage the values as required.

This is very powerful, but given the sheer number of operators available, it’s also easy to reach for the wrong operator. Another common pitfall is unnecessarily chaining together too many operators, which can make code hard to read.

Simply put, observables can be very powerful, but they can also be easy to get wrong. Also, if they’re not cleaned up properly, they can introduce other problems like memory leaks. They are used within both the app’s UI and services to process and manage asynchronous operations.

Observables emit values over time, but they can also emit errors, or emit that they have completed.

Long story short — observables are very powerful, and there’s nothing inherently wrong with them. However, given how many operators exist and how complex the operations can be, they can be easy to get wrong or to use incorrectly.

Where Angular signals enter the picture

Let’s think about a simple value in our code. Imagine we want to have a variable, and we want to set the variable value to 0. That’s as simple as the following:

let theValue = 0;

We can reference this variable as much or as little as want to. But within the context of reactive applications, there’s a small wrinkle. This value isn’t reactive — we don’t know when it has been set or updated.

Signals, introduced in Angular 16, set out to resolve this problem. They are a wrapper around a value that can notify interested consumers when the value changes.

Compared to observables, signals are much simpler to create and use, so they make sense for a wide range of asynchronous operations within Angular. However, they don’t have the same power and flexibility as observables. Considering that RxJS can have “sometimes bewildering behavior”, this isn’t necessarily a bad thing.

Signals are mainly used within the UI and can have their value changed entirely via set or have their value updated based on a previous value with update.

Creating a signal is as simple as the following:

intSignal = signal(0)

To change the value, you can rewrite the Signal like so:

intSignal.set(2)

Otherwise, if you need to update the signal based on the existing value, you can do so like this:

intSignal.update((value) => value + 1)

Because signals are reactive, our application’s view will update when they are updated, and other signals that depend on this signal will update as well. That’s where computed signals come into play.

Instead of using pipes to manage data, signals use computed signals to define signals that update based on the behavior of other signals:

intSignal = signal(0);
computedSignal = computed(() => intSignal() * 2);

Then, let’s say we wanted to reference intSignal and computedSignal from within our template. Whenever we updated intSignal, we would see that computedSignal changes in value as well.

Perhaps predictably, we can’t set the value of a computed signal directly, as it will only ever have the value that the dependent signals give to it.

Long story short — signals exist as a newer and more efficient way of making a UI responsive and reactive. Connecting multiple signals via computed is much easier than using an observable to do the same.

Should we use signals or observables — or both?

Whenever something new comes out, it can be tempting to abandon the old thing and run to the new thing. The reverse can also be true, where we never want to change what we’re doing because we’re used to how things used to operate.

So, in this case, what should we do? Well, the answer is to continue using observables within our services in Angular, but also consider using signals in component logic and templates.

To show the strengths of both observables and signals, let's make a simple app that reports on the temperatures within the rooms of a house. Normally, these temperatures would not update very frequently, but for this example, we’ll speed it up over a day.

Our app will look like this at the end: To make our demo app, we’ll combine observables, signals, and good old change detection. You can check out the source code for this app on GitHub.

The room temperature service

The first thing we need for our demo app is a room temperature detection service. Normally, this would be something that we’d get from a third-party service, like an API. But in our case, it’s okay if we just want to create a fake temperature service.

This service will be responsible for creating a BehaviorSubject that emits a single new temperature for a room over time. Just like a real temperature detection service, it’s not concerned with tracking historical temperatures or massaging the data.

Since this is in the service layer and not the UI, it would make sense to use an observable here:

export class RoomTemperatureService {
  public roomTemperatures$: BehaviorSubject<RoomTemperature> = new BehaviorSubject<RoomTemperature>({ name: '', temperature: 0 });

  constructor() {
    this.emitRandomRoomTemperature(); // Begin emitting
  }

  private emitRandomRoomTemperature(): void {
    setInterval(() => {
      // Emit a new temperature for a random room
      const roomNames = ['Living Room', 'Bedroom', 'Kitchen'];
      const randomRoomIndex = Math.floor(Math.random() * roomNames.length);
      const chosenRoom = roomNames[randomRoomIndex];
      const newTemperature = Math.random() * 25 + 18;
      this.roomTemperatures$.next({ name: chosenRoom, temperature: newTemperature });
    }, 1000); // Update random room temperature every second
  }
}

In the code above, we see how to create a BehaviorSubject, which is a type of observable. We can then call next to emit a new value on the BehaviorSubject.

Consumers of this service get the information they need — in our case, the room name and detected temperature. However, what if we wanted to aggregate the received data so we could show a historical temperature list?

Let’s see how we can do that in the individual TemperatureNode component.

The `TemperatureNode` component

First, let’s create a TemperatureNode that will display the current temperature of each room, historical temperatures, and an average. This component will use standard @Input components and the ngOnChanges hook to know when to update the component:

export class TemperatureNodeComponent implements OnChanges {
  @Input() temperatures: Array<number> | undefined;
  @Input() roomName: string | undefined;

  averageTemperature = 0;
  totalTemperatureCount = 0;

  ngOnChanges(changes: SimpleChanges): void {
    if (this.temperatures){
      this.averageTemperature = this.temperatures.reduce((sum, current) => sum + current, 0) / this.temperatures.length;
      this.totalTemperatureCount = this.temperatures.length;
    }
  }
}

We can also write up our HTML for this component:

<div style="display: flex; width: 100%; align-content: stretch; flex-direction: row; gap: 12px; border: 2px solid black; border-radius: 5px">
  <div style="width: 200px;">
    <h2>{{this.roomName}}</h2>
    <div>
      <h4>Statistics</h4>
      <p>Average: {{averageTemperature | number:'1.2-2'}}</p>
      <p>Total amount: {{totalTemperatureCount}}</p>
    </div>
  </div>
  <div style="display: flex; flex-direction: column; gap: 2px;">
    @for (temp of temperatures; track temp; let idx = $index){
      <span>
        @if (idx == 0){
          <h2>{{temp | number:"1.2-2"}}</h2>
        }
        @else if (idx < 6){
          {{temp | number:"1.2-2"}}
        }
        </span>
    }
  </div>
</div>

In the finished sample, this component will look like this: Now we need a component to render one of these components for each room that has a temperature result.

The `TemperatureView` component

The TemperatureView component should:

Subscribe to each new emitted object from the temperature service
Be responsible for aggregating the results in a way that makes sense
Give the user the option to start and stop the flow of messages, reset the results entirely, and set the temperatures to an entirely new value

Because our work affects the UI, it would be sensible to choose a signal for this.

But wait a minute — our service provides temperatures one at a time via an observable, and we want to use a signal within our UI. How do we connect our observable to the signal and perform some basic data massaging?

Simply put, we can subscribe to our observable as usual and then pipe the data through into our signal via the update method. Because we are subscribing to an observable here, we’re still responsible for subscribing and unsubscribing to the observable:

startSubscription(){
  // Begin the subscription to the service
  this.temperatureSubscription = this.tempService.roomTemperatures$.subscribe(newTemp => {
    // Update the existing Angular signal contents, in this case, an array.
    // Add new values to existing entries, or add a new entry for the given room
    // This acts as the accumulator
    this.historicalTemperatures.update(x => {
      if (newTemp.temperature){ // Only if there is a valid temperature reading
        let temperatures = x.find(x => x.room == newTemp.name); // Is there an existing entry for this room?
        if (temperatures){ // Add to existing collection of temperatures for room
          temperatures.temperatures = [newTemp.temperature, ...temperatures.temperatures];
        }
        else{
          // Create a new collection for this rooms temperatures
          x = [...x, {room: newTemp.name, temperatures: [newTemp.temperature]}]
        }
      }
      // Return the updated variable
      return x;
    })
  });
}

As we saw earlier, we can also update the signal with an entirely new value that isn’t based on the existing value via set. If we wanted to set the temperature data to a new value and disregard what was already in the signal, we could do this:

setStatic(){
  // First, end the subscription to the service
  this.endSubscription();
  // Set the signal data to a new value
  this.historicalTemperatures.set([
    {
      room: 'Loft',
      temperatures: [10,11,12,11,10.5]
    },
    {
      room: 'Guest room',
      temperatures: [13.5,14.5,12.5,12.8]
    },
    {
      room: 'Living room',
      temperatures: [15,16,15,14.3,12]
    }
  ])
}

When to use signals vs. observables

Now that we’ve explored how signals and observables can both be used in a project, let’s recap when it’s best to use one or the other.

When to use observables

In our example, we can see that using an observable requires us to manually subscribe to it, handle the output, and unsubscribe when we are done.

Subscribing to an observable is like listening to new events that filter down to our consumer. There can be new events, but there could also be an error, or an indication to say that the observable has finished.

We also manage the stream of events by piping events through a pipe. These pipes can indeed become extremely complex, but they can be very elegant in managing an asynchronous stream of data over time.

For this reason, you’ll usually see observables in services within your Angular application.

When to use signals

Signals, on the other hand, are used within the UI layer of your application. You can update a signal via the set method, or make a change to an existing value via update.

Since you’re setting or updating the signal each time, there isn’t really a built-in error state, like with an observable. However, you can define your own error state and update a signal accordingly.

Also, you can use computed signals to compose new signals based on existing signals. Changes will propagate through these computed signals when dependent signals are updated.

If your template is being updated reactively in your code, it would make sense to use a signal instead of an observable.

Do we really have to use signals?

Signals are a useful new Angular feature, but do we really have to use them? In short — no.

If you don’t use signals, you’re simply living the life of an Angular developer before Angular 16 landed. Many excellent applications were written and many reactive webpages were created without signals.

However, we have to acknowledge the simplicity and power of signals in making templates reactive, and how computed signals can be easily composed from other signals. Using signals to manage these kinds of requirements instead of creating your own subscription tree with your own observable is much simpler.

No matter what you choose, performance will be about the same in your application, so it ultimately comes down to your preferences and level of comfort.

Conclusion

Signals are an exciting new addition to Angular, and they act as a complement — not a replacement — to observables. By understanding where we should use each, we can write high-quality reactive applications that are more performant and easier to develop.

Feel free to grab the sample app that was used in this tutorial to see the source code or fork the project for your own needs. If you have any questions, you’re welcome to comment below.

Happy reactive coding!

Experience your Angular apps exactly how a user does

Debugging Angular applications can be difficult, especially when users experience issues that are difficult to reproduce. If you’re interested in monitoring and tracking Angular state and actions for all of your users in production, try LogRocket.

LogRocket is like a DVR for web and mobile apps, recording literally everything that happens on your site including network requests, JavaScript errors, and much more. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred.

The LogRocket NgRx plugin logs Angular state and actions to the LogRocket console, giving you context around what led to an error, and what state the application was in when an issue occurred.

Modernize how you debug your Angular apps — start monitoring for free.

Using CSS Houdini to extend styling and layout capabilities

Matt Angelosanto — Tue, 16 Jan 2024 15:55:13 +0000

Written by Emmanuel Odioko
✏️

CSS Houdini frees developers of the constraints associated with traditional CSS, enabling them to efficiently create unique designs and animations. CSS Houdini can extend CSS styling and even create new features that aren’t part of the standard CSS toolkit, all without the reduction in performance that’s associated with polyfills.

In this article, we’ll explore CSS Houdini's definition, functionality, and unique contributions to frontend development. We’ll also explore several use cases. It’s important to note that CSS Houdini is still in the experimental phase as of this writing, so it does not have full browser support.

Prerequisites

To follow along with this tutorial, you should have the following:

Basic understanding of HTML, CSS, and JavaScript
Familiarity with frontend development concepts (e.g., styling, layout, and animations) is helpful, but not required

What is CSS Houdini?

CSS Houdini is a set of APIs that expose parts of CSS engines. You can use these APIs to easily create extensions on top of CSS, building features that don’t currently exist and painting them to the browser.

Houdini extends CSS via JavaScript so that developers can create something new and implement it in the browser without waiting for a particular feature to be made available in CSS. Its APIs provide developers with direct entry into the CSS Object Model (CSSOM), empowering them to write code that the browser can interpret as CSS and enabling the creation of new CSS features.

You can think of Houdini as a low-level JavaScript API for the browser API engine, similar to how service workers are low-level APIs for JavaScript cache.

Some might argue that PostCSS transforms CSS and that there are also several JavaScript libraries that extend CSS. However, I would argue that those libraries just write JavaScript that mimics other things we already have with today’s CSS.

JavaScript enables developers to manipulate existing CSS styles through DOM interaction, but Houdini's APIs aim to allow developers to extend existing CSS capabilities and even create entirely new styles, unconstrained by limitations.

It’s important to reiterate that, at the time of writing, CSS Houdini’s APIs do not have full browser support, and some are still in the experimental phase.

Styling and layout before CSS Houdini

Before the introduction of CSS Houdini, web developers had to make do with using standard CSS to style and layout their webpages. JavaScript, although powerful for handling dynamic behavior, did not have direct access to the rendering engine or the ability to manipulate the CSS parsing process in a granular way.

Here's a very basic example of how developers handled dynamic styling with JavaScript prior to the introduction of CSS Houdini:

// Dynamic Styling with JavaScript
// Without CSS Houdini
// Change the color of an element using JavaScript

// <div id="myElement">Hello, World!</div>

const myElement = document.getElementById('myElement');
myElement.style.color = 'red';

With this approach, JavaScript is used to manipulate the inline style of an HTML element. However, this method is limited to basic properties, and extensive dynamic styling and manipulation of the rendering pipeline isn’t feasible.

Here’s a basic example where JavaScript is used to trigger a CSS-based animation:

// Animation without CSS Houdini
// Without CSS Houdini
// Create a simple animation using JavaScript and CSS

// <div id="animatedElement">Animate me!</div>

const animatedElement = document.getElementById('animatedElement');
function animateElement() {
  animatedElement.style.transition = 'all 2s';
  animatedElement.style.transform = 'translateX(200px)';
}
// Trigger the animation
animateElement();

While this approach provides a level of dynamism, developers are constrained by the predefined properties and the timing functions provided by CSS.

Why CSS Houdini?

CSS is continually evolving, but the pace of new feature introduction and adoption is often slow, leading to challenges in cross-browser compatibility. CSS features often take significant time to achieve widespread compatibility across different browsers. Some notable examples are: CSS flexbox, CSS grid, CSS Transitions and Animations, CSS Variables, and Custom Properties.

As web developers eagerly await widespread support for additional CSS features, they often rely on pieces of code, called polyfills, to fill the gaps in browser support. Polyfills enable the use of modern CSS properties and functionalities in browsers that do not natively support them, but they do come with their own set of minor performance drawbacks.

As an example, the flexbox property is widely supported in modern browsers, but older versions of Internet Explorer (IE 10 and below) have limited or no support. In such cases, a polyfill can be introduced to mimic the flexbox behavior in those browsers:

//Basic polyfill implementation

/* Flexbox Polyfill for IE 10 and below */
.flex-container {
  display: -ms-flexbox;
  -ms-flex-pack: justify;
}
.flex-item {
  -ms-flex: 1;
  margin: 10px;
}

CSS polyfills can be useful for extending the support of modern CSS features to older browsers, but they do have some drawbacks, including reduction in performance, increased page weight, maintenance challenges, browser-specific issues, and more. One notable drawback is the performance impact associated with re-rendering. This can limit the effectiveness of polyfills in certain scenarios.

The introduction of CSS Houdini was not a declaration of the failure of polyfills, but rather a strategic move toward a more versatile solution. The primary advantage of Houdini lies in its capacity to enhance styling processes, providing a more efficient and standardized approach. A secondary advantage is its ability to seamlessly create styles that transcend different browser environments.

How does browser rendering work?

To fully understand the need for CSS Houdini, we’ll need to consider a brief overview of the browser rendering process: Let’s take a closer look at the browser rendering process for HTML parsing, as well as CSS parsing and style computation.

HTML parsing

The browser begins by fetching the HTML document from the server. The HTML parser reads and parses the HTML code to create a DOM tree, like so:

<!-- HTML document fetched from the server -->
<!DOCTYPE html>
<html>
<head>
    <title>Rendering Pipeline</title>
    <!-- Associated CSS stylesheet -->
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div id="content">Hello, world!</div>
    <!-- JavaScript can manipulate the DOM after it's parsed -->
    <script src="script.js"></script>
</body>
</html>

CSS parsing and styling

Next, the browser fetches and parses the associated CSS stylesheets. The CSS parser generates a CSS Object Model (CSSOM). The DOM and CSSOM are combined to create the render tee, where each node represents a visible element along with its styles:

/* CSS stylesheets defining the appearance of elements */
#content {
    color: blue;
    font-size: 20px;
}

Layout (box model)

The render tree is used to create the box model, defining the position and size of each element on the page. The browser calculates the layout of elements based on their styles, dimensions, and relationships.

Painting

The browser starts painting the pixels on the screen according to the layout. Painting involves filling pixels with colors, images, and other visual properties.

Composite layers

Modern browsers often use hardware acceleration and create separate layers for certain elements (e.g., animations or transforms). These layers are composited to form the final rendered output, thereby enhancing performance.

Modern browsers often handle hardware acceleration automatically, but certain CSS properties trigger it. Here’s an example:

/* CSS triggering hardware acceleration with transforms */
#content {
    transform: translateZ(0);
}

Rendering and display

The final rendering and display are handled by the browser once all previous steps are completed.

How can developers interact with the rendering process?

Developers can manipulate and interact with some of the rendering pipeline at certain stages using JavaScript. Let’s see exactly where developers can intervene.

HTML parsing intervention

Developers can dynamically generate or modify HTML content using JavaScript, either before or after the initial HTML parsing by the browser:

document.body.innerHTML += '<div id="newElement">Dynamic Content</div>';

CSS styling intervention

JavaScript can dynamically add, remove, or modify CSS styles:

var element = document.getElementById('content');
element.style.color = 'red';

Layout (box model) intervention

Developers can dynamically change the layout by modifying CSS properties that affect the box model, such as width, height, margin, and padding:

var element = document.getElementById('content');
element.style.width = '300px';

Painting intervention

Developers have limited control over the painting process, but they can trigger repaints by changing certain styles:

var element = document.getElementById('content');
element.style.backgroundColor = 'yellow';

Rendering and display intervention

JavaScript can continue to manipulate the DOM even after initial rendering, responding to user interactions or events:

document.getElementById('content').addEventListener('click', function() {
    alert('Element Clicked!');
});

The seamless integration of JavaScript throughout the page load process showcases the immense potential of CSS Houdini which leverages JavaScript within the browser.

What are low-level APIs and worklets?

Low-level APIs provide a more direct interface to the browser's internal CSS engine, granting developers granular control over various CSS processes.

They enable developers to create custom properties, modify existing ones, define custom parsing and rendering rules, and even tap into the layout and paint cycles. These APIs form the foundation upon which higher-level features and tools are constructed, offering a deeper level of customization and control.

Worklets are similar to web workers in concept, letting developers run JavaScript code in the background, away from the main script. You can think of them as instructions for the browser's backstage crew, tailored for the styling and layout tasks that CSS Houdini focuses on. They essentially work with and enhance the browser's visual engine.

This background operation makes things happen at the same time, leading to a faster and more efficient performance. It's like having a specialized team working behind the scenes to improve the visual experience on a website.

Worklets operate independently, not connected to the main thread, and can be triggered at different stages in the rendering process. They're like modular components that seamlessly fit into the browser, making it easier for developers to implement advanced styling and layout features.

These modular components are effortlessly added and activated using a short line of JavaScript. This easy integration enhances the browser's capabilities, giving developers the power to improve web design and layout.

Let’s take a closer look at CSS Houdini’s low-level APIs and worklets.

Typed Object Model API

The Typed Object Model (Typed OM) API is part of CSS Houdini’s efforts to provide a low-level API for dealing with styles and layout in the browser. It allows developers to create and manipulate typed objects representing styles.

Before the Typed OM API, developers had to manipulate styles by dealing with strings. For example, to change a specific style property, you‘d need to parse the existing string, modify the value, and then set it back as a string:

// Manipulating styles as strings
const element = document.getElementById('myElement');
let currentWidth = element.style.width; // Get the current width as a string
currentWidth = parseInt(currentWidth); // Convert to a number
const newWidth = currentWidth + 50;
element.style.width = newWidth + 'px'; // Set the new width as a string

This process was not very efficient and was often prone to errors. Also, manipulating styles as strings didn't provide type safety. Developers had to be cautious about data types and ensure that the correct units and values were used.

The Typed OM API introduces a more structured and type-safe way to work with styles in JavaScript. There are a few steps to implement it, and the process may vary depending on your specific use case.

Before using the Typed OM API, perform feature detection to ensure your browser supports it. You can use JavaScript to check the availability of specific Typed OM features or objects:

if ('CSSStyleValue' in window) {
  // Typed OM is supported
} else {
  // Fallback or inform the user
}

Next, modify your stylesheets to use properties that are compatible with the Typed OM API. For example, instead of directly using strings for styles, consider using the Typed OM-compatible objects.

Now, identify areas in your JavaScript code where you can replace traditional string-based style manipulations with the Typed OM. Update your code to use the Typed OM API for style-related operations.

You can use the Typed OM methods to retrieve and update styles in a type-safe manner. For example, use get to retrieve a style value as a Typed OM object and set to update a style:

const styles = element.attributeStyleMap;
const currentWidth = styles.get('width');
const newWidth = currentWidth.add(50);
styles.set('width', newWidth);

Below is a simple example showcasing the use of the Typed OM API to change the height and width of an element:

...
    <title>Typed OM Example</title>
<body>
    <div id="container" class="container">
    </div>
    <script src="script.js"></script>
</body>
...

.container{
  height: 200px;
  width: 200px;
  background-color: brown;
}

Here’s the initial container:

// Select the container using JavaScript
var container = document.getElementById("container");

// Log the type of height and width styles
console.log("Type of container.style.height:", typeof container.style.height);
console.log("Type of container.style.width:", typeof container.style.width);

// Log the computed styles using Typed OM
console.log("Computed height:", container.computedStyleMap().get("height"));
console.log("Computed width:", container.computedStyleMap().get("width"));
console.log("Computed width value:", container.computedStyleMap().get("width").value);

// Set the height and width using Typed OM
container.attributeStyleMap.set("height", CSS.px(400));
container.attributeStyleMap.set("width", CSS.px(400));

// Log the updated computed styles
console.log("Updated height:", container.computedStyleMap().get("height"));
console.log("Updated width:", container.computedStyleMap().get("width"));

Here’s the container with updated height and width:

Properties and Values API

Houdini's Properties and Values API takes CSS variables to a higher level of flexibility and control. Unlike traditional variables, it empowers developers to define data types, set default values, manage inheritance, and even animate these variables.

This enhancement results in more dependable code, adaptable design patterns, dynamic animations, and improved testing capabilities. Features like the registerProperty() method and the @property rule enable developers to easily register and use the full potential of these customizable properties.

This API not only simplifies the code, it also opens up new possibilities for creating expressive and responsive designs. Here are some of its features:

Type checking: Enables you to define valid data types for your custom properties (e.g., integer) and also catch typos and unexpected values that can break styling
Default values: Allows you to specify a fallback value if a custom property isn't explicitly set; this feature improves consistency and avoids unexpected rendering bugs
Inheritance control: Permits you to choose whether your custom property inherits its value from its parent elements, like regular variables
Animation and translation support: Enables you to animate and transition custom properties alongside other CSS properties and create dynamic and interactive effects

Let’s take a look at how the Properties and Values API is implemented:

<html>
<head>
  <title>Properties and Values API Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <button id="change-color">Change Color</button>
  <div class="box">This box will change color.</div>
  <script src="script.js"></script>
</body>
</html>

@property --custom-color {
  syntax: '<color>';
  initial-value: blue;
  inherits: false;
}
.box {
  width: 100px;
  height: 100px;
  background-color: var(--custom-color);
  transition: background-color 0.5s ease-in-out; /* Enable smooth color transitions */
}

In the above code, the @property at-rule defines a custom property named --custom-color with a default value of blue and inheritance disabled. The .box class applies a background color using var(--custom-color), referencing the custom property. The transition property enables smooth color changes.

The following JavaScript code gets references to the button and the box element:

const button = document.getElementById('change-color');
const box = document.querySelector('.box');
button.addEventListener('click', () => {
  const newColor = 'red'; // Or any other valid color value
  box.style.setProperty('--custom-color', newColor);
});

Here, an event listener is attached to the button. Clicking the button triggers the JavaScript code to update the custom propery’s value; the --custom-color property is set to a new color (red) using style.setProperty(). The browser detects the change and applies the new color to the box element in a smooth transition.

We can take this example a step further by animating it, like so:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Colorful Box Animation</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Colorful Box Animation</h1>
    <div class="box" id="colorful-box">This box will change color.</div>
    <div class="buttons">
      <button id="change-color">Change Color</button>
      <button id="toggle-rainbow">Toggle Rainbow</button>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

@property --hue-offset {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}
body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}
.container {
  text-align: center;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}
h1 {
  color: #333;
}
.box {
  width: 300px;
  height: 300px;
  background-color: hsl(var(--hue-offset), 80%, 50%);
  border-radius: 8px;
  margin: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  transition: background-color 0.3s ease-in-out;
  animation: rainbow 3s infinite ease-in-out;
}
@keyframes rainbow {
  0% { --hue-offset: 0; }
  100% { --hue-offset: 360; }
}
.active {
  animation: none;
}
.buttons button {
  background-color: #4caf50;
  color: #fff;
  padding: 10px 20px;
  font-size: 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin: 0 10px;
  transition: background-color 0.3s ease-in-out;
}
.buttons button:hover {
  background-color: #45a049;
}

const changeColorButton = document.getElementById('change-color');
const toggleRainbowButton = document.getElementById('toggle-rainbow');
const colorfulBox = document.getElementById('colorful-box');
changeColorButton.addEventListener('click', () => {
  const newColor = 'indigo';
  colorfulBox.style.setProperty('--custom-color', newColor);
});
toggleRainbowButton.addEventListener('click', () => {
  colorfulBox.classList.toggle('active');
});

This code sets up functionality for a simple webpage with three elements: a button to change the color of a box, a button to toggle a "rainbow" effect on the box, and the box itself.

When the changeColorButton is clicked, an event listener changes the custom CSS property '--custom-color of the colorfulBox to indigo, effectively changing the background color of the box.

The toggleRainbowButton is linked to another event listener, which toggles the active class on the colorfulBox when the button is clicked. This class contains CSS rules to create a rainbow effect on the box, giving the user the ability to switch the visual appearance of the box between a static color and a dynamic, rainbow-like display.

Here‘s the box, animated to dynamically change colors:

Font Metrics API

The Font Metrics API is a proposed interface that exposes font metrics, offering access to typographic layout results. It is intended to provide detailed information about font and other relevant parameters, helping developers achieve precise text layout in web applications.

As of this writing, this API lacks browser implementations and comprehensive documentation and, due to its proposed status, is not currently supported in browsers.

Painting API

The CSS Houdini Painting API enables developers to define how an element is painted on the screen. It provides a way to create custom graphics, background images, and visual effects that go beyond the capabilities of traditional CSS.

The primary purpose of the Painting API is to give developers more control over the rendering process of elements. With traditional CSS, developers are limited to a predefined set of properties for styling.

The Painting API breaks through these limitations by enabling the creation of custom paint worklets, which are JavaScript modules defining how an element should be painted. CSS Houdini's paint worklet is automatically enabled in Chrome 65+, so you can easily add custom images without relying on external files or predefined functions.

To use the Painting API, you’ll need to follow a specific workflow:

Define a paint worklet: A paint worklet is a JavaScript module that defines the custom painting logic. This module should implement a paint method, which receives a CanvasRenderingContext2D context and other parameters
Register the paint worklet: Use CSS.paintWorklet.addModule to register the paint worklet with the browser. This is an asynchronous operation, so you should wait for the promise to resolve before applying the custom paint logic
Use CSS properties: Define CSS custom properties that can be dynamically updated to influence the custom painting logic
Apply the paint worklet: Apply the custom paint worklet to specific elements using CSS properties

Let's take a look at a simple example using the Painting API to draw a gradient background dynamically. We'll create a custom paint worklet that takes two colors as input and draws a linear gradient:

&<!DOCTYPE html>
 HTML <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Painting API Example</title>
</head>
<body>
  <div class="custom-element"></div>
  <script src="script.js"></script>
</body>
</html>

CSS (styles.css):
body {
    width: 100%;
    height: 100%;
    background-image: paint(gradient);
  }

JavaScript (script.js)
CSS.paintWorklet.addModule('paint-worklet.js').then(() => {
    console.log('Paint worklet module loaded.');
  });

JavaScript (paint-worklet.js)
registerPaint('gradient', class {
    paint(ctx, size) {
      const gradient = ctx.createLinearGradient(0, 0, size.width, size.height);
      gradient.addColorStop(0, 'red');
      gradient.addColorStop(1, 'blue');

      ctx.fillStyle = gradient;
      ctx.fillRect(0, 0, size.width, size.height);
    }
  });

Here’s the resulting gradient: Now, let’s look at a different example using a paint worklet to create an animation:

<head>
  <link rel="stylesheet" href="./styles.css" />
</head>
<body>
  <div id="example" class="background">
    Paint worklet, Logrocket's Example!
  </div>
  <script>
    if (!CSS.paintWorklet) {
      document.body.innerHTML("PaintWorklet not supported by this browser");
    }
    async function init() {
      await CSS.paintWorklet.addModule("./paint-worklet.js");
      const example = document.querySelector("#example");
      let start = performance.now();
      let x, y;
      document.querySelector("#example").addEventListener("click", evt => {
        example.classList.add("animating");
        [x, y] = [evt.clientX, evt.clientY];
        start = performance.now();
        requestAnimationFrame(function raf(now) {
          const count = Math.floor(now - start);
          example.style.cssText = `--animation-tick: ${count};`;
          if (count > 4000) {
            example.classList.remove("animating");
            example.style.cssText = `--animation-tick: 0; background-color: red;`; // Change background color here
            return;
          }
          requestAnimationFrame(raf);
        });
      });
    }
    init();
  </script>
</body>
</html>

.background {
  width: 100vw;
  height: 100vh;
  font-size: 3rem;
  background-color: rgb(72, 79, 84);
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-family: Arial, Helvetica, sans-serif;
  color: rgb(214, 219, 224);
  text-align: center;
  cursor: pointer;
  /* Required for animation by the worklet */
  --animation-tick: 1;
}
.background.animating {
  background-image: paint(custom-animation);
}
body,
html {
  padding: 0;
  margin: 0;
}

// paint-worklet.js
registerPaint('custom-animation', class {
  static get inputProperties() {
    return ['--animation-tick'];
  }
  paint(ctx, size, properties) {
    const tick = parseInt(properties.get('--animation-tick').toString()) || 0;
    const centerX = size.width / 2;
    const centerY = size.height / 2;
    ctx.clearRect(0, 0, size.width, size.height);
    for (let i = 0; i < 10; i++) {
      const radius = i * 10 + tick / 10;
      const opacity = 1 - i / 10;
      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
      ctx.fillStyle = `rgba(255, 255, 255, ${opacity})`;
      ctx.fill();
    }
  }
});

Here’s the resulting animation: When the document is loaded, the code checks if the browser supports the Painting API. If it’s supported, it initializes the custom animation by loading the paint worklet module. When the #example element is clicked, it triggers an animation effect using the custom paint worklet. The custom paint worklet creates a dynamic animation with concentric circles based on the --animation-tick value.

Animation Worklet API

The Animation Worklet API is part of the CSS Houdini initiative and provides a way to create custom animations that run in a dedicated worklet thread. Offloading animation calculations to a separate thread can help improve performance and avoid jank or stuttering in complex animations.

You’ll need to first register an animation worklet using the registerAnimator function. This associates a custom animation class with a name that can be used in CSS:

// animation-worklet.js
registerAnimator('customAnimation', class {
  animate(currentTime, effect) {
    // Custom animation logic
    // Update the state of the animated element based on the currentTime
  }
});

Once the animation worklet is registered, it can be referenced in CSS using the animation property:

CSS
.element {
  animation: customAnimation 3s linear infinite;
}

In this example, the animation worklet was registered with the name customAnimation. Unfortunately, there is currently little or no support for this API:

<script>
    // Check if animationWorklet is supported
    if (CSS.animationWorklet) {
      // Animation Worklet is supported
      console.log("AnimationWorklet is supported in this browser");
    } else {
      // Animation Worklet is not supported
      document.body.innerHTML = "AnimationWorklet not supported by this browser";
    }
  </script>

Limitations of CSS Houdini

At the time of writing, there are some common limitations associated with CSS Houdini:

Browser support: Some browsers, such as Chrome and Firefox, have implemented certain aspects of CSS Houdini, but others lag behind
Incomplete specification: As CSS Houdini is still evolving, some parts of the specification are not finalized; certain features may change or be subject to updates in future releases
Security concerns: Extending and manipulating the rendering process raises potential security concerns. Browsers must carefully manage CSS Houdini’s APIs to prevent malicious use or unintended side effects; this may be why browser adoption is moving slowly
Learning curve: Working with CSS Houdini requires a solid understanding of web technologies, CSS, and JavaScript. The learning curve can be a bit much for developers who are new to these concepts
Limited documentation: At the time of writing, the documentation for CSS Houdini is not as extensive or well-established as that of other web technologies. Developers looking for help may have difficulty finding adequate resources

Conclusion

CSS Houdini has emerged as a powerful toolset that revolutionizes the way developers approach styling and layout on the web. CSS Houdini’s APIs empower developers to extend the capabilities of the browser, providing a level of customization and creativity previously unseen in the history of traditional CSS.

The magic the CSS Houdini aims to perform is reminiscent of the famous illusionist. Its creativity and flexibility will help developers to break free from the constraints of predefined styles and animations, fostering innovation and unique design solutions. Keep coding!

Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.

LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web and mobile apps — Start monitoring for free.

Leveraging TypeScript for domain-driven design

Matt Angelosanto — Thu, 11 Jan 2024 17:33:23 +0000

Domain-driven design (DDD) is a software development approach that aims to simplify the creation of applications that involve complex business logic. In this article, we’ll explore how to leverage TypeScript for DDD. TypeScript’s sophisticated type system enables fine-grained domain modeling and is highly adaptable, lending itself to complex app development.

We’ll dive into the main principles and guidelines of domain-driven design, discuss how TypeScript can assist with DDD, and investigate if DDD can benefit frontend programming. We’ll also take a look at a domain-driven design example written in TypeScript.

What is domain-driven design?

In software engineering, a domain is the specific area of knowledge used by the computer program. In other words, the domain of software is the subject area where the software applies.

For example, if we develop an infotainment application for a car model, the domain will be automotive. Different domains often bring different definitions for the same concepts. For instance, the word “engine” in the automotive domain might convey a different meaning in another domain.

When we model our software based on the specific domain we’re in, we talk about domain-driven design. With this approach, the terms used in our source code, such as class names, method names, and so forth, should match concepts in the business domain. Going back to the automotive infotainment system, we might have classes called Radio, Engine, Wheel, MusicTrack, and so on.

Generally speaking, to structure code like this, programmers must interact with domain experts, to understand the context their software will be working within.

Principles of domain-driven design

The main aim of domain-driven design is to simplify the creation of complex applications by combining several, smaller, pieces of software into a business model.

Here are the main principles of DDD:

The primary focus is on the core domain and domain logic. This means we have to identify what the core domain or main area of knowledge, is, both in terms of information and behavior
The software design is based on a model of the domain. Once we identify the core domain and model it in our software, the rest of the design should follow
Technical and domain experts must collaborate to iteratively refine a conceptual model of the domain. The input of the domain experts helps the programmers understand how to model the core domain

The main building block for business models are entities, or objects that have an important meaning in the domain of interest. Several other object types work on entities. For instance, factories are components that are meant to create a single entity or a group of them, hiding the initialization details from the users.

Similarly, repositories deal with persisting entities somewhere, for example on a database. Lastly, services model specific operations in a business logic.

In the automotive domain, for instance, we may have a MusicTrack entity modeling a music track stored somewhere in our car infotainment system. A MusicTrackRepository class could be responsible for storing new music tracks, retrieving information on existing tracks, and deleting them. Similarly, we might have a MusicService to play selected tracks.

Pros and cons of domain-driven design

The main benefit of domain-driven design is that the main concepts, or entities, are defined at the very beginning of the project. This leads to easy communication because everything has a fixed meaning and there are no ambiguities.

Furthermore, modeling entities, services, factories, and repositories with objects, while following the principles of object-oriented design, results in a codebase that’s easier to maintain in the long run. Typically, each component has a well-defined scope and responsibility, enhancing the encapsulation and modularity of the software.

However, DDD requires very strong domain-related knowledge. It lends itself to projects with very complex business logic, like our infotainment system.

Projects with very complex technical requirements (e.g., performance) or with a relatively simple business logic (e.g., an embedded system for processing only a few signals) are generally less suitable for DDD.

How can domain-driven design benefit from TypeScript?

Domain-driven design is suitable for problems with complex business logic. TypeScript’s powerful type system enables very fine-grained domain modeling. Several TypeScript features are useful in this regard, like record types, union and intersection types, tuples, literal types, and generics.

By leveraging these features when needed, we can write type-safe, readable, and maintainable codebases. A clean and well-defined domain model also offers the benefit of being a useful documentation tool.

One of TypeScript’s primary strengths is that its sophisticated type system lets us pick features as needed, employing and adapting the language to several software design frameworks.

Domain-driven design and frontend

Domain-driven design offers a nice way to design our business model. With DDD, the complexity of the backend grows along with the business requirements, keeping the model and the requirements aligned.

Whether or not this is also true for frontend codebases depends on several factors. Many frontend codebases deal more with technical complexity, like choosing the right technology stack, rather than with the complexity of the business domain.

It’s often preferable to centralize the domain model in the backend, possibly creating subdomains (i.e., projections of the main domain model) dedicated to the frontend. This way, the frontend won’t contain any reference to the business logic.

Some frontend projects may not have a backend, in which case, domain-driven design can be a good choice. Furthermore, it may be beneficial to also leverage micro-frontends, which are quite similar to microservices and enable us to break down a complex frontend into smaller, simpler parts.

When a micro-frontend does not have a backend behind it, leveraging DDD can help further simplify the domain complexity of the application.

An example of domain-driven design

To better understand how TypeScript can be used for data-driven design, let’s take a look at a simple application that is used to manage sports competition records.

The entity

Entity objects are the main components of the domain model. Here’s an example of an entity from our TypeScript application, recording the best times of the competitors:

class Competition {
    readonly id: string
    readonly maleRecordInSeconds: number
    readonly femaleRecordInSeconds: number

    constructor(mr: number, fr: number) {
                this.id = ""
                this.maleRecordInSeconds = mr
                this.femaleRecordInSeconds = fr
    }
}

The repository

We can use repository components to retrieve entities, or aggregates of entities, from a means of storage, such as a database. The goal of this type of component is to hide the complexity of the underlying storage layer. Ideally, they should be declared as interfaces, so that we can easily swap one concrete implementation for another:

interface CompetitionRepository {
    getAll(): Competition[]
    addOne(c: Competition): boolean
    // more CRUD-based functions here
}

class MySQLCompetitionRepository implements CompetitionRepository {
    getAll(): Competition[] {
        // ...
    }

    addOne(c: Competition): boolean {
        // ...
    }
}

The service

We can use service classes to model operations that do not belong to any other objects. For example, they can be the entry point to model and implement the use cases of our application. In this case, their implementations make use of different repositories to fetch the entities and possibly modify them:

class CompetitionService {
    function setNewFemaleRecordForCompetition(compId: string, fr: number): Competition {
                // 1\. get competition from DB using MySQLCompetitionRepository
                // 2\. set new record
                // 3\. store new object in the DB
                // 4\. return new object
    }
}

Layers

When organizing the TypeScript code, we can divide it into different layers. Here are the most widely used layers:

Domain: Contains our business model, as well as the definitions of the repositories (not the current implementations!)
Infrastructure: Contains the implementation of the repository classes, as well as any other component that depends on the actual application context (e.g., message brokers)
Application: Defines the services and models the use cases of the application
Presentation: User interface-related logic, if any

Conclusion

In this article, we explored the main principles, terminology, and concepts associated with modeling software according to domain-driven design. We discussed cases where DDD is most beneficial, and when it’s more advantageous to look for another modeling pattern.

We also mentioned some lifesaving TypeScript features that turn out to be very useful in modeling complex business domains and explored the idea of applying domain-driven design to frontend and micro-frontend projects.

Even though DDD is more backend-oriented, we can apply its principles and ideas to the frontend world as well. Lastly, we reviewed a simple, yet practical, example of DDD in TypeScript.

Domain-driven design is just a set of guidelines to model our business domain and regulate the way we develop an application. Of course, no design pattern will ever apply to all domains, scenarios, and application types. In fact, each pattern is just another tool on our belt. Modern software design is an iterative process and we, as engineers and developers, can select one pattern over the other.

LogRocket: Full visibility into your web and mobile apps

Try it for free.

Using EvaDB to build AI-enhanced apps

Matt Angelosanto — Wed, 10 Jan 2024 19:46:10 +0000

Written by Rosario De Chiara
✏️

EvaDB is a comprehensive, open source framework that developers can use to add AI-powered regression, classification, image recognition, and question answering to their applications.

EvaDB queries can be executed over data stored in existing SQL and vector database systems. The data can be manipulated by using pre-trained AI models from Hugging Face, OpenAI, YOLO, PyTorch, and other AI engines.

In this article, we’ll demonstrate how to include EvaDB in a simple project to provide AI-powered sentiment analysis. Since we’re focusing on how to use the toolkit, we’ll steer away from too much complexity in this guide. However, EvaDB may also be used with OpenAI, PyTorch, or other tools that require API keys or GPU.

AI sentiment analysis demo

To easily follow along with the examples in this article, refer to this GitHub repo. For our demo, we’ll perform a simple natural language processing (NLP) task on some of strings (e.g., tweets, posts, or forum comments) in a table:

Getting started with EvaDB

EvaDB plugs AI into traditional SQL databases, so as a first step, we’ll need to install a database. For this article, we’ll use SQLite because it's fast enough for our tests and does not require a proper database server running somewhere. You may choose a different database, if you prefer.

Setting up the project

To start, install EvaDB:

> pip install --upgrade evadb

TextBlob is a Python toolkit for text processing. It offers some common NLP functionalities such as part-of-speech tagging and noun phrase extraction. We’ll use TextBlob in our project to perform some quick sentiment analysis on tweets.

Once we install TextBlob, we’ll have everything we need to start experimenting:

> pip install --upgrade textblob

Creating the sentiment analysis functions

EvaDB offers a sophisticated, declarative language-extending SQL, designed for crafting AI queries. This language enables software developers to integrate AI-enhanced capabilities into their database applications.

The following code, from the repo’s analyze_twit.py file, is simple but contains all the concepts on which EvaDB is based:

import evadb

cursor = evadb.connect().cursor()

cursor.query("""
    CREATE FUNCTION IF NOT EXISTS SentimentAnalysis
        IMPL 'sentiment_analysis.py';
""").df()

cursor.query("""
    CREATE TABLE IF NOT EXISTS twits (
        id INTEGER UNIQUE,
        twit TEXT(140));
""").df()

cursor.query("LOAD CSV 'tweets.csv' INTO twits;").df()

response = cursor.query("""
    SELECT twit, SentimentAnalysis(twit) FROM twits    
""").df()

print(response)

This code is a sequence of SQL statements executed by using the cursor object of EvaDB. The first statement defines a new function, SentimentAnalysis, that will execute a Python script. We’ll talk about this more in just a bit. It’s possible to specify more details about the function (e.g., the types of inputs and outputs), but this is the most basic example and it is good enough for our purposes.

The second statement creates a table to hold the strings that we’ll analyze. We load them from the tweets.csv file right into the table.

The last statement performs the analysis by calling the SentimentAnalysis function on each row of the table. Just appreciate how easily it integrates into the standard SQL:

import ...

class SentimentAnalysis(AbstractFunction):
    @property
    def name(self) -> str:
        return "SentimentAnalysis"

    @setup(cacheable=True, function_type="object_detection", batchable=True)
    def setup(self):
        print("Setup")

    @forward(
        input_signatures=[
            PandasDataframe(
                columns=["twit"],
                column_types=[NdArrayType.STR],
                column_shapes=[(1,)],
            )
        ],
        output_signatures=[
            PandasDataframe(
                columns=["label"],
                column_types=[NdArrayType.STR],
                column_shapes=[(1,)],
            )
        ],
    )
    def forward(self, frames):
        tb = [TextBlob(x).sentiment.polarity for x in frames['twit']]
        df = pd.DataFrame(data=tb, columns=['label'])
        return df

The function above is pretty simple (just two methods and a property), but it contains everything we need to see how EvaDB handles the interaction between the data from the traditional SQL engine and any additional engine you may wish to use.

Analyzing the tweets

To keep things simple, we’ll use the sentiment analysis provided by TextBlob; we won’t need an API key or external dependencies. EvaDB uses Python Decorators to add information to any specific methods that we want to implement.

The abstract method setup will create the running environment and can be used to initialize the parameters for executing the function. It must be implemented in our function. The following parameters must be set in the decorator:

cacheable:bool: When this parameter is True, the cache should be enabled and will be automatically invalidated when the function changes. When this parameter is False, the cache should not be enabled. This parameter is used to instruct EvaDB to cache the results of the function’s call. This will accelerate the execution of the function with the same parameters. If a function with the same set of parameters (e.g., image, string, or a generic chunk of data) could behave differently because of the non-determinism of the model, then the cacheable parameter should be False
function_type:str: This function is for object detection
batchable:bool: If this parameter is True, batching will be enabled; otherwise, the batching is disabled

Any additional arguments needed to create the function can be passed as arguments to the setup function to perform some specific initialization for our environment. Similarly, the new function must implement the forward abstract method. This function is responsible for receiving chunks of data (e.g., frames, strings, prompts) and executing the function logic.

This is where our deep learning model will execute on the provided data and where the logic for transforming the input data will run. Use of the forward decorator is optional.

Ensure that the following arguments are passed:

input_signatures: List[IOArgument]: Specifies the data types of the inputs expected by the forward function. If no constraints are provided, no validation is performed on the inputs
output_signatures: List[IOArgument]: Specifies the data types of the outputs expected from the forward function. If no constraints are given, no validation is carried out on the outputs

The column names in the dataframe must correspond with the names specified in the decorators. At the time of writing, the following input and output arguments are available: NumpyArray, PyTorchTensor, and PandasDataframe.

In the code above, we specify the PandasDataframe package in the decorators for both the input and output data. The input consists of one column (the column_shapes parameter) named 'twit' (the column parameter) containing a string (the column_type parameter). The output has a similar shape and type, but the column is named 'label'.

Our goal is to conduct sentiment analysis on a bunch of tweets. Our function will consume and produce an evaluation of each string’s sentiment.

The logic of the forward function is fairly simple. The function will be invoked on every row of the twits table, returning the following result:

response = cursor.query("""
    SELECT twit, SentimentAnalysis(twit) FROM twits    
""").df()

On every invocation, the forward function will receive the frames parameter containing the PandasDataframe input that, in our case, will be a simple string. At this point, we just have to initialize TextBlob with each string contained in the frames parameter:

 tb = [TextBlob(x).sentiment.polarity for x in frames['twit']]

The function is marked as batchable, meaning we may expect more than one row in the input dataframe. Therefore, the TextBlob sentiment analysis function will be called on each row in the dataframe.

The successive line of the forward function will just manipulate the tb array with the sentiment analysis result which will be packaged and returned to us in a dataframe.

Conclusion

EvaDB has the potential to convey the power of a wide range of so-called AI engines to the most traditional approach to manipulating data: SQL.

Adding functions to SQL isn’t new — the glorious store procedures have been available for decades. However, EvaDB is tailored to the specific task of accommodating a number of AI engines right in the code, saving us from handling interfaces and API keys and translating input and outputs between the engine and the SQL code. This approach is new and contains some good ideas – just consider that IBM is starting to provide similar functionalities in DB2, a mammoth enterprise-grade RDBMS.

Another benefit of EvaDB is that it allows the use of standard types for the inputs and outputs of our function. This assures expansion in the most general case of using libraries and engines not explicitly foreseen by EvaDB, like we did with TextBlob.

A similar approach is followed by Dask, a library that allows developers to execute parallel Python code within SQL statements. In some respects, Dask can be thought of as an EvaDB competitor, although EvaDB is more focused on the task of using AI Engine in SQL.

I hope you enjoyed this article and will experiment with including EvaDB in your projects.

Get set up with LogRocket's modern error tracking in minutes:

Visit https://logrocket.com/signup/ to get an app ID.
Install LogRocket via NPM or script tag. LogRocket.init() must be called client-side, not server-side.

NPM:

$ npm i --save logrocket 

// Code:

import LogRocket from 'logrocket'; 
LogRocket.init('app/id');

Script Tag:

Add to your HTML:

<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>

3.(Optional) Install plugins for deeper integrations with your stack:

Redux middleware
ngrx middleware
Vuex plugin

Get started now

DEV Community: Matt Angelosanto

Using semantic-release to automate releases and changelogs

An introduction to semantic-release

How to work with the companion project

Configuring a semantic-release workflow

Tweaking the semantic-release plugins

Testing the workflow with a dry run

semantic-release in action

First release

Accessing the published package

Creating more releases

Working with the @next distribution tag

Handling breaking changes

Working with merge requests

Conclusion

200’s only Monitor failed and slow network requests in production

D3.js adoption guide: Overview, examples, and alternatives

Background and history of D3.js

Why use D3.js?

Further reading:

How D3.js works

Further reading:

Key D3.js features to know

Visualization tools

Further reading:

Selecting elements

DOM manipulation

Data joining

Use cases for D3.js

Styling and animating D3.js

Deploying your D3.js project

Other factors to weigh when considering D3.js

D3.js vs. similar libraries

Further reading:

Conclusion

Get set up with LogRocket's modern error tracking in minutes:

Exploring Effect, a meta-state RxJS-like framework

What is Effect?

Why use Effect?

Features of Effect

Pros and cons of using Effect

How does Effect compare to RxJS?

Conclusion

LogRocket: Full visibility into your web and mobile apps

Exploring Redux Toolkit 2.0 and the Redux second generation

Redux Toolkit 2.0 overview and installation

Modernization

Better workflow

Dependency changes

Installing Redux Toolkit

Moving to Redux Toolkit 2.0 and Redux core 5.0

Redux ToolKit changes in 2.0

Minor TypeScript changes

Callback syntax in createSlice is now required

Changes to configureStore

Changes to customizing reactHooksModule

New Thunk support in createSlice.reducers

Making selectors part of your slice

Lazy loading and code split slices

Dynamically add middleware

Reselect 5.0: Changes and new features

Changes to RTK Query 2.0

Not much changed with React Redux 9.0

Conclusion

Get set up with LogRocket's modern error tracking in minutes:

Exploring Next.js no-code platforms for rapid development

Benefits of no-code platforms for frontend development

Plasmic

Plasmic integration with Next.js

Advantages

Disadvantages

Retool

Retool integration with Next.js

Advantages

Disadvantages

Stackbit

Integrating Stackbit with Next.js

Advantages

Disadvantages

Notion

Working with the `@next` distribution tag

Callback syntax in `createSlice` is now required

Changes to `configureStore`

Changes to customizing `reactHooksModule`

New Thunk support in `createSlice.reducers`

The `TemperatureNode` component

The `TemperatureView` component