DEV Community: Kevin Toshihiro Uehara

WebMCP and WebAI: Exploring native AI tools in Chrome

Kevin Toshihiro Uehara — Sat, 14 Mar 2026 22:53:42 +0000

Heeey everyone! Are you all right? everything in peace? Everything calm? I hope you are well!

It's been a while since I've posted anything here, but I'm back!
In this article I want to introduce the new feature of Chrome: WebMCP. I want to introduce you to the concept and create an application combining WebMCP and Chrome's natively integrated AI Web APIs. So yeah, IT WILL BE AWESOME.

After that, let's create a real application with integration Dev.To API's to list posts, search by author, add to your favorites and summarize the post (using the WebAI).

In this article I won't explain what is a MCP (Model Context Protocol), because I explained in another article, where I taught how to create your own MCP with TypeScript.
You can find the artile here.

But, What is WebMCP?

As the web of agents evolves, Google want to help websites play an active role in how AI agents interact with them. WebMCP aims to provide a standard way to expose structured tools, ensuring that AI agents can perform actions on your website with greater speed, reliability, and accuracy.

By defining these tools, you tell agents how and where to interact with your website, whether it's booking a flight, submitting a support ticket, or navigating complex data. This direct communication channel eliminates ambiguity and enables faster and more robust agent workflows.

Initially the Google Team developed an extension to test your WebMCP, I'm goig to talk later. But you'll need a Gemini API KEY.

Pre-requisites

WebMCP is only available on Chrome 146+. For this I recommend you install the Chrome Canary or Chrome Dev versions.
Install the WebMCP Tool Inspector
For the frontend project, I'm going to use Vite with React 19, Typescript, Tailwind and Zustand.
Enable WebMCP and Summarize API on Chrome Flags: Access Chrome Flags and enable the Summarizer API and WebMCP for testing.

Project Setup

pnpm create vite

On the options:

Give the name of your project
React
Typescript
I'm using pnpm, but you can use yarn ou npm.

Let's add the dependencies:

pnpm add tailwindcss @tailwindcss/vite zustand

You can remove the file and the folder:

App.css
assets

After that remove the imports of this files/].

With project created and cleaned, let's setup the tailwind in our project:

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
});

index.css

@import "tailwindcss";

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

Web API's declarations of typescript it was not defined yet. Because of that, we need to define ourselves. So let's create the file global.d.ts inside the source folder.

We'll going to use only the Summary API of WebAI.

src/global.d.ts

/**
 * Global type declarations for browser APIs not in default TypeScript libs.
 */

/** Chrome Summarizer API (Chrome 138+, desktop) */
interface SummarizerAPI {
  availability(): Promise<
    "readily" | "after-download" | "no-model" | "unavailable"
  >;
  create(options: SummarizerCreateOptions): Promise<SummarizerInstance>;
}

interface SummarizerCreateOptions {
  type?: "tldr" | "teaser" | "key-points" | "headline";
  format?: "plain-text" | "markdown";
  length?: "short" | "medium" | "long";
  expectedInputLanguages?: string[];
  outputLanguage?: string;
  expectedContextLanguages?: string[];
  sharedContext?: string;
  monitor?: (model: unknown) => void;
}

interface SummarizerInstance {
  summarize(text: string): Promise<string>;
}

declare global {
  interface Window {
    Summarizer?: SummarizerAPI;
  }
}

export {};

Soooo now, we FINALLY can develop our application!

Application Development

Inside of the src folder we will have five folders:

components
hooks
services
store
types

Let's start with the folder types. We can define our types before the implementation. Create this folder inside the src and create the file index.ts.

src/types/index.ts

export interface DevToArticleUser {
  name: string;
  username: string;
  twitter_username: string | null;
  github_username: string | null;
  website_url: string | null;
  profile_image: string;
  profile_image_90: string;
}

export interface DevToArticleOrganization {
  name: string;
  username: string;
  slug: string;
  profile_image: string;
  profile_image_90: string;
}

export interface ArticleType {
  type_of: "article";
  id: number;
  title: string;
  description: string;
  cover_image: string;
  readable_publish_date: string;
  social_image: string;
  tag_list: string[];
  tags: string;
  slug: string;
  path: string;
  url: string;
  canonical_url: string;
  comments_count: number;
  positive_reactions_count: number;
  public_reactions_count: number;
  collection_id: number | null;
  created_at: string;
  edited_at: string | null;
  crossposted_at: string | null;
  published_at: string;
  last_comment_at: string;
  published_timestamp: string;
  reading_time_minutes: number;
  user: DevToArticleUser;
  organization?: DevToArticleOrganization;
}

/** Article response from GET /api/articles/:id (single article by id) */
export interface ArticleByIdType {
  type_of: "article";
  id: number;
  title: string;
  description: string;
  cover_image: string;
  readable_publish_date: string;
  social_image: string;
  tag_list: string;
  tags: string[];
  slug: string;
  path: string;
  url: string;
  canonical_url: string;
  comments_count: number;
  positive_reactions_count: number;
  public_reactions_count: number;
  collection_id: number | null;
  created_at: string;
  edited_at: string | null;
  crossposted_at: string | null;
  published_at: string;
  last_comment_at: string;
  published_timestamp: string;
  reading_time_minutes: number;
  body_html: string;
  body_markdown: string;
  user: DevToArticleUser;
  organization?: DevToArticleOrganization;
}

Now we will create the folder services. So create this folder inside the src and create the file index.ts.
This file will be responsible to integrate with the Dev.to API's.

src/services/index.ts

import type { ArticleByIdType, ArticleType } from "../types";

export const fetchArticles = async (
  quantity: number = 12,
  username?: string,
): Promise<ArticleType[]> => {
  const url = new URL("https://dev.to/api/articles");
  if (quantity) url.searchParams.set("per_page", quantity.toString());
  if (username) url.searchParams.set("username", username);
  const response = await fetch(url.toString());
  const data = await response.json();
  return data;
};

export const fetchArticleById = async (
  id: string,
): Promise<ArticleByIdType> => {
  const response = await fetch(`https://dev.to/api/articles/${id}`);
  const data = await response.json();
  return data;
};

We will have two functions, first to fetch articles being possible to filter by quantity and author. The second function fetch a article by ID.

Now we going to create the store folder where we will use zustand to controll the state of our application. You might find it strange that I'm concentrating all the states in the zustand, but it will make sense when I implement WebMCP. So, yes, I won't use useState.

src/store/index.ts

import { create } from "zustand";
import type { ArticleType } from "../types";

interface ArticlesState {
  articles: ArticleType[];
  favorites: ArticleType[];
  isSidebarOpen: boolean;
  authorSearchInput: string;
  articleIdToSummarize: string | number | null;
  isOpenSummarizeModal: boolean;
  setArticles: (articles: ArticleType[]) => void;
  addFavorite: (article: ArticleType) => void;
  removeFavorite: (article: ArticleType) => void;
  clearFavorites: () => void;
  setIsSidebarOpen: (isSidebarOpen: boolean) => void;
  setAuthorSearchInput: (authorSearchInput: string) => void;
  setArticleIdToSummarize: (
    articleIdToSummarize: string | number | null,
  ) => void;
  setIsOpenSummarizeModal: (isOpenSummarizeModal: boolean) => void;
}

export const useArticlesStore = create<ArticlesState>((set) => ({
  articles: [],
  favorites: [],
  isSidebarOpen: false,
  authorSearchInput: "",
  articleIdToSummarize: null,
  isOpenSummarizeModal: false,
  setArticles: (articles) => set({ articles }),
  addFavorite: (article) =>
    set((state) => ({
      favorites: state.favorites.some((a) => a.id === article.id)
        ? state.favorites
        : [...state.favorites, article],
      isSidebarOpen: true,
    })),
  removeFavorite: (article) =>
    set((state) => ({
      favorites: state.favorites.filter((a) => a.id !== article.id),
    })),
  clearFavorites: () => set({ favorites: [] }),
  setIsSidebarOpen: (isSidebarOpen) => set({ isSidebarOpen }),
  setAuthorSearchInput: (authorSearchInput) => set({ authorSearchInput }),
  setArticleIdToSummarize: (articleIdToSummarize: string | number | null) =>
    set({ articleIdToSummarize }),
  setIsOpenSummarizeModal: (isOpenSummarizeModal: boolean) =>
    set({ isOpenSummarizeModal }),
}));

Now the the folder hooks, we will have two files. First the webAI.ts and second useMCP.ts.

Let's start by webAI.ts:

src/hooks/webAI.ts

import type { ArticleByIdType } from "../types";

export const summarizeArticle = async (article: ArticleByIdType) => {
  if ("Summarizer" in self) {
    const availability = await self.Summarizer!.availability();
    if (availability === "unavailable") {
      console.error("Summarizer API is unavailable");
      return;
    }

    const summarizer = await self.Summarizer!.create({
      type: "tldr",
      format: "plain-text",
      length: "medium",
      expectedInputLanguages: ["en", "ja", "es"],
      outputLanguage: "en",
      expectedContextLanguages: ["en"],
      sharedContext:
        "This is a article about the development programming (news, tutorials, etc.)",
      monitor(m: any) {
        m.addEventListener("downloadprogress", (e: any) => {
          console.log(`Downloaded ${e.loaded * 100}%`);
        });
      },
    });

    const summary = await summarizer.summarize(article.body_markdown);
    return summary;
  }
};

If you don't know about the Web AI API's of chrome. You can find the documentation on Chrome Developers.
This API's use the Gemini Nano, so it will be downloaded on you chrome and you can use even offline.

Now the file a little complex to understand, but I promisse that I will try to you understood hahaha. Let's create the file useMcp.ts.

src/hooks/useMcp.ts

import { fetchArticleById, fetchArticles } from "../services";
import { useArticlesStore } from "../store";

