Forem: Julio Xavier

Make your search queries faster with bloom filters

Julio Xavier — Wed, 14 Dec 2022 21:28:50 +0000

Let's say you're building a feature to search for available usernames. You want to make sure that the username is not already taken.

GET /username?username=paul

You could check the database to see if the username is already taken, but that could be slow. Instead, you can use a bloom filter to check if the username is already taken without checking the database.

What is a bloom filter?

A bloom filter is a probabilistic data structure that can be used to test if an element is a member of a set. It is a space-efficient probabilistic data structure, that is, it uses space proportional to the number of elements inserted in the data structure, but it is not guaranteed to be 100% accurate.

The main advantage is that it is very fast. If the element is not in the set, then the bloom filter will always return false. If the element is in the set, then the bloom filter might return true, so you need to check the database to make sure. That reduces the number of database queries.

How does it work?

A bloom filter is a bit array of length n, where the value of each bit is initially 0. As new elements are added, they are hashed multiple times and the corresponding bits are set to 1.

When you want to check if an element is in the filter, you hash the element and check if the corresponding bits are set to 1. If they are, then the element is probably in the filter. If they are not, then the element is definitely not in the filter.

i.e. if you want to check if the username paul is in the filter, you would hash paul and check if the corresponding bits are set to 1. If they are, then the username is probably in the filter. If they are not, then the username is definitely not in the filter.

How to create a bloom filter

There are some packages that you can use to create a bloom filter. For example, bloom-filters is a JavaScript implementation of bloom filters.

Make your React components more flexible using polymorphism

Julio Xavier — Mon, 24 Oct 2022 15:03:00 +0000

When we're working with React, it's natural to break the UI into a component hierarchy. So you need to reuse an element across your app, you make it a component.

As requirements evolve and new UIs are created, you may need a piece of UI that is almost the same that you created before, but in a grid layout. If you decide to handle that inside the component, things can become quite tricky. Let's look into an approach to solve that problem by using Polymorphic Components (a.k.a. the "as" prop).

Take for example an "Input" component that accepts a label prop and renders that label above the text input.

// the input code
export const Input = ({ id, label }) => {
  return (
    <div>
      {label && <label htmlFor={id}>{label}</label>}

      <div>
        <input id={id} type="text" />
      </div>
    </div>
  );
};

// using it in some form
export const Form = ({ id, label }) => {
  return (
    <div>
      <Input id="input-1" label="My Label" />
    </div>
  );
};

Cool, it's done. Now you can add your custom styles and reuse it everywhere!

A few weeks later, you're building a new form, and now there is a grid of labels and inputs, the labels need to be horizontally aligned with the text inputs and each text input needs to be aligned vertically with the other inputs:

How do you handle that? Add a boolean condition? Create a new component? But how do you make sure that the labels will align? Polymorphism to the rescue!

Let's enable the as prop for our component and use it with a Fragment:

// enable an `as` prop that defaults to "div", the element used before
// if an element is passed, that element will be used instead
export const Input = ({ id, label, as = "div" }) => {
  const Tag = as; // use that as the tag for your wrapper element

  return (
    <Tag>
      {label && <label htmlFor={id}>{label}</label>}

      <div>
        <input id={id} type="text" />
      </div>
    </Tag>
  );
};

// now, in your form, set the "as" prop as a React Fragment
export const Form = ({ id, label }) => {
  return (
    {/* The `Grid` class has our CSS Grid Layout */}
    <div className="Grid">
      <Input id="input-1" label="My Label" as={Fragment} />
      <Input id="input-2" label="Other Label" as={Fragment} />
    </div>
  );
};

As the fragment has no effect on the resulting DOM, we are able to apply our grid layout as if all the labels and the inputs were used directly in the div that has the "Grid" class. That avoids adding more conditions to your components and making sure that all Inputs align correctly.

Thanks for reading!

How would you solve that layout problem? Have you used polymorphism before?

Let's keep in touch! Here's my Twitter.

