2022 at a glance

For me, 2022 was all about change. I challenged myself to learn more backend technology and thankfully, my place of work was happy to oblige. Along with learning the stack from front to back, I continued learning about new frontend technologies as they are gaining popularity. I wanted to write a bit about my experimentations and take aways.

Next.js

I had been a part of a few different Next.js projects in previous years but the new features introduced in 2022 could not be overlooked. With the introduction of Next.js 13, we can now utilize such things as server components and nested layouts (similar to Remix - I’ll get to that). I’m personally excited about the support for server components and how it reduces a lot of complexity when managing asynchronous server/client state. Plus reducing the client side javascript bundle is often beneficial.

tRPC

While I’m on the topic of Next.js, I should bring up tRPC. I recently stumbled on create-t3 and quickly fell in the love. The developer experience is wildly satisfying due to type safety across the stack and makes bootstrapping a new Next.js project quite pleasurable. It uses react-query under the hood but takes it to the next level with an easy-to-understand practice of typed properties. So, for example, if we had a component body with a service fetching user info, it would look something like:

// With react-query useMutation({ mutationKey: "user", mutationFn: () => ... }) // With trpc
trpc.user.useMutation()

So much nicer and it moves all the data concerns to the trpc router rather than handling it within the component body.

Scala

This is my foray into backend development. I can’t pretend that I’ve been productive with Scala but the learning has actually been very fun. The syntax and composition model is really pleasing and my team has a wealth of knowledge to help with this endeavor. There are some similarities to moving over from Typescript so picking it up hasn’t been crazy. I may or may not continue down this venture but it’s certainly worth the efforts. I love learning!

React query

Like I mentioned in my tRPC section, I’ve really enjoyed getting to know react-query. I utilized react-query in a different project to get familiar with the library on it’s own and it’s such a nice change from redux and managing global state. It has a completely different mental model than “global state” and, while they call themselves a state manager, I see it more as a cache manager. I combined my experiments with Zustand, an actual solution for state management, which I’ll touch on below.

As for react-query, I love the syntax and hook centric syntax. I can create custom hooks to fetch and reuse, while the library manages caching responses from the network requests. So cool!

Design systems

This is an interesting topic for me. I helped get a design system off the ground at my place of work, but a dedicated team took it forward. I’ve watched it’s growth from the sidelines and it’s honestly quite an impressive feat to witness. The massive amount of collaborative work between the design and engineering teams has been truly amazing. This design system is built for both Figma and the frontend team so reaching parity between the two has been a colossal effort of communication, domain expertise, and pure grit.

Remix

Ok, I’m on team Remix. I love this framework so much. Having been so engulfed in the javascript ecosystem the last few years, I admittedly lost some of my foundational knowledge about the web. When I picked up remix for a side project , I was quickly reminded that so much of what we write in React had previously a solution already built into the browser. From forms to browser caching. Plus Remix influences you to write code in such a way that it inherently reducing the size of the javascript bundle. Two thumbs up from me.

Solid.js

Solid.js awesome. I’ve read a number of people say it’s “what I’ve always wanted React to be”. I couldn’t agree more. The absence of a virtual dom and concept of signals for state inherently reduce your javascript bundle but allows you to write in a familiar way, similar to React. With a component based architecture and state management not too far from React. With the introduction of SolidStart, we can bootstrap a full stack application in minutes. I’ve read some rumors about a combination of tRPC and Solid.js, which could be a beautiful union.

Zustand

I’ve experimented with quite a few different React state management solutions and honestly, choosing one is influenced by the size and complexity of your project. I’ve loved working with Zustand (and Jotai) because of how simple it is to quickly share state across components. The syntax is easy to understand and doesn’t require a context provider.

The year ahead

This next year feels like there will be a lot of changes and new beginnings for me personally. As for the javascript ecosystem (should we start calling this is Typescript ecosystem?), I’m going to keep learning Remix, Solid.js, and getting more familiar with Svelte.

On a personal level, I’m getting back into learning French, started getting into cinematography (for YouTube - links to come 😅), and not overworking. Overworking was a huge part of 2022 that I’m not going to allow into my life moving forward. If a company finds that I’m not performing while still overworking, then it’s likely not the right company to work for.