DEV Community: AILI Fida Aliotti Christino

Meet uv: The Lightning-Fast Python Toolchain That JS Devs Will Love 🚀

AILI Fida Aliotti Christino — Tue, 13 May 2025 23:32:43 +0000

If you’re a JavaScript or TypeScript developer venturing into Python, you might find the ecosystem’s tooling a bit… fragmented. My old workflow looked like this:

Download PyCharm Community Edition (free, but not my favorite)
Let PyCharm set up the virtual environment and manage Python versions
Track dependencies with a requirements.txt file (pip freeze > requirements.txt)
Bounce between Cursor (my VSCode alternative) and PyCharm, which was never ideal 😅

Honestly, it worked, but it felt clunky, especially compared to the unified tooling I enjoyed in JS/TS land.

Then, I discovered uv. And wow, it’s a game-changer! 🚀

"uv: A single tool to replace pip, pip-tools, pipx, poetry, pyenv, twine, virtualenv, and more"

In my head, it was like : "Say no more!"

UV is awesooome!

uv is an all-in-one Python toolchain, written in Rust for blazing fast performance-often 10–100x faster than pip. It combines the best features of all the major Python tools into a single, consistent CLI.

But here’s what makes it stand out:

Lightning Fast: Install, sync, and manage dependencies at record speed ⚡️.
All-in-One: Handles package installs, virtual environments, Python version management, project scaffolding, dependency locking, and even publishing-no more juggling multiple tools.
Universal Lockfile: Uses a single lockfile (uv.lock) for reliable, reproducible builds across platforms.
Global Cache: Saves disk space by deduplicating dependencies across projects.
Seamless Tooling: Run CLI tools (like linters or formatters) directly, à la pipx, but faster.
Cross-platform: Works on macOS, Linux, and Windows.
Easy Install: No Rust or Python required-just a single shell command

Usage

Let's look at some usage on how you can use it and make it feel a lot more like modern JS/TS tooling:

1. You need to install uv (no Rust or Python needed):

curl -LsSf https://astral.sh/uv/install.sh | sh

Or use the old good pip

pip install uv

2. Create a new project:

uv init myproject
cd myproject

Seems familiar? Yeah it does!

3. Add dependencies:

uv add fast api
uv add httpx

Just like you would do with pnpm or bun 😇

4. Sync your environment (installs everything in your lockfile):

uv sync

No more fiddling with pyenv or system installs 😝 - uv handles it all 😎

5. Manage Python versions:

uv python install 3.12
uv python pin 3.12

Remember the day you've installed nvm for node and npm?

6. Run scripts or tools:

uv run python main.py
uv run ruff format
uv run pyright

You can even run tools in ephemeral environments, just like pipx:

uvx pycowsay 'hello world!'

7. Build and publish:

uv build
uv publish

Build, publish and BOOM, just that easy!

8. See your dependency tree:

uv tree

Ok, that one is just cool 😆

Of course, there is so much more to cover! But i suggest you give it a try and read the DOCUMENTATION (i see you asking ChatGPT or Deepseek 👀, NO! JUST READ THE DOCS!!!)

You'll just love it (Especially If You’re from JS/TS)

Unified workflow: Like npm or pnpm, uv gives you a single tool for everything-no more context switching between pip, venv, pipx, poetry, etc.
Speed: Written in Rust, uv is fast. Dependency resolution and installs are noticeably quicker, even on big projects and save times.
Modern project management: Uses pyproject.toml and lockfiles for reproducibility, just like package-lock.json or pnpm-lock.yaml.
Efficient CI/CD: uv integrates smoothly with GitHub Actions and other CI tools, making automation a breeze.
Low friction: If you’re used to VSCode or Cursor, you can stick with your favorite editor-uv works from the terminal, no IDE lock-in.

Wrapping up!

If you’re tired of Python’s fragmented tooling, give uv a try. It’s fast, modern, and unifies everything you need for Python development-so you can focus on building, not babysitting your environment. 🐍✨

Ready to level up your Python workflow? uv has you covered!
That's all folks!

Tailwindcss is not Bootstrap nor Materialize

AILI Fida Aliotti Christino — Sat, 12 Oct 2024 00:13:23 +0000

Tailwind CSS has taken the web development world by storm 🌪️, but misconceptions about its nature persist. During a recent design system planning discussion, I nearly dropped my tea ☕ (i don't drink coffee, sorry) when a colleague casually compared Tailwind CSS to Bootstrap and Materialize 😱. This shocking revelation was like discovering that my cat thinks it’s a dog! 🐱🐶

So, grab your popcorn 🍿 as I set the record straight and unveil the true identity of Tailwind CSS!

Small intro

In this article, we'll dive deep 🏊‍♂️ into what Tailwind CSS really is, exploring its unique approach to styling and why it stands apart from traditional CSS frameworks. By the end, you'll understand why comparing Tailwind CSS to Bootstrap or other component-based frameworks is like comparing apples to oranges 🍎🍊

What Tailwind CSS Is Not ❌

Before we explore Tailwind's true nature, let's dispel some myths:

Not a Component Library: Unlike Bootstrap or Materialize, Tailwind CSS doesn't provide pre-built components out of the box 📦
Not Design-Opinionated: It doesn't impose a specific visual style on your projects 🎨
Not Just Another CSS Framework: While it's technically a CSS framework, its utility-first approach sets it apart from traditional frameworks 🚀

And here are some common heard misconceptions:

🗣 "Tailwind CSS is just like inline styles" : Nope, it's not. Unlike inline styles, Tailwind allows you to use advanced features like pseudo-classes, media queries, and animations. It provides a utility-first approach that results in fewer CSS classes compared to inline styling
🗣 "You don't need to know CSS to use Tailwind" : This is false. A solid understanding of CSS is crucial for effectively using Tailwind CSS4. While it simplifies many aspects of styling, knowing CSS fundamentals helps in understanding how the utility classes work and how to customize them when needed
🗣 "Tailwind CSS can't be customized" : This couldn’t be further from the truth. In fact, it is designed to be highly extensible and customizable

Now that we've cleared up some misconceptions, let's explore what makes Tailwind CSS truly unique and why it's revolutionizing the way developers approach web styling.

A Utility-First CSS Framework

At its core, Tailwind CSS is a utility-first CSS framework. This means it provides a set of low-level utility classes that you can use to build custom designs directly in your HTML. Instead of writing custom CSS for each element, you apply pre-defined classes that handle specific styling properties. It's like having a Swiss Army knife 🔪 for your CSS!

For example, instead of writing:

.button {
  padding: 0.5rem 1rem;
  background-color: blue;
  color: white;
  border-radius: 0.25rem;
}

You would use Tailwind classes in your HTML:

<button class="px-4 py-2 bg-blue-500 text-white rounded">Click me</button>

A Design System in Disguise

While Tailwind doesn't provide pre-built components, it offers a comprehensive design system. It comes with a carefully crafted set of default values for colors, spacing, typography, and more. These defaults are customizable, allowing you to tailor Tailwind to your project's specific design needs.

Take a look at this custom configuration:

// tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          light: '#4da6ff',
          DEFAULT: '#0066cc',
          dark: '#004080',
        },
        secondary: {
          light: '#ffb366',
          DEFAULT: '#ff8000',
          dark: '#cc6600',
        },
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
      fontFamily: {
        sans: ['Roboto', 'Arial', 'sans-serif'],
        serif: ['Merriweather', 'Georgia', 'serif'],
      },
      fontSize: {
        'xs': '.75rem',
        'sm': '.875rem',
        'base': '1rem',
        'lg': '1.125rem',
        'xl': '1.25rem',
        '2xl': '1.5rem',
        '3xl': '1.875rem',
        '4xl': '2.25rem',
        '5xl': '3rem',
      },
      borderRadius: {
        'sm': '0.125rem',
        DEFAULT: '0.25rem',
        'md': '0.375rem',
        'lg': '0.5rem',
        'full': '9999px',
      },
    },
  },
  variants: {
    extend: {
      backgroundColor: ['active'],
      textColor: ['visited'],
    },
  },
}

Why Tailwind CSS Stands Apart

Flexibility and Customization

Unlike Bootstrap or Materialize, which provide a set of opinionated components, Tailwind gives you the building blocks to create your own unique designs. This flexibility allows for more creative freedom and helps avoid the "Bootstrap look" that many websites fall into.

Performance Benefits

Its utility-first approach can lead to smaller CSS file sizes, especially when combined with its built-in purge feature. This feature removes unused styles in production, resulting in a leaner, more performant stylesheet. Your website will feel like it's on steroids! 💪

A Developer Experience Enhancer

It significantly improves the developer experience by:

Reducing context switching: You can style elements without leaving your HTML. No more juggling multiple files! 🤹‍♂️
Promoting consistency: The predefined classes encourage consistent spacing, colors, and other design elements across your project. Your design will be as harmonious as a well-tuned orchestra 🎻
Speeding up development: With utility classes at your fingertips, you can rapidly prototype and iterate on designs. You'll feel like you have superpowers!⚡ And with the Tailwindcss Intellisense vscode extension, you can get autocompletion and linting for its classes and added custom classes