export const useWebMcp = () => {
  if (typeof navigator !== "undefined" && "modelContext" in navigator) {
    (navigator as any).modelContext.provideContext({
      tools: [
        {
          name: "handle_search_by_author",
          description: "Search for articles by author.",
          inputSchema: {
            type: "object",
            properties: {
              username: {
                type: "string",
                default: "kevin-uehara",
                description: "The username of the author to search for.",
              },
            },
          },
          execute: async ({ username }: { username?: string }) => {
            const author = username ?? "kevin-uehara";
            const results = await fetchArticles(12, author);
            useArticlesStore.getState().setArticles(results);
            return {
              content: [
                {
                  type: "text",
                  text:
                    results.length > 0
                      ? `Found ${results.length} listings: ${JSON.stringify(results)}`
                      : "No listings found matching your criteria.",
                },
              ],
            };
          },
        },
        {
          name: "add_favorite",
          description: "Add an article to the favorites list.",
          inputSchema: {
            type: "object",
            properties: {
              id: {
                type: "array",
                items: { type: "string" },
                description:
                  "The id(s) of the article(s) to add to the favorites list.",
              },
            },
          },
          execute: async ({ id }: { id: string[] }) => {
            const articleId = Array.isArray(id) ? id[0] : id;
            if (!articleId)
              return {
                content: [
                  { type: "text" as const, text: "No article id provided." },
                ],
              };
            const article = await fetchArticleById(articleId);
            if (article) useArticlesStore.getState().addFavorite(article);
            return {
              content: [
                {
                  type: "text",
                  text: article
                    ? `Article added to favorites: ${JSON.stringify(article)}`
                    : "Article not found.",
                },
              ],
            };
          },
        },
        {
          name: "remove_article_from_favorites",
          description: "Remove an article from the favorites list.",
          inputSchema: {
            type: "object",
            properties: {
              id: {
                type: "array",
                items: { type: "number" },
                description:
                  "The id(s) of the article(s) to remove from the favorites list.",
              },
              title: {
                type: "array",
                items: { type: "string" },
                description:
                  "The title(s) of the article(s) to remove from the favorites list.",
              },
            },
          },
          execute: async ({
            id,
            title,
          }: {
            id?: number[];
            title?: string[];
          }) => {
            const firstId = Array.isArray(id) ? id[0] : undefined;
            const firstTitle = Array.isArray(title) ? title[0] : undefined;
            const article = useArticlesStore
              .getState()
              .favorites.find(
                (a) => a.id === firstId || a.title === firstTitle,
              );
            if (article) {
              useArticlesStore.getState().removeFavorite(article);
              return {
                content: [
                  { type: "text", text: "Article removed from favorites." },
                ],
              };
            }
            return {
              content: [{ type: "text", text: "Article not found." }],
            };
          },
        },
        {
          name: "get_favorites",
          description: "Get the favorites list.",
          inputSchema: { type: "object", properties: {} },
          execute: async () => {
            return {
              content: [
                {
                  type: "text",
                  text: JSON.stringify(useArticlesStore.getState().favorites),
                },
              ],
            };
          },
        },
        {
          name: "open_summarize_modal",
          description: "Open the summarize modal.",
          inputSchema: {
            type: "object",
            properties: {
              articleId: {
                type: "string",
                description: "The id of the article to summarize.",
              },
            },
          },
          execute: async ({ articleId }: { articleId: string }) => {
            useArticlesStore.getState().setArticleIdToSummarize(articleId);
            useArticlesStore.getState().setIsOpenSummarizeModal(true);
            return {
              content: [{ type: "text", text: "Summarize modal opened." }],
            };
          },
        },
        {
          name: "clear_favorites",
          description: "Clear the favorites list.",
          inputSchema: { type: "object", properties: {} },
          execute: async () => {
            useArticlesStore.getState().clearFavorites();
            return {
              content: [{ type: "text", text: "Favorites cleared." }],
            };
          },
        },
      ],
    });
  }
};

YEAH, this file is giant. But let's undertand.
This file just are mapping all the tools that our application will provide to interact with our page.
So each object is a tool. If you're already familiar with the concept of MCP, this is nothing new.

Let's grab the easier tools to understand:

          name: "get_favorites",
          description: "Get the favorites list.",
          inputSchema: { type: "object", properties: {} },
          execute: async () => {
            return {
              content: [
                {
                  type: "text",
                  text: JSON.stringify(useArticlesStore.getState().favorites),
                },
              ],
            };
          },
        }

This tool has a name get_favorites (it be unique), have a description (this is important for the AI understand what this tool do), the schema where can ben optional, but if you need some parameters, you need to declare here.
And now the execute that will receive a function (async or sync) and return in this same format above (with content array, where the object has the type text and the data).

Here is where I get from zustand the articles added on favorites and parse using JSON.stringify.

Another exemple:

Let's grab the tool to add_favorite.

{
          name: "add_favorite",
          description: "Add an article to the favorites list.",
          inputSchema: {
            type: "object",
            properties: {
              id: {
                type: "array",
                items: { type: "string" },
                description:
                  "The id(s) of the article(s) to add to the favorites list.",
              },
            },
          },
          execute: async ({ id }: { id: string[] }) => {
            const articleId = Array.isArray(id) ? id[0] : id;
            if (!articleId)
              return {
                content: [
                  { type: "text" as const, text: "No article id provided." },
                ],
              };
            const article = await fetchArticleById(articleId);
            if (article) useArticlesStore.getState().addFavorite(article);
            return {
              content: [
                {
                  type: "text",
                  text: article
                    ? `Article added to favorites: ${JSON.stringify(article)}`
                    : "Article not found.",
                },
              ],
            };
          },
        }

Here is same thing, but now the tool is receiving the id as parameter and I add some description of this AI detect on prompt.

And now, on execute I'm validating the ID and calling the function fetchArticleById passing the ID. After that I call the zustand to add to favorite the article. Simple, isn’t ?

Now you can understand the other tools.

Finally, let's create our components:

We will have four components:

ArticleCard
FavoriteSidebar
SummarizeModal

Starting with ArticleCard

src/components/ArticleCard/index.tsx

import type { ArticleType } from "../../types";

interface ArticleCardProps {
  article: ArticleType;
  onAddToFavorites?: (article: ArticleType) => void;
  onOpenSummarizeModal?: (id: string | number) => void;
}

export function ArticleCard({
  article,
  onAddToFavorites,
  onOpenSummarizeModal,
}: ArticleCardProps) {
  const tags = article.tag_list;

  return (
    <article
      className="flex flex-col bg-white rounded-xl overflow-hidden shadow-[0_2px_12px_rgba(0,0,0,0.08)] transition-all duration-200 ease-out hover:shadow-[0_8px_24px_rgba(0,0,0,0.12)] hover:-translate-y-0.5"
      data-article-id={article.id}
    >
      <a
        href={article.url}
        target="_blank"
        rel="noopener noreferrer"
        className="block leading-0"
      >
        <img
          className="w-full h-[200px] object-cover block"
          src={article.cover_image}
          alt={article.title}
        />
      </a>
      <div className="flex flex-col flex-1 p-4 px-5">
        <div className="flex items-center flex-wrap gap-2 mb-2 text-[0.8rem] text-gray-500">
          <span
            className="inline-flex items-center text-[0.7rem] font-semibold font-mono text-gray-500 bg-gray-200 px-2 py-0.5 rounded-md tracking-wide"
            title="Article ID"
          >
            ID: {article.id}
          </span>
          <img
            className="w-6 h-6 rounded-full object-cover"
            src={article.user.profile_image_90 ?? article.user.profile_image}
            alt={article.user.name}
          />
          <span className="font-semibold text-gray-900">
            {article.user.name}
          </span>
          <span className="text-gray-500">{article.readable_publish_date}</span>
          <span className="text-gray-500">
            {article.reading_time_minutes} min read
          </span>
        </div>
        <h2 className="text-[1.1rem] font-semibold m-0 mb-2 text-gray-900 leading-tight line-clamp-2">
          {article.title}
        </h2>
        <p className="text-sm text-gray-600 m-0 mb-3 leading-snug line-clamp-3">
          {article.description}
        </p>
        {tags.length > 0 && (
          <div className="flex flex-wrap gap-[0.35rem]">
            {tags.map((tag) => (
              <span
                key={tag}
                className="text-xs px-2 py-1 bg-gray-200 text-gray-600 rounded-md"
              >
                {tag}
              </span>
            ))}
          </div>
        )}
        <div className="flex gap-4 mt-2 text-[0.85rem] text-gray-500">
          <span className="inline-flex items-center gap-1">
            ❤️ {article.positive_reactions_count}
          </span>
          <span className="inline-flex items-center gap-1">
            💬 {article.comments_count}
          </span>
        </div>
        <div className="mt-auto pt-4 flex flex-col gap-2">
          <a
            href={article.url}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-block w-full py-2.5 px-4 text-sm font-semibold text-center text-gray-900 bg-white border border-gray-300 rounded-lg no-underline transition-all duration-200 ease-out hover:bg-gray-100 hover:border-gray-400 hover:-translate-y-0.5 hover:shadow-[0_4px_12px_rgba(0,0,0,0.08)] active:translate-y-0 active:scale-[0.98] active:shadow-[0_2px_6px_rgba(0,0,0,0.1)]"
          >
            Read article
          </a>
          <button
            type="button"
            onClick={() => onAddToFavorites?.(article)}
            className="w-full py-2.5 px-4 text-sm font-semibold text-gray-900 bg-gray-100 border border-gray-300 rounded-lg cursor-pointer transition-all duration-200 ease-out hover:bg-gray-200 hover:border-gray-400 hover:-translate-y-0.5 hover:shadow-[0_4px_12px_rgba(0,0,0,0.08)] active:translate-y-0 active:scale-[0.98] active:shadow-[0_2px_6px_rgba(0,0,0,0.1)]"
          >
            Add to favorites
          </button>
          <button
            type="button"
            onClick={() => onOpenSummarizeModal?.(article.id)}
            className="w-full py-2.5 px-4 text-sm font-semibold text-gray-900 bg-gray-100 border border-gray-300 rounded-lg cursor-pointer transition-all duration-200 ease-out hover:bg-gray-200 hover:border-gray-400 hover:-translate-y-0.5 hover:shadow-[0_4px_12px_rgba(0,0,0,0.08)] active:translate-y-0 active:scale-[0.98] active:shadow-[0_2px_6px_rgba(0,0,0,0.1)]"
          >
            Summarize with AI
          </button>
        </div>
      </div>
    </article>
  );
}

Now the FavoriteSideBar:

src/components/FavoriteSideBar/index.tsx

import type { ArticleType } from "../../types";

interface FavoritesSidebarProps {
  isOpen: boolean;
  onClose: () => void;
  favorites: ArticleType[];
  onRemove: (article: ArticleType) => void;
}

