View profile

My new favorite stack for web development - The Weekly Retrospective Issue #7

Brock Herion
Brock Herion
Welcome to issue #6 of The Weekly Retrospective, the newsletter where we reflect on the week we just had!
In issue #5, we took a look at some struggles with getting content out as well as the stack I’ve been using for web development.
In this issue, I’m going to be talking about my experience within the stack I’ve been using. This will be a more tech-heavy issue so brace yourself!

The Week of 10/16/2021 - 10/23/2021
This week was much less productive content-wise. I have started, but not finished my blog post on The Bitcoin Standard and still have not filmed my YouTube video. My blog post is almost done, I just need to push my finishing thoughts on it, but my video is still sitting in my backlog.
This is okay to me though, at least this week. While normally I might write about how I fell behind on these things. However, most of my time outside of work this week was spent working on my side projects.
I’m using the same stack for them that I mentioned in my last issue. This week, I’m going to discuss my experience in it and give you some insight as to what makes this stack so powerful.
We start with Next.JS
Unless you’ve been living under a rock in JavaScriptland, there’s a good chance you’ve used or at least heard of Next. Next is a React framework for building incredibly fast, server-side rendered web apps. It also gives you the ability to build an entire API from within your project as well, so there’s no need to build an entirely separate backend. I’ll talk more about the API side later, but it makes a huge difference when you are trying to get an MVP out the door.
Next has some amazing libraries that it can couple with to make your development even faster. Next-Auth is a library for user authentication that lets you easily set up integrations with providers like Google, Facebook, Twitter, etc., or do a traditional auth system with a username and a password.
I used to get frustrated with structuring my React files, either from create-react-app or by setting up React myself with Webpack. Next is more opinionated on where files should go while still offering flexibility. As long as you have some core folders in place, you’re free to do as wish! I find this approach great and lets me work so much faster. By having a more consistent file structure, I spend less time thinking about how my project is growing and more time focusing on the code.
You can get started with Next.JS on their official website below!
Next.js by Vercel - The React Framework
Sprinkle in some TailwindCSS and TypeScript
One of the things I’ve always hated about building websites is hand-rolling my own CSS. Having to focus on responsive design and breakpoints, managing stylesheets, and managing my own colors is just not fun for me. Using SASS helped a ton with that, but I still didn’t really enjoy doing that. Bootstrap also was incredibly helpful, but changing anything put me right back into doing my own CSS overrides.
Enter TailwindCSS, a utility-first CSS framework. What this means is that there are no elements that it gives you out of the box, like buttons or inputs. Rather, it provides you with a ton of different classes that control very specific things. A class like bg-blue would set the background of whatever element you’re working on to whatever element you’re selecting to blue. Like Next, I no longer need to think about the nitty-gritty of styles and can just focus on making the site look good.
TypeScript provides that same kind of feeling for me. While a popular argument against it is it is more code than JavaScript, it gives me peace of mind. TypeScript provides a level of safety that JavaScript cannot. Type checking lets you catch errors during compile time rather than runtime, meaning those kinds of errors will be caught and fixed early on.
You might have started to notice a theme in my descriptions so far. That theme continues with TypeScript in that I don’t have to think about JavaScript gotchas. It’s more code to write but saves so much time on debugging and makes me more confident when I push that code out to production.
Check out Tailwind and TypeScript below!
Top it off with Prisma and tRPC
Remember how I mentioned that you can build out an entire API in Next.JS? This is where things get wild. Prisma and tRPC are both libraries that take API development to an insane new level.
I should preface this by saying my background is primarily in backend development using C# and a little bit of Java and Python. I’m used to building REST APIs the old-fashioned way. You create models, a service layer, controllers with endpoints, DTO’s, and all this other stuff to have your API work as you expected. And let’s not even go into securing endpoints!
Prisma is an ORM, which basically means it abstracts the layer of your code and your database. What makes Prisma awesome compared to something like Entity Framework is that it, like everything else on here, gets out of your way and lets you focus on building a robust data structure. Prisma has you define all your models and relationships in a single file. Then when you run migrations, it updates the database for you without you having to write any SQL at all. Couple this with its powerful client component for CRUD operations and you have yourself a winning ORM combination.
Now, if we couple this with tRPC, we get a mind-numbing development experience. tRPC takes all the junk out of building an API. When using it with Next.JS, you declare a single file, [trpc].ts, under your /api/ folder. Then, on the “sever” side, you declare a context and routes. This lets you define any middleware and logic you need for your API and declare endpoints and functionality without needing to build out a service or controller layer. With TypeScript, each query or mutation, as they’re called, can then be used within your Next.JS app using hooks. They’re completely type-safe as well, so if I were to change the name of some of my queries or mutations, my code would actually error and have me fix it first. It’s a breath of fresh air.
Take a look at Prisma and tRPC below
Prisma - Next-generation Node.js and TypeScript ORM for Databases
tRPC - End-to-end typesafe APIs made easy | tRPC
What exactly does this all mean?
For my full-time development job, I do a lot of work in .NET and React, which alone is an awesome combination. Something I’ve always struggled with was a great developer experience with building applications quickly, especially in my side/freelance projects. Building an entire .NET app on my own then turning around and doing an entirely separate frontend got increasingly less appealing the more I did it.
This stack changed that.
I can now build a frontend in a crazy short amount of time and link it up to a backend in a very similar amount of time. It even lets me spin-off to a mobile app if I wanted it to, using the zART stack. Check that out under the tRPC examples, it’s mind-blowing.
While I didn’t get as much content work done this week as I would have liked, I feel completely energized in terms of software development. Working in these technologies really started getting me excited to program and wanting to learn and do more within the React and Node ecosystems. Developer happiness and productivity are the key things within these technologies. They get out of my way and let me focus on the business logic.
They make me excited to program and are a fantastic reminder as to why I became a developer in the first place; I just want to build cool things.
Missed the past few issues? Get caught up!
Content Woes and The NextJS Stack You Didn't Know You Needed - The Weekly Retrospective | Revue
Learning, Reflecting, and Creating - The Weekly Retrospective Issue #5 | Revue
The Weekly Retrospective - Issue #4 | Revue
Did you enjoy this issue? Yes No
Brock Herion
Brock Herion @brockherion

Every Sunday, I share an exclusive email with 8 awesome things I found during the week. You'll get to see what I'm learning, building, using, reading, and so much more!

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Created with Revue by Twitter.