And That's a wrap 🎁

Tailwind CSS is not just another CSS framework. By providing a set of low-level utility classes, it empowers developers to create unique, efficient, and maintainable designs without the constraints of traditional CSS frameworks.

So the next time someone compares Tailwind to Bootstrap, you'll be equipped to explain why that comparison misses the mark – and why Tailwind might just be the game-changer your project needs. Happy coding! 🎉👨‍💻

Client or Server component ?

AILI Fida Aliotti Christino — Sat, 30 Dec 2023 09:31:38 +0000

Recently, I had a project that needed to be rewritten from React to Next.js. I worked with individuals who weren't familiar with server components and how they work, so they kept asking me constantly:

💬 How do i know if this component is a server one or a client one?

My first answer (a silly one you may say 😕) was:

💬 Just check at the top of the file if it contains 'use client' or not" 😇

Just for those who didn't made the jump to NextJS yet, all components in NextJS are server by default so if you needed a client one, you have to add "use client" at the top of your file.

Later, they came to me again with another question:

Ok, we got it, when there is "use client" at the top, it is a client one but how comes this other component that doesn't have "use client" inside it claims to be one?

I was suggested to rename every server file into something explicit like ServerTagComponent 🤧

But then i remembered a video of Jack Herrington about state management in Next.JS with this kind of segmentation in his components:

Wouldn't it be cool to have something like this in your components 🤩?

So the general idea is to implement a higher order component that adds a label for each component that uses it.

The final result should be something like this:

And every component that needs it should have a withComponentIdentifier in order to display these boxes.

Our HOC component

A Higher Order Component (HOC) is a function in React that takes a component and returns a new component with additional features or behaviors.

It's a way to reuse component logic and share functionalities among different parts of your application.

Let's start by creating our HOC file:

// components/ComponentIdentifier
import type { ComponentType, FC } from 'react';

export function withComponentIdentifier<P extends object>(
  WrappedComponent: ComponentType<P>
): ComponentType<P> {
  const WithComponentIdentifier: FC<P> = (props) => {
    const isClient = typeof window !== 'undefined';
    const display = isClient ? 'client' : 'server';

    return process.env.NODE_ENV === 'development' ? (
      <div>
        <p className={`hoc-text ${display}`}>This is a {display} component</p>
        <div className={`hoc-content ${display}`}>
          <WrappedComponent {...props} />
        </div>
      </div>
    ) : (
      <WrappedComponent {...props} />
    );
  };

  return WithComponentIdentifier;
}

This is a simple HOC component written in TypeScript, but the trick here is on this line:

  const isClient = typeof window !== 'undefined';

Because a server component is rendered by the server then it shouldn't have a window property.

💡 By adding the line process.env.NODE_ENV === 'development' we make sure that the HOC only displays on development mode. Read more about that here

Usage

Now that we have our HOC component, let's use it. Create any tsx file that you want inside our app folder. I chose to name mine client.tsx then create a simple client component:

// app/client.tsx
'use client';

const ClientComponent = () => {
  return <p>This is a simple client component</p>;
};

export default ClientComponent;

Then create another component called server.tsx:

const ServerComponent = () => {
  return <p>This is a server component</p>;
};

export default ServerComponent;

Finally, create a component that we will identify:

// app/unknown.tsx
const UnknownComponent = () => {
  return <p>This is an unknown component</p>;
};

export default UnknownComponent;

We will use this component inside each file created previously to determine either it's a client or a server component.

Your final page.tsx should be like this:

import ClientComponent from './client';
import ServerComponent from './server';

export default async function HomePage() {
  return (
    <>
      <ClientComponent />
      <ServerComponent />
    </>
  );
}

Now, let's use our HOC inside these components:

// app/client.tsx
'use client';

import { withComponentIdentifier } from '@/components/ClientOrServer';

const ClientComponent = () => {
  return <p>This is a simple client component</p>;
};

export default withComponentIdentifier(ClientComponent);

And the server.tsx:

import { withComponentIdentifier } from '@/components/ClientOrServer';

const ServerComponent = () => {
  return <p>This is a server component</p>;
};

export default withComponentIdentifier(ServerComponent);

Just like that, we now have these cool boxes:

Use case

Although these components are clearly explicit, there is a scenario where you might not know if a component is nested inside a client or server component. This is where our Higher Order Component (HOC) proves to be truly useful. Let's consider a situation where we call our UnknownComponent within our ClientComponent (and remember to include our HOC in our UnknownComponent).

// app/client.tsx
'use client';
import UnknownComponent from './unknown';

const ClientComponent = () => {
  return (
    <>
      <p>This is a simple client component</p>
      <UnknownComponent />
    </>
  );
};

export default ClientComponent;

Notice that i removed the HOC from the ClientComponent resulting to identify just the unknown component.

Now, let's just move our UnknownComponent inside our ServerComponent:

// app/server.tsx
import UnknownComponent from './unknown';

const ServerComponent = () => {
  return (
    <>
      <p>This is a server component</p>
      <UnknownComponent />
    </>
  );
};

export default ServerComponent;

Here is the result:

Conclusion

With the usage of that HOC, everyone can now wrap components to determine if its a client one or a server one without asking all the time! 😄😇

Thanks for reading!

Fetching data the correct way in React

AILI Fida Aliotti Christino — Thu, 09 Mar 2023 00:53:51 +0000

If you've worked on a React project, chances are you have fetched data from APIs. But have you never asked yourself if your way of doing was correct?

Don't get me wrong, when i say "correct", i don't mean that i have the perfect solution to this but we will attempt to eradicate data mismatch by validating it before consuming it.

In order to do that, we will use two main tools: TanStack Query and Zod

TanStack Query or React Query

What is React Query?

React Query is a powerful library for managing data in React applications. It offers an elegant and efficient way to handle complex data fetching, caching, and synchronization, allowing to build responsive and high-performing applications with ease.

Why should you use it?

One of the major benefits of React Query is its ability to cache data. This means that once data is fetched from an API, it is stored in memory and can be accessed quickly and efficiently. This is especially useful for applications that rely heavily on data fetching, as it helps to reduce the load on the network and improve performance

React Query is also easy to integrate into existing React applications. It works seamlessly with other popular libraries such as Redux and MobX, and can be easily integrated into a wide range of different architectures and design patterns.

Zod

Zod is a powerful TypeScript schema validation library that allows to define and validate data schemas with ease. It provides a simple and intuitive API for validating data, ensuring that it conforms to a specific set of rules and constraints. This makes easier for us to catch errors and bugs early in the development process.

TypeScript + React Query + Zod = Peace of mind 😇

Ok, enough theory, let's get down to practice. First, let's create a simple TypeScript React Vite app but running:

> pnpm create vite 
> ✔ Project name: datafetching
> ✔ Select a framework: › React
> ✔ Select a variant: › TypeScript

Let's install our dependencies:

> pnpm add zod @tanstack/react-query

For our example, we'll use the Dev.to API which will return every article a user has published. In our case, this API will return every article i wrote (go read them if you haven't yet 😁).

OK, let's see what we got here:

Our first task is to create types for this json response. I found this website that can generate it for us. Just paste the json result response and it will generate interfaces for you, i'll just change interface by type, but honestly you can leave it as it is (let's not talk about why i've made this change as it's not the main concern of this article).

And this is what we get:

As you can see, we will have two interfaces: Article and User. Let's create a folder named types inside our src folder and create two respective files: article.ts and user.ts.

// user.ts

export type User = {
    name: string;
    username: string;
    twitter_username: string;
    github_username: string;
    user_id: number;
    website_url: string;
    profile_image: string;
    profile_image_90: string;
}

// article.ts

import { User } from "./user";

export type Articles = {
    type_of: string;
    id: number;
    title: "string;"
    description: "string;"
    readable_publish_date: string;
    slug: string;
    path: string;
    url: string;
    comments_count: number;
    public_reactions_count: number;
    collection_id?: null;
    published_timestamp: string;
    positive_reactions_count: number;
    cover_image: string;
    social_image: string;
    canonical_url: string;
    created_at: string;
    edited_at?: string | null;
    crossposted_at?: null;
    published_at: string;
    last_comment_at: string;
    reading_time_minutes: number;
    tag_list?: (string)[] | null;
    tags: string;
    user: User;
}

Ok, let's head back to our App.tsx file and delete everything:

function App() {
  return <div></div>;
}

export default App;

Good! Now, our main goal is to fetch and display data from our API using React Query and Zod. Let's start by initializing our react query client. Open main.tsx and make this changes:

// main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

// Create a client
const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>
);

We can now use the React Query inside our App.tsx

import { useQuery } from "@tanstack/react-query";

function App() {
  const getArticles = () => {};

  const { data, isLoading, isFetching, error, isError } = useQuery({
    queryKey: ["articles"], // query key that will help to cache data, you can set it whatever you like
    queryFn: getArticles, // the function that will be executed to actually fetch the data
  });

  return <div></div>;
}

