Legacy codebase to Remix.run

Mathias Nilsson — Thu, 23 Dec 2021 00:58:48 +0000

The 27th of November I got a legacy codebase that needed to be maintained. I had never seen the code, but after some poking around in the codebase it was evident that it needed maintenance.

I had just built an app using Remix.run

Remix.run - Back to basics

Mathias Nilsson ・ Dec 22 '21

#react #programming #javascript #productivity

and was ready for more. // Detect dark theme var iframe = document.getElementById('tweet-1464600405300727808-493'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1464600405300727808&theme=dark" }

The app was built using C#, Angularjs, JQuery, FabricJS, chartjs and MySQL as DB. The short version of what the app does is calculating reverberation-time of a room/connected rooms taking into consideration the NRC and absorption of the material in the room. Using graphs and adding material/absorption to the room the app can be used to get close to the RT-60 goal or at least as near as possible.

I dicided to go with Remix.run, MongoDB (with Prisma), Fabricjs and chartjs and Tailwindcss. The app should live side by side with the original app. I planned to use Fly.io for deployment.

I literally started with this.

npx create-remix@latest

My plan was to look at the db model, dive into how the old website looked and mimic the functionality and try to improve on user experience.

I have made rewrites before, but to be honest I never felt this happy with the progress. In a couple of days, I had rewritten the material routes and entity routes. The Graphs were just client side but with useEffect hook I could get them easily to not server render.

My mongodb is located in Sweden using Mongo Atlas. The app was deployed with Fly.io running in Frankfurt. This is initial load with cache disabled and this kind of load from the database.

export const loader: LoaderFunction = async () => {
  const materials: MaterialPick[] = await db.material.findMany({
    select: {
      id: true,
      name: true,
      absorbtionLevels: true,
      attributes: true,
      absorberClass: true,
      description: true,
      physicalMaterial: {
        select: {
          name: true,
        },
      },
      materialType: {
        select: {
          name: true,
        },
      },
    },
    orderBy: [
      {
        name: "asc",
      },
    ],
  });
  return json(
    materials.map(
      (material) => {
        const jsonData = material.absorbtionLevels as Prisma.JsonArray;
        const attr = material.attributes as Prisma.JsonArray;
        return {
          ...material,
          absorbtionLevels: jsonData.map((a) => {
            const obj = a as Prisma.JsonObject;
            const absorbtion = obj["absorbtion"] as number;
            const frequency = obj["frequency"] as Frequency;
            return { absorbtion, frequency };
          }),
          attributes: attr,
        };
      }
    )
  );
};

Pretty fast!!

If I could do this all over again and pick whatever stack I wanted, I would never move away from Remix.run. Maybe I could have used PostgreSQL instead since MongoDB with Prisma is beta. The app is a work in progress, but the main bits are in place with a superfast iteration.

Hands down! If you ever needed to rewrite legacy code and you had the luxury to choose for yourself. Give Remix.run a try and make a POC to see for yourself. It can only be explained by using it.

I'm glad to be a frontend/backend coder again.

Remix.run - Back to basics

Mathias Nilsson — Wed, 22 Dec 2021 20:31:52 +0000

This is my first blogpost ever, and I never actually thought I would write one. Remix.run is the root cause, because it got me so excited that I could not resist. Let me explain!

I started programming for the web in the days of ASP (Active server pages). It was done using Visual Basic syntax so it was very basic. The form post to server and response was simple even though we didn't do the fancy Javascript stuff we are doing today.

Netscape navigator was the ruler among browsers then.
I moved from Perl cgi to ASP to JSP and Java Servlets and then to PHP. The simple api remained, even though JQuery started to be more and more popular. I used handcrafted XMLHttpRequest then. Even before Jesse James Garrett coined the term AJAX.

Lately I've been doing fontend with GWT and now React for the last couple of years. I love React but doing form, collecting server state and keeping state in sync on the client has been very challenging. I've used Redux, Jotai, Cerebral JS, Overmind JS (favorite) to name a few state libraries.

When I first heard of Remix.run I though "this sound interesting". I follow @ryanflorence @mjackson and @kentcdodds so the tweets kept rolling in.

// Detect dark theme var iframe = document.getElementById('tweet-1340527598334398464-587'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1340527598334398464&theme=dark" }
// Detect dark theme var iframe = document.getElementById('tweet-1319302624450019328-82'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1319302624450019328&theme=dark" }

I bought a license when Remix.run was still a paid product and to be honest, I didn't do anything with it. It was great but I'm sorry to say I've bought to many courses/products that just collected virtual dust.

My daughter started a hobby making clay earrings and one night I said "I can build a website for you if you like". I didn't think she would be excited but a promise is a promise. That's when I really took Remix.run for a spin.
I fell in love with Remix right away. To have the loader and action in the same file as my Component felt like doing what I did from the start but even simpler. The productivity using Remix.run is just insane.

I have never moved this fast to prod. Mongodb, Vercel & Stripe in 1.5 weeks. Remix is soo productive
— Mathias Nilsson (@edgesofts) November 23, 2021

Here are the main concepts of Remix that I just love.

Work with, not against, the foundations of the web: Browsers, HTTP, and HTML.
Everything you need in a single file with easy to read code. If a loader get's complex just put it in your own file.
No need to overthink over/underfetching of data. Just filter what you want to reach the client.
SSR out of the box
Deploy to whatever cloud service you like using built in adapters from Remix or roll your own.

Head over to Remix.run and get started. The docs are superclear and easy to follow. https://remix.run/docs/en/v1

Head over to Discord and get help immediately from the very friendly community. https://discord.gg/AwHQjyVK

Looking forward to 2020 of awesome Remix apps.

Next blog post will be about how I ported a fairly large C# angularjs app to Remix!

Forem: Mathias Nilsson

Legacy codebase to Remix.run

Remix.run - Back to basics

Mathias Nilsson ・ Dec 22 '21

Remix.run - Back to basics