export function FavoritesSidebar({
  isOpen,
  onClose,
  favorites,
  onRemove,
}: FavoritesSidebarProps) {
  return (
    <>
      <div
        role="button"
        tabIndex={0}
        aria-label="Close menu"
        onClick={onClose}
        onKeyDown={(e) => e.key === "Escape" && onClose()}
        className={`fixed inset-0 bg-black/30 z-40 transition-opacity duration-200 ${
          isOpen
            ? "opacity-100 pointer-events-auto"
            : "opacity-0 pointer-events-none"
        }`}
      />
      <aside
        className={`fixed top-0 right-0 h-full w-full max-w-md bg-white shadow-xl z-50 flex flex-col transition-transform duration-300 ease-out ${
          isOpen ? "translate-x-0" : "translate-x-full"
        }`}
      >
        <header className="flex items-center justify-between p-4 border-b border-gray-200">
          <h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
            <span className="text-2xl" aria-hidden>
              ★
            </span>
            Favorites {favorites.length > 0 && `(${favorites.length})`}
          </h2>
          <button
            type="button"
            onClick={onClose}
            aria-label="Close favorites"
            className="p-2 rounded-lg text-gray-500 hover:bg-gray-100 hover:text-gray-700 transition-colors cursor-pointer"
          >
            <span className="text-xl leading-none">×</span>
          </button>
        </header>
        <div className="flex-1 overflow-y-auto p-4">
          {favorites.length === 0 ? (
            <p className="text-gray-500 text-center py-8">
              No articles in favorites. Click &quot;Add to favorites&quot; on a
              card.
            </p>
          ) : (
            <ul className="space-y-4">
              {favorites.map((article) => (
                <li
                  key={article.id}
                  className="flex gap-3 p-3 rounded-xl bg-gray-50 border border-gray-100 hover:bg-gray-100/80 transition-colors"
                >
                  <a
                    href={article.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden bg-gray-200"
                  >
                    <img
                      src={article.cover_image}
                      alt=""
                      className="w-full h-full object-cover"
                    />
                  </a>
                  <div className="min-w-0 flex-1">
                    <h3 className="font-medium text-gray-900 text-sm line-clamp-2">
                      {article.title}
                    </h3>
                    <p className="text-xs text-gray-500 mt-0.5">
                      {article.user.name} · {article.readable_publish_date}
                    </p>
                    <div className="mt-2 flex items-center gap-2">
                      <a
                        href={article.url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="text-xs font-medium text-blue-600 hover:underline"
                      >
                        Read
                      </a>
                      <button
                        type="button"
                        onClick={() => onRemove(article)}
                        className="text-xs font-medium text-red-600 hover:underline"
                      >
                        Remove
                      </button>
                    </div>
                  </div>
                </li>
              ))}
            </ul>
          )}
        </div>
      </aside>
    </>
  );
}

Finally, the SummarizeModal:

src/components/SummarizeModal/index.tsx

import { useEffect, useState } from "react";
import { fetchArticleById } from "../../services";
import { summarizeArticle } from "../../hooks/webAI";
import type { ArticleByIdType } from "../../types";

interface SummarizeModalProps {
  articleId: string | number | null;
  onClose: () => void;
}

export function SummarizeModal({ articleId, onClose }: SummarizeModalProps) {
  const [summary, setSummary] = useState<string | null>(null);
  const [article, setArticle] = useState<ArticleByIdType | null>(null);
  const [isLoadingSummary, setIsLoadingSummary] = useState(true);
  const [isLoading, setIsLoading] = useState(true);

  const fetchArticleAndSummarize = async () => {
    if (!articleId) return;
    const articleResponse = await fetchArticleById(String(articleId));
    setArticle(articleResponse);
    setIsLoading(false);
    const summaryResponse = await summarizeArticle(articleResponse);
    setSummary(
      summaryResponse ?? "It was not possible to summarize the article.",
    );
    setIsLoadingSummary(false);
  };

  useEffect(() => {
    fetchArticleAndSummarize();
  }, []);

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center p-4"
      role="dialog"
      aria-modal
      aria-labelledby="summarize-modal-title"
    >
      <div
        className="absolute inset-0 z-0 bg-black/60 backdrop-blur-sm"
        aria-hidden
        onClick={onClose}
      />

      <div className="relative z-10 w-full max-w-2xl max-h-[90vh] flex flex-col bg-white rounded-2xl shadow-2xl overflow-hidden">
        <div className="flex items-center justify-between shrink-0 px-6 py-4 border-b border-gray-200">
          <h2
            id="summarize-modal-title"
            className="text-lg font-semibold text-gray-900"
          >
            Article details
          </h2>
          <button
            type="button"
            onClick={onClose}
            aria-label="Close"
            className="p-2 rounded-lg text-gray-500 hover:bg-gray-100 hover:text-gray-700 transition-colors cursor-pointer"
          >
            <span className="text-xl leading-none">×</span>
          </button>
        </div>
        <div className="flex-1 overflow-y-auto p-6">
          {!isLoading && article && (
            <article className="space-y-4">
              {article.cover_image && (
                <img
                  src={article.cover_image}
                  alt=""
                  className="w-full h-48 object-cover rounded-xl"
                />
              )}
              <div>
                <h3 className="text-xl font-semibold text-gray-900 mb-1">
                  {article.title}
                </h3>
                <div className="flex flex-wrap items-center gap-2 text-sm text-gray-500">
                  <img
                    className="w-8 h-8 rounded-full object-cover"
                    src={
                      article.user.profile_image_90 ??
                      article.user.profile_image
                    }
                    alt=""
                  />
                  <span className="font-medium text-gray-700">
                    {article.user.name}
                  </span>
                  <span>·</span>
                  <span>{article.readable_publish_date}</span>
                  <span>·</span>
                  <span>{article.reading_time_minutes} min read</span>
                </div>
              </div>
              {article.tags?.length > 0 && (
                <div className="flex flex-wrap gap-2">
                  {article.tags.map((tag) => (
                    <span
                      key={tag}
                      className="text-xs px-2 py-1 bg-gray-200 text-gray-700 rounded-md"
                    >
                      {tag}
                    </span>
                  ))}
                </div>
              )}
              {isLoadingSummary && (
                <div className="flex items-center justify-center py-12">
                  <span className="text-gray-500">Summarizing...</span>
                </div>
              )}
              {summary && !isLoadingSummary && (
                <div className="border-t border-gray-200 pt-4 mt-4 text-gray-700 text-sm leading-relaxed [&_a]:text-blue-600 [&_a]:underline [&_p]:mb-2">
                  <span className="font-bold">Summary:</span> {summary}
                </div>
              )}
              <a
                href={article.url}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-1 text-sm font-medium text-blue-600 hover:underline"
              >
                Open article on Dev.to →
              </a>
            </article>
          )}
        </div>
      </div>
    </div>
  );
}

To Finish, OMG!
Let's to bring together on App.tsx.

src/App.tsx

import { useEffect } from "react";
import { ArticleCard } from "./components/ArticleCard";
import { FavoritesSidebar } from "./components/FavoritesSidebar";
import { useArticlesStore } from "./store";
import { fetchArticles } from "./services";
import { useWebMcp } from "./hooks/webMcp";
import { SummarizeModal } from "./components/SummarizeModal";

function App() {
  const {
    articles,
    favorites,
    isSidebarOpen,
    authorSearchInput,
    isOpenSummarizeModal,
    articleIdToSummarize,
    setArticles,
    setAuthorSearchInput,
    addFavorite,
    removeFavorite,
    setIsSidebarOpen,
    setArticleIdToSummarize,
    setIsOpenSummarizeModal,
  } = useArticlesStore();

  useEffect(() => {
    useWebMcp();
  }, []);

  useEffect(() => {
    fetchArticles(12).then(setArticles);
  }, []);

  const handleSearchByAuthor = () => {
    fetchArticles(12, authorSearchInput).then(setArticles);
  };

  return (
    <>
      <main className="min-h-screen bg-gray-100 py-8 px-4">
        <div className="max-w-7xl mx-auto mb-6 flex flex-wrap items-center justify-center gap-3">
          <label htmlFor="author-search" className="sr-only">
            Search by author
          </label>
          <input
            id="author-search"
            type="search"
            placeholder="Search by author..."
            value={authorSearchInput}
            onChange={(e) => setAuthorSearchInput(e.target.value)}
            onKeyDown={(e) => e.key === "Enter" && handleSearchByAuthor()}
            className="w-64 sm:w-80 px-4 py-3 rounded-xl border border-gray-200 bg-white shadow-sm placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 focus:border-gray-300"
            aria-label="Search by author"
          />
          <button
            type="button"
            onClick={handleSearchByAuthor}
            className="px-4 py-3 rounded-xl bg-gray-800 text-white font-medium hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors cursor-pointer"
          >
            Search
          </button>
        </div>

        <button
          type="button"
          onClick={() => setIsSidebarOpen(true)}
          aria-label="Open favorites"
          className="fixed top-4 right-4 z-30 flex items-center gap-2 px-4 py-2.5 bg-white border border-gray-200 rounded-xl shadow-md hover:shadow-lg hover:bg-gray-50 transition-all duration-200"
        >
          <span className="text-2xs font-semibold" aria-hidden>
            Favorites
          </span>
          {favorites.length > 0 && (
            <span className="min-w-5 h-5 px-1.5 flex items-center justify-center text-xs font-semibold text-gray-700 bg-amber-100 rounded-full">
              {favorites.length}
            </span>
          )}
        </button>

        <section
          id="articles"
          className="grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-6 max-w-7xl mx-auto"
        >
          {articles.map((article) => (
            <ArticleCard
              key={article.id}
              article={article}
              onAddToFavorites={addFavorite}
              onOpenSummarizeModal={() => {
                setArticleIdToSummarize(article.id);
                setIsOpenSummarizeModal(true);
              }}
            />
          ))}
        </section>
      </main>

      <FavoritesSidebar
        isOpen={isSidebarOpen}
        onClose={() => setIsSidebarOpen(false)}
        favorites={favorites}
        onRemove={removeFavorite}
      />

      {isOpenSummarizeModal && articleIdToSummarize && (
        <SummarizeModal
          articleId={articleIdToSummarize}
          onClose={() => setIsOpenSummarizeModal(false)}
        />
      )}
    </>
  );
}

export default App;

Note, that I'm not using the useState and I'm controlling every state by Zustand. Because I decided to separate the WebMCP in another file. Some people is using the WebMCP tools in the same file of the component or on App.tsx. But you can decide how to implement.

The Result

The Result with WebMCP

Conclusion

🎉 Congratulations! You've successfully built your first application using WebMCP and WebAI Integrated.

What You've Accomplished:

✅ Created a functional WebMCP Tools
✅ Integrated With Web AI API's of Chrome
✅ Integrated on Web Application
✅ Learned the fundamentals of WebMCP

📚 Resources and Further Reading

APIs Used in This Tutorial

Dev.TO API
Chrome Developers
WebMCP Announcement

Demo Repo

Demo available on GitHub

Thank you very much for reading this far and stay well always!

Contacts:

Linkedin: https://www.linkedin.com/in/kevin-uehara/
Instagram: https://www.instagram.com/uehara_kevin/
Twitter: https://x.com/ueharaDev
Github: https://github.com/kevinuehara
dev.to: https://dev.to/kevin-uehara
Youtube: https://www.youtube.com/@ueharakevin/

Building Your First MCP Server: A Beginner’s Guide

Kevin Toshihiro Uehara — Fri, 29 Aug 2025 20:25:37 +0000

Hi Folks! Are you all right? everything in peace? Everything calm? I hope you are well!

It's been a while since I've posted anything here, but I'm back!
In this article I want to introduce the MCP (Model Context Protocol) and how to implement you own MCP Server from scratch using Typescript.

If you ask for "Give me 5 articles most rated of this week" in your AI Agent, probably it will not be able to bring that information, because it does not have access to this data. Probably it will suggest to create an integration with the API of dev.to, using some language. But this is not what we want. We want that the our AI agent bring the "5 articles of the week" after the prompt. Now the MCP Server enters.

In this tutorial, you'll create a dev.to articles server that connects AI agents like Cursor or Github Copilot. We will use TypeScript for this demo but you can build MCP servers in other languages. By the end, you'll be able to ask your AI for articles of dev.to searching by authors, recents posts, most rated and so on.

What is a MCP Server?

Model Context Protocol (MCP) servers are bridges that connect AI agents to external tools and data sources. Think of them as translators that help AI understand and interact with real-world applications.

MCP is an open protocol, created by Anthropic, that standardizes how applications provide context to large language models (LLMs). Think of MCP like a USB-C port for AI applications. Just as USB-C provides a standardized way to connect your devices to various peripherals and accessories, MCP provides a standardized way to connect AI models to different data sources and tools. MCP enables you to build agents and complex workflows on top of LLMs and connects your models with the world.

You can connect your MCP Server to Github to bring the PR's of some repository, or schedule a meet using the Google Calendar, for example.

In this example we going to integrate our MCP Server to Dev.TO API to bring the articles real-time information. So let's do it!

Project Setup

Let's create a new project and set up our development environment.

First, create a new directory and initialize it with npm:

mkdir mcp-devto-example
cd mcp-devto-example
npm init -y

Now, let's create the entrypoint main file:

touch main.ts

Open the project in VS Code (or your preferred editor. In this example I'm using Cursor) and modify package.json to enable ES modules by adding the type field:

{
  "name": "mcp-devto-example",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

Installing Dependencies

Our MCP server needs two key libraries:

@modelcontextprotocol/sdk (the SDK to create the MCP)
zod (ensures our server receives valid data from AI agents, using type safe validation)

npm install @modelcontextprotocol/sdk zod

Building the Server

Now let's create our MCP server. Open main.ts and let's build it step by step.

Let's add the import of our dependencies:

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
import { z } from "zod";

Now creating the server instance:

const server = new McpServer({
  name: "articles-mcp-example",
  version: "1.0.0",
});

The server manages all communication using the MCP protocol between clients (like VS Code or Cursor) and your tools.

Defining your first tool

Tools are functions that AI agents can call. Let's create a get-articles tool:

server.tool(
  'get-articles',
  'Tool to get articles from dev.to',
  {
    tag: z.string().describe("The tag to search on dev.to api")
  },
  async({ tag }) => {
    // For now, return a simple static response
    return {
      content: [
        {
          type: "text",
          text: `Articles of tag:${tag}`
        }
      ]
    };
  }
);

Breaking down the tool definition:

Tool ID: 'get-articles' - Unique identifier
Description: Helps AI agents understand what this tool does
Schema: Defines parameters (tag must be a string)
Function: The actual code that runs when called

How it works:

AI agent sees: "Tool to get articles from dev.to"
AI agent calls it with: { tag: "javascript" }
Zod validates the input
Function returns: "Articles of tag:javascript"

Finally, we need to set up how our server communicates with AI clients:

const transport = new StdioServerTransport();
server.connect(transport);

What's happening here:

StdioServerTransport uses your terminal's input/output for communication
Perfect for local development
The server reads requests from stdin and writes responses to stdout
MCP protocol handles all the message formatting automatically

Your complete main.ts should now look like this:

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
import { z } from "zod";

const server = new McpServer({
  name: "articles-mcp-example",
  version: "1.0.0",
});

server.tool(
  'get-articles',
  'Tool to get articles from dev.to',
  {
    tag: z.string().describe("The tag to search on dev.to api")
  },
  async({ tag }) => {
    // For now, return a simple static response
    return {
      content: [
        {
          type: "text",
          text: `Articles of tag:${tag}`
        }
      ]
    };
  }
);

const transport = new StdioServerTransport();
server.connect(transport);

🎉 Congratulations! You've built your first MCP server. Let's test it!

Testing with MCP Inspector

Before adding real weather data, let's test our server using the MCP Inspector, a web-based debugging tool for MCP servers.

Launch the Inspector with the command to open the MCP Inspector for your server:

npx -y @modelcontextprotocol/inspector npx -y tsx main.ts

or you can add in your package.json scripts:

"scripts": {
    "inspect": "npx -y @modelcontextprotocol/inspector npx -y tsx src/main.ts"
  },

And running with:

npm run inspect

After running the command, you'll see terminal output with:

A localhost URL (like http://127.0.0.1:6274)
A unique session token
A direct link with the token pre-filled

Connecting and Test

Connect: Click the "Connect" button in the Inspector
Navigate: Click "Tools" in the top navigation
Select: Choose your get-articles tool
Test: Enter a tag (like "javascript") and click "Run Tool"

You should see the response: "Articles of tag:javascript"

Integrating with Dev.To API

Time to make our server actually useful! We'll integrate with dev.to API, API of dev.to that requires no API key.

Updating the tools

For better organization I'm going to separate the integration and types of zod in another files.

Let's create the the file types.ts:

touch types.ts

And now let's add the zod schemas:

import { z } from "zod";

export const getArticlesSchema = z.object({
  tags: z.string().describe("The tag to search on dev.to api"),
  quantity: z
    .number()
    .optional()
    .default(5)
    .describe("The number of articles to return"),
});

export const getArticlesByUserNameSchema = z.object({
  userName: z.string().describe("The user name to search on dev.to api"),
});

And for the integrations with the API, I'm going to create the service.ts file:

touch service.ts

Let's add two functions, fist to get the articles by tag and the second to get the articles by username:

const BASE_URL = "https://dev.to/api";

export const getArticles = async (tags: string, quantity: number) => {
  try {
    const response = await fetch(
      `${BASE_URL}/articles?tag=${tags}&per_page=${quantity}`
    );
    const data = await response.json();

    return {
      content: [
        {
          type: "text" as const,
          text: JSON.stringify(data, null, 2),
        },
      ],
    };
  } catch (error) {
    return {
      content: [
        {
          type: "text" as const,
          text: `Error fetching articles data: ${
            error instanceof Error ? error.message : "Unknown error"
          }`,
        },
      ],
    };
  }
};

export const getArticlesByUserName = async (userName: string) => {
  try {
    const response = await fetch(`${BASE_URL}/articles?username=${userName}`);
    const data = await response.json();

    return {
      content: [
        {
          type: "text" as const,
          text: JSON.stringify(data, null, 2),
        },
      ],
    };
  } catch (error) {
    return {
      content: [
        {
          type: "text" as const,
          text: `Error fetching articles data: ${
            error instanceof Error ? error.message : "Unknown error"
          }`,
        },
      ],
    };
  }
};

Now on main.ts, I will add two tools and use the files that we created:

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { getArticlesByUserNameSchema, getArticlesSchema } from "./types";
import { getArticles, getArticlesByUserName } from "./service";

const server = new McpServer({
  name: "articles-mcp-example",
  version: "1.0.0",
});

server.tool(
  "get-articles",
  "Tool to get articles from dev.to",
  getArticlesSchema.shape,
  async ({ tags, quantity }) => getArticles(tags, quantity)
);

server.tool(
  "get-articles-by-user-name",
  "Tool to get articles from dev.to by user name",
  getArticlesByUserNameSchema.shape,
  async ({ userName }) => getArticlesByUserName(userName)
);

const transport = new StdioServerTransport();
server.connect(transport);

Testing the Real Data

Restart your MCP Inspector (Ctrl+C, then re-run the command)
Reconnect in the web interface
Test with a tag like "javascript" or "react" on get-articles or username like "kevin-uehara" on get-articles-by-user-name

get-articles

get-articles-by-user-name

Integration with Cursor

Now let's connect your articles dev.to server to Cursor:

Create the directory: .cursor/mcp.json with the following code:

{
    "mcpServers": {
      "articles-mcp-example": {
        "command": "npx",
        "args": ["tsx", "src/main.ts"],
        "env": {}
      }
    }
  }

If you are using the VSCode with Copilot you need to create the directory .vscode/mcp.json.

Using the Cursor you need to register the server. Type CMD + P and type > View: Open MCP Settings and enable the mcp server created.

Open the Cursor Chat with CMD + I and type: "what is the 5 most rated articles of dev.to of this week?"

And that's it!!!

Why this is powerful?

Your articles dev.to server demonstrates the true power of MCP:

🤖 AI Does the Heavy Lifting

You provide raw data, AI creates beautiful presentations
No need to format responses, the AI handles user experience

🔗 Universal Compatibility

Works with any MCP-compatible tool (VS Code, Cursor, Claude, etc.)
Write once, use everywhere

⚡ Real-time Integration

Always current data, no caching issues
Works seamlessly within your development environment

Conclusion

🎉 Congratulations! You've successfully built your first MCP articles server!

What You've Accomplished:

✅ Created a functional MCP server from scratch
✅ Integrated real-time weather data from an external API
✅ Connected it to Cursor
✅ Learned the fundamentals of the Model Context Protocol

Happy building! 🚀

📚 Resources and Further Reading

Official Documentation

Model Context Protocol Documentation - Complete MCP reference
Typescript SDK

APIs Used in This Tutorial

Dev.TO API - Dev.TO API data service
Zod Documentation - TypeScript schema validation

Demo Repo

Demo available on GitHub

Thank you very much for reading this far and stay well always!

Contacts:

Introducing Tanstack Router

Kevin Toshihiro Uehara — Mon, 10 Mar 2025 14:28:51 +0000

Hi Folks! Are you all right? everything in peace? Everything calm? I hope you are well!

Today I'm gonna talk about the Tanstack Router!
Tanstack Router is a fully type-safe router with built-in data fetching, stale-while revalidate caching and first-class search-param APIs. Tanstack router was created by same creators of React Query.

More details you can find on documentation

So let's hands on creating a project using tanstack router, tanstack query (React query) with React and Typescript.

First let's create our project using Vite with the command:

npm create vite@latest tanstack-router -- --template react-ts

Open in your preferred IDE, and install the dependecies using

yarn

Now let's add our dependencies:

yarn add @tanstack/react-router @tanstack/react-query

Add the dev dependecies

yarn add -D @tanstack/router-plugin @tanstack/router-devtools

Delete the App.tsx

Now change the main.tsx by:

import { StrictMode } from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider, createRouter } from "@tanstack/react-router";

// Import the generated route tree
import { routeTree } from "./routeTree.gen";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

// Create a new router instance
const router = createRouter({ routeTree });

// Register the router instance for type safety
declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }
}

const queryClient = new QueryClient();

// Render the app
const rootElement = document.getElementById("root")!;
if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <StrictMode>
      <QueryClientProvider client={queryClient}>
        <RouterProvider router={router} />
      </QueryClientProvider>
    </StrictMode>
  );
}