export default App;

Let's try to implement the getArticles function to actually fetch the data.

Naive approach

const { VITE_BASE_URL } = import.meta.env;

const getArticles = (): Promise<Article[]> =>
    fetch(VITE_BASE_URL).then((res) => res.json());

Of course, here we are using an env key that will be loaded from .env file that you need to create.

// .env
// If you want, you can replace the username by yours to fetch your articles published on [Dev.to](https://dev.to/)
VITE_BASE_URL=https://dev.to/api/articles?username=lynxgsm

Here is our final App.tsx file:

import { useQuery } from "@tanstack/react-query";
import { Article } from "./types/article";
import { z } from "zod";

function App() {
  const { VITE_BASE_URL } = import.meta.env;

  const getArticles = (): Promise<Article[]> =>
    fetch(VITE_BASE_URL).then((res) => res.json());

  const { data, isLoading, isFetching, error, isError } = useQuery({
    queryKey: ["articles"], // a key that will help to retrieve data
    queryFn: getArticles, // the function that will be executed to actually fetch the data
  });

  if (isLoading) {
    return <p>Data is loading...</p>;
  }

  if (isFetching) {
    return <p>Data is fetching...</p>;
  }

  if (error) {
    return <p>There was an error when fetching your data.</p>;
  }

  return (
    <ul>
      {data?.map((article) => {
        return <li key={article.id}>{article.title}</li>;
      })}
    </ul>
  );
}

export default App;

Let's start our app and see that our data has been fetched correctly.

Ok, you've probably used this way of fetching data before and you are yelling at your computer right now that there is nothing wrong with it.

But trust me on this one: you are not doing it the right way. Let me explain, you are telling your TypeScript code that the data returned is of type Array of Article which is not correct.

Let's try to add another key inside our User type:

// user.ts

export type User = {
    name: string;
    username: string;
    twitter_username: string;
    github_username: string;
    user_id: number;
    website_url: string;
    profile_image: string;
    profile_image_90: string;
    avatar: string; // This is the new key
}

We've added the avatar key although it doesn't exists in our data. Then, let's try to display it:

// App.tsx

return (
    <ul>
      {data?.map((article) => {
        return <li key={article.id}>{article.title} - {article.user.avatar}</li>;
      })}
    </ul>
  );

Let's rerun our App:

As you can see, even though the data doesn't exist, TypeScript will try to display it without any error. And that may be problematic if you are doing some operations with the incorrect field.

That's where Zod comes in action.

Validating data with Zod

Zod is validating data with schemas. Let's create a folder named schemas inside src and create user.ts and article.ts.

// user.ts

import { z } from 'zod'

export const UserSchema = z.object({
    name: z.string(),
    username: z.string(),
    twitter_username: z.string(),
    github_username: z.string(),
    user_id: z.number(),
    website_url: z.string(),
    profile_image: z.string(),
    profile_image_90: z.string()
})

We are defining the user schema with Zod. User is an object with keys and different value types. Now let's see the article.ts:

// article.ts

import { z } from 'zod'
import { UserSchema } from './user'

export const ArticleSchema =
    z.object({
        type_of: z.string(),
        id: z.number(),
        title: z.string(),
        description: z.string(),
        readable_publish_date: z.string(),
        slug: z.string(),
        path: z.string(),
        url: z.string(),
        comments_count: z.number(),
        public_reactions_count: z.number(),
        published_timestamp: z.string(),
        collection_id: z.string(),
        positive_reactions_count: z.number(),
        cover_image: z.string(),
        social_image: z.string(),
        canonical_url: z.string(),
        created_at: z.string(),
        edited_at: z.string(),
        published_at: z.string(),
        last_comment_at: z.string(),
        reading_time_minutes: z.number(),
        tag_list: z.array(z.string()),
        tags: z.string(),
        user: UserSchema
    })

export const ArticlesSchema = z.array(ArticleSchema);

Now let's implement this schema on our data fetcher:

// App.tsx

import { useQuery } from "@tanstack/react-query";
import { Article } from "./types/article";
import { z } from "zod";
import { ArticleSchema, ArticlesSchema } from "./schemas/article";

function App() {
  const { VITE_BASE_URL } = import.meta.env;

  const getArticles = () =>
    fetch(VITE_BASE_URL)
      .then((res) => res.json())
      .then((data) => ArticlesSchema.parse(data));

  const { data, isLoading, isFetching, error, isError } = useQuery({
    queryKey: ["articles"], // a key that will help to retrieve data
    queryFn: getArticles, // the function that will be executed to actually fetch the data
  });

  if (isLoading) {
    return <p>Data is loading...</p>;
  }

  if (isFetching) {
    return <p>Data is fetching...</p>;
  }

  if (error) {
    return <p>There was an error when fetching your data.</p>;
  }

  return (
    <ul>
      {data?.map((article) => {
        return <li key={article.id}>{article.title}</li>;
      })}
    </ul>
  );
}

export default App;

Let's try to run our application and ...

Uh oh! We've got an error, but what a beautiful and accurate error! You can see that with the help of Zod, we can easily know which data is faulty.

Because we don't like to see these red lines, let's correct our article schema:

// schemas/article.ts

export const ArticleSchema =
    z.object({
        type_of: z.string(),
        id: z.number(),
        title: z.string(),
        description: z.string(),
        readable_publish_date: z.string(),
        slug: z.string(),
        path: z.string(),
        url: z.string(),
        comments_count: z.number(),
        public_reactions_count: z.number(),
        published_timestamp: z.string(),
        collection_id: z.nullable(z.string()),
        positive_reactions_count: z.number(),
        cover_image: z.string(),
        social_image: z.string(),
        canonical_url: z.string(),
        created_at: z.string(),
        edited_at: z.nullable(z.string()),
        published_at: z.string(),
        last_comment_at: z.string(),
        reading_time_minutes: z.number(),
        tag_list: z.array(z.string()),
        tags: z.string(),
        user: UserSchema
    })

By making certain keys nullable, we got rid of those red lines. Zod helped us to validate data efficiently.

Conclusion

React Query, TypeScript, and Zod are powerful tools that can greatly improve the efficiency and reliability of web application development.

React Query handles data fetching and caching where Zod is handling data validation.

Together, these tools form a robust framework for building modern web applications. As such, you should consider incorporating them into your development workflows.

That's it folks! See you next time! 👋

Tauri - The Flutter killer?

AILI Fida Aliotti Christino — Sun, 19 Feb 2023 18:06:26 +0000

What is Tauri?

Tauri is an open-source framework for building cross-platform desktop applications using web technologies such as HTML, CSS, and JavaScript.

Tauri has been in front of the scene these times and was considered as one of the best option to build desktop apps along Flutter but hasn't get to mobile development yet!

Now a new era begins 👑! Tauri is now able to build with the same codebase, apps for mobile. Through this article i will help you configure a project to build for Android devices.

My environment

For the purpose of this article, i will be using:

A macbook pro M1 ARM Chip with MacOS Ventura 13.2
A terminal with fish shell and Homebrew installed
An android device running on Android 12

Tauri Mobile

On the Tauri Blog, they've announced an alpha release of Tauri mobile. In this article, i will help you create your first app with it! Let's dive in! 🏊‍♀️

Android Pre-requisites

Java Development Kit (JDK)

In order to build our android app, we need to install first the JDK. And again, feel free to select the one that suits your OS.

Android SDK

As we are building an app for android, we need the android SDK tools. It will helps us to build and test Android apps, and to publish your finished app to the Google Play Store or other app markets.

The easiest way to install it is to download Android Studio. Head over to their website 👆 and click on the Download button. Click on the agreement button and select the right version for your computer, in my case for example, i've downloaded the one for the mac with Apple chip.

When your download is finished, install it by double-clicking on the file. Leave all default option and download the latest SDK as the software ask you. To make sure that everything is ok, let's open the settings represented by a three dot button next to the open button and select SDK Manager.

You should see something like this:

Download the one corresponding to your Android device if it's not already installed. Then we'll head over to the SDK Tools tab then select:

Android SDK Command-line Tools (latest)
NDK (Side by side)
Android SDK Build-Tools
Android SDK Platform-Tools

Then click on the Apply button.
Now that we've done that, we can close Android Studio for now.

Environment variables

Now we need to specify some environment variables. Please feel free to search on the internet how to do it for your OS.

In my case, i'm using a mac with a fish shell (i can write an article on that if you are interested 😉) installed on it so my command will be code ~/.config/fish/config.fish to add environment variables. My file will be like this:

if status is-interactive
    # Commands to run in interactive sessions can go here
end
if status --is-login
    set -gx ANDROID_SDK_ROOT $HOME/Library/Android/sdk
    set -gx NDK_HOME $HOME/Library/Android/sdk/ndk/25.1.8937393
end

⚠️ After having doing this, i suggest you to close your terminal and open a new one to enable changes.

As you can see, i've added those 2 variables: ANDROID_SDK_ROOT and NDK_HOME. Change these values according to your paths.

