DEV Community: Jaydev Mahadevan

Master DRY in Next.js with Layouts

Jaydev Mahadevan — Tue, 14 May 2024 14:25:48 +0000

This is my course on Next.js called Bite-Sized Next.js, where we learn core Next.js concepts in 5 minutes or less. I originally published this lesson on my blog.

Welcome back! Now that you've learned the essentials of pages in Next.js, it’s time to delve deeper and explore some of the more advanced features concerning pages. While I am calling them advanced ideas, you will definitely need to know them to build a truly well-crafted Next.js app.

Layouts

Imagine if you needed to figure out if a user can access a particular page in your app, and you wrote this code:

let canAccessPage: boolean;

if (!user.isLoggedIn) {
    canAccessPage = false;
}

canAccessPage = user.roles.includes(requiredRole);

You're proud of your solution, and you should be! Then, every time you need to check access, you copy and paste those lines everywhere. That wouldn’t be so smart anymore, would it? Intuitively, you would define a function to encapsulate the logic:

function checkAccess(user: User, requiredRole: string): boolean {
    return user.isLoggedIn && user.roles.includes(requiredRole);
}

For some reason Don’t Repeat Yourself is exclusively discussed in the context of code. Meanwhile I see lots of people breaking this guidance when it comes to markup.

Fortunately Next.js has a DRY answer for HTML: layouts! Layouts allow you to neatly encapsulate your markup, just like the function definition above does for checking a user’s access.

Essentially, layouts are just like any other page component in Next.js, but they accept a special children argument. This is where your child page will be populated in the layout.

A simple example

For example, if you were building a dashboard, you could use a layout like this:

export default function DashboardLayout({
  children, // will be a page or nested layout
}: {
  children: React.ReactNode;
}) {
  return (
    <main>
      <h1>This is the layout</h1>
      <section>
        {/* Include shared UI here e.g. a header or sidebar */}
        <nav></nav>
        {children}
      </section>
    </main>
  );
}

Your child page could be something like this:

export default function MyDashboard() {
  return <h2>This is my dashboard</h2>
}

And this would be the final rendering:

Where should I use layouts?

Think about all of the elements that are the same across your app. These are all great candidates for incorporating into your layout! Navigation headers, sidebars, and footers are probably the most common components that developers put into layouts.

The Next.js website itself has a common header and footer across many pages. I’ve highlighted them in blue below:

Using multiple layouts

Just like pages, layouts can be nested inside each other. When Next.js traverses your app hierarchy, it will make a note of all the layouts it finds along the path to each page.tsx file. Then all of those layouts will be stacked together to produce your completed markup. The Next.js docs have a nice visual of this process.

Other stuff to know

There are a couple other important things to know about layouts:

You must define a root layout directly under the app/ folder, and it must contain the html and body tags. Something like this would suffice:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {/* Layout UI */}
        <main>{children}</main>
      </body>
    </html>
  )
}

You can have a layout.tsx and a page.tsx in the same folder, and the page will inherit from the layout.

Templates

Templates are a special case of layouts. They are almost identical in terms of behavior, but the notable difference is that templates do not persist local state in between renderings. Think of templates as layouts with short-term memory problems. 🙂