Here we are creating the router instance of Tanstack router and registering the types. Also, I'm adding the Tanstack query (React Query) provider.

The file ./routeTree.gen it will be generated automatically for you. So don't change this file because it will be overwrited.

Now create the folder routes inside of src. Create the file __root.tsx which will contain the routes.

src/routes/__root.tsx

import { createRootRoute, Link, Outlet } from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/router-devtools";

export const Route = createRootRoute({
  component: () => (
    <>
      <div className="p-2 flex gap-2">
        <Link to="/" className="[&.active]:font-bold">
          Home
        </Link>{" "}
        <Link to="/about" className="[&.active]:font-bold">
          About
        </Link>
        <Link to="/users" className="[&.active]:font-bold">
          {" "}
          Users
        </Link>
      </div>
      <hr />
      <Outlet />
      <TanStackRouterDevtools />
    </>
  ),
});

Here we have the link for another routes. The outlet will render the content of the route.
The tanstack devtools is a tool that will contain some infos for the routes.

Let's create the files for each route. Create about.tsx file inside the routes directory. Now will see that the content of the file will be automatically generate for you.

src/routes/about.tsx

import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/about")({
  component: About,
});

function About() {
  return <div className="p-2">Hello from About!</div>;
}

Let's create the home file:

src/routes/index.tsx

import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/")({
  component: Index,
});

function Index() {
  return (
    <div className="p-2">
      <h3>Welcome Home!</h3>
    </div>
  );
}

Now let's create the users routes, to do this create a folder called users, inside create the index.tsx.

src/routes/users/index.tsx

import { createFileRoute, Link } from "@tanstack/react-router";
import { User } from "../../types/User";
import { useQuery } from "@tanstack/react-query";

export const Route = createFileRoute("/users/")({
  component: RouteComponent,
});

const getUsers = (): Promise<User[]> =>
  fetch("https://jsonplaceholder.typicode.com/users").then((res) => res.json());

function RouteComponent() {
  const { data } = useQuery({
    queryKey: ["users"],
    queryFn: async () => getUsers(),
  });

  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      {data?.map((user: User) => (
        <Link to="/users/$id" params={{ id: user.id.toString() }} className="">
          {user.name}
        </Link>
      ))}
    </div>
  );
}

Here we are fetching the data of users using the react query, and for each user let's create a link for the details route.

To get the URL params we need to create the following file using $. So to get the id of the user we create the file $id.tsx.

src/routes/users/$id.tsx

import {
  createFileRoute,
  useLoaderData,
  useParams,
} from "@tanstack/react-router";

