High Impact Frontend #7 - Frontend Mastery, Vercel AI, Vite, Qwik RC and Builder.io content
Full Context Impact Analysis for Week 12 & 13 - 2023
Hey Full Context Developers,
To make up for the missed volume of last week I will include the most interesting stuff of that period in this issue. There’s a lot to look at so here’s the overview:
Get to the next level even as a Senior FE dev with Frontend Mastery. (Not to be confused with Frontend Masters the course website)
Gain better insight into the arts of Local-First web application development
Boost your time-to-market with Vercel AI templates
The Qwik framework hit the first release candidate version, claims to be production ready.
Hands down tutorials into implementing Monitoring and Observability in React web and React Native mobile apps.
In the Quick News section there’s just so much cool stuff it’s hard to list:
Lost of useful and/or insightful React posts
The coolest recently published tools, for example Cicada, that enables writing CI/CD pipelines in TypeScript.
A lot of the recent, awesome Builder.io articles
And more, a lot more…
The Interesting Links has links to articles like:
4,600 npm Packages All about John Wick
Static Types in Pure JavaScript With Zod and JSDocs
And many more
Newsletter Community Report
I know, yes, I changed the name again, sorry. (This newsletter was previously known as Weekly Frontend Hype) I’m still iterating as I refine my own vision for the newsletter. We will hit 1.0 eventually with no more breaking changes.
Why the switch this time? After a chat with Jack Herrington on LinkedIn I realized I need to communicate what I want to deliver to you more clearly. It’s still the same thing, showcasing the highest impact news of the last week. (Now it’s weeks, more on that at the end).
But what’s the impact I talk about? In the Full Context view, it’s anything that makes a project or a product more successful. Here it means news about frontend tools or ideas that help you become a developer with high impact. (Prioritized by that)
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.
The Scoring System
For reference here’s the Hype & Value scale I use to score the impact of the news. The two values are multiplied to create the final value. Now onto the main part!
High Scoring News (15+)
Frontend Mastery - Rethinking React Best Practices
📊 15 Points: Hype 3 x Value 5
This article came out recently from Frontend Mastery about the current state of React. It’s super insightful about the current phase of frontend framework evolution in general and clearly explains many of the underlying concepts of the recent trends.
Besides that, it offers the perfect opportunity for me to bring some attention to this website in general. Why? Because I believe this is one of, if not the best website for senior frontend engineers to gain deep and systemic insights into our areas of focus that can still take us to new levels. (At least it surely did that with me) 👨💻🥷📈
Every post is extremely well written, they just reek of professionalism and battle tested, deep understanding. Check them out, I highly recommend them all.
➡️ The article concludes with a very Full Context-y quote from John Carmack (see my related definition) which further solidifies its position as the News of the Week 🏆. Congrats Frontend Mastery!
The impact of the article is hard to judge. As a learning material the benefits depend on your level of React knowledge and the decisions you might face. In the right circumstances it could boost Productivity up to the Organization level.
To be completely honest I gave a Value of 5 considering the whole website not only this article, but hey, as the author I can do at least that much to highlight something super valuable but relatively less known.
Related News:
Speaking of very Full Context-y stuff, I came across an article making a very solid Business Case for SvelteKit which is a good example of using this perspective by connecting technical choices to measurable business results.
The Cool Frontend Arts of Local First
📊 15 Points: Hype 3 x Value 5
The Evil Martians wrote an article about the 3 big “local-first” tasks: storage, synchronization, and conflict resolution. Local first web development is becoming a much larger thing recently (see their movement defining website) and this post gives a nice introduction to the topic. We can also learn the key concepts behind the 3 major topics and see some examples. It strikes a good balance between being easy to follow and offering deep technical insights.
The value of this topic comes from the fact that a local first approach is essential for many live collaboration applications AND every app that wants to offer offline support which is key for a superior, app-like experience nowadays.
If you want to understand the challenges involved in this problem space and get recommendations for some ready-made solutions, definitely give this one a read.
➡️ What you learn here can help you increase Productivity up to the Organization category and Customer Experience up to even the System level.
Average Scoring News (6+)
Vercel AI Templates
📊 12 Points: Hype 4 x Value 3
As I have previously said Vercel just can’t stop shipping awesome stuff. This time they prepared out of the box application templates specifically tailored for AI projects. You can kick start stuff like:
GPT Chatbot
Dall-E Art Generator
AI Code Translator
… and more
If you are trying to be an early entrant to the AI boom with a similar app these can provide real value.
➡️ Productivity improvements up to the Organization category. They can provide you with better Business Opportunities by reducing time-to-market. In the best case scenario that’s impact in the Organization category.
Related News:
On dev.to an article about Jema.ai got popular. It’s titled: Build AI Template Engine to create amazing content with Next.js and ChatGPT. Pretty hype.
Vercel rolled out an advance integration of Remix with their Edge infrastructure enabling features like: Streaming SSR, API Routes, Advanced Caching and Data Mutations.
An optimistic and well rounded take on the future of Web Developers in light of Chat GPT and LLM tech from Josh W Comeau.
Monitoring and Open Telemetry for React (Native)
📊 10 Points: Hype 2 x Value 5
Monitoring and Observability are not the sexiest of frontend development challenges, but their impact on the business is so massive, they can make or break millions of revenue.
That’s why this topic got such a high Value score. It’s actually not a single article but a whole bunch of recent ones.
They are pretty technical and platform specific and honestly, I don’t expect them to be the favorite news of this volume. No wonder as observability is usually a one-off FE task.
➡️ The articles can give you a head start in setting up these tools, improving Productivity up to the Group category. From a generic perspective properly implemented observability has massive influence over Customer Experience in the most critical situations that can absolutely hit the System impact category. It affects Direct Costs and even Business Opportunities. (Think not losing customers, reputation and revenue because of a sensitive incident)
The Qwik Framework Hitting First Release Candidate Version
📊 12 Points: Hype 4 x Value 3
This is the most exciting piece of news for me these last weeks. Qwik is driving recent innovation in the FE space with its approach to zero-hydration SSR called resumability among many others. I can’t wait for it to reach higher market adoption and this step is an important milestone towards that goal.
But why? I like that they position themself in business terms that answers this question pretty nicely:
“Companies that deploy Qwik apps increase their competitive advantage in terms of conversions, customer happiness, and SEO ranking.”
Qwik offers peak web performance and a great developer experience and you know we frontend developers just like a good, new framework as normal people would a good, new Netflix series. (Not to imply we are not normal people!)
➡️ Productivity and Customer Experience are the main game here. This framework can increase Productivity up to the Organization category and Customer Experience to the System level. The lower Value is due to the fact it didn’t hit 1.0 yet so it’s still harder to push for adoption than ideal.
Low Scoring News (5-)
It just makes sense to expect news from the low category after seeing the high and average sections. But it actually doesn’t. Sure there are many low scoring news out there, but why should you care about them if their impact is so low? I won’t waste your time with irrelevant news. Is this a good approach? Or should I change it somehow? Let me know in the comments or in a reply email if you have an opinion!
Quick News
Builder.io Is The Next Vercel
📊 9 Points: Hype 3 x Value 3
At least in terms of pumping out top-notch content non-stop. I found a couple of very interesting and informative articles recently. In no particular order:
A Complete Visual Guide to Understanding the Node.js Event Loop
Visualizing nextTick and Promise Queues in Node.js Event Loop
Lots of Useful React Content
📊 9 Points: Hype 3 x Value 3
It’s an interesting bunch, some opinion pieces and lots of practical and very visual articles about best practices in React. They can deliver real value.
Bright VS Code's syntax highlighting with an RSC, no impact on bundle-size
Cool Tools
📊 8 Points: Hype 2 x Value 4
I came across a couple of exciting new tools the last two weeks. There’s a good chance some of them will be relevant to what you are doing.
Cicada Build Write CI/CD pipelines in TypeScript
Termino.js A JavaScript component for making web based terminal animations, games & apps on any website
Maestro The self described: “simplest and most effective mobile UI testing framework”. (That works with web apps/sites too!). It has two built-in features that would have saved me from a lot of pain if other E2E testing tool had them: tolerance to flakiness and tolerance to delays. It just makes me want to try it immediately.
Refine A React based rapid web app development toolkit, with support for nearly anything you might need but possibly for much more.
The Vite Scene
📊 12 Points: Hype 4 x Value 3
Vite is just steamrolling with no signs of stopping. Take a look at the latest content:
Ionic V7 just got released and now it boasts improved Vite support. In addition it uses Vite by default for new Ionic React and Ionic Vue applications.
In Praise of Vite a post that showcases the strengths of Vite in practice.
A Petition to the React Team on GitHub to add Vite to the docs on the same level as the SSR frameworks. (I guess the React people really want you to use those shiny RSCs)
Node.js and The Edge Are Converging
📊 9 Points: Hype 3 x Value 3
It seems Edge vendors are in lock-step in releasing the same feature. I planned to add the article from Cloudflare as a separate item, but 1 day before sending out this issue Vercel released their own version of the same feature. Vercel just can’t stop.
Improved Node.js compatibility for Edge Middleware and Edge Functions on the Vercel platform
Interesting links
With or without the JS framework - a very insightful read explaining the whole context of the modern frontend frameworks and common misconceptions around them. I highly recommend it
How to build zero-CLS A/B tests with Next.js and Vercel Edge Config - surprise surprise… another article from Vercel.
Take Stock of Your Application With Static Code Analysis Tools - kind of basic but depending on your prior knowledge it can be insightful
Jack Herrington’s YouTube video about handing State in React
📧 📈 📋 Newsletter Community Report
This is the part not about the news, but the newsletter. 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.
These past weeks were very busy for me, and against my best efforts I couldn’t keep up with the weekly release cycle. I feel really bad about that as I’m truly serious about bringing you up to date content wrapped in the Full Context perspective. Please be graceful with me, I’m writing this newsletter in the very early morning hours in the little free time I have besides a full time job, family with two small kids (3.5 and 1.5 years old, cute little girls) and the occasional extra things I need to handle. Thank You! 🙏🏻
The previous issue became the most viewed post so far both on LinkedIn and on Substack. I’m pretty happy about that and I’m trying hard to make that trend continue!
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