export default function Template({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>
}

Use cases

Why would you want to use templates? There are certain situations where you want the page to render from scratch. Here are a couple scenarios:

You created a cool animation that runs with useEffect when a page loads. You always want the animation to play, no matter how many times the user has already navigated there.
You have a client-side payment form that leverages useState and collects credit card numbers. If the user navigates away, you want the form to be wiped clean.

How layouts and templates work together

With templates in the mix, understanding the order in which layouts, templates, and pages will render can be a little complicated. It goes like this:

Start at the top-level source folder (i.e. app)
Render the layout (if present), then the template (if present)
Have we reached the page we are looking for?
1. Yes —> render the page and finish
2. No —> move to the next folder down the hierarchy and repeat step (2)

Try to keep it simple

Maybe you’re wondering: if I have a layout within a template, will that layout persist between renders? The answer is no! In Next.js, you need to be mindful of how you organize things, especially state-holding components. If you find yourself nesting layouts and templates too deeply, you may want to simplify your layout hierarchy.

In this aspect, layout inheritance mirrors OOP (class) based inheritance. It’s a useful feature up to the point where it becomes too complex to understand. That’s when the effort of refactoring becomes worth the cost.

Conclusion

In this lesson, we've explored the powerful concepts of layouts and templates, tools that help us adhere to the DRY principle not just in our code but also in our markup. Understanding and implementing layouts will give your app a more consistent look and feel and help you manage page hierarchies effectively.

Next, we will delve into advanced routing techniques, helping you to create more dynamic Next.js applications. Subscribe to get the next tutorial!

Basic Routing and Pages in Next.js

Jaydev Mahadevan — Wed, 08 May 2024 14:32:20 +0000

This article originally appeared on my blog.

Hey there! In the last couple lessons we covered what Next.js is and how to set up your first project. If you have read those guides, you are ready to learn about pages and routing. Fortunately, making routes and pages in Next.js is a snap to understand!

Let’s take a look at how routing works first.

Creating Routes and Pages

Routes

Creating your client-side pages in Next.js is wonderfully straightforward, thanks to its file-based routing system. You just need to know two concepts:

Your source code directory paths become your URL structure. For example, a file at app/dashboard/settings/page.tsx will appear in your browser at http://myserver/dashboard/settings.
To make a URL accessible in your app, you must use a file named page within the appropriate directory. This file can end with .js, .ts, .jsx, or .tsx.

You can see this paradigm in action when you set up a new Next.js app. The screenshot below shows the index URL localhost:3000 is controlled by the index page app/page.tsx.

As you might have guessed, you can nest these folders as deeply as you would like.

Here’s an example of a folder hierarchy that’s a few levels deep:

And here’s the corresponding browser page. The URL matches our folders above.

Pages

Once you have your route paths established, creating your page is as simple as exporting a React component from a page.jsx or page.tsx file:

export default function Page() {
  return <h1>Hello, Dashboard Page!</h1>
}

Using Dynamic Segments

Dynamic segments allow you to capture variable segments from the URL. Create a folder somewhere in your directory path with brackets around its name to accept dynamic parts.

For example, app/settings/[username]/page.tsx will yield a route that accepts any value for username and incorporates it as an input parameter into the page’s component:

export default function Page({ params }: { params: { username: string } }) {
  return <div>This is the settings page for {params.username}</div>
}

Linking and Navigating

You now understand the basic components of a Next.js app. How do you connect routes and pages together?

Basic Example

Next.js utilizes the Link component from next/link to enable client-side navigation between pages, ensuring that the transitions are quick and do not require a page reload. Here’s how you can link to the About page from, say, the homepage:

import Link from 'next/link';

const Home: React.FC = () => {
  return (
    <div>
      Visit the <Link href="/about"><a>About Page</a></Link>.
    </div>
  );
}

export default Home;

Dynamic Segments

As a full-stack framework built on React, Next.js has full React support. Thus you can use all of the niceties of React, such as template literals and string interpolation, when coding for dynamic links.

// app/zoo/animals.jsx

import Link from 'next/link'

export default function ZooAnimals({ animals }) {
  return (
    <ul>
      {animals.map((animal) => (
        <li key={animal.id}>
          <Link href={`/blog/${animal.species}`}>{animal.name}</Link>
        </li>
      ))}
    </ul>
  )
}

Programmatic Routing

You can use Next’s built-in router to programmatically change pages (i.e. without user interaction). This can be especially useful in scenarios where you need to redirect a user after an action such as form submission or login.

Note that this is only available in client components, so you need to declare 'use client' at the top of the file.

'use client'

import { useState } from 'react';
import { useRouter } from 'next/navigation';

export default function LoginForm({ username }: { username: string }) {
  const router = useRouter();

  const handleLogin = async (event: React.FormEvent) => {
      event.preventDefault();

      // Simulating a login process - replace with actual logic
      const loginSuccessful = true;

      if (loginSuccessful) {
          router.push(`/profile/${username}`);
      } else {
          alert('Login failed!');
      }
  };

  return (
     <form onSubmit={handleLogin}>
       <button type="submit">Login</button>
     </form>
  );
};

Conclusion

And there you have it — a thorough dive into the basics of pages and routing in Next.js! By now, you should feel comfortable creating static and dynamic routes, linking between pages seamlessly, and even navigating programmatically within your applications. These foundational skills are crucial to your understanding of Next.js.

In our next lesson, we'll push the boundaries further as we learn advanced page and routing techniques. Make sure to subscribe if you want to catch the next chapter as soon as it drops!

A quick guide to Next.js setup

Jaydev Mahadevan — Fri, 03 May 2024 16:23:26 +0000

This post originally appeared on my blog.

Install Node

The base requirement to make Next.js run on your computer is to have a working installation of Node.js. The current version of Next.js requires Node 18.17 or higher.

If you’re on MacOS or Linux, a simple way to install Node is with Homebrew.

brew install node@20

For Windows users, Chocolatey is a popular solution.

choco install nodejs-lts --version="20.12.2"

Your first Next.js app

Easy so far, right? Creating a Next.js app is just one command away!

npx create-next-app@latest

When you run the above incantation, you will get presented with a number of configuration options by the install wizard. Here are all of them, displayed at once:

These options can be daunting if you’re not familiar with them. If you’re like me, you’d be tempted to just race through them all by accepting the defaults. And that would be perfectly fine! The Next.js team has done a good job of setting sensible default values.

However you might be interested in a deeper understanding of what these options do and ramifications of each choice. Let’s walk through them one at a time.

Project name

I think this one is self-explanatory. The project name will become the top-level folder of your app (and git repo). Other starter packs I have used will inject the project name in a dozen different places in your app, but create-next-app keeps it simple. The name will only be set in package.json , so it’s super easy to change later.

TypeScript

As you may guess from the name, this option enables TypeScript support. If you choose it, you will get first-class TypeScript support throughout your Next.js app. I highly recommend turning it on for anything more than a scratch project!

If you disable TypeScript and then change your mind later, no biggie. Just rename one of your source files with a .tsx or .ts extension, rebuild with npm run dev, and Next.js will do the setup work to enable TypeScript support.

ESLint

If you’re not familiar with ESLint, it’s a tool for statically analyzing your code to find bugs and optimizations. The ESLint option will install and set up ESLint with a myriad of Next.js custom rules to keep your app in tip-top shape. It’s a popular tool with integrations for most code editors. I would recommend enabling this one too.

Tailwind CSS

Tailwind is an example of a CSS utility library. Utility frameworks provide pre-defined classes that you can use directly in your markup, enabling you to style your pages and components without writing much of your own CSS at all.

Here’s a quick example:

<p class="text-slate-500">You have a new message!</p>

text-slate-500 is a Tailwind class that holds a single CSS attribute color: rgb(100 116 139) - so the text in the <p> tag will turn medium gray. It’s an extremely simple yet powerful concept!

There are many utility libraries, but Tailwind has emerged as one of the most popular and comprehensive options. I use and love Tailwind and recommend enabling this option (the default), as you can still opt out and write your own CSS alongside Tailwind.

`src` directory

By default, Next.js will place all source files under the app folder at the project root.

Some people prefer to have their code and related files under a single src directory. If you choose this option, your app folder will go under src. Then you’re free to organize other files and folders under src. The initial structure looks like this after installation with src enabled:

Unless you have a specific folder hierarchy in mind, I recommend staying with the convention of using the app folder instead of src .

App router

The release of the App Router marked a big shift in how we build Next apps. As compared to the previous Pages router, the App router allows more server-side optimizations, better performance, and flexible API and routing patterns. See this Stack Overflow answer for a concise comparison between the two routers.

I strongly recommend sticking with the App router. Out of all the options here, this will most strongly affect the future architecture, development, and performance of your app, so choose wisely!

Import alias

Import alias allow you to shorten import statements between files in your project. Aliases are especially useful for deeply nested paths. For example, imagine you had a file structure like this:

/app
  /components
    /nested-a
      /nested-b
        - MyComponent.tsx
    /utils
      - helpers.ts

Now, say you want to import helpers.ts in MyComponent.tsx. Without aliases, you would have to provide a long relative path:

import { helper } from '../../../utils/helpers';

But using aliases allows us to take advantage of a much more readable shortcut:

import { helper } from '@/app/utils/helpers'

In JavaScript and TypeScript apps, the convention is to use @ to represent the root source folder.

With this config option, you can customize @ to be any prefix you like. However, I suggest remaining with the standard since this is what other developers will expect.

Conclusion

Now you understand the ins and outs of creating a Next app! Stay tuned for part 3, where we will explore the structure of a basic Next.js app, including pages and routing.

PS. If you're interested in reading the full guide as it comes out, be sure to subscribe for updates!

What the heck is Next.js?

Jaydev Mahadevan — Fri, 03 May 2024 16:23:05 +0000

This post was originally published on my blog.

What is this guide?

Welcome to my comprehensive guide on Next.js! In this guide, I aim to introduce you to the powerful features of Next.js, a framework that enhances the capabilities of React to deliver richer web experiences. Whether you're just starting out or looking to level up your web development skills, this guide is designed to walk you through the essentials of using Next.js effectively. I'll break down complex concepts into manageable parts, provide practical examples, and share tips to help you master this tool. By the end of this series, not only will you understand why Next.js is so useful, you’ll also be equipped to start building your own projects with confidence.

What is Next.js?

Next.js is a popular and versatile full-stack JavaScript / TypeScript framework for creating static sites, APIs, and interactive web browser applications. Launched by Vercel in 2016, it builds on React, providing a more integrated solution to web development challenges.

If you’re new to these concepts, don’t worry — we’ll break them down further as we go.

Next.js has grown significantly since its initial version. Since then, it has benefited from thousands of man hours dedicated its development and has been downloaded by developers millions of times.

The reason it’s so popular is obvious to its many users: the framework does a lot of the heavy lifting for you. Everything from backend routing to frontend components have pre-built patterns in Next.js to help you ship faster!

Why would you use it?

As I alluded to above, there are many features to love about Next.js. Here are a few of the highlights:

Seamless page routing: the way you organize your files automatically becomes your app’s URL structure. For example, app/about.js translates to yourwebsite.com/about , greatly reducing the amount of boilerplate you need to write.
API routing: the same file-based routing pattern applies to the backend too, allowing you to easily create API endpoints.
Enhanced perfomance: you get code splitting, image optimization, and static file caching for free through next build.
Built-in CSS support: no matter what CSS framework you prefer, be it CSS modules, utility frameworks like Tailwind, or CSS-in-JS, Next.js has an integration for it.
Flexible data fetching: with support for both server-side and client-side rendering, you can really tune your app’s performance.

Reasons not to use Next.js

While there are many reasons to use Next.js, there is no tool that’s appropriate for every situation. This framework’s opinionated nature is a boon to certain use cases but a dealbreaker for others. Let’s talk about when you might want to consider other technology choices:

Steep learning curve: Power comes with a price. Next.js introduces additional abstraction and configuration on top of React and modern full-stack patterns. If you’re a new developer, you may want to start by learning React first!
Less flexibility: Next.js may be overkill for very simple, static websites, or client-side apps that don’t require much optimization. In those cases, you might not require server-side rendering or built-in API routes. Simpler static site generators or a separate frontend and backend might be more efficient.
Coupled to React: Next.js is specifically built for React. If you or your team has preference for Vue, Angular, or another framework, you might want to go a different route from Next.
API flexibility: Although Next.js supports API routes, if your backend needs are complex, involving heavy microservices architectures or serving a wide range of clients beyond web applications, considering a more tailored backend solution might be beneficial.

Next steps

Excited about what Next.js offers? Let’s continue to part 2 of the guide, where we will dive into setting up your first Next.js project, discussing different configurations, and how to start building right away.

PS. If you're interested in reading the full guide as it comes out, be sure to subscribe for updates!

9 React Calendar Components for Your Next App

Jaydev Mahadevan — Thu, 25 Apr 2024 15:08:47 +0000

This post originally appeared on my blog.

No matter what type of app you're building, a custom calendar component is probably not something you'd want to create from scratch. Handling the complexities of HTML, CSS, user interactions, and date/time manipulation that go into even a basic calendar is a huge undertaking. Thankfully there are many open-source solutions to come to your rescue. Here's a rundown of some popular date and time management libraries that I found while crafting my last React application. I hope the list below saves you some time!

react-calendar

https://github.com/wojtekmaj/react-calendar

Github stars: 3.4k

A simple yet comprehensive solution, react-calendar is known for its flexibility and ease of use. It's perfect for applications that require basic date picking functionalities without the overhead of more complex systems. The calendar supports a range of views from days to decades, and it's relatively easy to style.

react-big-calendar

https://github.com/jquense/react-big-calendar

Github stars: 7.4k

Styled after Google Calendar, this module is suitable for those looking for a robust, feature-rich calendar solution. react-big-calendar includes capabilities for managing events and supports drag-and-drop functionality. It integrates well with different date management libraries for handling dates, like Moment.js.

react-datepicker

https://github.com/Hacker0x01/react-datepicker/

Github stars: 7.8k

react-datepicker is incredibly versatile, offering a wide range of date picking options including set date ranges and time. You can also tweak its style and behavior extensively.

react-infinite-calendar

https://github.com/clauderic/react-infinite-calendar

Github stars: 4k

For a modern, sleek design with an infinite scrolling feature, react-infinite-calendar stands out. It offers a great user experience, particularly on mobile devices where the infinite scroll can help tremendously with navigation.

react-day-picker

https://github.com/gpbl/react-day-picker

Github stars: 5.7k

Lightweight and easy to integrate, react-day-picker provides basic date picking functionalities with a clean and modern interface. Its localization support makes it a practical choice for projects aiming for international reach. It also supports accessibility, an afterthought for many calendar components.

mantine

https://mantine.dev/dates/calendar/

Github stars: 24.3k

This component is part of the Mantine UI library. It offers a modern design with rich features including multiple month views and range selection. It's ideal for those already using Mantine components in their project. As a side note, Mantine has a lot of other useful prebuilt React components, so check it out if you haven't heard of it!

PrimeReact

https://primereact.org/calendar/

Github stars: 5.7k

Like Mantine, PrimeReact's calendar is a part of a larger component suite, offering rich features and extensive customization options. It counts many large companies in its user base, making it suitable for enterprise-grade applications.

MUI X calendar

https://mui.com/x/react-date-pickers/date-calendar

Github stars: 3.7k

If you're into the Material UI theme, look no further than MUI X calendar, which natively integrates with the Material UI design aesthetic. Other than that, this component has many of the other features and customizations of other calendars on this list.

FullCalendar

https://fullcalendar.io/

Github stars: 17.9k

As one of the most popular and well-developed calendars out there, FullCalendar is a powerhouse, capable of handling everything from simple date views to complex event scheduling. It is highly extensible and works well in projects that require detailed calendar functionalities.

Honorable mention: native datepicker

While exploring the realm of React calendar components, it's worth tipping our hats to the often overlooked but incredibly useful native HTML Date Picker. It's supported by all major browsers and is a snap to implement -- just drop in <input type="date"> and you're ready to go! If a limited feature set suits your use case, it's hard to beat the built-in option.

Conclusion

The React ecosystem has a plethora of calendar options that cater to nearly every need. Whether you're after something sleek and modern, robust and feature-packed, or just a straightforward solution without the frills, there's something for you. Let's make scheduling fun again!

PS. If you enjoyed this post, you'll probably like this short intro I wrote to Next.js.

Better, Faster Apps with Next.js

Jaydev Mahadevan — Thu, 18 Apr 2024 14:43:34 +0000

This article originally appeared on my blog.

Years ago, when I started out as a junior dev exploring the various areas of frontend and backend development, Next.js was a mystery to me. I was used to building backends and frontends as separate and distinct pieces. The utility of it was not obvious -- what exactly would you use it for? Well today I hope to reveal that mystery for those of you wondering the same thing. We will dive into what Next.js is and examine its major features and benefits. By the end, maybe you'll want to try it yourself if you're haven't before!

What Is Next.js?

Next.js is essentially a React framework that provides a robust set of features to build static and dynamic websites as well as web applications. It's built on top of React, which means if you’re familiar with React, you’re halfway there to mastering Next.js. But what sets it apart is its capability for server-side rendering and generating static websites, making your projects super snappy and SEO-friendly.

In the vast landscape of full-stack projects, Next.js stands out by providing a clear pathway from front-end to back-end development, all within the same framework. It simplifies the process of building full-fledged web applications by handling a lot of the heavy lifting for you, such as routing and data fetching, which are more complex in single-page applications (SPAs).

Next.js Feature Overview

This table gives a great overview of the features that Next.js supports, which span backend to frontend. Once you pick a database and (optional) ORM, you will have a complete end-to-end stack.

The Main Thing: Server / Client Components

The list above sounds great in theory, but a grab bag of features doesn't make for a good framework. What exactly makes Next.js stand out?

Well, in Next.js 13, the framework introduced a big shift: server components. Next.js leverages React server and client components to create a tightly integrated development experience and optimized user experience.

You decide what data, logic and markup to render on the server, and what to render on the client. Here is a quick reference to make that decision:

Server Components are ideal for parts of the application that are mostly static, perform heavy data fetching, or contain sensitive logic that should not be exposed to the client.
Client Components are used for parts of the application that require direct user interaction, access to client-side APIs, or need to manage client-specific state.

This is a pattern that many apps follow:

On the initial request, use an API route and server component to flesh out a page.
Then on subsequent requests, use client components to handle interactivity and data mutations back to the server.

This pattern is really useful with page-wide layouts. In the example home page shown above, the top and lefthand navigation panes could be rendered with a layout and server components. They would appear as soon as content is returned to the browser. The areas highlighted in blue could be client components that require more interactivity and are thus loaded later.

Other Benefits

Routing

Every app that has more than one page needs a way to define routes. Next.js accomplishes this objective with an elegant framework. It uses a file-system based router, where each file and folder directly translates to routes in your application.

The Next.js docs illustrate this concept well:

It's an intuitive system that eliminates the need for manual route declarations, making the development process smoother and faster.

Nice Built-ins

Next.js doesn't lock you into a specific styling approach; instead, it offers robust support for a variety of methods, including CSS Modules, Tailwind CSS, and CSS-in-JS.

My preferred CSS library is currently Tailwind, and Next.js already has it integrated into the installation process!

Additionally, Next.js offers enhanced TypeScript support, including a custom plugin for your editor.

Easy Builds and Deployments

Next.js comes with optimizations for images, fonts, and scripts. It also performs lazy loading and code splitting for your production build so that just the right amount of scripting is sent down to the user to run your app.

The best part is that most of these features require no configuration!

Packaging your app and deploying a frontend and backend are as simple as npm run build and npm run start, and if you deploy to Vercel (creators of Next.js), all these commands run automatically once you connect your repo.

Conclusion

Next.js has a bit of a learning curve, and the patterns it expects you to follow are nuanced and sometimes even downright confusing. Once you start grokking it though, you'll realize that it has the potential to supercharge your productivity. I hope that this overview helped you untangle some of the complexity!

I'll be writing an in-depth series on learning Next.js soon. Subscribe to get the tutorial as soon as it drops!

TypeScript Patterns to Level Up Your Game

Jaydev Mahadevan — Wed, 10 Apr 2024 14:11:21 +0000

Have you mastered the basics of TypeScript, and are wondering what to learn next? I was in the same position not long ago. Here are a few type patterns that will help you write high quality code and improve your productivity. I wish someone had showed me these when I was trying to improve my skills!

1. Partials

The Partial<T> utility type enables you to create a type with all properties of T set to optional. This is particularly useful when you want to partially update or copy an object.

interface User {
  id: string;
  name: string;
  age: number;
}

// `changes` can be a combo of any property in `User`
function updateUser(id: string, changes: Partial<User>) {
  if (changes.name) {
    // Implementation to update name...
  }
  if (changes.age) {
    // Update age...
  }
}

Using Partial<User> allows for the updateUser function to accept an object that may contain any subset of the properties defined in the User interface.

2. Records

Record<K,T> is a utility that constructs a type with a set of properties K of type T. This utility is ideal for mapping properties to values of a certain type, creating lookup tables, or any scenario where you need a more flexible yet strongly-typed object structure.

type CatInfo = {
  age: number;
  breed: string;
}

type CatTracker = Record<number, CatInfo>; // Cat ID to cat attrs

let cats: CatTracker = {};
// This is fine
cats[10] = { age: 5, breed: 'British Shorthair' }; 
// Error! 'tom' is not a number
cats['tom'] = { age: 5, breed: 'British Shorthair' };

One way I use the Record type is to organize records pulled from a database when building a service API.

3. Discriminated Unions

What if you know exactly how your data should look ahead of time, and you want to limit the number of safe options?

Discriminated unions help you to do just that. This pattern is incredibly useful for state management and handling complex data structures safely.

// Define loading states as discriminated union
type LoadingState =
  | { status: 'loading' }
  | { status: 'success', data: string }
  | { status: 'error', error: Error };

function handleState(state: LoadingState) {
  switch (state.status) {
    case 'loading':
      // Handle loading...
      break;
    case 'success':
      // Handle success - `data` is guaranteed to be present
      const parsed = JSON.parse(state.data);
      // More logic...
      break;
    case 'error':
      // Handle `state.error`...
      break;
  }
}

4. Object Keys

The keyof operator in TypeScript is used to create a union type consisting of all the public property keys of a given type. Use it when you want to ensure that a string argument is a valid key for a given object type.

interface Person {
  name: string;
  age: number;
  hasPets: boolean;
}

// Using 'keyof' to create a union type of the keys of Person
type PersonKeys = keyof Person;

// PersonKeys is equivalent to: 'name' | 'age' | 'hasPets'

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const guy: Person = {
  name: 'John',
  age: 30,
  hasPets: true,
};

// Example usage
const nameKey: PersonKeys = 'name';
const personName: string = getProperty(guy, 'name'); // 'John'

5. Read-Only Properties

The Readonly<T> utility type in TypeScript makes all properties of a type T immutable (in other words, cannot be reassigned after their initial declaration). This is particularly useful when you want to create a type that should not be modified after creation.

interface User {
  name: string;
  age: number;
}

// Making User properties read-only
const user: Readonly<User> = {
  name: 'Alice',
  age: 30
};

// If `user` wasn't created as `Readonly`, the properties below would be mutable.

user.name = 'Bob'; // Error: Cannot assign to 'name' because it is a read-only property.
user.age = 25; // Error: Cannot assign to 'age' because it is a read-only property.

In Conclusion

These intermediate-level type demos above are super practical for everyday TypeScript usage. And this is just a sampling of everything that TypeScript can do. Check out the TypeScript docs to see all of the utility types available.

All in all, the more logic you can move into the type checker, the safer and more maintainable your code will be. Your team (and your future self) will thank you!

For more insights into TypeScript, full-stack development, and beyond, don't forget to subscribe to my newsletter!

Things that I like better in Vue than in React

Jaydev Mahadevan — Mon, 08 Apr 2024 15:10:26 +0000

I’ve been using React for a long time, so when some says “Hey, you should try a different frontend framework”, my answer is always pffft, but I’m already so efficient =P. There have been enough cool developments in Vue, though, to make me want to try it. And man was I pleasantly surprised! Vue has a bunch of neat features that make me jealous as React dev. Let's delve into some Vue patterns that stand out against React's approach!

1. Installation is Fun

The Vue’s out-of-the-box impressions is light-years ahead — npm create vue@latest feels like a designed experience, while npm create-react-app is just a plain ol’ NPM command. I prefer interactively selecting which packages to install, as done in Vue, over CRA’s process.

On top of that, the packages installed by Vue provide a more complete dev experience than CRA, covering areas like routing, state management, and code formatting.

Vue’s installation process is awesomely interactive.

Also, can we talk about how helpful the starter page is when you open localhost for your new project?

All the Vue examples going forward are using the Composition API from Vue 3, which is most equivalent to functional React.

2. Intuitive Reactivity System

Vue's reactivity system feels more intuitive and less boilerplate-heavy compared to React's state management. Vue handles dependency tracking and updates automatically, making state management straightforward.

Vue Example

<template>
  <p>{{ count }}</p>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const count = ref(0);

onMounted(() => {
  setInterval(() => {
    count.value++;
  }, 1000);
});

onUnmounted(() => clearInterval(interval));
</script>

React Equivalent

React requires more boilerplate to achieve similar reactivity, especially for effects and state updates that depend on previous state values. Who else has to look up the subtle differences between useEffect , useMemo , and useCallback every time you want to use them? 🙋🏾‍♂️

function Counter() {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    const interval = setInterval(() => {
      setCount(currentCount => currentCount + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return <p>{count}</p>;
}

3. Single-File Components

Single-file components (SFCs) are definitely a love/hate thing, but I think they are great, especially for small components. In my opinion, encapsulating HTML, JavaScript, and CSS in one file promotes better organization and readability.

Vue Single File Component

<script setup lang="ts">
import { defineProps } from 'vue'

defineProps({
  message: String
})
</script>

<template>
  <div class="message-box">
    <p>{{ message }}</p>
  </div>
</template>

<style scoped>
.message-box {
  padding: 20px;
  border: 1px solid #eee;
}
</style>

React Equivalent

In React, achieving the same encapsulation typically involves separating concerns into different files or adopting CSS-in-JS libraries, which can add complexity.

function MessageBox({ message }) {
  return (
    <div className="message-box">
      <p>{message}</p>
    </div>
  );
}
// CSS is managed separately or through CSS-in-JS solutions

4. Conditional Rendering

Vue's directive system (v-if, v-for, etc.) provides a more readable approach to conditional rendering than React. This advantage becomes more pronounced as your if/else statements become more complicated.

Vue Example with Directives

<script setup lang="ts">
import { ref } from 'vue';

const isSubscribed = ref(false);
const isSubscriptionExpiring = ref(true);

// Above properties updated dynamically...
</script>

<template>
  <div>
    <p v-if="!isSubscribed">Please subscribe to access premium features.</p>
    <p v-else-if="isSubscriptionExpiring">Your subscription is expiring soon. Please renew to continue enjoying premium features.</p>
    <p v-else>Welcome back, valued premium user!</p>
  </div>
</template>

React Equivalent

function SubscriptionStatus() {
  const isSubscribed = false;
  const isSubscriptionExpiring = true;

  // Above properties updated dynamically...

  return (
    <div>
      {isSubscribed ? (
        isSubscriptionExpiring ? (
          <p>Your subscription is expiring soon. Please renew to continue enjoying premium features.</p>
        ) : (
          <p>Welcome back, valued premium user!</p>
        )
      ) : (
        <p>Please subscribe to access premium features.</p>
      )}
    </div>
  );
}

You can of course move the JSX-based logic into a JS function, but the initial pass is easier to understand in Vue.

5. Computed Properties

Vue's computed properties simplify the handling of complex logic that depends on reactive data. They are automatically cached and only re-evaluated when their dependencies change, optimizing performance.

Vue Example

<script setup lang="ts">
import { computed, ref } from 'vue'

const price = ref(10)
const quantity = ref(3)
const totalPrice = computed(() => price.value * quantity.value)
</script>

<template>
  <p>Total price: {{ totalPrice }}</p>
</template>

React Equivalent

In React, similar functionality requires useMemo hook, adding complexity and verbosity to component logic.

function TotalPrice() {
  const [price, setPrice] = React.useState(10);
  const [quantity, setQuantity] = React.useState(3);

  const totalPrice = React.useMemo(() => {
    return price * quantity;
  }, [price, quantity]);

  return <p>Total price: {totalPrice}</p>;
}

6. Streamlined State Management

Pinia is one of the recommended state management solutions for Vue. Thanks to its tight integration with Vue and thoughtful API, it feels more streamlined than the equivalent code in React + Redux.

Vue with Pinia

// stores/counter.js

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0 }
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

// components/MyCounter.vue

<script setup>
import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()
</script>

<template>
  <button @click="counter.increment">Increment</button>
  <div>Current Count: {{ counter.count }}</div>
</template>

React with Redux

// counterSlice.js

import { createSlice } from '@reduxjs/toolkit'

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1
    }
  },
})