export const Route = createFileRoute("/users/$id")({
  component: RouteComponent,
  loader: async ({ params }) => {
    const userId = params.id;
    const response = await fetch(
      `https://jsonplaceholder.typicode.com/users/${userId}`
    );

    if (!response.ok) throw new Error("Failed to fetch data");

    const user = await response.json();
    return { user };
  },
  pendingComponent: () => <div>Loading...</div>,
});

function RouteComponent() {
  const { id } = useParams({ from: "/users/$id" });
  const { user } = useLoaderData({ from: "/users/$id" });

  return (
    <div>
      {id} - {user.name}
    </div>
  );
}

Here instead of using react query to make the requests, I'm using the loader to get the data before the route is rendered. The pendingComponent will render some content before the request finish, for example a loading screen.

TO get the id of URL params we can use useParams hooks and the useLoaderData to get the data of loader.

Final Result:

Thank you very much for reading this far and stay well always!

Contacts:

Chrome DevTools: Everything You Need to Know

Kevin Toshihiro Uehara — Wed, 25 Dec 2024 15:02:11 +0000

Hi Folks! Are you all right? everything in peace? Everything calm? I hope you are well!

Today I'm gonna talk about the Chrome DevTools! Have you already used it in your web application? Do you know all the features? Today we will explore the main features and latest news of Chrome devtools

1. Performance

When we think about performance of our web app we need to collect some metrics to rely on data to improve or work on some point in our application.