Still following 😅? I know this can be frustrating doing all these configs but believe me, good days are coming! Now that we've done the Android specific configuration, let's install tauri 🥵

Install Tauri for mobile

Pre-requisites

The tauri documentation is clear enough to get along yourself without any extra help.

Prepare Tauri for mobile development

Please head over their documentation to prepare your workspace as i think it's already clear and easy to begin with.

Create your application

From here, i'd ask you to follow along carefully to avoid getting lost.

Let's start by creating a simple Vite app:

> pnpm create vite

You will be asked some informations like:

the name of your project (i chose "taurituto")
the framework you will use (i chose React with TypeScript)

Install required packages with

> pnpm i

You should have something as similar as this:

Nothing special if you are familiar with Vite apps.

Let's do some configurations before adding our Tauri app.

Vite config

As Tauri will run this Vite app on our mobile app, we need to set it up so it can display our content using our computer port and IP address.

Let's see what we got inside our vite.config.ts file for now:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

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

Like mentioned on this documentation, we need to change this file in order to run our Vite into the mobile app. First, we need to install internal-ip, you know the drill:

pnpm i -D internal-ip

And change our vite.config.ts to use it:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { internalIpV4 } from 'internal-ip'

// https://vitejs.dev/config/
export default defineConfig(async () => {
  const host = await internalIpV4();
  return {
    // prevent vite from obscuring rust errors
    plugins: [react()],
    clearScreen: false,
    server: {
      host: '0.0.0.0', // listen on all addresses
      port: 5173,
      // Tauri expects a fixed port, fail if that port is not available
      strictPort: true,
      hmr: {
        protocol: 'ws',
        host,
        port: 5183
      },
    },
    // to make use of `TAURI_PLATFORM`, `TAURI_ARCH`, `TAURI_FAMILY`,
    // `TAURI_PLATFORM_VERSION`, `TAURI_PLATFORM_TYPE` and `TAURI_DEBUG`
    // env variables
    envPrefix: ['VITE_', 'TAURI_'],
    build: {
      // Tauri supports es2021
      target: ['es2021', 'chrome100', 'safari13'],
      // don't minify for debug builds
      minify: 'esbuild',
      // produce sourcemaps for debug builds
      sourcemap: 'inline',
    }
  }
})

Ok, now we are ready to add our Tauri app part!

Adding Tauri

Let's add the Tauri CLI as it will help us to install the Tauri app along with our Vite app:

> pnpm add -D @tauri-apps/cli

Now that we've got it installed, run:

> pnpm tauri init

It will except you to answer a bunch of questions:

> ? What is your app name? <yourappname>
> ? What should the window title be? <you can leave it the same as your app name>
> ? Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? ../dist
> ? What is the url of your dev server? › http://localhost:5173
> ? What is your frontend dev command? › pnpm run dev
> ? What is your frontend build command? · pnpm run build

You should now see a folder called src-tauri as the root of your project.

Then navigate to src-tauri directory then run these commands:

> cargo add tauri@2.0.0-alpha.4
> cargo add tauri-build@2.0.0-alpha.2 --build
> cargo install tauri-cli --version "^2.0.0-alpha"

Ok, we need to adapt our project file in order to launch it on mobile. Open your Cargo.toml file located inside src-tauri and add these lines:

[package]
name = "snapchat"
version = "0.0.0"
description = "A Tauri App"
authors = ["you"]
license = ""
repository = ""
edition = "2021"

[lib]
crate-type = ["staticlib", "cdylib", "rlib"]

...

Now go inside your src folder on the same level and add 2 files lib.rs and mobile.rs with those lines:

// lib.rs

use tauri::App;

#[cfg(mobile)]
mod mobile;
#[cfg(mobile)]
pub use mobile::*;

pub type SetupHook = Box<dyn FnOnce(&mut App) -> Result<(), Box<dyn std::error::Error>> + Send>;

#[derive(Default)]
pub struct AppBuilder {
  setup: Option<SetupHook>,
}

impl AppBuilder {
  pub fn new() -> Self {
    Self::default()
  }

  #[must_use]
  pub fn setup<F>(mut self, setup: F) -> Self
  where
    F: FnOnce(&mut App) -> Result<(), Box<dyn std::error::Error>> + Send + 'static,
  {
    self.setup.replace(Box::new(setup));
    self
  }

  pub fn run(self) {
    let setup = self.setup;
    tauri::Builder::default()
      .setup(move |app| {
        if let Some(setup) = setup {
          (setup)(app)?;
        }
        Ok(())
      })
      .run(tauri::generate_context!())
      .expect("error while running tauri application");
  }
}

// mobile.rs

#[tauri::mobile_entry_point]
fn main() {
  super::AppBuilder::new().run();
}

Then replace our main.rs file to use the AppBuilder struct:

//main.rs

#![cfg_attr(
    all(not(debug_assertions), target_os = "windows"),
    windows_subsystem = "windows"
)]

pub fn main() {
    app::AppBuilder::new().run();
}

Now we are ready to initiate our android project. Let's run go back to our root project and run this:

pnpm add -D @tauri-apps/cli@next @tauri-apps/api@next && pnpm tauri android init

With this command, the cli tool will do some configuration for us so let's sit back and wait for it to complete 🧋

✅ When the cli has finished, go to src-tauri, you should now see a folder called gen with some android relative files in it. It means that the tool has correctly generated an android project for you 👍.

One last thing before we run this on our device. Open tauri.conf.json file inside src-tauri and change the bundle identifier to a custom one following this pattern com.$developeralias.$appname. For example, for me, i've changed it into: com.yourname.appname.

Ok, now let's run our app 😁, run the command: pnpm tauri android dev [--open]

What this command will do is trying to launch our app on android emulator and if it doesn't find one, it will open Android Studio for you. In my case, i want to run it on my real device so i'll wait the Android Studio to pop up.

❌ I had to change this line in the build.gradle.kts file to match my configuration:

// Change this
implementation("com.android.tools.build:gradle:7.3.1")

To this
implementation("com.android.tools.build:gradle:7.2.1")

⚠️ If you stumble across an error saying that @tauri-apps/cli-darwin-x64 is missing, then install the required dependency by pnpm i --save @tauri-apps/cli-darwin-x64

Test

Time to run our app! As you can see, it opened up Android Studio and detected my device perfectly. Just go on and click on the "Run app" button and wait for the app to run.

If the app doesn't run on the first time, try to close Android Studio and re-run the command:

> pnpm tauri android dev [--open]

Yay! 🎉🎉🎉

Now try to change something inside src/App.tsx and save it. Changes are directly taken into account and update your app! 🤯🤩

As Tauri uses your favorite framework to load, you can use our favorite tools with it!

You can also build your app by doing this command:

> pnpm tauri android build

Final words

Tauri for mobile is still in alpha release so i do not recommend using it on production but i think that it's already pretty cool 😎. Next time we will discuss about the interaction with Rust and mobile plugins! 😀

Let me know if you want me to do more tutorial about it! 😊

Thank you for sticking with me till the end! See y'all! 👋

Create a CLI tool to help bootstraping Flutter project using Node.JS - Part 2

AILI Fida Aliotti Christino — Thu, 16 Feb 2023 12:12:36 +0000

What we've done so far

In the first part of the article, we've:

created a cli node project
interact with user about the application informations
create a project using these informations
create folder structure along with it

Now that we've got our folder structure, in this article, we will add the files according what we want to add by default and implement the module creation part.

Here are the utility files that we want to add:

app.dart: entry point of our app
transitions.dart: helps us to add a custom animation for page transitions
navigation.dart: contains a function to change page using our custom animation
spacing.dart: contains some functions to help us deal with spacing

We will also change the main.dart to match the adding of the app.dart

Template contents

Let's create a folder where we will hold our template files. Of course, i named mine templates (how original! 😱) and create our files.

Let's start by creating the spacing.dart and paste this:

import 'package:flutter/material.dart';

SizedBox space({double? width, double? height}) {
  return SizedBox(
    width: width ?? 0,
    height: height ?? 0,
  );
}

double width(BuildContext context) {
  return MediaQuery.of(context).size.width;
}

double height(BuildContext context) {
  return MediaQuery.of(context).size.height;
}

As you can see, it's just a bunch of functions like for example space which will help me set a space where i want.

Now, let's add the transitions.dart which will use the animations module:

import 'package:animations/animations.dart';
import 'package:flutter/material.dart';

class Transitions {
  static Route sharedAxisPageTransition(Widget screen,
      {bool isHorizontal = true}) {
    final SharedAxisTransitionType _transitionType = isHorizontal
        ? SharedAxisTransitionType.horizontal
        : SharedAxisTransitionType.vertical;

    return PageRouteBuilder<SharedAxisTransition>(
        pageBuilder: (context, animation, secondaryAnimation) => screen,
        transitionsBuilder: (context, animation, secondaryAnimation, child) {
          return SharedAxisTransition(
            animation: animation,
            secondaryAnimation: secondaryAnimation,
            transitionType: _transitionType,
            child: child,
          );
        });
  }
}