The fragment-based Apollo Client

Julio Xavier — Tue, 15 Mar 2022 23:59:59 +0000

The days that I had a hard time maintaining codebases with Apollo GraphQL are behind me. It all changed when I adopted a single concept.

Apollo Client (a.k.a. Apollo GraphQL) is a GraphQL client used for consuming GraphQL data in web and mobile apps. It has caching, tracks network status, and does a fair amount of heavy lifting so developers can focus on building the product.

As the app grows and becomes more complex, it can get hard to know where the data is coming from and what piece of UI needs that data. What can be done to solve this is colocating components and fragments.

Declaring the fragment

Let's say that we have a component that it's responsible for displaying a card with information about a user:

// notice the component name, it will be used in the fragment
export const UserCard = ({ user }) => {
  return (
    <div>
      <h1>{user.name}</h1>
      <div>
        <img src={user.profile_picture?.uri} />
      </div>
    </div>
  );
};

// attach a fragments object to your component, more on that later
UserCard.fragments = {
  // notice that this is the name of the GraphQL type, using camel-case
  // the fragment name follows this pattern to avoid conflicts: <Component Name>_<GraphQL Type>
  // so in this case, the fragment name is UserCard_User
  user: gql`
    fragment UserCard_User on User {
      name
      profile_picture {
        uri
      }
    }
  `,
};

Using the fragment

Now, we want to use this card on a page that we're building:

import { UserCard } from '../components/UserCard';

const QUERY = gql`
  query UserPage {
    user(id: 200) {
      id
      # spread the fragment here, so it's included in the query
      ...UserCard_User
    }
  }
  ${UserCard.fragments.user}
`;

const UserPage = () => {
  const { data } = useQuery(QUERY);

  return (
    <div>
      <h1>Some nice title</h1>
      {/* pass the user data to the component */}
      <UserCard user={data.user} />
    </div>
  );
};

And that's all! The data declared in the UserCard will also be included in the query and the page just needs to forward it to the component.

Updating the fragment

So, let's say that after a few weeks the Product Manager comes back and says:

"Hey, we discovered that it's important to see the user last name as well. Can you add it?"

Sure thing! That's what we have to do:

export const UserCard = ({ user }) => {
  return (
    <div>
      {/* add the last name in the UI */}
      <h1>
        {user.name} {user.last_name}
      </h1>
      <div>
        <img src={user.profile_picture?.uri} />
      </div>
    </div>
  );
};

UserCard.fragments = {
  user: gql`
    fragment UserCard_User on User {
      name
      # add the "last name" to the fragment
      last_name
      profile_picture {
        uri
      }
    }
  `,
};

So with just two lines of code, all the places that are using this card will be updated and have the right data. No more updating each query and passing down props. 🚀

Bonus: TypeScript

It gets even better with TypeScript, as when the types are generated, they're also colocated with the component:

import { UserCard_User } from './__generated__/UserCard_User';

type Props = {
  user: UserCard_User;
};

export const UserCard = ({ user }: Props) => {
  return (
    <div>
      {/* add the last name in the UI */}
      <h1>
        {user.name} {user.last_name}
      </h1>
      <div>
        <img src={user.profile_picture?.uri} />
      </div>
    </div>
  );
};

UserCard.fragments = {
  user: gql`
    fragment UserCard_User on User {
      name
      # add the "last name" to the fragment
      last_name
      profile_picture {
        uri
      }
    }
  `,
};

Thanks for reading!

What are your thoughts on using Apollo with fragments? How would you change it?

Let's keep in touch! Here's my Twitter.

References

https://www.apollographql.com/docs/react/data/fragments/
https://relay.dev/docs/guided-tour/rendering/fragments
https://kentcdodds.com/blog/colocation

Sorting your imports with ESLint

Julio Xavier — Mon, 14 Feb 2022 23:59:50 +0000

On files that use a lot of resources, imports can become a mess. Enforcing styles and patterns can be helpful, however, doing that manually doesn't seem to be the best use of time.

