DEV Community: Eyal Cohen

Seven Reasons Why I Love Shadcn UI

Eyal Cohen — Thu, 23 Nov 2023 21:40:13 +0000

Shadcn UI is a pretty new React component library by shadcn.

It’s built on top of Tailwind and Radix-UI, and I really enjoy using it lately.

Here are seven reasons why:

1. It’s Gorgeous

First off, it’s beautiful.

Shadcn UI has a modern, minimal design out of the box. It’s smooth.

The interactions and animations are already built for dropdowns, alerts, and dialogs.

2. Modular & Easy Installation and a CLI

There’s no scary monster dependency of 2mb to install and ship to users.

Every component can be installed separately, and Shadcn even created a CLI. Adding a component is as simple as:

npx shadcn-ui add card.

You can also just copy, paste, and you’re all set.

3. Full Control

This leads to the following reason: the components aren’t just ready to use but also ready to tweak.

Some libraries lock you into their way of doing things, but in Shadcn UI, you get complete control, and customization is simple.

4. It’s more of a building block than a component library

Shadcn UI differs from other component libraries because it resembles a LEGO set.

Even the docs say: “Use this as a reference to build your own component libraries.”.

And at the end, almost every company wants its own component library instead of committing to a specific style, which is usually hard to extend or customize.

These two different designs are made with Shadcn UI components:

5. Accessibility

Inclusivity is built in.

The components are made to be accessible since the underline library is radix-ui, which is an Unstyled, accessible component library for React.

Your apps will be user-friendly to all. And in this day and age, that’s not just nice — it’s essential.

6. Docs

The docs are perfect. Clear, packed with examples, they make it a breeze to understand how to use and customize components.

7. Dark/Light Theme

What’s the most critical thing for an app to be successful? That’s right — a dark theme.

Shadcn UI has a dark and light theme out of the box. And you can easily customize it to your needs.

— -

An example of an app I created lately with Shadcn UI is a getting things done task management aapp; you can view it here:

https://github.com/eyalcohen4/GTD

And don’t just take my word for it. I really recommend you give it a try in your next project.

Shadcn has even made a template you can use as a starter, or you can follow the instructions here to add it to an existing project

Happy coding!

originally published at coheneyal.com

The Benefits of Separating UI and Business Logic in Web Apps

Eyal Cohen — Mon, 19 Jun 2023 09:06:11 +0000

A well-architected web application views its UI as a mere layer or "skin" over the core business logic.

UI are a way for users to interact with the underlying logic, but it doesn't need
to influence the logic itself.

Let's take this a step further: could a user perform all operations in your web application from a console, if you decided to build one?

This can serve as a good litmus test in my opinion.

If you cant let users do the same actions they do in your web application from a console and vice versa,
you are not separating your logic enough.

Why it's important?

There are several advantages of separating UI and business logic.

Maintenance and Debugging Bugs and user flows can be isolated and fixed without going through complex steps.
Testing You can test the UI and the logic independently, making tests more accurate and
easier to write.
Reuse code Isolated pieces can be reused in different parts of your application or even across applications, saving coding time and preventing duplication.
Replaceability You can update separate pieces without rewriting others. this leads to your application being adaptable to changing requirements, which is important in our agile world.

Let's see how those advantages are achieved in practice.

First, A bad example

This is a simplified example of the wrong way to structure your app.

import React, { useState } from "react"
import axios from "axios"
import { useQuery } from "react-query"

interface Pokemon {
  name: string
  url: string
}

function PokemonApp() {
  const [search, setSearch] = useState("")

  const { data: pokemon, isLoading } = useQuery<Pokemon[]>(
    "pokemon",
    async () => {
      const { data } = await axios.get(
        "https://pokeapi.co/api/v2/pokemon?limit=100"
      )
      return data.results
    }
  )

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSearch(event.target.value)
  }

  if (isLoading) return <div>Loading...</div>

  const filteredPokemon = pokemon.filter((p) => p.name.includes(search))

  return (
    <div>
      <input type="text" value={search} onChange={handleChange} />
      <ul>
        {filteredPokemon.map((pokemon) => (
          <li key={pokemon.name}>{pokemon.name}</li>
        ))}
      </ul>
    </div>
  )
}

