GAZAR

Principal Engineer | Mentor

Coding Wonderland: Remix, NextJS, and the Magic of Programming

I had the exhilarating opportunity to deliver a presentation titled "Do You Believe in Magic? Time to Move to Remix" at the MelbJS and React Melbourne Meeting. The event, brimming with anticipation, took place on the vibrant evening of Wednesday, December 13th, 2023. My enthusiasm was palpable as I delved into the intriguing realm of magic in the context of programming. Throughout the talk, I endeavored to unravel the concept of magic and its parallel existence in code. Specifically, I explored how we can leverage RemixJS to elevate our coding experiences and embrace a more dynamic and efficient future. The audience was invited to reconsider the enchantment of programming, and I was thrilled to share insights on how RemixJS contributes to this magical journey.

What is Magic?

Magic, in its essence, is the pinnacle of craftsmanship, a mysterious art form where the intricacies of creation remain veiled. It mirrors the awe of a magician performing a trick, leaving the audience in wonder, unable to fathom the mechanics behind the spectacle. Similarly, in the realm of programming, we encounter our own form of magic. When faced with a snippet of code, there are instances where neither the observer nor, candidly, the original author truly comprehends its inner workings. This enigmatic phenomenon is what we fondly term as "Magic" in programming. It occurs frequently, like a wizard conjuring spells, and extends to the use of libraries or node modules where functionality is clear, yet the underlying wizardry remains shrouded. It's akin to seamlessly incorporating a piece of code into your project, trusting the unseen wizards of programming to make it work like magic – a blend of mystery, trust, and functionality.

Screenshot 2023-12-16 at 12.01.40 pm.png

In the realm of NextJS, a fascinating feature unveils itself through the symbiotic dance of page.js and layout.js. As observers, we witness their seamless collaboration, confidently intertwining in the intricate choreography of layouts. In the upcoming version, we extend our trust to these foundational elements, recognizing them as layered components of Layout and Page, harmoniously mixed to orchestrate a symphony of functionality. The elegance and reliability of this synergy reassure us that the intricate ballet of page.js and layout.js is set to dazzle and perform seamlessly in the evolving NextJS landscape.

Screenshot 2023-12-16 at 12.03.22 pm.png

Now, let's turn our attention to another fascinating aspect: the ability to render two pages in parallel within a single page. At first glance, it seems deceptively simple, doesn't it? Yet, the underlying magic orchestrates this seemingly straightforward feat. While we might speculate on the mechanics at play, the truth is, NextJS introduces a novel enchantment, prompting us to place our trust in this newfound capability. It's a subtle reminder that, in the ever-evolving landscape of NextJS, innovation often comes with a touch of mystery, urging us to embrace and trust the magic that propels our projects forward.

Screenshot 2023-12-16 at 12.04.39 pm.png

Now, let's unravel the enigma of (..) nestled within folder names, a seemingly perplexing syntax that adds an aura of confusion to the project's organizational tapestry. It stands as a cryptic symbol, tempting developers to explore its potential in specific scenarios. If you've ever found yourself entangled in its syntax, you'll likely agree that it's a perplexing magic – an arcane notation that transforms the ordinary into the puzzling, leaving us with a sense of awe and bewilderment.

Screenshot 2023-12-16 at 12.05.48 pm.png

And Server Components—an amazing concept introduced that I personally love. However, it's important to note that by default, you write server components, and then you need to include use client if you're actually writing client components. Naturally, things can get more intricate, involving tasks such as accessing a database or utilizing Server Actions in the Client. Despite our trust in the system that works, the intricacies of how it operates behind the scenes remain somewhat elusive.

Screenshot 2023-12-16 at 12.07.41 pm.png

There are so many filenames—error.js, default? and what is template? It's actually the same as layout.js but different. These are all magical elements that we simply accept exist and work.

Screenshot 2023-12-16 at 12.08.55 pm.png

And you must have seen the Image Component in NextJS; it's brilliant and works seamlessly. As a result, everyone can proudly claim they have implemented some image optimization on their website. It's highly opinionated and performs numerous tasks that require a leap of faith—you just need to trust it.

Screenshot 2023-12-16 at 12.10.10 pm.png

And also, look at this one: Caching is a default feature in NextJS achieved by extending the fetch function in NodeJS. The result might be intriguing and faster, but we should acknowledge that it's another form of magic—it performs numerous tasks for us, and we simply accept that it works.

Screenshot 2023-12-16 at 12.11.48 pm.png

So, I want to introduce a concept called Magic Tolerance. As someone who is a programmer or, like my students who have just started learning, they possess a magic tolerance. They can build up their knowledge on top of new things, and here and there, they can accept that there is a thing that works, even if they don't fully comprehend how. However, if you introduce too many magical elements, it frustrates them, causing them to give up and perhaps consider moving to another industry. Magic, as beautiful as it is, might transform the programming landscape into a dream, something challenging to understand. While we can accept and use it, we also desire the ability to edit it, to see what's happening behind the scenes, and not merely be passive audiences sitting in the theater watching magicians work their tricks.

Conclusion:

In conclusion, the allure of magic in programming adds a fascinating dimension to our work. However, striking a balance is crucial. Too much magic can overwhelm and discourage learners. As programmers, we aspire not only to embrace the magic that enhances our efficiency but also to possess the ability to comprehend and modify it. By doing so, we empower ourselves and others to actively participate in the creation of enchanting code, bridging the gap between the mysterious and the comprehensible in our ever-evolving technological landscape.