Like i said up there, it's a class that will implement a custom animation on page transitions.

Now let's write the navigation.dart:

import 'package:flutter/material.dart';
import 'transitions.dart';

void goto(BuildContext context, Widget screen, {bool isReplaced = false}) {
  isReplaced
      ? Navigator.of(context)
          .pushReplacement(Transitions.sharedAxisPageTransition(screen))
      : Navigator.of(context)
          .push(Transitions.sharedAxisPageTransition(screen));
}

As you can see, this will just use our class declared in our previous transitions.dart.

We've got our utilities now, let's now see what is inside our app.dart file:

import 'package:flutter/material.dart';

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '#title',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: null,
    );
  }
}

Notice that we've set the title value to: #title. We will talk about it later.

And finally, our main.dart file:

import 'package:flutter/material.dart';
import './src/app.dart';

void main() {
  runApp(const App());
}

Ok, we got all of our file for now. What we need to do is to copy the utilities inside the src/helpers folder, the app.dart inside the src folder and change the main.dart file.

For simplicity, let's create a helpers folder inside our templates and move these files inside it: spacing.dart, transitions.dart, navigation.dart.

Let's get back to the utils and these lines:

// utils.js

import { resolve, join, dirname } from "path";
import { error, success, info } from "./log";
import { existsSync, mkdirSync, readdirSync, statSync, copyFileSync } from "fs";

const createFolders ...
...

const copyDirectoryContent = (source, destination) => {
  mkdirSync(destination, { recursive: true }); // Create the destination directory if it doesn't exist

// Read our directory
  readdirSync(source).forEach((file) => {
    const srcPath = join(source, file);
    const destPath = join(destination, file);
    if (statSync(srcPath).isDirectory()) {
      copyDirectoryContent(srcPath, destPath); // Recursively copy subdirectories
    } else {
      copyFileSync(srcPath, destPath); // Copy files
    }
  });
};

const copyFiles = (project) => {
  const templateDir = resolve(dirname(""), "templates");
  // Copy all our files from inside our templates/helpers dir to the project
  copyDirectoryContent(
    resolve(templateDir, "helpers"),
    resolve(project, "lib/src/helpers")
  );
};

export { createFolders, copyFiles };

Now, let's update our actions.js file to use it:

// actions.js
...

dependencies.on("close", () => {
      success(`Dependencies are correctly added...`);
      info(`Creating folders...`);
      createFolders(project);
      info(`Copying utility files...`);
      copyFiles(project);
      success("Project created correctly");
    });

...

Don't forget to import the copyFiles from the utils.js file.

Now, let's test our code and... Yes! It will first create the project, add dependencies and add our helper files.

Ok, so far so good 👍 😊

Let's not forget our main.dart and app.dart files.

// utils.js
...

const copyFiles = (project) => {
  const templateDir = resolve(dirname(""), "templates");
  const appFile = resolve(project, "lib/src/app.dart");
  copyDirectoryContent(
    resolve(templateDir, "helpers"),
    resolve(project, "lib/src/helpers")
  );

  copyFileSync(
    resolve(templateDir, "main.dart"),
    resolve(project, "lib/main.dart")
  );

  copyFileSync(resolve(templateDir, "app.dart"), appFile);
};
...

OK. I've add the main.dart file to the list of the file to copy. Now, time to add app.dart. Let's talk about it:

If you remember, our app.dart file has a weird line inside it:

    return MaterialApp(
      title: '#title',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: null,
    );

You called it, it's the title: '#title'. That because we will replace it by the name of our project. But we need to copy it first then replace its content.

// utils.js

...

const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);

const copyFiles = (project) => {
  const templateDir = resolve(dirname(""), "templates");
  const appFile = resolve(project, "lib/src/app.dart");
  copyDirectoryContent(
    resolve(templateDir, "helpers"),
    resolve(project, "lib/src/helpers")
  );

  copyFileSync(
    resolve(templateDir, "main.dart"),
    resolve(project, "lib/main.dart")
  );

  copyFileSync(resolve(templateDir, "app.dart"), appFile);

  const data = readFileSync(appFile, "utf8").replace(
    "#title",
    capitalize(project)
  );

  writeFileSync(appFile, data);
};

...

That's it! We copy the app.dart first, then we will read it and replace the string #title by the name of the project capitalized.

Time to test! 😁

> fluttertool

? What do you want to do? 1 - Create a new project

========================================
OK! Let's create your wonderful project!
========================================

? What is the name of your project? myproject
? What is the name of your organization? test
Creating project skeleton...
Adding dependencies...
✔ Dependencies are correctly added...
Creating folders...
✔ Folders and files are correctly created
Copying utility files...
✔ Project created correctly

Yes! We made it! Time for the next step: creating module.

Stacked Module

I will not discuss about the stacked module as it will require an entire about it (let me know if you want one).

A module consists of two files: the view and the viewmodel that we will copy inside lib/src/views/screens folder.

Let's create our module template inside our templates directory.

Don't worry about the files being red.

Let's see what inside them:

// module_viewmodel.dart

import 'package:stacked/stacked.dart';
class ModuleViewModel extends BaseViewModel {}

// module_view.dart

import 'package:flutter/material.dart';
import 'package:stacked/stacked.dart';
import './module_viewmodel.dart';

class ModuleView extends StatelessWidget {
  const ModuleView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ViewModelBuilder<ModuleViewModel>.reactive(
      viewModelBuilder: () => ModuleViewModel(),
      builder: (
        BuildContext context,
        ModuleViewModel model,
        Widget? child,
      ) {
        return Scaffold(
          body: Center(
            child: Text(
              'ModuleView',
            ),
          ),
        );
      },
    );
  }
}

We will apply the same process as we did with the app.dart.

But we will add some extra lines inside utils.js:

// utils.js

import { resolve, join, dirname } from "path";
import { error, success, info } from "./log";
import {
  existsSync,
  mkdirSync,
  readdirSync,
  statSync,
  copyFileSync,
  readFileSync,
  writeFileSync,
} from "fs";

let SCREENPATH = "lib/src/views/screens";

...

const renameModuleFiles = (path, module, filename) => {
  const changes = readFileSync(path, "utf8")
    .replaceAll("Module", capitalize(module))
    .replace("module", module);

  writeFileSync(
    `${SCREENPATH}/${module}/${filename.replace(
      "module",
      module.toLowerCase()
    )}`,
    changes
  );
};

const createStackedModuleBoilerplate = (module) => {
  const templateDir = resolve(dirname(""), "../templates/modules");
  const files = ["module_view.dart", "module_viewmodel.dart"];

  try {
    const _path = resolve(SCREENPATH, module);
    if (!existsSync(_path)) {
      mkdirSync(_path);
    }

    files.forEach((file) => {
      const _path = resolve(SCREENPATH, module, file);

      if (!existsSync(_path)) {
        renameModuleFiles(resolve(templateDir, file), module, file);
      }
    });

    success(`${capitalize(module)} module is correctly created`);
  } catch (err) {
    error(err);
  }
};

...

export { createFolders, copyFiles, createStackedModuleBoilerplate };

Ok, what's going on here:

We create a folder according to the name the user gave
We copy the files from templates/modules inside that folder
Rename those file copied and replace all placeholder string inside it by the name of the module

All we have to do is to call this function inside our actions.js

// actions.js
...
const createModule = async () => {
  const {module} = await inquirer.prompt([
    {
      type: "input",
      name: "project",
      message: "What is the name of your module?",
    },
  ]);

  if (module) {
    createStackedModuleBoilerplate(module);
    return;
  }

  error("You need to specify a module name!");
};

...

❌ Careful!, as we will create the module inside the lib/src/views/screens we need to be in the root of the project to have it working.

Test time ‼️

> fluttertool

? What do you want to do? 2 - Add a new stacked module
? What is the name of your module? signin
✔ Signin module is correctly created

Yay! 🥳🥳

Let's do a full example by creating a project and adding a home module to it:

> fluttertool

? What do you want to do? 1 - Create a new project

========================================
OK! Let's create your wonderful project!
========================================

? What is the name of your project? myproject
? What is the name of your organization? test
Creating project skeleton...
Adding dependencies...
✔ Dependencies are correctly added...
Creating folders...
✔ Folders and files are correctly created
Copying utility files...
✔ Project created correctly

> cd myproject && fluttertool
? What do you want to do? 2 - Add a new stacked module
? What is the name of your module? home
✔ Home module is correctly created

What we've got now:

Let's see what we have inside our home_view.dart and home_viewmodel.dart

What we've done so far:

adding our template files and arrange them correctly
change our main.dart file when we add app.dart
implement our module creator

What we will see next in the last step is how we can add shortcuts to our cli tool like:

> fluttertool -m <modulename>
> flutter -h

Stay tune! See you next time! 👋

Create a CLI tool to help bootstraping Flutter project using Node.JS - Part 1

AILI Fida Aliotti Christino — Wed, 15 Feb 2023 06:53:11 +0000

