High Impact Frontend #8 - On-Demand UI By AI or Backend, Code for Writing Code & A Lot More
Full Context Impact Analysis for Week 14 & 15 -
Hey Full Context Developers,
Welcome to another issue of High Impact Frontend. The goal of this publication is to cut through the noise of non-stop Frontend Tech buzz and bring you only the most impactful news that can create outsized, positive impact and change what you work with, the way you do development or even the meaning of your life. — Well, that last one is a bit of a stretch but I like to make these kinds of jokes …and I often get into uncomfortable situations because of it. 😅 🤷
I use the Full Context approach, my way to identify and explain the level of impact a tool or a piece of information can make. My goal is to offer a complete picture of when, how and who can realize that impact so you can easily find the most valuable news for you. You can find more details about this system in a dedicated post.
My absolutely top secret, hidden agenda behind all this is to teach developers how to connect the technical part of our work with its business and real-life outcomes, so I can help you to make better choices and create better software for everyone.
Summary
I feel very bad about it but I missed another week again, however the upside is that I had a lot more news to choose from and I found some mind blowing pieces. Here’s the overview:
Call for stories!
On-demand / Ephemeral / Just-in-time UIs driven by AI or a backend
And a tool to generate AWS services using an LLM
Two ways to rethink the modern web
And one covert way to diss its creators
Insights from Dropbox, transforming their web architecture to last the next decade.
And a large-scale demo implementation of the Clean Architecture using SvelteKit
New frontend frameworks from Big Tech companies.
A survey of framework popularity on Netlify
Code for writing new code in either TypeScript or JavaScript.
A Vercel and Builder.io news special
Clean code horrible performance the original video from the author Casey and and interview with The Primeagen.
Also a long written chat between Casey and Uncle Bob, the father of Clean Code.
Quick news
The most common mistakes when using React
AWS infra setup to host Generative AI
Jampack - a static asset optimizer
Hidden telemetry in modern frontend frameworks
And more, a lot more…
Newsletter Community Report.
I’m looking for stories, you can share yours!
I want to take the newsletter to a new level. In addition to reviewing recent developments of the frontend field I plan to share interesting, real-life stories in line with the High Impact & Full Context approach. If you have a personal story where a web technology related change brought significant business or organizational impact to a project please share it with me. I’m happy to introduce you to the readers and link back to your social profiles and personal website. Read more about the details here.
If you know about a good post or video fitting into this theme please send them my way, I will attribute everyone individually who shares some material. And if you know-somebody-who-knows-a-story feel free to refer them to me, we can build our own MLM pyramid scheme if you guys are into that.
The Scoring System
This is the Hype & Value scale I use to filter and categorize the news themselves. Evaluating their impact is a later step. The two values are multiplied to create the final score. Why? Because Hype increases the visibility of any news so it multiplies their impact whether that’s positive or negative. I will review some of the articles in batches as many of them are about the same or very similar topics.
High Scoring News (15+)
🏆 News of the Week 🏆
On-Demand / Ephemeral UI (AI or Server driven)
📊 15 Points: Hype 5 x Value 3
I came across multiple articles about the topic of On-Demand UI. While pretty much an exploratory area right now, it has huge potential to bring drastic changes to both how we create and how we use software. Here are the sources, then I will explain what this is about, and why it won the News of the Week title.
ConjureUI - Generating throw away UIs with ChatGPT to get your tasks done and be gone. Impressive demo but nothing more.
Malleable Software in the Age of LLMs - An in-depth, very insightful article that explores how new AI capabilities will change the life of users and developers alike. A bit optimistic in general but far from unrealistic.
Server Driven UI, Personalization, Runtime Bundling - A non-AI technique to support just-in-time customization of UIs across multiple platforms using an abstract UI model and client renderers.
e2b (EnglishToBits) - AI-powered “IDE“ to transform tech specs into working backend and frontend software. Here’s a demo of creating Just-in-time UIs.
So there are a couple of things going on here. Ephemeral / On-Demand UI manifests as users describing the kind of application they want with a text prompt, the AI generates it for them, they use it for the task at hand and move on. This is a very interesting idea. We only have demos and I don’t know how I would feel about always describing the app I want to use or to copy & paste the prompt from an “app_store.txt”. Conversational workflows are not the best for many common use cases. However this kind of app generation has the potential to become the building block of more intuitive, higher level tools.
Real time customization / personalization on deeper levels than what we use today is another theme that could be powered by AI or is already implemented using a server driven approach. The idea is to optimize application UI-s to the personal needs and characteristics of the individual user dynamically as they are using the application. However the version of this idea discussed in the Server Driven UI article goes beyond what we are capable of today.
➡️ If or once we get production grade solutions, these techniques can potentially improve developer Productivity and Customer Experience by a large margin. If they free up significant development capacity that’s called decreased Utilization in the Full Context system’s terms. Also if these techniques prove to be feasible they will open up gigantic Business Opportunities and can lead to significant decreases in Direct Costs. Their scope at this point is hard to predict, but that’s exactly because the potential here is mind blowing. This makes it the News of the Week.
Related Tool:
Eventual.ai: In the domain of backend services this app brings the future we just explored to today. Their motto is: “Business Requirements in → Cloud Service out“. You have a chat with their AI and it designs and deploys an AWS service configuration to solve your business case. Would be pretty interesting to test drive.
Two Ways to Rethink the Modern Web
📚 Recommended Read 📚
📊 20 Points: Hype 4 x Value 5
If you are going to open any links from this volume, I strongly recommend the 2 articles coming right now! I think of the previous section as the exciting, but only potential future. In nice contrast this part will show the definitely implementable future that gives it extra value on multiple levels.
First, because these are iterative improvements, they have a long history to look back at, evaluate and build upon. And they do just that with wisdom and certainty, showing a path forward that would benefit all of us as humans and developers.
Second, because there’s code you can already use if you want to try to implement this future and regardless of references from these articles I planned to include some of them in their own right in this issue. So without further ado:
Web of the People - Includes some heavy - and I believe justified - criticism of the modern tech giants and the effects of their tools over society but goes way beyond that and offers technical next steps to heal the damage done and create a future where these can’t be repeated. Really eye opening on many levels. (Also somewhat dissing the current AI boom) → The philosophical way
Rethinking the Modern Web - Sheds some light on the often non-perceived absurdity of the ways we did web development for the last 10ish years and shows the new tectonic shift that’s already happening just not in full swing yet. It talks about React, CSS-in-JS, compilers and everything you would expect but the conclusions it comes to is not what you would guess! → The technological way
➡️ The ideas covered here are so broad in scope they have the potential to influence every Impact Factor up to the highest levels possible. This is the challenge with the systemic topics, until they become something more fine grained and concrete I can’t exactly judge their impact.
Related Diss:
Common API design flaws - Jake Archibald: I absolutely love how Jake is covertly mocking the authors of both the HTML/JS standards and React simply by talking truth.
Large-Scale, Long-Term Frontend Architecture Migration At Dropbox
🚀 Highest Technical Impact 🚀
📊 16 Points: Hype 4 x Value 4
Our awesome colleagues at Dropbox presented us with a beast of a case study. It’s about the journey of revamping their core web application architecture, complete with problem statements, pros/cons and before/after analyses. Simply put, it’s bloody good.
Dropbox.tech - How Edison is helping us build a faster, more powerful Dropbox on the web
I found it beyond insightful. The Dropbox devz walk us through the history of their web architecture evolution, highlighting how the different decisions made along the way played out through such a large scale system and organization. They gather the challenges that arose as the consequences of those decisions and the changing technological landscape and it’s complete with their way of finding and implementing a solution that lays the foundations for their next decade!!! of development.
In real life I never encountered this kind of long-term thinking put into technical strategy and working software, yet. (Hope I will do it one day though) It’s not a wonder with the short length frontend hype cycle and industry average tenure, for sure. I don’t want to moralize about these factors, the point I want to make is that the rarity of this approach makes it even more valuable.
➡️ The impact of this strategic initiative is extremely large for Dropbox but how can it benefit you? The possible lessons you can take away from here can help you in any kind of higher level decision making. Those tend to have influence over a lot of impact factors most notably Customer Experience, Productivity, Direct Costs but usually Business Opportunities as well. One thing is for sure, you can only become a better developer by reading it.
Related Article:
Clean Frontend Architecture with SvelteKit - A precise introduction to and implementation of the hexagonal architecture in a frontend application with proper use-case driven design and a TDD approach using SvelteKit and TypeScript. Every bell and whistle is there to tickle your coder taste buds, hmmm a delicious piece.
Average Scoring News (6+)
New Frontend Frameworks
📊 9 Points: Hype 3 x Value 3
Big tech companies have a new hobby nowadays besides keep laying us all off. They decided to have a piece of the frontend framework cake for themselves. But I get it. The internal pressure to take action must have been crazy high. I mean, I can’t even imagine how could all the Microsoft or ByteDance developers put up with the shame of working at a place that does not even have its own open source frontend framework. Now I guess they feel much more confident when talking with their old classmates working at Google and Meta… (No offense meant, this is just a joke. How would I ever dare to insult the dream audience of my newsletter? …Oh, are you working at Amazon? Can I take a selfie with you?)
Fast, a framework from Microsoft quoting their description: “FAST is a collection of technologies built on Web Components and modern Web Standards, designed to help you efficiently tackle some of the most common challenges in website and application design and development.“
Modern.js more than a framework because apparently that’s not even attention worthy nowadays. Imagine the devz at ByteDance having a discussion like: - Dude, I came up with a crazy idea to create a new frontend framework. - Hah, don’t kid me, if that’s all you can do don’t even get started mate. Look at Next.js, Nuxt.js, Angular, SvelteKit and all the cool projects. You ain’t have no chance, unless you ship - at the minimum - your own package manager, build tool and docs site generator. - Hold my beer. And that’s how I think Modern.js got born over a weekend-long solo hackathon. Or probably not…
Enhance, an HTML-first framework mentioned in the Rethinking the Modern Web article as a good step forward.
Framework popularity on Netlify a slightly related but very interesting read.
“Clean“ Code Horrible Performance
📊 12 Points: Hype 3 x Value 4
A video by Casey Muratori got popular a while ago where he questions the status quo about Clean Code using a C++ developer’s performance focused mindset. I saw him talking about some earlier version of the same idea before and always thought that his approach is pretty much Full Context.
He is taking measurable characteristics of code and software to evaluate the technical choice of implementation style in terms of its impact. Of course, performance is not the only factor that we should care about in general but the approach itself is sound!
A much shorter interview with The Primeagen who is one of my favorite programmer content creators. The interview is filled to the brim with programming wisdom and summarizes the main points of the full video pretty well.
The Final Quest of Programming: Ideas on how to analyze and quantify the effects of coding related decisions over business outcomes. - A chapter from my own book.
unclebob/cmuratori-discussion An hours-long GitHub “chat” between Casey and Uncle Bob - the author of Clean Code.
Code for Writing More Code
📊 9 Points: Hype 3 x Value 3
If simply writing code doesn’t deliver the high any more, you might want to go meta and start to write code that writes code for you. No, I’m not talking about AI here, it’s old school hand written stuff, supported by two recent tools:
TS-writer a template string template engine designated to generate TypeScript code at runtime
Magicast for programmatically modifying JavaScript and TypeScript source codes with a simplified, elegant and familiar syntax powered by recast and babel.
The Vercel and Builder.io Special Report
📊 12 Points: Hype 4 x Value 3
These two companies just keep on giving, and there’s no decline of content in sight from either. Here are the news of the last two weeks I loved the most.
Improved infrastructure security with Vercel Secure Compute Secure isolation and protected integration of serverless functions with other private networks
Vercel platform support for streaming rendering from the Edge and Next.js v13 offers out of the box tools to utilize it.
Builder.io: Building AI-powered apps is way easier than you think
Builder.io: AI Shell A CLI that converts natural language to shell commands.
Builder.io: GPT-Assistant An experiment to give an autonomous GPT agent access to a browser and have it accomplish task
Other Links With Possibly High Impact
LambdaPi: GPT-Driven Serverless Code Plugin - a serverless runtime environment tailored for code produced by LLMs. Automatic API generation from your code, support for multiple programming languages, and integrated file and database storage solutions.
New Official Amazon Tools for Building Generative AI Products on AWS
Jampack - Optimizes static websites for best user experience and best Core Web Vitals scores. Yes, it works even with the output of Astro and Next.js
Hidden Telemetry in Modern Frontend Frameworks - a hall of shame and hall of revelation.
6 CSS snippets every front-end developer should know in 2023 - these are really modern and useful techniques
The Most Common Mistakes When Using React - I’m guilty of many too
Newsletter Community Report
Here I share what’s going on behind the scenes of Full Context Development. I hope it can help you feel like a part of our awesome community. I don’t have the formulas figured out, I experiment and refine things frequently so we are all in this newsletter stuff together. That makes me even more genuinely happy to share the joys and tears of my work with anyone interested.
The last issue became our most liked and shared post on LinkedIn so far which is by far the most significant source of traffic for us. It also drove a huge (relative to previous) number of new subscribers! Even Miskov Hevery (Creator of Angular and Qwik) reposted it himself. I’m super happy to see that the momentum is building around our little community. Thank you all for participating and contributing to it.
Reporting on the subscriber count. We are still a teeny-weeny newsletter but if this post follows the trend of the previous ones we will likely hit the 100 subscribers in a couple of days!!! I’m super grateful and happy for all of you who already dedicated some of your precious attention to my writing and serving your interest will always come before chasing arbitrary numbers. Still, I feel incredibly excited to reach this milestone.
Typo report: I always made at least one embarrassing typo in every issue so far. Last time it was in the hero image: Fronted Mastery. I felt cringe any time I looked at a social preview. But the best one so far was when I renamed the Hono framework in the headline. While nearly falling asleep in the morning for some reason I put it as Hokai. I don’t know more that 3 words in Japanese and it’s not one of them. I only realized the mistake after sending the email. I was looking up the meaning of the word panicking if I put some completely inappropriate out there. Luckily it means collapse or meltdown. Once I read the news the next day about the Silicon Valley Bank collapse I seriously thought about whether I became a prophet.
Wrapping Up
If you enjoyed this volume of the High Impact Frontend Newsletter and/or found it valuable please consider sharing it with your friends and colleagues. It’s a huge help!
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. You all who already did are simply the best! I need to find a way to invite you to a VIP Subscriber club somehow. 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 @fullctxde