DEV Community: Adrianna V.

Transforming Fullstack Development with Remix: A React Comparison

Adrianna V. — Mon, 03 Jun 2024 01:07:04 +0000

In my recent livestream, I discussed the crucial concept of Fullstack Data Flow in the Remix Framework. I mistakenly referred to it as the Remix Full stack cycle, so I want to clarify. This overarching flow within Remix is essential to grasp as you dive into this framework.

I aim to compare the new approach to building with React in Remix with our traditional way of using React alone, often with multiple libraries. This comparison should be particularly beneficial for React developers who are still undecided about adopting full stack frameworks like Remix.

Currently, Remix is built around React Router to enhance Server Side Rendering capabilities. It offers built-in support for nested routes, providing a more manageable structure through a single directory: app/routes.

The intricacies of building routes in Remix warrant their own blog post, so I won't dive into that here. I appreciate the variety of options available though, and many engineers have strong opinions about their preferred approach.

Let’s talk about the flow of data
- Loaders
- Components
- Actions
React alone in comparison

Let’s talk about the flow of data

The flow is split into three phases:
Loaders → Components → Action

Loaders

In Remix, loader functions are used to fetch data on the server-side. They should always be defined in route files.

Keep in mind by default in Remix we are rendering our data from the server or also known as Server Side Rendering (SSR)

Example:

export const loader = async ({ params }) => {
  const data = await fetchData(params.id);
  return json(data);
};

Components

In Remix, components receive the data fetched from loader functions to be rendered. Components access this data with useLoaderData hook.

Example:

import { useLoaderData } from "@remix-run/react";

export const loader = async ({ params }) => {
  const data = await fetchData(params.id);
  return json(data);
};

export default function Post() {
  const data = useLoaderData();
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
}

Actions

Action functions handle form submissions, validations, and other mutations. They are called when a form is being submitted, allow the server to process the data, update if successful or return validation errors that indicate to the user what failed.

Example:

export default function NewPost() {
  const actionData = useActionData();

  return (
    <div>
      <h1>Create a New Post</h1>
      {actionData?.error && <p style={{ color: "red" }}>{actionData.error}</p>}
      <Form method="post">
        <div>
          <label>
            Title: <input type="text" name="title" />
          </label>
        </div>
        <div>
          <label>
            Content: <textarea name="content" />
          </label>
        </div>
        <button type="submit">Create Post</button>
      </Form>
    </div>
  );
}

export const action = async ({ request }) => {
  const formData = await request.formData();
  const newPost = await createPost(formData);
  return redirect(`/posts/${newPost.id}`);
};

As we’ve seen in Remix how we fetch data, render that data in our components, and handle data mutations through form handling, the overall pattern is not that different from when we used React alone but as you can see we are are rarely using our regular hooks useState or useEffect.

React alone in comparison

This would compare to Remix’s loader function and useLoaderData hook.

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

const Post = ({ postId }) => {
  const [post, setPost] = useState(null);

  useEffect(() => {
    axios.get(`/api/posts/${postId}`)
      .then(response => {
        setPost(response.data);
      })
      .catch(error => {
        console.error("There was an error fetching the post!", error);
      });
  }, [postId]);

  if (!post) return <div>Loading...</div>;

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
};

export default Post;

That’s not bad but now there is less separation between the data and how we go about fetching that data. We’ve been used to that pattern for a while and got used to it.

Now let’s compare Remix’s action function and useActionData to using React standalone