export const { increment } = counterSlice.actions

export default counterSlice.reducer

// Counter.js

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from './counterSlice'

export function Counter() {
  const count = useSelector((state) => state.counter.value)
  const dispatch = useDispatch()

  return (
    <button onClick={() => dispatch(increment())}>
      Increment
    </button>
    <span>{count}</span>
  )
}

In Conclusion

My initial foray into learning Vue has expanded my perspectives on good design patterns and well-built APIs. It’s clear that Vue prioritized developer experience and application performance from the first commit. I think the biggest lesson here is that regardless of your skill level or what tools you have mastered, you can always learn from trying something new!

Is there anything else you like about Vue? Let me know in the comments!

PS. I share content like this post 2x / week. If you’re interested in frontend, backend, and how to become a better full stack developer, subscribe to my newsletter!

5 Alternatives to Redux for React State Management

Jaydev Mahadevan — Fri, 05 Apr 2024 15:07:39 +0000

A good state management solution is foundational to building a frontend application with any amount of complexity beyond “Hello World!”. One of the most well-known state management libraries for React is Redux, but there are many alternatives that may suit you better, depending on your needs and taste.

Here are 5 popular alternatives to Redux in the React universe that offer user-friendly APIs and have been hardened with real-world usage. Importantly, they are also actively maintained, with all having an update in the last month (as of this writing in April 2024).

