Frontend Hype #6 - Svelte Special, Type Safe Emails, Migrating BBC From React To Next.js
Full Context hype & value analysis for Week 11 - 2023
Hey Full Context Developer,
This volume will be more snappy. It’s still the collection of the most impactful news I encountered last week ranked by the value they can provide to you as a developer. But it’s organized in a different manner this time. I’m trying to figure out the best format for highlighting the usefulness of the stuff in an easy to process way. Let me know if you like this version better.
But first here’s the overview:
There will be lots of Svelte goodies
Modern tooling to make working on email not-that-big-of-a-pain.
We will attend the funeral of CRA (create-react-app)
Get some industry insight into how Vercel (the company behind Next.js) ported over BBC’s frontend from plain React to Next.js,
I will share some coding tools with amazing capabilities like Console Ninja
Newsletter Community Report
Full Context System Upgrade
And more…
About The System Upgrade
I replaced the usage of Impact Points with Impact Categories to demonstrate the scale of the impact the stuff can make. There are simply 4 categories: Unit, Group, Organization and System. Read the details at the end.
If you are new around here or just wonder what this “Full Context“ stuff really means, you can read about it in a dedicated post. It takes around 10 minutes to go through so I recommend doing that after finishing the newsletter.
Enough intro, just give me the news already
I hear you, one last thing before that. For reference here’s the Hype & Value scale I use to rank and group the news. The two values are multiplied to create the final score. Now let’s jump right into it.
High Scoring News (15+)
Modern Email Tooling With React
🔎 15 Points: Hype 3 x Value 5
Brail - This is a freakin’ awesome tool if you have to author emails. For me, emails are one of the most painful web development tasks I ever had to do. That’s where Brail comes to the rescue.
It defines itself as a “Full-Stack Email Development Toolkit“ built over tRPC and Next.js. It has devtools, linting, theming, templates, responsive design support and offers end-to-end type safety using TypeScript. The benefits and details are too many to list. Head over to their site if you are interested.
➡️ This is undoubtedly the Tool of the Week 🏆. Brail can bring the most outsized impact by solving a massive pain in the … Its Productivity Impact can reach the Organizational category and the Customer Experience Impact can even be Systemic if email is core to the business. If you can replace existing 3rd party email authoring software with it, there’s a possibility to impact Direct Costs likely in the Group category and Utilization can be affected again in the Group category by freeing up developer capacity.
Alternative: There’s a very similar tool simply called React Email offering mostly the same benefits, check it out too! It also has a guide for styling your emails with Tailwind.
SvelteKit Is On a Feature Spree
🔎 16 Points: Hype 4 x Value 4
The Svelte team has been pumping out new features since the version 1.0 release. In a recap blog post they shared the major additions. If you use this framework you can gain substantial benefits from them.
You can now Stream Non-essential Data for each route to unblocking a render-performance bottleneck.
You have access to Snapshots, that among many things can save the users from having to restart filling in forms after an accidental back navigation.
There are Vercel specific changes to enable making much better use of the platform capabilities including Incremental Static Regeneration (ISR).
In other news they introduced Zero-configuration type-safety for the loader functions Next.js and Remix style.
➡️ These all have compounding Productivity and Customer Experience Impact by increasing both development efficiency, the perceived speed of the website and lowering user frustration. Both of them will cap out in the Group category. Customer Experience might even reach Organizational levels. The Vercel config enables adjusting Direct Costs more granularly around the Unit or even Group impact categories.
Related: A Svelte UI Library just hit 1.0 called Skeleton. Check it out, it looks great and uses Tailwind.
Mixed Score News (6+)
Full-Stack Toolkit for Cloudflare Workers
🔎 12 Points: Hype 3 x Value 4
Superflare - “is an experimental full-stack toolkit for Cloudflare Workers. It features a relational ORM for D1 databases, utilities for R2 storage, and lots more.” - from their website. It offers out-of-the-box support for Remix and soon Next.js.
The Cloudflare Workers platform is an awesome serverless and edge infrastructure solution like a leaner and cheaper AWS alternative with unique capabilities.
If you are looking for a place to host an edge rendered web app or broadly speaking cloud infrastructure options, check this one out.
➡️ The CF Workers platform itself has the potential to affect every Impact Factor up to the highest categories. Superflare specifically can stack more Productivity Impact over it in the Organization Category and indirectly improve Customer Experience.
Console Ninja
🔎 9 Points: Hype 3 x Value 3
Console Ninja is a nifty little VS Code extension that will pipe browser console output straight into you editor, in the line of the specific console.log calls. And it will display error logs in similar fashion at the line that’s failed. Check it out in action in Jack H’s short.
➡️ Isn’t it the type of Productivity improvement we all love? At least I surely do. It’s not big, likely Unit Category but still so cool.
Ditching CRA for Vite
🔎 12 Points: Hype 3 x Value 4
This blog post by Luke Twomey is making the rounds, discussing what are advantages and disadvantages of replacing create-react-app with Vite, how to go about it and showing some real world examples.
➡️ Making that move can increase you development efficiency leading to Productivity improvements up to the Group category. That can always have Customer Experience Impact, but it’s often negligible.
The Funeral of CRA
🔎 8 Points: Hype 4 x Value 2
The new official React docs are out and there’s something missing that YouTuber programmer Theo covered and sad his farewells. Jack Herrington also made a short about it.
It’s interesting how people make a huge issue out of something relatively inconsequential. I get the points they make, for the whole ecosystem it might make some difference but I think the whole discussion is fueled by hype more than anything.
➡️ How can it affect your everyday work? There’s nothing it can add that would make a practical difference but hey, the videos were fun to watch.
Migrating the BBC Website From Plain React to Next.js
🔎 9 Points: Hype 3 x Value 3
Vercel published a step by step case study of how they ported over BBC’s open source website to Next.js.
This is an article I found really valuable, as proper write ups of these industrial scale rewrites are hard to come by. Yet migration to Next.js is a frequent adoption path. In those cases, it can offer really valuable insights.
➡️ Adopting Next.js can increase the Productivity, Utilization, Customer Experience, Business Opportunities and Direct Costs Impact of the team/company. Gaining insight into it offers fractional shares of the whole package.
Unevaluated News
Zero Infrastructure Node.js Background Jobs
🔎 6 Points: Hype 2 x Value 3
Defer.run offers something I can’t really put my fingers on. It’s like serverless functions but it’s not request/response handlers but background tasks. The tool looks solid. I’m really interested in how it can be best utilized
Rspack the Next New Rust-based Bundler
🔎 9 Points: Hype 3 x Value 3
Rspack is developed by ByteDance, the creators of TikTok. It’s the same stuff like Vercel’s Turbopack but it offers full Webpack compatibility, which can be a game changer among the new bundlers besides the insane compilation speed improvements.
Million.js the 70% Faster React Renderer
🔎 6 Points: Hype 2 x Value 3
Million is a custom VDOM renderer that can drastically speed up the UI of React apps. However its marketing feels a bit like false advertising as the type of components that it can render are quite limited and possibly not even that useful.
Interesting links
📧 📈 📋 Newsletter Community Report
(This is the part not about the news, but the news-letter. I share what’s going on behind the scenes, with the hope you will feel like we are all doing this together as a community of super awesome developers. That’s good for you, good for us so why not? And I’m also genuinely happy to share the joys and tears of my work with anyone interested.)
The most exciting thing that happened to the newsletter last week was that Sébastien Lorber put us into his This Week In React - Substack publication’s Recommendations section. That’s a real honor for me, thanks Seb!
Otherwise, last week’s issue brought the least number of new subscribers so far. I honestly thought the last one was quite good. It might be due to a number of factors, my first guess is the release day. It went out on a Saturday. I will release this one on a Monday missing the weekly mark. Sorry if I let you down with that. I still think of all this as an open-beta version of the Newsletter where lots of changes are normal.
The New System
I have been thinking hard and long about the Impact Point system that I use to show the size of impact the tools can make. I believe it’s too abstract to easily grasp the scale it represents so I came up with a simplified version. Let me introduce Impact Categories.
The ultimate goal is still the same, I want to show you how the ideas or (mainly frontend) tools & technologies can influence business results (read: profit). The 5 key areas that connect tech to the bottom line are unchanged: Business opportunities, Customer experience, Productivity, Utilization and Direct costs aka CPU-DB. But from now on I will use the following categories to show the scale of influence across these 5 dimensions:
Unit - An elementary part: a person, a single metric, a user
Group - A group of units: a team, a user type / persona, a quarterly target
Organization - Groups working together for common goals: a department, a user group, a market segment, strategic goals
System - The whole of the related dimension: the whole market, the whole company, the whole budget, every user in the customer lifecycle, every developer
This is just to give you a rough idea. I will update the introductory post with the details once I get the time.
Wrapping Up
I’m more than happy that you got to the end! It feels so strange and also amazing that someone actually makes it here! If you enjoyed the article and/or found it valuable please consider sharing it with your friends and colleagues.
Do you know how YouTubers call out their audience in-video for not subscribing? If you read it in an email I have no grounds to do anything like that, BUT. I know how many of you shared this stuff, and the numbers break my heart. So please, it’s simple, it’s easy and it helps me a lot to run this channel… umm newsletter so please if you haven’t done that, click on “Share” and smash the notification bell, … I mean like button. I love you all who already did, you are simply the best! Those who didn’t, don’t worry, the party is open, join us, you know what to do!
See you in the next one!
Joe @fullctxdev