Hey folks! I know i'm not the only one who struggles and wastes time when i create every new flutter project. So i've decided to make a tool for helping me bootstraping my projects. It saves me around 1 hour of my time everytime i start a new personal project.

The problem

Let's start by describing what i do when i start every project:

create a new flutter project with the name in it
create a srcfolder
create a bunch of utilities folder arranged like this:

The transitions.dart file for example hold some code for page transitions using animations. Here is what it looks like:

import 'package:animations/animations.dart';
import 'package:flutter/material.dart';

class Transitions {
  static Route sharedAxisPageTransition(Widget screen,
      {bool isHorizontal = true}) {
    final SharedAxisTransitionType _transitionType = isHorizontal
        ? SharedAxisTransitionType.horizontal
        : SharedAxisTransitionType.vertical;

    return PageRouteBuilder<SharedAxisTransition>(
        pageBuilder: (context, animation, secondaryAnimation) => screen,
        transitionsBuilder: (context, animation, secondaryAnimation, child) {
          return SharedAxisTransition(
            animation: animation,
            secondaryAnimation: secondaryAnimation,
            transitionType: _transitionType,
            child: child,
          );
        });
  }
}

and finally create a folder with respective view (entity_view.dart) and logic (entity_viewmodel.dart) for each entity (screen) i need. I'm pointing out that i'm using the stacked package as a state management.

The solution

Ok, now that we saw what were the steps took, let's try to automate them. I decided to use NodeJS as i was comfortable with it but you can use any tool that you like to build CLI.

Create our project

First, let's create our project. Again, you can use any package manager that you like, it doesn't matter.

Create a folder to hold your pretty CLI and let's start:

mkdir fluttertool && cd fluttertool && yarn init -y && code .

Nothing special here, it will create our folder, create a package.json file inside it and open VSCode for us.

Now that we have our starting point, let's add some informations inside our package.json file.

Initially, we have something like this:

{
  "name": "fluttertool",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

Let's add some lines to tell that we will use this project as a cli tool.

{
  "name": "flutternodetool",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "type": "module"
  "bin": {
    "fluttertools": "./index.js"
  },
}

Ok. That last line specifies a command-line interface (CLI) for the module. When the module is installed, a command-line tool called fluttertools will be created that can be used to run the module's functionality.

The bin property maps the name of the command-line tool to the file that should be executed when the tool is run, in this case index.js.

Let's create this index.js file:

#! /usr/bin/env node --es-module-specifier-resolution=node
console.log("Hello from my fluttertool");

The first line of code, #! /usr/bin/env node, is known as a "shebang" or "hashbang" and is used to specify the interpreter for the script.

In our case, it specifies that the script should be run using the node interpreter, which is typically used for executing JavaScript code on the command line.

Ok, let's test our code!

sudo npm i -g .

With this line, we will install our current package globally, so we will be able to run our tool using our alias previously set: "fluttertool".

Now, try to run:

fluttertool

inside your terminal and you will see the message we set before inside our index.js file.

Now we have our starting point. Let's add some fancy tools to it.

Dependencies

We will add some dependencies to help us deal with CLI behaviours (inquirer) and text coloring (chalk).

yarn add inquirer chalk

ESLint

Let's also add eslint to help us with checking syntax and find problems in our code. Run this command:

yarn eslint --init

Answer to these questions when prompted:

? How would you like to use ESLint?
❯ To check syntax and find problems

? What type of modules does your project use?
❯ JavaScript modules (import/export)

? Which framework does your project use?
❯ None of these

? Does your project use TypeScript? › No

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Node

? What format do you want your config file to be in?
❯ JavaScript

Successfully created .eslintrc.cjs

Now that've got our tools set, we can jump into our commands.

Expected Commands

We will have a bunch of command to implement. But for now, let's implement the necessary ones:

Project creation

What my tool will mainly do is create a flutter project for me, add my helper files and init project with an entry file (defaults to "Home").

What i'm expecting is when i run this:

fluttertool

My tool will ask me the name of my app and the organization name, create a flutter project with these informations, create an src directory and organize folders and files like we described previously:

And finally add my helper files. Ok, let's jump back into our index.js file.

#! /usr/bin/env node --es-module-specifier-resolution=node

import inquirer from "inquirer";

async function run() {
  const { choice } = await inquirer.prompt({
    type: "list",
    name: "choice",
    message: "What do you want to do?",
    choices: [
      "1 - Create a new project",
      "2 - Add a new stacked module",
    ],
  });
}

run();

What's going on here. Well we are calling inquirer module which will help us to interact with the user. We use the prompt method to display informations to the user and, in that case, we are waiting for actions by showing him the options that our tool offers.

Let's re-run our command. As our tool has been installed globally, every changes we make in our code are automatically applied.

> fluttertool
? What do you want to do? (Use arrow keys)
❯ 1 - Create a new project 
  2 - Add a new stacked module

As you can see, the user can select an option by using the arrow keys and the result will be stored inside the choice variable.

Let's now implement the actions and the log helper. Create a file named log.js and actions.js.

// log.js
import chalk from "chalk";
const log = console.log;

const text = (text) => log(chalk.white(`${text}`));
const success = (text) => log(chalk.green(`✔ ${text}`));
const info = (text) => log(chalk.blue(`${text}`));
const error = (text) => log(chalk.red(`✖ ${text}`));

const renderTitle = () =>
  log(
    chalk.bold.magenta(`
  ░█▀▀░█░░░█░█░▀█▀░▀█▀░█▀▀░█▀▄░░░▀█▀░█▀█░█▀█░█░░░█▀▀
  ░█▀▀░█░░░█░█░░█░░░█░░█▀▀░█▀▄░░░░█░░█░█░█░█░█░░░▀▀█
  ░▀░░░▀▀▀░▀▀▀░░▀░░░▀░░▀▀▀░▀░▀░░░░▀░░▀▀▀░▀▀▀░▀▀▀░▀▀▀
  `)
  );

export { success, info, text, error, renderTitle };

Pretty cool hun? You can generate your own text here

Now let's return to our actions.jsfile and write this:

const createProject = () => {}
const createModule = () => {}

const actions = (option) => {
  if (option.startsWith(1)) {
    createProject();
  }

  if (option.startsWith(2)) {
    createModule();
  }
};

export default actions;

And change our index.js file to:

#! /usr/bin/env node --es-module-specifier-resolution=node

import inquirer from "inquirer";
import actions from "./actions";

async function run() {
  const { choice } = await inquirer.prompt({
    type: "list",
    name: "choice",
    message: "What do you want to do?",
    choices: ["1 - Create a new project", "2 - Add a new stacked module"],
  });

  actions(choice);
}

run();

I think that it's pretty obvious here that actions will dispatch our action according to the option the user gave.

Let's implement our createProject function.

// actions.js
const createProject = async () => {
  info("\n========================================");
  info("OK! Let's create your wonderful project!");
  info("========================================\n");

  const { project, organization } = await inquirer.prompt([
    {
      type: "input",
      name: "project",
      message: "What is the name of your project?",
      default: "myproject",
    },
    {
      type: "input",
      name: "organization",
      message: "What is the name of your organization?",
      default: "test",
    },
  ]);

  text("Creating project skeleton...");
  const command = spawn("flutter", [
    "create",
    project,
    "--org",
    `com.${organization}.${project}`,
  ]);

  command.stderr.on("data", (data) => {
    error(data);
    process.exit(0);
  });
};

What our code is doing here is when the user selects the createProject option, we will ask him for the project name (defaults to "myproject") and the organization name (defaults to "test") and then the tool will launch a command like you generally do when creating a flutter project.

flutter create <projectname> --org <organizationname>

Now will wait for the command to complete and then we will make the next operations: adding dependencies (animations and stacked)

...
command.stderr.on("data", (data) => {
    error(data);
    process.exit(0);
  });

  command.on("close", () => {
    text("Adding dependencies...");
    const dependencies = spawn(
      "flutter",
      ["pub", "add", "animations", "stacked"],
      { cwd: project }
    );
  });

The spawn command here needs to be executed inside our newly created project, that's why we are changing our working directory to the name of the project here.

Again it will add dependencies like you would do in your regular flutter application.

Next we will create our main project structure:

For the sake of readability, let's create another file called: utils.js.

// utils.js

import { resolve } from "path";
import { error, success } from "./log";
import { existsSync, mkdirSync } from "fs";

const createFolders = (project) => {
  const folders = [
    "src",
    "src/views",
    "src/views/screens",
    "src/views/widgets",
    "src/services",
    "src/helpers",
    "src/models",
  ];

  try {
    for (const folder of folders) {
      const _path = resolve(project, "lib", folder);
      if (!existsSync(_path)) {
        mkdirSync(_path);
      }
    }

    success("Folders and files are correctly created");
  } catch (err) {
    error(err);
    process.exit(0);
  }
};

export { createFolders };

Now let's update our actions.js file to use this:

// actions.js

...
command.on("close", () => {
    text("Adding dependencies...");
    const dependencies = spawn(
      "flutter",
      ["pub", "add", "animations", "stacked"],
      { cwd: project }
    );

    dependencies.stderr.on("data", (data) => {
      error(`Cannot find folder ${project} - ${data}`);
      process.exit(0);
    });

    dependencies.on("close", () => {
      success(`Dependencies are correctly added...`);
      info(`Creating folders...`);
      createFolders(project);
    });
  });

That closes our first part of the article. What we've done so far:

created a cli node project
interact with user about the application informations
create a project using these informations
create folder structure along with it

Please like the article or leave a comment if you'd like to see the part 2 where we will:

add template files
implement the module creation action

Thanks! 😄 See you next time! 👋

How to implement state management inside a simple JavaScript app

AILI Fida Aliotti Christino — Tue, 31 Jan 2023 05:22:01 +0000

Motivation

Not every application needs React or Angular or another fancy, trendy framework.

What i see in every junior developer is that they are tackling every problem using frameworks even though there's no need to use them at some point.

So in this article, i will show you how to handle your application using Vite and JavaScript (my article, my rules 😋)

The main structure

Okay, let's start from the beginning, the core of our app by running this simple command:

yarn create vite

Of course, you can use any package manager you wish to.

Give a project name when asked, in my case i choose "greatapp" (not an original app name but deal with it, ok? 😆), then choose Vanilla and JavaScript in the last question.

So, now you should have something like this:

Let's run the app by typing yarn dev

Here is what we got:

Go on and try to click on the button. It works! The amount is incrementing!

Hum... but what if i want to decrement it? 😅
Still following? Great! Let's jump into the next section

Components

Apps are often divided into small pieces that we call Components. Separating our code into Components will help use to maintain and grow our app easily and even debug.

Let's look at the counter.js file. If you are coming from a React background, you can see that it is similar to a component which have a state changing when an action is done.

Well, what i want to do is to isolate buttons into components and assign actions to them.

Let's create it. Start by creating a file named Button.js (you can choose another name but it's more relevant to me to call it like that 😎)