For consistency and ease of understanding, I’ve demonstrated each library's capabilities using a simple counter example. Let’s go!

Zustand

https://github.com/pmndrs/zustand

Github stars: 42k

Last updated: March 2024

Supports TypeScript: yes

Zustand keeps things simple and straightforward for managing state in React. You can accomplish most basic tasks by using just one export, create, which exposes your store as a hook.

import { create } from 'zustand';

const useStore = create(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
  decrement: () => set(state => ({ count: state.count - 1 })),
}));

function Counter() {
  const { count, increment, decrement } = useStore();
  return (
    <div>
      <button onClick={decrement}>-</button>
      {count}
      <button onClick={increment}>+</button>
    </div>
  );
}

Use Zustand when…

You need to build rapidly. Thanks to its simplicity and minimal setup, Zustand is perfect for rapid prototyping. Developers can quickly implement state management and make adjustments on the fly without getting bogged down by complex configurations.
You need a flexible architecture. Zustand does not enforce a strict architecture, allowing developers to structure their state however they see fit. This flexibility is beneficial in projects that require a unique or unconventional state management setup.

Jotai

https://github.com/pmndrs/jotai

Github stars: 17k

Last updated: March 2024

Supports TypeScript: yes

Jotai provides a simple and flexible state management solution, using “atoms” for managing global state that's both easy to use and scalable. Atoms represent pieces of state that you can compose to achieve the desired complexity.