export default PokemonApp

We built a fun little Pokemon App like a mini Pokemon encyclopedia.

When you open it, it calls an API and grabs a list of all Pokemon. It can also pick a specific Pokemon and show its details when you click one.

Users can also type in the name of their favorite Pokemon.
The component will then look through the entire list to find a match and show only those ones.

Why is this a bad example?

This code is an excellent example of putting all your eggs in one basket.
And we all know how that ends :)

Can I build a CLI app on top of this code? No, I probably can't. Our component is wearing too many hats.
It's like a chef cooking, serving, washing dishes, and sweeping the floor afterward. It's a recipe for disaster.

Difficult to test

The current setup makes it challenging to test our code.

To test the search functionality, we have to deal with data fetching. but we must render the UI to test the data fetching.

It's as if we're assessing a chef's cooking while testing his dishwashing ability.

Hard to debug

Debugging is a burden when we must deal with many concerns simultaneously.

Say we have a bug that prevents a Pokemon's name from rendering. The issue could be a lousy API call, a flawed filtering logic, or a typo in the component.

Pinpointing the root cause is like finding a needle in a haystack without clear separation. You'd need to run and debug the entire app to find the root cause.

When you separate your concerns, you can isolate the problem by checking each part.
This will lead to a shorter time to resolution, and way less of a headache.

Impossible to reuse and replace

Imagine a new feature request from your product manager: a separate page for detailed Pokemon information.

With our current setup, we can't reuse our existing code. Our options are either to duplicate the code or to refactor it.

Replacing a piece from our component will also be challenging. Tightly coupled code restricts us from modifying individual parts without affecting others.

A better example

Let's transform our Pokemon App by separating concerns, and creating manageable pieces with clear responsibilities.

Splitting data fetching from UI

The first step is separating data-fetching from UI.
This lets us independently change our data source or UI and mock it for testing.

const fetchPokemons = () => {
  const { data } = await axios.get('https://pokeapi.co/api/v2/pokemon?limit=100');
  return data.results as Array<Pokemon>;
}

const usePokemons = () => {
  return useQuery('pokemon', fetchPokemons);
};

Now, fetchPokemon fetches the data, and PokemonList displays it.
We can test fetchPokemon without worrying about the UI and vice versa.

We can even put a breakpoint on fetchPokemon to see what data it returns without running the app.

Decoupling the search functionality

We'll also separate the search functionality into a function.

const filterPokemons = (pokemon: Pokemon[], search: string) => {
  return pokemon.filter((p) => p.name.includes(search))
}

// We can now use this logic anywhere we want
const allPokemon = await fetchPokemon()
const foundPokemon = searchPokemon(allPokemon, "pika")

Updating PokemonApp Component

With the separate components and functions, our main PokemonApp component becomes much cleaner:

function PokemonApp() {
  const [search, setSearch] = useState("")
  const { data: pokemon, isLoading } = usePokemon()

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSearch(event.target.value)
  }

  if (isLoading) return <div>Loading...</div>

  const filteredPokemon = useFilteredPokemon(pokemon, search)

  return (
    <div>
      <input type="text" value={search} onChange={handleChange} />
      <PokemonList pokemon={filteredPokemon} />
    </div>
  )
}

We're only concerned with managing state and user interactions in PokemonApp, delegating the data fetching to fetchPokemon, filtering to searchPokemon, and UI display to PokemonList and Pokemon.

Testing

We can now test each piece of our app independently.

test("fetchPokemons", async () => {
  const data = await fetchPokemons()
  expect(data.length).toBe(100)
})

test("searchPokemon", () => {
  const pokemon = [
    { name: "pikachu" },
    { name: "bulbasaur" },
    { name: "charmander" },
  ]
  const filteredPokemon = searchPokemon(pokemon, "pika")
  expect(filteredPokemon.length).toBe(1)
  expect(filteredPokemon[0].name).toBe("pikachu")
})

Reusability

Let's build a CLI app on top of our logic.

const inquirer = require("inquirer")