Now let's add some code inside it.

export const Button = (element, text) => {
  const button = document.createElement("button");
  button.innerHTML = text;
  document.querySelector(element).appendChild(button);
};

Ok, let's break it down for a minute. We are creating a component called Button with elements and text as parameters where element is the HTML element we will add our component to, and text will be the text displayed on the button.

Let's use it inside our main function by changing it to make it use our newly created component:

import "./style.css";
import javascriptLogo from "./public/javascript.svg";
import { setupCounter } from "./counter.js";
import { Button } from "./buttons";

document.querySelector("#app").innerHTML = `
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
      <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
    </a>
    <h1>Hello Vite!</h1>
    <div class="card">
      <button id="counter" type="button"></button>
      <p id="counter"></p>
    </div>
    <div id="buttons"></div> 
  </div>
`;

setupCounter(document.querySelector("#counter"));

Button("#buttons", "-");
Button("#buttons", "+");

Oh my! What's going on here 😱! We've added our Button component by importing it and we've add two instance of it at the bottom. As you can see, Button components will be rendered inside a div tag created above:

<div id="buttons"></div>

Also, i've changed the element counter button into a simple paragraph element as we will change its state by using our Button component

With the style added by default by Vite, our buttons will look so fancy! 😍

Actions

Okay, we've added our buttons but they are useless for now. Let's change that and add some events to our Button component:

export const Buttons = (element, text, action) => {
  const button = document.createElement("button");
  button.innerHTML = text;
  button.addEventListener("click", action);
  document.querySelector(element).appendChild(button);
};

Now we've added an action which is a function executed when the user will click on our button. Let's try again to use it so we make sure it works by changing our main.js

import "./style.css";
import javascriptLogo from "./javascript.svg";
import { setupCounter } from "./counter.js";
import { Buttons } from "./buttons";

document.querySelector("#app").innerHTML = `
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
      <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
    </a>
    <h1>Hello Vite!</h1>
    <div class="card">
      <button id="counter" type="button"></button>
    </div>
    <div id="buttons"></div>
  </div>
`;

const action = () => {
  console.log("Hello from button");
};

setupCounter(document.querySelector("#counter"));
Buttons("#buttons", "-", action);

When we click on our buttons, we can see that our function is running correctly as it will display Hello from button inside the console.

Great! Let's try to add a state management to handle this variable.

State management

1- What is a state management?

State management refers to the process of managing data or state in an application, particularly in single-page applications or in applications with complex user interfaces.

The goal of state management is to ensure that the data displayed to the user and the user interactions with the application are consistent and predictable, even as the data changes over time.

I hope this is clear enough 😊

2- Attempt 1 - Global variables

Ok, first, we can think of a way to implement this by creating a file holding the global variables and call them inside other file. Seems great? Let's try!

Create a file at the root of our project, i will name it state.js (again you can name it whatever you want) and let's put this code inside it:

// state.js
export const $counter = 0; // "$" sign is just a way for me to differenciate global variables

Basically, we are just exporting a simple variable with an initial state of 0.
Now, let's use it inside our app:

// counter.js
import { $counter } from "./state";

export function setupCounter(element) {
  const setCounter = () => {
    element.innerHTML = `count is ${$counter}`;
  };

  setCounter();
}

// main.js

import "./style.css";
import javascriptLogo from "./javascript.svg";
import { setupCounter } from "./counter.js";
import { Buttons } from "./buttons";
import { $counter } from "./state";

document.querySelector("#app").innerHTML = `
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
      <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
    </a>
    <h1>Hello Vite!</h1>
    <div class="card">
      <p id="counter"></p>
    </div>
    <div id="buttons"></div> 
  </div>
`;

const increment = () => {
  $counter = $counter + 1;
};

const decrement = () => {
  $counter = $counter - 1;
};

setupCounter(document.querySelector("#counter"));
Button("#buttons", "-", decrement);
Button("#buttons", "+", increment);

🥵 ouf! Now, let's do some test!
❌ Uh-oh 😱! What's this? I'm getting an explicit error saying Assignment to constant variable.

Hum...🤔 Oh silly me! Of course, we can't change a constant variable! Let's change this before someone notices 😁

export let $counter = 0;

Now that's better 😊! Test again... nooo! This error again? May be restarting our server will change something but... it's useless. JavaScript is driving me crazy 😵‍💫

Let's do some Googling stuff ⌨️ ... owww 😲! It's been said that every imported variable is immutable which means that we cannot change it.

So, what's going on here? It seems that as soon as we are importing a variable from somewhere, that same variable is immutable. 🤔 Didn't know that. But as a great developer you can find some solution to that problem.

3- Attempt 2 - Proxy

Okay, first attempt didn't work. Let's try to use proxies to help us deal with this assignation error.

Hum? Proxy? Well, a Proxy object makes it possible to create an intermediary for another object and which can intercept and redefine certain fundamental operations for it.

Enough chit-chat, let's get back to code! Let's change our state.js file to this:

import { setupCounter } from "./counter";

const handler = {
  set: function (obj, prop, value) {
    obj[prop] = value;
    setupCounter(document.getElementById("counter"));
    return true;
  },
};

export const state = new Proxy(
  {
    counter: 0,
  },
  handler
);

export const actions = {
  increment: () => {
    state.counter++;
  },
  decrement: () => {
    state.counter--;
  },
};

And now, let's adapt our main.js file to match these changes:

import "./style.css";
import javascriptLogo from "./javascript.svg";
import { setupCounter } from "./counter.js";
import { Button } from "./button";
import { actions, state } from "./state";

const App = () => {
  return `<div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
      <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
    </a>
    <h1>Hello Vite!</h1>
    <div class="card">
      <p id="counter"></p>
    </div>
    <div id="buttons"></div> 
  </div>`;
};

document.querySelector("#app").innerHTML = App();

setupCounter(document.getElementById("counter"));
Button("#buttons", "-", actions.decrement);
Button("#buttons", "+", actions.increment);

Slight change to App declaration to match our beloved React app structure 😅
Let's see if it works... and ... it WORKS! 🎉

That's it folks! We've implemented state management from scratch using JavaScript.

There is a package developed around this proxy concept called Valtio which is available for JavaScript, React, and so on... feel free to check and star it on Github.

Conclusion

This was not a very shiny demonstration of the proxy potential as what we did is just incrementing and decrementing a counter, but if you want a more advanced use of it, here is a link to a todo project using the same concept.

Cheers! 🍻🍻🍻

Create your custom notification system with Socket.io and React Native

AILI Fida Aliotti Christino — Mon, 30 Jan 2023 19:10:33 +0000

As a mobile developer, i'm sure you came across this problem:

How can i implement notifications to my mobile app?

👨🏻‍🦱 I'm curious about your response, so please take a few minutes to comment on how you do it.

The most common way i heard to do this is to add firebase to your project and use Firebase Cloud Messaging (FCM). But, what if i don't want to use FCM?

Well let's find out!

The system itself

OK, this is how we're gonna do it: what if we have a react native app with a background service that will listen to socket events and displays notifications based on these events? Well, it sounds logic to me so let's implement this.