import { atom, useAtom } from 'jotai';

const countAtom = atom(0);

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  return (
    <div>
      <button onClick={() => setCount(count - 1)}>-</button>
      {count}
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

Use Jotai when…

You can naturally divide your state. Jotai's atom-based approach is great for projects that benefit from fine-grained control over state. Each atom can be independently updated and composed, making it an excellent choice for applications where state needs to be managed in small, reusable pieces.
Your project emphasizes immutability. Jotai’s API encourages the use of pure functions and immutable data, aligning with modern React development practices.

MobX

https://github.com/mobxjs/mobx

Github stars: 27k

Last updated: April 2024

Supports TypeScript: yes

MobX offers fine-grained observability and automatic tracking of state changes for React components using Functional Reactive Programming (FRP).

FRP (a comprehensive topic by itself!) allows you to declaratively specify your state and its changes over time. Using FRP, MobX tries to make state management as transparent and predictable as possible. You can read more about the principles of MobX here.

import { makeAutoObservable } from 'mobx';
import { observer } from 'mobx-react-lite';

// Class-based store
class CounterStore {
    count: number = 0;

    constructor() {
        makeAutoObservable(this);
    }

    increment() {
        this.count += 1;
    }

    decrement() {
        this.count -= 1;
    }
}

const counterStore = new CounterStore();

const Counter = observer(() => (
  <div>
    <button onClick={() => counterStore.decrement()}>-</button>
    {counterStore.count}
    <button onClick={() => counterStore.increment()}>+</button>
  </div>
));

You can also create the store with a functional paradigm:

// Function-based store
function createCounterStore() {
  return makeAutoObservable({
    count: 0,
    increment() {
      this.count += 1;
    },
    decrement() {
      this.count -= 1;
    }
  });
};

const counterStore = createCounterStore();

Use MobX when…

You like object-oriented patterns. MobX’s API is designed to work seamlessly with classes (such as ES6 React classes) and objects, making it a natural fit for applications that use OOP principles extensively.
Your project requires fine-grained reactivity. MobX gives you the ability to precisely control when your components re-render in response to state changes. You can ensure that only components that depend on changed observables are re-rendered, optimizing performance.

XState

https://github.com/statelyai/xstate

Github stars: 26k

Last updated: March 2024

Supports TypeScript: yes

XState leverages state machines and statecharts for managing state, which is especially useful for complex state logic and workflows. The initial state is set with the initial key, and allowed state transitions are set within the on key of each state within states.

import { useMachine } from '@xstate/react';
import { createMachine, assign } from 'xstate';

const counterMachine = createMachine({
  initial: 'active',
  context: { count: 0 },
  states: {
    active: {
      on: {
        INCREMENT: { actions: assign({ count: ctx => ctx.count + 1 }) },
        DECREMENT: { actions: assign({ count: ctx => ctx.count - 1 }) },
      }
    }
  }
});

function Counter() {
  const [state, send] = useMachine(counterMachine);
  return (
    <div>
      <button onClick={() => send('DECREMENT')}>-</button>
      {state.context.count}
      <button onClick={() => send('INCREMENT')}>+</button>
    </div>
  );
}

Use XState when…

Your UI logic can be represented as a state machine. XState shines in applications that benefit from modeling their UI logic as state machines or statecharts. Think apps with complex state logic, multiple states, and transitions, such as forms or games.
You want to visualize your logic. XState comes with tooling that allows you to visualize your state machines and workflows. This feature is invaluable during both development and debugging phases, especially for large apps.

Valtio

https://github.com/pmndrs/valtio

Github stars: 8k

Last updated: March 2024

Supports TypeScript: yes

Valtio simplifies state management by using a proxy state. Create the state with proxy() and use it just like a JavaScript object!

It simplifies state mutations and ensures React components automatically update in response. Simply call useSnapshot with your state object.

import { proxy, useSnapshot } from 'valtio';

const state = proxy({ count: 0 });

function Counter() {
  const snapshot = useSnapshot(state);
  return (
    <div>
      <button onClick={() => state.count--}>-</button>
      {snapshot.count}
      <button onClick={() => state.count++}>+</button>
    </div>
  );
}

Use Valtio when…

You need rapid development. Valtio’s lack of boilerplate makes it easy to move fast. It’s ideal for prototypes and small to medium sized projects.
Your app requires mutable state. Valtio provides an easy and efficient way to manage state mutations directly, without the overhead of immutability patterns.

Conclusion

These examples illustrate the diverse approaches to state management in React, offering solutions ranging from minimalistic and straightforward (like Zustand and Jotai) to more structured and complex (like XState). Valtio provides an easy way to manage state through direct mutations, while MobX focuses on reactive state changes through observables. Each library has its strengths and is suitable for different scenarios depending on the requirements of your React application.

Which of these libraries to you prefer? Do you use one that I left out? Let me know in the comments!

PS. I share content like this post 2x / week. If you’re interested in frontend, backend, and how to become a better full stack developer, subscribe to my newsletter!

The future of the web: navigating HTMX, vanilla JS, and React

Jaydev Mahadevan — Thu, 07 Mar 2024 14:11:29 +0000

React is currently the go-to choice for many devs when crafting interactive sites. But there's a new player in town catching the eye of devs everywhere - HTMX. It's fresh, it's exciting, and it's making old tech cool again. And it’s even made people interested in going framework-less.

I’ll outline the same functionality using Reach, HTMX, and vanilla JS, and then give you my thought process when selecting a frontend strategy.

For our sample scenario, we will build a “like” button. When it’s clicked, the number of likes is incremented by a backend call.

HTMX Example

HTMX is designed for simplicity, allowing you to enhance server-rendered pages with attributes directly in your HTML.

<div id="like-counter">Likes: <span>0</span></div>
<button hx-get="/update-likes" hx-trigger="click" hx-target="#like-counter">
  Like
</button>

Clicking the button sends a GET request to /update-likes, and the response directly updates the inner HTML of #like-counter.

Vanilla JS Example

Using vanilla JavaScript gives you full control over the interaction but requires more boilerplate code.

<div id="like-counter">Likes: <span id="likeCount">0</span></div>
<button id="likeButton">Like</button>

document.getElementById('likeButton').addEventListener('click', function() {
  fetch('/update-likes', { method: 'POST' })
    .then(response => response.json())
    .then(data => {
      document.getElementById('likeCount').innerText = data.likes;
    });
});

React Example

React's component-based approach allows for a structured way to handle state changes and UI updates.

import React, { useState } from 'react';

function LikeButton() {
  const [likes, setLikes] = useState(0);

  const handleClick = () => {
    fetch('/update-likes', { method: 'POST' })
      .then(response => response.json())
      .then(data => setLikes(data.likes));
  };

  return (
    <div>
      <button onClick={handleClick}>Like</button>
      <div>Likes: {likes}</div>
    </div>
  );
}

Which one should I pick?

The option you choose is is situational and depends on a number of different factors, such as the project requirements, your own coding preferences, and your skill level. Here are a few points to keep in mind when selecting a framework / design pattern:

Choose React when…

You want advanced control over UI effects and DOM manipulation without having to code from scratch
You would like to leverage a rich ecosystem of third-party libraries and pre-built components
You are an experienced developer, or you don’t mind a learning curve as React concepts can be tricky

Choose plain JS when…

You are a beginner and/or want to learn the fundamentals of browser programming
You want complete control over your app
You need to build without any external dependencies or you want to keep your build size small

Choose HTMX when…

You want to do some frontend work with a low learning curve
You need to implement simple interactions quickly
You can render pages server-side and don’t want or need a huge JavaScript app

Conclusion

Choosing between HTMX, vanilla JavaScript, and React depends on your project's needs, team skill set, and the level of interactivity required. HTMX offers a simple way to enhance server-rendered pages, vanilla JavaScript gives you full control with more responsibility, and React provides a powerful framework for building complex user interfaces with efficient state management.

Was this approach helpful? Let me know what else you consider when making technology choices!

FastAPI and HTMX: A Modern Approach to Full Stack

Jaydev Mahadevan — Tue, 05 Mar 2024 14:24:07 +0000

In my last post I talked about what HTMX is and the benefits of using it in your app. HTMX takes care of many frontend concerns, but what about backend? I love Python and FastAPI, and it happens that HTMX and FastAPI pair well together. The combination of these two technologies gives you a simple yet powerful end-to-end stack to build applications. Let’s see how they integrate!

The Benefits of FastAPI

FastAPI is a modern, fast (high-performance) web framework for building APIs with Python 3.7+ based on standard Python type hints. Here are some of its key benefits:

Performance: FastAPI is built on Starlette and Pydantic, making it as fast as NodeJS and Go (thanks to Starlette) and one of the fastest frameworks for Python.
Ease of Use: It offers an intuitive API that makes it easy to use yet powerful. You can expect significant development speedup due to its simplicity.
Automatic Documentation: With FastAPI, documentation for your API is generated automatically using Swagger UI and ReDoc, making it easier for developers to understand and use your API.
Type Safety: Leveraging Python type hints, FastAPI helps catch errors early in development, leading to more robust and error-free code.

The Benefits of HTMX

HTMX is a JavaScript library that allows you to access AJAX, CSS Transitions, WebSockets, and Server Sent Events directly in HTML, making it a powerful tool for enhancing web pages with dynamic content without writing complex JavaScript. Its benefits include:

Simplicity: You can add dynamic behavior to your web pages using attributes directly in your HTML, making it easier to read and maintain.
Progressive Enhancement: HTMX works as an enhancement on top of your existing server-rendered pages, allowing you to progressively enhance your web application's interactivity.
No Need for Complex JavaScript Frameworks: With HTMX, you can create highly interactive web applications without relying on heavy JavaScript frameworks, leading to faster load times and improved performance.

Building a Full Stack App with FastAPI and HTMX

Now that we understand the benefits, let's dive into creating a simple application that lists items and allows users to add new items to the list dynamically.

Step 1: Set Up Your Project

First, create a new project directory and set up a virtual environment:

mkdir fastapi-htmx-demo
cd fastapi-htmx-demo
python3 -m venv venv
source venv/bin/activate

Install FastAPI, Uvicorn (an ASGI server), and Jinja2 for templating:

pip install fastapi uvicorn jinja2 python-multipart

Step 2: Create Your FastAPI Application

Create a file named main.py and set up your FastAPI application and routes:

from fastapi import FastAPI, Request, Form
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates

app = FastAPI()
templates = Jinja2Templates(directory="templates")

# Dummy datastore
items = ["Item 1", "Item 2"]

@app.get("/", response_class=HTMLResponse)
def get_items(request: Request):
    return templates.TemplateResponse("items.html", {"request": request, "items": items})

@app.post("/add-item")
def add_item(request: Request, item: str = Form(...)):
    items.append(item)
    return templates.TemplateResponse("partials/item.html", {"request": request, "item": item})

Step 3: Set Up Jinja2 Templates

Create a templates directory and add an items.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FastAPI + HTMX Demo</title>
    <script src="https://unpkg.com/htmx.org"></script>
</head>
<body>
    <h1>Item List</h1>
    <ul id="item-list">
        {% for item in items %}
        <li>{{ item }}</li>
        {% endfor %}
    </ul>
    <form hx-post="/add-item" hx-target="#item-list" hx-swap="beforeend" hx-include="#item-input">
        <input type="text" id="item-input" name="item" required>
        <button type="submit">Add Item</button>
    </form>
</body>
</html>

Next, create a template partial called item.html. This will be used to render new items in the FastAPI server as they are added via HTMX POST call in the browser.

<li>{{ item }}</li>

Step 4: Run Your Application

Run your application using Uvicorn:

uvicorn main:app --reload

Visit http://127.0.0.1:8000 in your browser to see your application in action.

If you’re interested in seeing all the code in one place, check it out here: https://github.com/jaydev/fastapi-htmx-demo

Conclusion

FastAPI provides a robust backend, offering high performance and ease of development, while HTMX allows for dynamic frontend interactions with minimal effort. This tech stack has an easy learning curve and is useful in a wide variety of situations.

I know I’ll be reaching for this combination in the future as I build apps. Let me know what your favorite HTMX backend pairing is in the comments!

A quick tour of HTMX

Jaydev Mahadevan — Tue, 27 Feb 2024 14:11:56 +0000

In this blog post, I'll share my first impressions of HTMX, dissect what it is and its benefits, and provide examples to illustrate its power and potential. Let's dive into this intriguing technology that promises to bring back the simplicity and ethos of the original Web.

What is HTMX?

Here’s the pointy-haired professor definition:

HTMX is an extension of HTML that gives you the ability to declaratively interact with server-side resources and generate dynamic client-side interactivity.

Let’s break that down…

HTMX is a superset of HTML

HTMX introduces a set of custom attributes prefixed with hx-, such as hx-get, hx-post, hx-trigger, and hx-target. These attributes allow you to define the server interactions and client-side experience.

On top of that, another interesting aspect of HTMX is that you can use any element to trigger server calls, not just buttons or links:

<div hx-get="/fetch-data" hx-trigger="click" hx-target="#data-container" hx-swap="innerHTML" style="cursor: pointer;">
    Click me to load data
</div>

HTMX is declarative

HTMX adopts a declarative approach, allowing you to describe what you want to achieve directly in the HTML, rather than how to do it. This reduces boilerplate and makes your intentions clear by adding just a bit of markup.

For example, let’s say we want to load and display a set of user profiles from our backend server. Here is how you could accomplish this feature with React:

import React, { useState, useEffect } from 'react';

function UserProfiles() {
  // State to hold the fetched user profiles
  const [profiles, setProfiles] = useState([]);

  // Fetch user profiles on component mount
  useEffect(() => {
    fetch('/api/user-profiles')
      .then(response => response.json())
      .then(data => {
        setProfiles(data);
      })
      .catch(error => {
        console.error('Error fetching user profiles:', error);
      });
  }, []);

  return (
    <div id="profiles-container">
      {profiles.map(profile => (
        <div key={profile.id}>
          Name: {profile.name}, Age: {profile.age}
        </div>
      ))}
    </div>
  );
}

export default UserProfiles;

Now, here is the same functionality achieved with HTMX:

<!-- Fetch and display user profiles -->
<button hx-get="/api/user-profiles" hx-trigger="click" hx-target="#profiles-container" hx-swap="innerHTML">
    Load User Profiles
</button>
<div id="profiles-container"></div>

HTMX enables frontend interactivity

You can see how using the aforementioned attributes such as hx-get and hx-post and the user profiles fetch example above enable you to easily request and respond to server data. Here is another HTMX example, this time for a form submission:

<form id="myForm" hx-post="/submit-form" hx-target="#responseMessage" hx-swap="outerHTML">
    <input type="text" name="username" required>
    <input type="email" name="email" required>
    <button type="submit">Submit</button>
</form>

<!-- This element will be replaced with the server's response -->
<div id="responseMessage"></div>

For basic apps, it’s easy to imagine not even needing a frontend framework like React!

What are the benefits of HTMX?

Simpler code

With HTMX, you can significantly reduce the amount of JavaScript required to make your web pages interactive. This not only makes your codebase cleaner but also more maintainable.

Faster page loads

HTMX has the potential to drastically improve your page load times. It works directly with your existing HTML, meaning there's no need for the overhead of loading bulky JavaScript frameworks.

Second, HTMX natively supports the notion of interactivity “islands”, which are small chunks of the page that load independently as data arrives. You can design your site to load the essential content first, with more dynamic parts loading and becoming interactive as needed. This improves the perceived speed and responsiveness of your site.

Here is a simple example of the islands pattern. It’s trivial to use HTMX to load each section on its own.

<h1>Welcome to HTMX News</h1>

<!-- Main Article Island -->
<div id="main-article" hx-get="/main-article" hx-trigger="load" hx-swap="innerHTML">
    Loading main article...
</div>

<!-- Related Articles Island -->
<div id="related-articles" hx-get="/related-articles" hx-trigger="load" hx-swap="innerHTML">
    Loading related articles...
</div>

<!-- Comments Island -->
<div id="comments-section" hx-get="/comments" hx-trigger="load" hx-swap="innerHTML">
    Loading comments...
</div>

Backend devs can be full stack

Since HTMX moves much of the client-side rendering back into the server, backend developers can more readily use the tools and patterns familiar to them to contribute to the frontend. This paradigm is closer to the original days of full-stack development, before the advent of single-page application frameworks.

True (web) client agnosticism

Since HTMX leverages standard HTML, it works across all modern browsers without requiring special adaptations or polyfills. This ensures your applications are accessible to a wide audience without extra work.

However, to support other types of clients, such as native mobile apps, you will probably still need a pure data API (e.g. JSON API).

Progressive enhancement

HTMX fits perfectly with the philosophy of progressive enhancement. You can start with a fully functional HTML page, and enhance or degrade the experience depending on the capabilities of your client. This ensures that your site remains usable even if JavaScript fails or is disabled.

Is HTMX the future?

Depends on who you ask! Single-page frameworks like React are powerful, but there is a growing sentiment that the design patterns have become too complicated and apps too bloated. Browser capabilities have grown tremendously since the original days of AJAX and jQuery, and we can rely on them more without the use of third-party JS libraries.

HTMX addresses a real need for simplicity and efficiency in web development, challenging the prevailing complexity of SPA frameworks. It's a powerful library for developers looking for a more straightforward, maintainable approach to building interactive web applications.

In conclusion, my first impressions of HTMX are overwhelmingly positive. It feels like a return to the basics of the web, enhanced with modern capabilities. For those of us yearning for simpler times without sacrificing the interactivity and dynamism users expect, HTMX offers a compelling solution.

DEV Community: Jaydev Mahadevan

Master DRY in Next.js with Layouts

Layouts

A simple example

Where should I use layouts?

Using multiple layouts

Other stuff to know

Templates

Use cases

How layouts and templates work together

Try to keep it simple

Conclusion

Basic Routing and Pages in Next.js

Creating Routes and Pages

Routes

Pages

Using Dynamic Segments

Linking and Navigating

Basic Example

Dynamic Segments

Programmatic Routing

Conclusion

A quick guide to Next.js setup

Install Node

Your first Next.js app

Project name

TypeScript

ESLint

Tailwind CSS

src directory

App router

Import alias

Conclusion

What the heck is Next.js?

What is this guide?

What is Next.js?

Why would you use it?

Reasons not to use Next.js

Next steps

9 React Calendar Components for Your Next App

react-calendar

react-big-calendar

react-datepicker

react-infinite-calendar

react-day-picker

mantine

PrimeReact

MUI X calendar

FullCalendar

Honorable mention: native datepicker

Conclusion

Better, Faster Apps with Next.js

What Is Next.js?

Next.js Feature Overview

The Main Thing: Server / Client Components

Other Benefits

Routing

Nice Built-ins

Easy Builds and Deployments

Conclusion

TypeScript Patterns to Level Up Your Game

1. Partials

2. Records

3. Discriminated Unions

4. Object Keys

5. Read-Only Properties

In Conclusion

Things that I like better in Vue than in React

1. Installation is Fun

2. Intuitive Reactivity System

3. Single-File Components

4. Conditional Rendering

5. Computed Properties

6. Streamlined State Management

In Conclusion

5 Alternatives to Redux for React State Management

Zustand

Use Zustand when…

Jotai

Use Jotai when…

`src` directory