async function run() {
  const allPokemon = await fetchPokemon()

  const answers = await inquirer.prompt([
    {
      type: "input",
      name: "pokemonName",
      message: "Which Pokemon are you looking for?",
    },
  ])

  const foundPokemon = filterPokemons(allPokemon, answers.pokemonName)

  console.log(foundPokemon)
}

run()

Our decoupled design enables easy code reuse in different contexts.
We can now use the same logic to build another web, mobile, desktop, or even server app - anywhere that javascript allows us to run.

Conclusion

We used a simple example, but this concept applies to applications with thousands of components and functions.

Ultimately, our aim should be to construct applications where each piece has its defined role.

Your code can be a well-organized kitchen:
the chef, the waitperson, and the dishwasher have unique responsibilities.

Think about it when you're about to write your next web application:
Can I re-use the code to create a CLI tool without changing much of the code?

--
Thanks for reading!
You can find me on Github, Twitter, or my website.
Feel free to reach out :)

Building Media Object with Tailwind CSS

Eyal Cohen — Wed, 17 Jun 2020 17:15:56 +0000

In this post, we are going to build together a special design pattern called Media Object with only Tailwind and HTML.

The Media Object term was coined by Nicole Sullivan, the creator of Object-Oriented CSS (OOCSS), and it is a main CSS design pattern.

It can be very useful in reducing the amount of CSS you need.

Tailwind CSS, by definition, is a utility-first CSS framework for rapidly building custom user interfaces.

I myself find it so easy to create UI Interfaces with.

Tailwind allows me to have designs ready much faster than other libraries and concepts, and it's super easy to start with.
It is also customizable and themeable, And it's my go-to CSS library.

So, Let's create this Media Object example together:

We are going to use Tailwind from a CDN, but it's more recommended installing it locally and integrate it with your bundler.
(Learn more about it here.)

Let's start to code.

Create a new index.html file, and insert the Tailwind link to it at the top:

<link
  href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
  rel="stylesheet"
/>

Markup

We'll start by creating the markup of the Media Object.
Copy and paste this snippet below:

<div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/McDonald%27s_Golden_Arches.svg/546px-McDonald%27s_Golden_Arches.svg.png"
  />
  <div>
    <h3>McDonald's</h3>
    <h4>Fast food company</h4>
    <p>
      McDonald's Corporation is an American fast food company, founded in 1940
      as a restaurant operated by Richard and Maurice McDonald, in San
      Bernardino, California, United States.
    </p>
  </div>
</div>

First, we are wrapping everything with a container div.
After it, ther'es the media side we talked about before - represented by the img tag.
I used Wikimedia McDonald's logo.

Then we have a container for the other side of the object: The Content.
It includes a title and a description.

It should look something like this, without the styling.

Now here's come the magic: Let's use tailwind classes to make it behave the way we want to.

CSS

First, adding the container classes.
We are flexing it, centering the items, and giving him a bit of padding and margin.
To the first div, add:

    <div class="flex items-center m-2 p-2">

Next, We are gonna make the image responsive with a width class -

tailwind width classes are responsive by default.
We'll use 6rem, from the w-24 class.
In a Media Object, You should change the image size to whatever suit your design.

We also adding margin-right so it'll have space from the content.

  <div class="flex items-center m-2 p-2">
    <img
      class="w-24 mr-8"
      src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/McDonald%27s_Golden_Arches.svg/546px-McDonald%27s_Golden_Arches.svg.png"
    />

Now it should look like this:

We've made a Media Object!
img on one side, accompanying content on the second side.

Last thing is styling the text:

 <div class="flex items-center m-2 p-2">
    <img
      class="w-24 mr-8"
      src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/McDonald%27s_Golden_Arches.svg/546px-McDonald%27s_Golden_Arches.svg.png"
    />
    <div>
      <h3 class="text-3xl text-gray-900">McDonald's</h3>
      <p class="text-lg text-gray-700">
        McDonald's Corporation is an American fast food company, founded in 1940
        as a restaurant operated by Richard and Maurice McDonald, in San
        Bernardino, California, United States.
      </p>
    </div>
  </div>

YOU DID IT!
Now it looks exactly like in the sample.

You can always DM me if you have any question or something is not working for you - let me know,
I'm at @coheneyal4 at Twitter.

Good Luck!