Fortunately, nowadays there are some amazing tools out there that can help us keep our imports organized automatically.

For this article, we will be using eslint-plugin-simple-import-sort. This is an ESLint plugin that enables not only sorting with some nice defaults but also grouping based on defined patterns.

The target

Let's take for the following code:

// an import using an alias path
import { Header, Card } from 'components';
// an import from a package that we want to always see first
import React, { useState } from 'react';
// an ui package
import { Button } from 'ui-package';
// a relative import that is in the same folder
import { parseTableData } from './utils';
// a relative import that is up in the tree
import { generatePath } from '../../domain';

The organization we would like to enforce is:

The "react" import should always come first
Package imports should come next, sorted by alphabetical order
The named imports should be sorted in alphabetical order
It should skip a line before relative imports that are in other folders
It should skip a line before the imports that are in the current folder

Set up

To set up the plugin, first, it's needed to have ESLint integrated into your project.

The first step is installing the plugin:

yarn install eslint-plugin-simple-import-sort

Then, in your ESLint config file (.eslintrc.json) add the plugin in the "plugins" list.

# eslintrc.json

{
  "plugins": ["react", "simple-import-sort"], 
  "rules": {
    // increase the severity of rules so they are auto-fixable
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error"
  }
}

This should be enough to sort the paths and the named exports alphabetically.

One step further

Now, going one step further. It's also possible to set custom groupings, so it skips lines before sets of imports.

In the ESLint config file, add the following override:

{
  "overrides": [
    // override "simple-import-sort" config
    {
      "files": ["*.js", "*.jsx", "*.ts", "*.tsx"],
      "rules": {
        "simple-import-sort/imports": [
          "error",
          {
            "groups": [
              // Packages `react` related packages come first.
              ["^react", "^@?\\w"],
              // Internal packages.
              ["^(@|components)(/.*|$)"],
              // Side effect imports.
              ["^\\u0000"],
              // Parent imports. Put `..` last.
              ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
              // Other relative imports. Put same-folder imports and `.` last.
              ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
              // Style imports.
              ["^.+\\.?(css)$"]
            ]
          }
        ]
      }
    }
  ]
}

Finish line

And you're all set! The sorting should happen automatically when ESLint is run in the auto-fix mode.

Here's the code after sorted:

import React, { useState } from 'react';
import { Card, Header } from 'components';
import { Button } from 'ui-package';

import { generatePath } from '../../domain';

import { parseTableData } from './utils';

Let's keep in touch! Any feedback is appreciated.
You can also find me on Twitter.

Using proximity to turn screen black on React Native

Julio Xavier — Thu, 28 Nov 2019 02:22:45 +0000

Have you ever used a sleep app that asked you to not lock the screen and keep the phone screen flipped to a table/bed during the night? Then, when you do it, the screen magically turns "off"?

Today, I'll show you how to do it using React Native and how it's simple.

First, install react-native-proximity. We aren't using the official lib because right now it doesn't support last React Native versions, so make sure to install it this way:

yarn add pakt-digital/react-native-proximity#584f46494111c639655303cf7e4bae925641dc4a

Install the pods required and build your app again.

cd ios/ && pod install

To make it simpler, we will be building a hook that wraps the proximity listener.

useProximity.js

import { useEffect, useState } from 'react';
import Proximity from 'react-native-proximity';

export default function useProximity() {
  const [hasProximity, setHasProximity] = useState(false);

  useEffect(() => {
    const callback = ({ proximity }) => setHasProximity(!!proximity);
    Proximity.addListener(callback);

    return () => Proximity.removeListener(callback);
  }, []);

  return { hasProximity };
}

Now, you can use your hook on your screen. Notice that BlackScreen and Content are abstractions for a component that should be a black view and your screen content, respectively, like the names suggest.

const Screen = () => {
  const { hasProximity } = useProximity();

  if (hasProximity) return <BlackScreen />;

  return <Content />;
}