The implementation

Now that we've got the general idea, let's split this into parts:

First, we need to create a react-native app
Add background services and socket service to it
Create our backend socket server
Connect them

📢 Before we start, i assume that you've correctly setup your android and iOS development environment. If not, pay a visit to the react-native configuration website.

1. React Native App

So, let's create our first application. For that, all we need to do is run this command:

yarn react-native init $yourappname --template react-native-template-typescript

OK, let's break it down: it will copy the files for a basic TypeScript react-native app inside a folder called $yourappname (feel free to use your preferred package manager). In my case, i named my app: cassandra (don't ask me why 😅).

That's it! All we have to do is wait for this command to complete ⏰. When this is done, navigate to your newly fresh created app then try to run it by launching this command:

yarn android

And hopefully, 🤞 it will run on your device without any errors.

2. Adding foreground services and socket client

Let's jump to the next part: installing our dependencies. For the foreground service, i will use the @supersami/rn-foreground-service package.

Let's try to add this:

yarn add @supersami/rn-foreground-service

Then add this line to configure it in our app:

node node_modules/@supersami/rn-foreground-service/postinstall.js

This line 👆 will add the necessary permissions in our AndroidManifest file.

Now we're good 😊!

After a quick documentation reading 🥱, we need to modify our index.js file:

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
// Use the package
import ReactNativeForegroundService from '@supersami/rn-foreground-service';

// Add this line
ReactNativeForegroundService.register();
AppRegistry.registerComponent(appName, () => App);

OK, let's leave it for the moment. Now, time for socket client to be installed.

yarn add socket.io-client

Ok, we're good for now, we will use them later. Let's jump into the next topic 👉

3. Creating our backend service

For our backend, i will use a simple Node project. Let's initialize it by typing mkdir backend && yarn init -y. It will create a folder named backend and initiate it with a package.json file (The flag -y is to tell yarn to answer "yes" to every question asked).

Now, let's add our packages: yarn add express socket.io. OK, we'll create two files index.js and index.html at the root of the project and copy these lines respectively:

// index.js file

// Import packages
const express = require("express");
const http = require("http");
const { Server } = require("socket.io");
// Initiate our server
const app = express();
const server = http.createServer(app);
const io = new Server(server);
const PORT = process.env.PORT || 4000;

// Check events
io.on("connection", (socket) => {
  socket.on("chat_message", (data) => {
    socket.broadcast.emit("show_notification", data);
  });
});

// Serve index.html file
app.get("/", (req, res) => {
  res.sendFile(__dirname + "/index.html");
});

// Run our server
server.listen(PORT, () => {
  console.log("listening on port:", PORT);
});

Barely explained, we will create a socket server that runs on the port 4000. The socket will listen to the event chat_message and will send a broadcast message with the data obtained. Now, let's write our index.html file:

<!DOCTYPE html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      body {
        margin: 0;
        padding-bottom: 3rem;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
      }

      #form {
        background: rgba(0, 0, 0, 0.15);
        padding: 0.25rem;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        height: 3rem;
        box-sizing: border-box;
        backdrop-filter: blur(10px);
      }
      .input {
        border: none;
        padding: 0 1rem;
        flex-grow: 1;
        border-radius: 2rem;
        margin: 0.25rem;
      }
      #input:focus {
        outline: none;
      }
      #form > button {
        background: #333;
        border: none;
        padding: 0 1rem;
        margin: 0.25rem;
        border-radius: 3px;
        outline: none;
        color: #fff;
      }

      #messages {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }
      #messages > li {
        padding: 0.5rem 1rem;
      }
      #messages > li:nth-child(odd) {
        background: #efefef;
      }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form id="form" action="">
      <input
        class="input"
        placeholder="User name"
        id="user"
        autocomplete="off"
      />
      <input
        class="input"
        id="input"
        placeholder="Message"
        autocomplete="off"
      /><button>Send</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      const socket = io();

      const form = document.getElementById("form");
      const input = document.getElementById("input");
      const user = document.getElementById("user");

      form.addEventListener("submit", function (e) {
        e.preventDefault();
        if (input.value && user.value) {
          socket.emit("chat_message", {
            message: input.value,
            user: user.value,
          });

          input.value = "";
        }
      });
    </script>
  </body>
</html>

This is a slight ameliorated version of the official documentation on how to create a chat application with socket.io.

Now, you probably have an image in your head of what's going to be done here.

A brilliant mind 🧠 like yours guessed that the user will send a message (event) from the web part, the server will listen to that same event, trigger a broadcast event to whichever client listening to the server event then do an action according to it 😁. We're getting close now 🥵

4. Connect them

Now let's go back to our react-native project and modify our App.jsx:

import {View, Text} from 'react-native';
import React, {useEffect, useState} from 'react';
import {io, Socket} from 'socket.io-client';
import ReactNativeForegroundService from '@supersami/rn-foreground-service';

// In my case, i used ngrok to forward my server to have an https one
const serverurl = *your server url*

const App = () => {
  const socket: Socket = io(serverurl);
  const [connected, setconnected] = useState(socket.connected);

  useEffect(() => {
    socket.on('connect', () => {
      setconnected(socket.connected);
      if (!ReactNativeForegroundService.is_running) {
        ReactNativeForegroundService.start({
          id: 80,
          title: 'Message from: ',
          message: "You're connected",
        });

        ReactNativeForegroundService.add_task(() => {}, {
          delay: 5000,
          onLoop: false,
          taskId: '80',
          onError: e => console.log('Error logging:', e),
        });
      }
    });

    socket.on('show_notification', data => {
      ReactNativeForegroundService.update({
        id: '80',
        message: data.message,
        title: `Message from ${data.user}`,
      });
    });

    return () => {
      ReactNativeForegroundService.stop();
    };
  }, [socket]);

  return (
    <View>
      <Text>{connected ? 'Connected' : 'Waiting for connection'}</Text>
    </View>
  );
};

export default App;

Let's resume what we've done here:

Initialize the socket client with your server url
When connected to the server, we will initialize the foreground service if not done yet
We will add a new foreground service task
We will listen to the event from the server so then we can show a notification based on received data.

Now that the puzzle is complete, let's run everything.

// React native app
yarn android

// Node.js app
node index.js

5. Wrap up & test

Now that everything is running, open your browser and go to localhost:4000 (as i set 4000 as my port number) and you should see this at the bottom of the page:

Try to write something some fancy message:

As soon as you hit enter, look what's displayed in your android app:

Try to close your app and try again. What happens? It still works! 😊🎉 Now you have your own notification system.

You can even go further by hosting your backend for free on Render

Drawbacks

Yes, there are a few:

Having a constant notification tile to tell the user that our app is running on background
Queue system is not handled. Let me explain: let's suppose our user is not connected to the internet for some reasons. When he gets back, the previous events sent from the server will just pass through it without warning us that there were unread notifications because in case events aren't intercepted, they will be lost in nature 🥲
You need to have an https server

That's all folks! Thank you for reading this article, i hope you learnt something new or helped you in your project. More contents are coming!

From any to unknown: A Guide to Upgrading Your TypeScript Typing

AILI Fida Aliotti Christino — Tue, 03 Jan 2023 04:13:28 +0000

In TypeScript, the unknown type is used to represent values that are not known at compile time. This is in contrast to the any type, which represents values that can be of any type, including values that are not known at compile time.

One advantage of using unknown over any is that it provides a level of type safety. When a value is of type unknown, the TypeScript compiler will require the programmer to perform type checks before performing certain operations on that value. This helps to prevent unintended type errors at runtime.

For example, consider the following code:

function printLength(x: any) {
  console.log(x.length);
}

printLength("hello"); // Output: 5
printLength([1, 2, 3]); // Output: 3
printLength({ key: "value" }); // Output: undefined

In this code, the printLength function takes a value of type any and attempts to access the length property on that value. However, not all values have a length property, so this code will produce an error when passed an object like:

{ key: "value" }

If we change the type of the parameter x to unknown, the TypeScript compiler will require us to perform a type check before accessing the length property:

function printLength(x: unknown) {
  if (typeof x === "string" || Array.isArray(x)) {
    console.log(x.length);
  } else {
    console.log("Cannot determine length");
  }
}

printLength("hello"); // Output: 5
printLength([1, 2, 3]); // Output: 3
printLength({ key: "value" }); // Output: Cannot determine length

In this revised version of the printLength function, we perform a type check using the typeof operator and the Array.isArray() function before attempting to access the length property. This ensures that the code will only attempt to access the length property on values that are known to have it, and will handle other values gracefully.

Another advantage of using unknown over any is that it forces the programmer to be explicit about the type of a value. This can make the code easier to understand and maintain, as it clearly communicates the programmer's intentions and assumptions about the types of values being used.

In summary, the unknown type is a useful tool in TypeScript for representing values that are not known at compile time, and provides a level of type safety and explicitness that is not available with the any type. It is often a good idea to use unknown instead of any whenever possible in order to make the code more robust and maintainable.