const PostForm = () => {
  const [formData, setFormData] = useState({ title: '', content: '' });
  const [errors, setErrors] = useState({});

  const validate = () => {
    const newErrors = {};

    if (!formData.title.trim()) {
      newErrors.title = 'Title is required';
    }

    if (!formData.content.trim()) {
      newErrors.content = 'Content is required';
    }

    setErrors(newErrors);

    return Object.keys(newErrors).length === 0;
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    if (!validate()) {
      return;
    }

    try {
      const response = await axios.post('/api/posts', formData);
      console.log('Post created', response.data);
    } catch (error) {
      console.error('There was an error creating the post!', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <input
          type="text"
          name="title"
          value={formData.title}
          onChange={handleChange}
          placeholder="Title"
        />
        {errors.title && <p style={{ color: 'red' }}>{errors.title}</p>}
      </div>
      <div>
        <textarea
          name="content"
          value={formData.content}
          onChange={handleChange}
          placeholder="Content"
        />
        {errors.content && <p style={{ color: 'red' }}>{errors.content}</p>}
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default PostForm;

Yes, we can definitely find ways to consolidate this and use third party libraries that help with forms like react-final-form or Formkik but can we be honest that following Remix’s pattern helps us write cleaner code from the beginning? There’s a lot you don’t need to do in Remix because of it’s intuitive nature to rely on not only React Router but on the browser’s natural flow as well.

If you made it this far, thanks for reading. I talk more about Remix than I write about it. I host a livestream titled Astrology & JavaScript Series on Wednesdays at 1pm ET on X and Twitch. I’m building a tool that helps you understand astrology more by learning the foundational blocks first.

I use Typescript within Remix and good ole Tailwind. I pull all the required data from DivineAPI (Astrology & JavaScript Series Sponsor!). They provide me all the information I need, working with their Western Astrology API. I talk often about my process, go through the code and do some live-coding as well.

Astrology vs Software Engineering

Adrianna V. — Sun, 26 May 2024 05:00:35 +0000

My journey into software engineering began early, driven by a passion for learning tools and concepts that later required collaboration with people of diverse background to turn into a career. In parallel, astrology became a tool to understand myself and my past, boosting my confidence in both life and career decisions. Understanding yourself leads to understanding others, and vice versa. Interestingly, astrology and software engineering, despite their different uses and outcomes, share a logical and rule-based framework & can get technical quite easily.

I never imagined I'd draw parallels between astrology and software development, but in integrating these topics in my live-stream titled, Astrology & JavaScript Series, I've uncovered a fun and fascinating analogy worth exploring.

Whether you're involved in tech and currently use programming languages, finding amusement in astrology, or if you're an astrology enthusiast who appreciates the analytical aspects and detailed insights it offers, you'll find this concept intriguing. It's not only fascinating but also a valuable skill to possess, offering numerous benefits.

Both astrology and programming languages have systems, rules, and structures that guide their application and interpretation. Without getting too far into the nitty gritty details of each, let’s talk about how the two might align in terms of their components and functionalities below.

Programming Languages vs. Astrological Systems
Syntax and Grammar vs. Astrological Rules
Variables vs. Planets, Signs, and Houses
Functions and Methods vs. Aspects
Conditional Statements vs. Dignities and Debilities
Libraries and Frameworks vs. Astrological Techniques and Systems
Debugging vs. Chart Rectification
Documentation and Comments vs. Astrological Literature
Final Words

Programming Languages vs. Astrological Systems

In this analogy, the choice between different programming languages (e.g., JavasScript, Python, Java, C++) could be a lot like the choice between different astrological systems, such as Vedic (Sidereal) astrology and Western (Tropical) astrology. Each programming language and astrological system has its own set of rules, syntax, and areas where it excels, influenced by its foundational principles.

Syntax and Grammar vs. Astrological Rules

Just as each programming language has its own syntax that directs how code must be written to be correctly interpreted by the compiler or interpreter, each astrological system has its own set of rules for interpretation. This includes how planets, signs, houses, and aspects are understood and interpreted. The syntax in programming ensures code is structured correctly, while astrological rules guide the interpretation of a chart.

Variables vs. Planets, Signs, and Houses

In programming, variables are used to store information that can be manipulated. In astrology, planets, signs, and houses act somewhat like variables, each holding their specific meanings and influences that interact in complex ways to form the basis of a reading.

Functions and Methods vs Aspects

Functions in programming are blocks of code designed to perform a particular task, and methods can be functions associated with objects or classes. In astrology, aspects (the angles planets make to each other in the sky) could be seen as specific interactions or relationships between the 'variables' (planets) that modify outcomes or influences, much like how functions and methods operate on variables to produce results.

Conditional Statements vs. Dignities and Debilities

Conditional statements in programming (if/else statements) execute different blocks of code based on certain conditions. This can be compared to the concept of essential dignities and debilities in astrology, where a planet's position in a sign or house can strengthen (dignity) or weaken (debility) its effect, depending on the 'conditions' of its placement.

Libraries and Frameworks vs. Astrological Techniques and Systems

Just as software engineers use libraries and frameworks to extend the functionality of a programming language and simplify complex tasks, astrologers use various techniques (e.g., progressions, transits, solar returns, synastry) and systems (e.g., Hellenistic, Medieval, Modern) to add depth and precision to their interpretations.

Debugging vs. Chart Rectification

Debugging in programming involves identifying and removing errors from code. In astrology, rectification is a process used to correct or verify uncertain birth times by working backwards from known life events. Both processes involve a careful analysis to ensure accuracy.

Documentation and Comments vs. Astrological Literature

In programming, documentation and comments are used to explain how the code works and to make it easier for others to understand. Similarly, astrological texts and teachings serve as the documentation that explains the theory, techniques, and interpretations that form the foundation of astrological practice.

Final Words

These comparisons have always ruminated in my mind especially since I’ve studied both topics very closely as a career and as a hobby. Just as I recognize patterns in software, I recognize patterns in my life experiences and correlate them with astrology transits. The entire idea is about learning a system and knowing how to apply it to real world problems.

If you found this interesting, I host an Astrology & JavaScript Lives-streamed Series where I teach folks about the foundational blocks of Astrology while building websites using Remix & other React libraries. Follow me on X (fka Twitter) for more information @driannavaldivia

I look forward to publishing more posts about using the Remix Framework, Tailwind, Styled Components, TypeScript, React, and how to use DivineAPI to in order to build Astrology based websites or apps.

Thanks for reading 📖

DEV Community: Adrianna V.

Transforming Fullstack Development with Remix: A React Comparison

Table of Contents

Let’s talk about the flow of data

Loaders

Components

Actions

React alone in comparison

Astrology vs Software Engineering

Programming Languages vs. Astrological Systems

Syntax and Grammar vs. Astrological Rules

Variables vs. Planets, Signs, and Houses

Functions and Methods vs Aspects

Conditional Statements vs. Dignities and Debilities

Libraries and Frameworks vs. Astrological Techniques and Systems

Debugging vs. Chart Rectification

Documentation and Comments vs. Astrological Literature

Final Words