For this, we have the Perfomance tab on DevTools. In the recently versions of Chrome, the web vitals (the tree essential metrics for a healthy website.
We already have the Page Speed Insights and Lighthouse for example.
But now we can see all the changes in metrics live.

First let's understand the 3 main metrics for Loading, Visual Stability and Interactivity. They are the foundation for great user experience, what is the key to keep the visitors engaged to come back for more).

Web Vitals are a set of essential metrics that Google defines to measure user experience in relation to a website's performance. These metrics are focused on important aspects such as the speed of loading, interactivity and visual stability of a page. The main goal of Web Vitals is to ensure that websites offer a smooth and enjoyable browsing experience based on what users actually feel when interacting with the page.

Loading

Last Contentful Paint (LCP): Measures the web page loading performance. It track how long it takes to render the most essential and important elmements.

Interactivity

First Input Delay (FID): It measures the time it takes from the moment the user first interacts with the page (such as clicking a link or button) until the browser actually starts processing that interaction.

Visual Stability

Cumulative Layout Shift (CLS): Measure visual stability or the number of unexpected layout shifts that occur during user interactions, including element appearing, resizing, or repositioning.

Now that you understand the main web vitals metrics, let's explore them in devtools!
Let's jump into the example page provided by google: https://coffee-cart.app/?ad=1

Now open the devtools with CTRL + SHIFT + I or CMD + ALT + I on mac. Open the Perfomance Tab with CTRL + SHIFT + P or CMD + SHIT + P and search by tapping > perfomance.

In this example you can see the tree metrics of web vitals after on load the page. The dev tools will give you the score of the web vitals.

we can simulate what the real experience of users are having through CrUX by bringing real metrics.

The Chrome User Experience Report (CrUX) is a set of real performance data from real users browsing the web, collected through Google Chrome. This data is based on measurements of page performance on real devices and is provided to help developers understand how pages are being experienced by users in the real world.

CrUX is a valuable source for measuring the actual experience of using a website, especially to understand how it performs in terms of Core Web Vitals (such as LCP, FID and CLS), and can be accessed through tools such as Google PageSpeed Insights, Google Search Console, or directly in tools like Chrome DevTools.

So in this example we can see how to setup the integration with the CrUX, bringing the real metrics of users that are using the application.

Another way to simulate lower CPU networks and processing, we can use the Environment Settings in the performance tab to measure page loading.

Notice that the LCP and CLS had a worse score with inferior networks and processing.

The perfomance tab contains a lot of more features that we can explore in another article.

Let's jump to the Application Tab.

2. Application

In the application tab we can see the storage of our application like Session Storage, Local Storage, IndexDB, Cookies and the Service Worker if our application use this resource.

Cookie

Cookies are small text files stored in the browser by the server. They are sent along with HTTP requests and can be used to store information about the state of an application, user preferences, login sessions, among others. Each cookie have a limit of 4KB size.

Local Storage

LocalStorage is a form of persistent storage that stores data as key-value pairs in the user's browser. This data does not expire, that is, it remains in the browser until the user manually removes it or until the website deletes the data. Each domain can store up to 5 MB of data.

Data stored in localStorage remains even after the browser is closed and reopened.

Example:

localStorage.setItem("username", "JohnDoe");
const user = localStorage.getItem("username");

Session Storage

SessionStorage is similar to localStorage, but with one important difference: it is volatile and stores data only during the browser session. In other words, the data is deleted as soon as the browser tab or window is closed.

Each domain can store up to 5 MB of data.

Data is removed when the browser tab is closed or the browser session ends.

Example:

sessionStorage.setItem("sessionID", "123456");
const sessionID = sessionStorage.getItem("sessionID");

IndexedDB

IndexedDB is a more advanced local database, allowing the storage of large amounts of structured data, such as JavaScript objects. It is asynchronous and offers more flexible and complex access to data and can be used to store data related to offline web applications.

It can store large volumes of data (usually tens of MB to GB), depending on the browser and device settings.

Example:

const request = indexedDB.open("MyDatabase", 1);
request.onsuccess = function(event) {
  var db = event.target.result;
  // work with the database
};

Cache Storage

Cache Storage is used to store network resources (such as HTML, CSS, JS files, images) locally in the browser. This storage is part of the Service Workers APIs, allowing web applications to work offline or in unstable network conditions.

Allows you to cache and manage network responses (files), which improves performance and the ability to work offline.

The Cache Storage API is asynchronous, which means that operations do not block the main thread.

Example:

caches.open("my-cache").then(function(cache) {
  cache.addAll(["/index.html", "/style.css", "/script.js"]);
});

3. Network

In the network tab we can see all the requests made to render the page content, where we can filter the requests HTTP, CSS, Documents HTML, Javascript etc.

In addition to being able to analyze what was sent in the request, such as the request body, header, cookies and much more

4. Source

In the Source tab, we can analyze the application's source code and third-party libraries to perform a debug.

I certainly won't be able to explore in detail the many other resources that dev tools offer, but this is the essential thing for you to know and start your journey to explore the tools.

In the future I may write a more specific article about each dev tools tab or make a video talking about it in more detail

Thank you very much for reading this far and stay well always!

Contacts:

Understading Algorithm Complexity: A Deep Dive into Big O Notation With JavaScript

Kevin Toshihiro Uehara — Fri, 11 Oct 2024 00:59:06 +0000

Hi there!! It's been a while since I published articles, due to events, lectures, work and so on.

But I'll be coming back slowly! But then, as I always ask, how are you? all good? everything in peace? I hope you are well!

Today I want to present you with super different content, it can be a little complex at first, but in many interviews (for big techs) these questions are asked frequently. Algorithm complexity analysis!

This is such an important concept! If you've never covered the algorithm complexit analysis or big O in an academic settings, rest assured! I'll try to address it in a simple way that you can understand! But I'm not going to delve too deeply into the topic, as it would take an entire college year to do that.

Big O

Big O is the language and metric we use to describe the efficiency of algorithms. Sometimes we need to describe if our algorithm is efficiently, and this analysis is important when look for performance or evaluate whether our algorithm is efficient.

Imagine the following scenario: You've got a file on a hard drive and you need to send it tor your friend who lives across the country. You need to get the file to your friend as fast as possible. How should you send it?

Some people will suggest, FTP? Email? Google Drive?
If it's a small file, you are certainty right. It woulld take, probably, 5-10 hours to get an airport, catch a plane and hand deliver it to your friend.

Buuut what if the file were really large. For example, 1TB? The file could take more than a day to transfer eletronically. Probably, it would be much faster to just fly it across the country.

This is the concept of asymptotic runtime, or big O time, means.

O(1) would be the example of delivering using the plane. O(1) respect to the size of the file. The time is constant.

O(n) would be the example using an eletronic transfer. where N, is the size of the file. This means that the time to transfer the file inscreses linearly with the size of the file.

The green line is O(n) and the blue line O(1).

There are many more runtimes than this. Some of the most common ones are O(log n), O(n * log n), O(n), O(nˆ2), O(2ˆn).

Best case, Worst case and Expected Case

We can actually describe our runtime for an algorithm in three different ways:

Imagine the algorithm of quick sort:

function quickSort(arr) {

    if (arr.length <= 1) {
        return arr;
    }


    const pivot = arr[arr.length - 1];
    const left = [];
    const right = [];

    for (let i = 0; i < arr.length - 1; i++) {
        if (arr[i] < pivot) {
            left.push(arr[i]);
        } else {
            right.push(arr[i]);
        }
    }

    return [...quickSort(left), pivot, ...quickSort(right)];
}

For now, don't be scared of resursion. Quick sort picks a random element as a "pivot" and then swaps values in the array suck that the element less than pivot appear before elements greater than pivot. This gives a "partial sort". Then it recursively sorts the left and right sides using a similar process.

Best Case: if all elements are equal, then quick sort will, on average, just transverse through the array once. This is O(n).
Worst Case: What if we get really unluck and the pivot is repeatedly the biggest element in the array? In this case, our recursion doesn't divide the array in half and recurse on each half. It just shrinks the subarray by one element. This will degenerate to an O(nˆ2) runtime.

Space Complexity

Time is not the only thing that matters in an algorithm. We might also care about the amount of memory or space. Imagine if we are working with low memory devices like IoT.

Space complexity is a parallel concept to time complexity. If we need to create an array of size N. This will require O(n) space. If we need a two-dimensional (matrix) array of nxn, this will require O(n^2) space.

Probably you already saw these errors 👀:

Stack overflow
Memory overflow

Stack space in resursive call counts, too:

function sum(n) {
 if (n <= 0)
  return 0;

 return n + sum(n-1);
}

For example, code like this would take O(n) time and O(n) space.

Recursive Runtimes

You probably already heard about fibonacci in mathematics.
The Fibonacci sequence is a series of numbers where each number is the sum of the two preceding ones. It usually starts with 0 and 1. The sequence looks like this:

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, ...

Now the algorithm:

function fibonacci(n) {
 if (n <= 1)
  return 1;

 return fibonacci(n-1) + fibonacci(n-1);
}

A lot of people will, for some reason, see the two calls to fibonacci and jump to O(nˆ2). This is completely wrong.

The space complexity of this algorithm will be O(n). Although we have O(2^n) nodes in the tree total, only O(n) exist at any given time.

Now what is the runtime of the bellow code?

function foo(array) {
 let sum = 0;
 let product = 1;

 array.forEach(item => {
  sum += item;
 });

 array.forEach(item => {
  product *= item;
 });

 console.log(`${sum}, ${product}`);
}

If you answer O(n). Yep, you are right! The fact that we iterate through the array twice doesn't matter.

Now another example:

function printPairs(array) {
  for(let i = 0; i < array.length; i++) {
   for(let j = 0; j< array.length; j++) {
    console.log(`${array[i]} , ${array[j]}`);
   }
  }
}

The runtime is O(n^2).

So now you are able to understand these concepts of time and space complexity analysis of algorithms! Of course, many other concepts I didn't cover here such as Big Theta, Big Omega, Amortized Time, trees and more complex recursion.

But this is a hard concept! And now you understand when asked about the time or space complexity of an algorithm.

That's all folks! I hope you liked!
If I help you, like this post, follow me on my social medias!

Node Will Finally suport Typescript???

Kevin Toshihiro Uehara — Wed, 31 Jul 2024 19:31:11 +0000

Hi Folks! How have you been doing? Everything ok? I hope so!

And with this title, I will ask you? Clickbait or not?
The answer is NO!!!!

YEAAHH! FINALLY it will going support typescript, not yet, but the typescript in Node initiative started!

But first, I'm going how begins initiative. First, the TC39 repository of Ecmascript organization created the repository ECMAScript proposal: Type Annotations. As the title of repository represents, the Ecmascript started the discussion and the propposal.

On README of the project:

This proposal aims to enable developers to add type annotations to their JavaScript code, allowing those annotations to be checked by a type checker that is external to JavaScript. At runtime, a JavaScript engine ignores them, treating the types as comments.

The aim of this proposal is to enable developers to run programs written in TypeScript, Flow, and other static typing supersets of JavaScript without any need for transpilation, if they stick within a certain reasonably large subset of the language.

And the key word is Transpilation!
If you dont't know Bun or Deno supports typescript. But Node wants to create something native. When we write code in typescript, the browser or node, transpile to Javascript and after that the code is compiled.
So Node wants to skip the transpilation step.

How the Typescript Actually Works:

And after the State of JS research of the community, what they most feels missing on JS:

So read the Github of TC39: https://github.com/tc39/proposal-type-annotations

Initiative Node With Typescript

Now let's talk about this amazing point of change of node!

This PR was opened bringing the initiative on Node: https://github.com/nodejs/node/pull/53725

AND IT WAS MERGED!

To compile the Typescript it was used SWC:

SWC is an extensible Rust-based platform for the next generation of fast developer tools. It's used by tools like Next.js, Parcel, and Deno, as well as companies like Vercel, ByteDance, Tencent, Shopify, and more.

SWC can be used for both compilation and bundling. For compilation, it takes JavaScript / TypeScript files using modern JavaScript features and outputs valid code that is supported by all major browsers.

SWC is based on Rust and it will used to compile the typecript on Node.

@swc/wasm-typescript its a small package with a wasm and a js file to bind it.
Swc is currently used by Deno for the same purpose, it's battle tested.
In the future I see this being implemented in native layer.

So in the next releases of Node, propably we will have the flag: --experimental-strip-types

So running with

node index.ts --experimental-strip-types

Probably we can use typescript nativally, without to config the typescript and files like tsconfig.json.
Let's see the next chapters of releases of node 👀

Annnd just to finish, I contribute with the PR: https://github.com/nodejs/node/pull/54107

Just to validate some features of typescript on node repository, adding tests.

So that's it, lovely people!
I hope you liked of this news and I hope to bring news for you about the progress of the initiative soon with the next release of the node.

Thank you so much and stay well, always!

Contacts:
Linkedin: https://www.linkedin.com/in/kevin-uehara/
Instagram: https://www.instagram.com/uehara_kevin/
Twitter: https://x.com/ueharaDev
Github: https://github.com/kevinuehara
dev.to: https://dev.to/kevin-uehara
Youtube: https://www.youtube.com/@ueharakevin/

Frontend Challenge August: Cricket League

Kevin Toshihiro Uehara — Thu, 25 Jul 2024 22:35:24 +0000

This is a submission for Frontend Challenge v24.07.24, Glam Up My Markup: Recreation

What I Built

This project it will be used for the dev.to frontend challenge of August. I choose the second challenge: Cricket League!.

I'm using the only Vanilla Javascript and CSS.

I'm not using NPM/Yarn/PNPM as dependency package manager. This project is a simple project using vanilla javascript and using all the functions to replace and manipulate the DOM, just using javascript.

All styles is a simple file of CSS.

Also, is responsive, with accessibility, performance and Best SEO!

Demo

This project is hosted on Vercel. Just access the:
Vercel Demo Project

Github Repository

Journey

I apply all my concepts of design, interaction, usability, a11y and Javascript Vannila to manipulate the DOM

This is my contribution for Dev.to Challenges!
I hope you like, thank you so much and stay well always!

React 19 Features - Release Canary

Kevin Toshihiro Uehara — Thu, 27 Jun 2024 13:49:55 +0000

Hi there, how have you been? Everything in peace? I hope so!
There was a long time that I don`t post anything here! But now I want to bring a lot of content of, what you guess?

YEAH! Let's talk about React 19 and the main features with examples and using Vite and Typescript!

I'm going to base on React 19 release notes documentation. But I will try to bring more easy examples.

So let's start the project using our React with Vite and Typescript. Enter on project directory and install the dependencies.

yarn create vite react-19rc-example --template react-ts

So with the project created, Vite will use the React 18 version. To change for React 19, we need to udpate (until the date of this post):

yarn add --exact react@rc react-dom@rc

And we need to add another dev dependencie, because we are using Typescript, on package.json:

{
  "dependencies": {
    "@types/react": "npm:types-react@rc",
    "@types/react-dom": "npm:types-react-dom@rc"
  },
  "overrides": {
    "@types/react": "npm:types-react@rc",
    "@types/react-dom": "npm:types-react-dom@rc"
  }
}

And that's it! Now we upgraded to React 19 and we are prepared to code and see the examples:

React Compiler

Before of React 19, on the background the React use the Virtual DOM. So if any state change on any tree components, the React will compare the Virtual DOM with the Real DOM. But probably you alredy faced some problems of performance in your application.

Imagine that you have 4 childrens inside the father component. And the last child component changes. React will detect the state update, compare and change the entire tree of you components.

But we can use some approaches to avoid this problem of re-render, for example memoization. For example, use the:

useCallback
useMemo
memo

Now with the 19 release version, it was introduced the React Compiler So, now, the React render again when the semantic value changes, but without impact on the time cost and execution of deep comparations.

The React Compiler, introduced in React 19, is an advanced feature that aims to optimize the development experience and performance of React applications. Also known as the "Babel Inline JSX Transform", this compiler improves the way JSX is transformed into JavaScript. Here are the main points about React Compiler:

Direct Transformation of JSX
Elimination of the dead code
Otimizations for compilers
Three Shaking Improvements

The React Compiler replace the old method of JSX transformation to something more closer of native execution of Javascript.

Hooks Actions

React 19 bring the concept of some hooks called actions. I will bring the main and interesting new hooks:

useTransition
useActionState
useFormStatus
useOptimistic
useDeferredValue
use

useTransition

To understand, let's create a component and see the before and after to compare the use of the new hook:

// Before Actions
export const UpdateNameComponent = () => {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async () => {
    setIsPending(true);
    const error = await updateName(name);
    setIsPending(false);
    if (error) {
      setError(error);
      return;
    } 
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

Now let's see now with React 19:

// Before Actions
export const UpdateNameComponent = () => {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

 const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      }

      console.log("SUCCESS");
    });
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

useActionState

The hook useActionState was introduced and projected to simplify the async operations on forms and another integrations that envolves state management and side effects.

The useActionState receive two parameters:

Async function that will return a new payload whith the new state of the promisse.
Initial State of the component before for any action to be executed.

import { useActionState } from "react";

const submitAction = async (prevState, formData) => {
  const response = await updateName(formData);
  return { ...prevState, data: response.data, status: response.success ? "SUCCESS" : "ERROR" };
};

const initialState = { data: null, status: "INIT" };

const FormComponent = () => {
  const [state, submit, isPending] = useActionState(submitAction, initialState);

  return (
    <form action={submit}>
      <input type="text" name="input" placeholder="Type something" />
      <button type="submit" disabled={isPending}>Submit</button>
      <div>
        {state.status === "INIT" && <p>Awaiting submission...</p>}
        {state.status === "SUCCESS" && <p>Submission successful!</p>}
        {state.status === "ERROR" && <p>Submission failed. Try again.</p>}
      </div>
    </form>
  );
};

useFormStatus

The useFormStatus is one of the <form/> integrations. It was introduced to form state management, specially on async operations and validations. We can say, that is a generic form to validate form, like react-forms.

import { useFormStatus } from "react";

const FormComponent = () => {
  const { isSubmitting, isValidating, isSuccessful, hasError } = useFormStatus();

  return (
    <form>
      <input type="text" name="name" placeholder="Name" />
      <button type="submit" disabled={isSubmitting || isValidating}>Submit</button>

      {isSubmitting && <p>Submitting...</p>}
      {isValidating && <p>Validating...</p>}
      {isSuccessful && <p>Form submitted successfully!</p>}
      {hasError && <p>Error occurred during submission.</p>}
    </form>
  );
};

Amazing, right?

useOptimistic

The useOptimistic allows the temporary update of the state, assuming that the operation was successfully or not.

This hook receive two parameters:

actualState: the real actual state that the hook should use as base.
updateFn (optional): this function will return the real state with the value received (setOptimisticState), calculating the new state optimistic.

import { useOptimistic } from "react";

const fakeApiCall = (newTitle) => new Promise((resolve, reject) => {
  setTimeout(() => {
    Math.random() > 0.5 ? resolve() : reject();
  }, 1000);
});

const TitleComponent = () => {
  const [title, setTitle] = useState("Old Title");
  const [optimisticTitle, setOptimisticTitle] = useOptimistic(title);
  const [error, setError] = useState(null);

  const handleUpdateTitle = async (newTitle) => {
    setError(null);
    setOptimisticTitle(newTitle);

    try {
      await fakeApiCall(newTitle);
      setTitle(newTitle);
    } catch (e) {
      setOptimisticTitle(title);
      setError("Failed to update title");
    }
  };

  return (
    <div>
      <h1>{optimisticTitle}</h1>
      {error && <p>{error}</p>}
      <button onClick={() => handleUpdateTitle("New Title")}>
        Update Title
      </button>
    </div>
  );
};

useDeferredValue

On the new version of React 19, was introced the initialValue option to useDeferredValue.

When initialValue is provided, the useDeferredValue will return it as value for the initial render of the component, and schedules a re-render in the background with the deferredValue returned.

import { useDeferredValue } from "react";

const Search({deferredValue}: {deferredValue: string}) {
  // On initial render the value is ''.
  // Then a re-render is scheduled with the deferredValue.
  const value = useDeferredValue(deferredValue, '');

  return (
    <Results query={value} />
  );
}

use

ANNND the use. Probably one of the amazing hooks. Just "use"! I'm kidding!

But now the side effects that you already faced using the useEffect. Now you can read a primise with use and the React will Suspend until the promise resolves.

import {use} from 'react';

const Comments = ({commentsPromise}) => {
  const comments = use(commentsPromise);
  return comments.map(comment => <p key={comment.id}>{comment}</p>);
}

const Page = ({commentsPromise}: {commentsPromise: Promise<any>}) => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Comments commentsPromise={commentsPromise} />
    </Suspense>
  )
}

So, until the promise resolve, react will render the Suspense as fallback component. Incredible, right???

REF as a prop

Now in new version of React 19, now we can access ref as a prop for function components. Now will no longer need forwardRef (OMG!!! Emotional)

const MyInput({placeholder, ref}) {
  return <input placeholder={placeholder} ref={ref} />
}

<MyInput ref={ref} />

Support for Document Metadata!!!

Now we can use the metadata on our components!!! It is a BIG step for SEO improvements!!!
In the past, tags like "

", "" and "" were reserved for placement in the "" section of the document. Now with the new version, React support for renderding document metadata tags in component natively. When React, render the component, it will see the "", "" and "" tags, and automatically hoist them to the section of document.

const BlogPost = ({post}) => {
  return (
    <article>
      <h1>{post.title}</h1>
      <title>{post.title}</title>
      <meta name="author" content="Josh" />
      <link rel="author" href="https://twitter.com/joshcstory/" />
      <meta name="keywords" content={post.keywords} />
      <p>
        Eee equals em-see-squared...
      </p>
    </article>
  );
}

Support for Stylesheets

Stylesheets, both externally linked () and inline (...), require careful positioning in the DOM due to style precedence rules. Building a stylesheet capability that allows for composability within components is hard, so users often end up either loading all of their styles far from the components that may depend on them, or they use a style library which encapsulates this complexity.

Now in React 19, we can use this complexity and provide the styles in our own component, using integration into concourrent rendering.

If you tell React the precedence of your stylesheet it will manage the insertion order of the stylesheet in the DOM and ensure that the stylesheet (if external) is loaded before revealing content that depends on those style rules.

function ComponentOne = () => {
  return (
    <Suspense fallback="loading...">
      <link rel="stylesheet" href="foo" precedence="default" />
      <link rel="stylesheet" href="bar" precedence="high" />
      <article class="foo-class bar-class">
        {...}
      </article>
    </Suspense>
  )
}

const ComponentTwo = () => {
  return (
    <div>
      <p>{...}</p>
      <link rel="stylesheet" href="baz" precedence="default" />  <-- will be inserted between foo & bar
    </div>
  )
}

And that's it folks!
There's a lot more features of React 19, like Server Components and Server Actions that was added. But these themes I want to introduce you in another article.

The main objective of this article was to bring the main news about React 19.

I hope you liked it!
Thank you so much and stay well always!

Contacts:
Linkedin: https://www.linkedin.com/in/kevin-uehara/
Instagram: https://www.instagram.com/uehara_kevin/
Twitter: https://twitter.com/ueharaDev
Github: https://github.com/kevinuehara
dev.to: https://dev.to/kevin-uehara
Youtube: https://www.youtube.com/@ueharakevin/

Dev.to Frontend Challenge: Take me to the Beach

Kevin Toshihiro Uehara — Wed, 05 Jun 2024 23:55:33 +0000

Dev.to Frontend Challenge June

This project it will be used for the dev.to frontend challenge. I choose the second challenge: the beaches.

Just Access the Project: Hosted Project

Github Repository

Repository

How it works?

I'm using the Vanilla Javascript and the mock API to provide the images and the lat/long. And with the coordinates I'm using Leaflet to display the map location of the beach.

All styles is a simple file of CSS.

For the fonts I'm using the Google Fonts.

Also, is responsive, with accessibility, performance and Best SEO!

How to run?

Just use the Live Server of VS Code extension. Click on HTML file with the right button of the mouse and click on Open Live Server. Access the http://localhost:5501/index.html.

This project is hosted on Vercel. Just access the https://devto-frontend-challenge-june.vercel.app/

Light House Metrics

DRY, KISS and YAGNI - Make Your Code Simple

Kevin Toshihiro Uehara — Fri, 17 May 2024 15:20:48 +0000

Hi There!!! How have you been? Everything alright? I hope so!

The previous post became so popular and I had no idea how interested you were about concepts of Software Engineer.
We know about SOLID, Design Patters and a lot of best practices.

Today I want to introduce you another practices: DRY, KISS and YAGNI. And I know what you thinking, what the hell are these concepts.

But trust me, these concepts are more easier than you thinking. So let's begin!

DRY - Don't Repeat Yourself

The name itself when we understand it already explains itself. When we are coding, propably you alreary saw some code that are repeating in the same or another files.

I don't want be boring and say that you DON'T need of this duplicity of code and you NEED to refact and create a generic or use the same code. Sometime we need repeat, it is not a probleme, 'cause sometimes we need to inject some new business rule or in some cases we need that piece of code in another file context.

I will create a simple function that find numbers:

But let's see a simple example:

function main() {
  const findTwoNumbers = [5, 1];
  const array = [1, 3, 6, 8, 3, 5, 2, 3];

  const findFirst = array.find((number) => number === findTwoNumbers[0]);
  const findSecond = array.find((number) => number === findTwoNumbers[1]);

  console.log(findFirst);
  console.log(findSecond);
}

main();

Notice that we are repeating the .find function. How about we separate this search into a function?

function findNumber(numberToFind: number, array: number[]) {
  const value = array.find((number) => number === numberToFind);
  console.log(value);
  return value;
}

function main() {
  const findTwoNumbers = [5, 1];
  const array = [1, 3, 6, 8, 3, 5, 2, 3];

  findNumber(findTwoNumbers[0], array);
  findNumber(findTwoNumbers[1], array);
}

main();

Easy beasy, isnt,it? We just separate the search of numbers in another function. Now we can reuse in another parts of project or modules.

KISS - Keep It Simple, Stupid!

This principle says that every code should be simple as possible. Also states that there is no value in a solution being “smart”, but rather in it being easily understandable.

This is because developers are often tempted to write “smart” solutions that use complex resources. In this case, a solution is better when using less inheritance, less polymorphism, fewer classes, etc.

But let's see a simple example to validate and leave an array with unique numbers and sort.

function selectionSort(arr: number[]) {
  for (let i = 0; i < arr.length; i++) {
    let indexMin = i;

    for (let j = i + 1; j < arr.length; j++) {
      if (arr[j] < arr[indexMin]) {
        indexMin = j;
      }
    }

    if (indexMin !== i) {
      let lesser = arr[indexMin];
      arr[indexMin] = arr[i];
      arr[i] = lesser;
    }
  }

  return arr;
}

function uniqueSortArray() {
  const array = [1, 2, 1, 2, 3, 3, 10, 5, 3, 1];

  const newArray = array.filter(
    (value, index, self) => self.indexOf(value) === index
  );

  const sortedArray = selectionSort(newArray);
  console.log(sortedArray);
}

uniqueSortArray();

Complicated? Yes! Problably for people that don't know about the helpers functions of Javascript it's ok!
But with ES6 we know that this function can be more simple!

Let's see:

function uniqueSortArray() {
  const array = [1, 2, 1, 2, 3, 3, 10, 5, 3, 1];
  const sortedArray = [...new Set(array.sort())];
  console.log(sortedArray);
}

uniqueSortArray();

Woooooow! Gosh! It's turn a lot of more simple!!!!
Just using the functions of ES6.
Amazing isn'it?

YAGNI - You Aren’t Gonna Need It

The last principle, is another widely adopted principle of software development that states that features should only be added when necessary.

The argument is that developers don't waste time creating extraneous elements that may not be necessary and could hinder or slow down the development process.

Let's create a simple example just to understand:

interface Animal {
  walk(): string;
  noise(): string;
  makeWalkAndNoise?: VoidFunction;
}

class Dog implements Animal {
  walk(): string {
    return "Dog is Walking";
  }
  noise(): string {
    return "rouf rouf";
  }
}

Notice that the method makeWalkAndNoise is not beeing used.
And if will not be used and very class instanciation, probably we don't need these method.

interface Animal {
  walk(): string;
  noise(): string;
}

class Dog implements Animal {
  walk(): string {
    return "Dog is Walking";
  }
  noise(): string {
    return "rouf rouf";
  }
}

And that's it! Just remove and turn simple. And remember of the ISP (Interface Segregation Principle) of SOLID?
A class should not be forced to implement interfaces and methods that will not be used.

We can see the same principle here in this example.

And that's it folks!
I hope you liked! (And be famous as the previous article lol)

Thank you so much and Stay Well Always!

SOLID - The Simple Way To Understand

Kevin Toshihiro Uehara — Wed, 01 May 2024 18:18:56 +0000

Hi there!!! How have you been doing? Are you all right? I hope so!

Today I'm going to talk about a theme that's everyone talks or write about. But sometimes it's difficult to undersand every principle. I'm talking about SOLID.

A lot of people, when I ask about SOLID, propably always remember of the first principle (Single Responsability Principle). But when I ask about another, some people don't remember or feel difficult to explain. AND I UNDERSTAND.

Really, it's difficult to explain, without coding or remender the definition of each principle. But in this article, I want to present each principle on easy way. So I will use Typescript to exemplify.

So let's begin!

Single Responsability Principle - SRP

The easier principle to understand and remember.
When whe are coding, it's easy to identify when we are forgetting the principle.

Let's imagine that we have a TaskManager class:

class TaskManager {
  constructor() {}
  connectAPI(): void {}
  createTask(): void {
    console.log("Create Task");
  }
  updateTask(): void {
    console.log("Update Task");
  }
  removeTask(): void {
    console.log("Remove Task");
  }
  sendNotification(): void {
    console.log("Send Notification");
  }
  sendReport(): void {
    console.log("Send Report");
  }
}

All right! Probably do you notice thee problem, isnt'it?
The class TaskManager have a lot of responsabilities that don't belong to her. For example: sendNotification and sendReport methods.

Now, let's refact and apply the solution:

class APIConnector {
  constructor() {}
  connectAPI(): void {}
}

class Report {
  constructor() {}
  sendReport(): void {
    console.log("Send Report");
  }
}

class Notificator {
  constructor() {}
  sendNotification(): void {
    console.log("Send Notification");
  }
}

class TaskManager {
  constructor() {}
  createTask(): void {
    console.log("Create Task");
  }
  updateTask(): void {
    console.log("Update Task");
  }
  removeTask(): void {
    console.log("Remove Task");
  }
}

Simple, isnt'it? We just separete the notification and report in specified classes. Now we are respecting the Single Principle Responsability!

The definition: Each class must have one, and only one, reason to change.

Open Closed Principle - OCP

The second principle. Also, I consider easy to understand. A tip for you, if you notice that you have a lot of conditions in some method to verify something, perhaps you are in case of the OCP.

Let's imagine the following example of Exam Class:

type ExamType = {
  type: "BLOOD" | "XRay";
};

class ExamApprove {
  constructor() {}
  approveRequestExam(exam: ExamType): void {
    if (exam.type === "BLOOD") {
      if (this.verifyConditionsBlood(exam)) {
        console.log("Blood Exam Approved");
      }
    } else if (exam.type === "XRay") {
      if (this.verifyConditionsXRay(exam)) {
        console.log("XRay Exam Approved!");
      }
    }
  }

  verifyConditionsBlood(exam: ExamType): boolean {
    return true;
  }
  verifyConditionsXRay(exam: ExamType): boolean {
    return false;
  }
}

Yeah, propably you already saw this code several times. First we are breaking the first principle SRP and making a lot of conditions.

Now imagine if another type of examination appears, for example, ultrasound. We need to add anonther method to verify and another condition.

Let's refact this code:

type ExamType = {
  type: "BLOOD" | "XRay";
};

interface ExamApprove {
  approveRequestExam(exam: NewExamType): void;
  verifyConditionExam(exam: NewExamType): boolean;
}

class BloodExamApprove implements ExamApprove {
  approveRequestExam(exam: ExamApprove): void {
    if (this.verifyConditionExam(exam)) {
      console.log("Blood Exam Approved");
    }
  }
  verifyConditionExam(exam: ExamApprove): boolean {
    return true;
  }
}

class RayXExamApprove implements ExamApprove {
  approveRequestExam(exam: ExamApprove): void {
    if (this.verifyConditionExam(exam)) {
      console.log("RayX Exam Approved");
    }
  }
  verifyConditionExam(exam: NewExamType): boolean {
    return true;
  }
}

Woow, much better! Now if another type of examination appears we just implements the interface ExamApprove. And if another type of verification for the exam comes up, we only update the interface.

Definition: Software entities (such as classes and methods) must be open for extension but closed for modification

Liskov Substitution Principle - LSP

One of more complicated to understand and examplain. But how I said, I will make easier to you understand.

Imagine that you have an university and two types of students. Student and Post Graduated Student.

class Student {
  constructor(public name: string) {}

  study(): void {
    console.log(`${this.name} is studying`);
  }

  deliverTCC() {
    /** Problem: Post graduate Students don't delivery TCC */
  }
}

class PostgraduateStudent extends Student {
  study(): void {
    console.log(`${this.name} is studying and searching`);
  }
}

We have a problem here, we are extending of Student, but the Post Graduated Student don't need to deliver a TCC. He only study and search.

How we can resolve this problem? Simple! Let's create a class Student and separete the Student of graduation and Post Graduation:

class Student {
  constructor(public name: string) {}

  study(): void {
    console.log(`${this.name} is studying`);
  }
}

class StudentGraduation extends Student {
  study(): void {
    console.log(`${this.name} is studying`);
  }

  deliverTCC() {}
}

class StudentPosGraduation extends Student {
  study(): void {
    console.log(`${this.name} is studying and searching`);
  }
}

Now we have a better way to approach to separete their respective responsabilities. The name of this principle can be scary but its principle is simple.

Definition: Derived classes (or child classes) must be able to replace their base classes (or parent classes)

Interface Segregation Principle - ISP

To understand this principle, the trick is remember of the definition. A class shound not be forced to implement methods that will not be used.

So imagine that you have a class the implement a interface that its never be used.

Let's imagine a scenario with an Seller and a Recepsionist of some shop. Both seller and recepsionist have a sallary, but only a seller have a commission.

Let's see the problem:

interface Employee {
  salary(): number;
  generateCommission(): void;
}

class Seller implements Employee {
  salary(): number {
    return 1000;
  }
  generateCommission(): void {
    console.log("Generating Commission");
  }
}

class Receptionist implements Employee {
  salary(): number {
    return 1000;
  }
  generateCommission(): void {
    /** Problem: Receptionist don't have commission  */
  }
}

Both implements the Employee interface, but the receptionist don't have comission. So we are force to implement a method that never it will be used.

So the solution:

interface Employee {
  salary(): number;
}

interface Commissionable {
  generateCommission(): void;
}

class Seller implements Employee, Commissionable {
  salary(): number {
    return 1000;
  }

  generateCommission(): void {
    console.log("Generating Commission");
  }
}

class Receptionist implements Employee {
  salary(): number {
    return 1000;
  }
}

Easy beasy! Now we have two interfaces! The employer class and the comissionable interface. Now only the Seller will implement the two interfaces where it will have the commmission. The receptionist don't only implements the employee. So the Receptionist don't be forced to implement the method that will never be used.

Definition: A class should not be forced to implement interfaces and methods that will not be used.

Dependency Inversion Principle - DIP

The last one! By name you can think that is hard to remember! But probably you already see this principle every time.

Imagine that you have a Service class that integrates with a Repository class that will call the Database, for example a Postgress. But if the repository class change and the database change for a MongoDB, for example.

Let's see the example:

interface Order {
  id: number;
  name: string;
}

class OrderRepository {
  constructor() {}
  saveOrder(order: Order) {}
}

class OrderService {
  private orderRepository: OrderRepository;

  constructor() {
    this.orderRepository = new OrderRepository();
  }

  processOrder(order: Order) {
    this.orderRepository.saveOrder(order);
  }
}

We notice that the repository is OrderService class is directly coupled to the concrete implementation of OrderRepository class.

Let's refact this example:

interface Order {
  id: number;
  name: string;
}

class OrderRepository {
  constructor() {}
  saveOrder(order: Order) {}
}

class OrderService {
  private orderRepository: OrderRepository;

  constructor(repository: OrderRepository) {
    this.orderRepository = repository;
  }

  processOrder(order: Order) {
    this.orderRepository.saveOrder(order);
  }
}

Nice! Much better! Now we receive the repository as parameter on the constructor to instanciate and use. Now we depend of the abstraction and we don't need to know what repository we are using.

Definition: depend on abstractions rather than concrete implementations

Finishing

So how you feeling now? I hope that with this easy examples you can remember and understand what and why to use this principles in your code. It makes easier to undestand and scale, besides you are applying clean code.

I hope you that you liked!
Thank you so much and stay well always!

WebApp BFF (Backend-For-Frontend) Concept

Kevin Toshihiro Uehara — Mon, 25 Mar 2024 23:45:33 +0000

Hi there!!! It's nice to have you here again! How have you been? How you doing? Everything all right? I hope so!

In this article I want to introduce you de concept of BFF (Backend-For-Frontend). Let's create an application client and a server to understand, why this concept is so important that you know.

Imagine that your webapp needs some user datas, like posts, albums, todos, user info. Propabaly you will fetch this data using three requests for each service. Then your client is making 4 requests to add the datas and propably there's some informantions and some endpoint that you app don't need it.

Another problem, if you are doing 4 requests your app will need to wait for this 4 Promises wait to finish to render or format the data received.

Or if you have multiples devices apps, a web application, desktop and a mobile app. Probably the data that you will need it's going to be different on each case. Some data in your web applicaton, don't need in your mobile app.

But it major cases, we found the problem of performance. As I mentioned before, imagine that you have 4 ou 5 request to wait and after that continue with data manipulation.

Here is an example:

So let's create this example!

I will use Vite with React and Typescript for our web application.

I will create a directory called, bff-example:

mkdir bff-example

And here I will create both the webapp and the server (simulating the BFF).

First let's create the our webapp using:

yarn create vite webapp --template react-ts

I will enter on project created, install the dependencies (I will use yarn) and run and application

cd webapp
yarn
yarn dev

So here we are, now we have our web application:

Now I will create the types:

src/types.ts

export interface DataResponse {
  user: User;
  albums: Album[];
  todos: Todo[];
  posts: Post[];
}

export interface Todo {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

export interface User {
  id: number;
  name: string;
  username: string;
  email: string;
}

export interface Album {
  userId: number;
  id: number;
  title: string;
}

export interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

I will use the JSON placeholder to fake our services and API's. you can find: https://jsonplaceholder.typicode.com/

Now I will remove the App.css and index.css. And create the file app.module.css using CSS Modules.

src/app.module.css

.container {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .btn {
    padding: 4px;
    color: #fff;
    background-color: #1d4ed8;
    height: 2.8em;
    width: 8em;
    border-radius: 5px;
    cursor: pointer;
  }

  .btn:hover {
    background-color: #3b82f6;
  }

  .input {
    height: 1.8em;
    width: 20em;
  }

Now I will change the App.tsx to:

src/App.tsx

import { useState } from "react";

import { DataResponse } from "./types";
import style from "./app.module.css";

function App() {
  const [data, setData] = useState<DataResponse>();
  const [id, setId] = useState<number>();

  const getData = async () => {};

  return (
    <main className={style.container}>
      <label htmlFor="userId"></label>
      <input
        className={style.input}
        type="number"
        name="userId"
        id="userId"
        onChange={(e) => setId(+e.target.value)}
      />
      <button className={style.btn} onClick={getData}>
        Fetch
      </button>
      <h1>Response:</h1>
      {data && <pre>{JSON.stringify(data, null, 4)}</pre>}
    </main>
  );
}

export default App;

Now we have this screen:

Sorry, I need some styles (LoL). But notice we have an input to insert the user ID and a button to fetch the data when clicked.

Now in getData function let's call the endpoints:

const BASE_URL = "https://jsonplaceholder.typicode.com";

const getData = async () => {
    const userData = await fetch(`${BASE_URL}/users/${id}`);
    const user: User = await userData.json();

    const postsData = await fetch(`${BASE_URL}/posts?userId=${user.id}`);
    const posts: Post[] = await postsData.json();

    const todosData = await fetch(`${BASE_URL}/todos?userId=${user.id}`);
    const todos: Todo[] = await todosData.json();

    const albumsData = await fetch(`${BASE_URL}/albums?userId=${user.id}`);
    const albums: Album[] = await albumsData.json();

    const formattedResponse = { user, posts, todos, albums };
    setData(formattedResponse);
  };

Wooww, and now you can see the problem, isn’t? We are making 5 requests on the client side. We need to wait this five requests, to after that, format and render on screen.

BFF Concept

Now let's create a server using NestJS with Node, to simulate our BFF:
On directory bff-example, let's create our project:

npx @nestjs/cli new bff-server

Now I will create the types, similiar on frontend:

src/types.ts

export interface DataResponse {
  user: User;
  albums: Album[];
  todos: Todo[];
  posts: Post[];
}

export interface ErrorDataResponse {
  statusCode: number;
  status: number;
  message: string;
}

export interface Todo {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

export interface User {
  id: number;
  name: string;
  username: string;
  email: string;
}

export interface Album {
  userId: number;
  id: number;
  title: string;
}

export interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

I will create the endpoint of GET type and receive the user id as param:

src/app/app.controller.ts

import { Controller, Get, Param } from '@nestjs/common';

import { AppService } from './app.service';

@Controller('data')
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get(':id')
  getData(@Param('id') id: string) {
    return this.appService.getData(id);
  }
}

Now on our Service, let's change to call the endpoints that was on client here:

src/app/app.service.ts

import { Injectable } from '@nestjs/common';
import {
  Album,
  DataResponse,
  ErrorDataResponse,
  Post,
  Todo,
  User,
} from '../type';

const BASE_URL = 'https://jsonplaceholder.typicode.com';

@Injectable()
export class AppService {
  async getData(id: string): Promise<DataResponse | ErrorDataResponse> {
    try {
      const userData = await fetch(`${BASE_URL}/users/${id}`);
      const user: User = await userData.json();

      const postsData = await fetch(`${BASE_URL}/posts?userId=${user.id}`);
      const posts: Post[] = await postsData.json();

      const todosData = await fetch(`${BASE_URL}/todos?userId=${user.id}`);
      const todos: Todo[] = await todosData.json();

      const albumsData = await fetch(`${BASE_URL}/albums?userId=${user.id}`);
      const albums: Album[] = await albumsData.json();

      return { user, posts, todos, albums };
    } catch (error) {
      return { status: 500, message: 'Error', statusCode: 1000 };
    }
  }
}

Now let's start our application using:

yarn start

Now if we access the endpoint: http://localhost:3000/data/1

We will receive the same data:

Amazing, isn’t? Now the responsability of the requests it will be made by the server. So now the client will not be overloaded or have performance problems. The BFF and the another services can scale (using Docker and Kubernetes) to respond for our web application.

Now let's go back to our web app and change the getData function:

const getData = async () => {
    // Here we can see an example of BFF
    // We can call the four calls here, but it was made on BFF service
    // leaving the frontend call only one endpoint
    const response = await fetch(`http://localhost:3000/data/${id}`);
    const data: DataResponse = await response.json();
    setData(data);
  };

And let's see the same result:

But now the BFF is responsible to fetch the data and manipulate for our clients (web application, desktop, mobile app).

I want to thank Adriana Saty for giving me the idea to create this article.
Saty Linkedin: https://www.linkedin.com/in/adriana-saty/

And that's it, people!
I hope you liked it.
Thank you so much and stay well, always!!!