The more buildings you have the better of a developer you are

Issue #36.February 21, 2021.2 Minute read.
Bytes

Vite gummy

New improved formula!

The Vite team just released v2.0 of the frontend build tool that’s designed to be “lean and fast.” Vite is another brainchild of Evan You, the creator of Vue.js, but is built to solve problems that all JavaScript developers face, regardless of framework.

The Problem(s): Large-scale JavaScript projects (with tons of modules) eventually start hitting performance bottlenecks, which results in loooong startup times for dev servers and slow file updates. Though great for checking Twitter, these slow feedback loops can cause even the most stoic developers to get tilted like a middle-school kid with a laggy Roblox connection.

Solving the problem: Vite improves performance by 1) leveraging the browser’s native ES module support, and 2) using new, faster tools like esbuild and Rollup for building and bundling. Check out this demo of create-react-app vs. Vite React to get a sense of the speed difference (n=1 experiments ftw 🙃).

What’s new with v2:

  • Framework agnostic — Vite originally started out as a Vue.js tool, but Vite 2.0 can be used with any framework, thanks to a complete rebuild of its internal architecture. Sharing his powerful new tool with all frameworks, not just Vue? Did Evan just become the JavaScript ecosystem’s Avatar?

  • New plugin format — A new plugin system extends Rollup’s plugin interface and comes with a bunch of Rollup plugins that are compatible with Vite 2 out of the box.

  • Other new stuff — Lots of improvements to Vite’s programmatic API, newly-added support for CSS and server-side rendering, and opt-in legacy browser support.

Wondering how Vite is different from Snowpack and [insert-other-random-bleeding-edge-build-tool]? There’s a post for that.

The Bottom Line

Apparently, you’re supposed to pronounce Vite like it rhymes with feet, because it’s the French word for “fast.” I prefer to pronounce Vite like, “remind me to unin-vite Evan from my birthday party because he’ll surely be disappointed in the lack of soufflé”.

Blitz.js Launches its Beta

Framework inception

Framework inception 😵

It’s a framework… for a framework (Next.js) that’s built on top of everyone’s favorite JavaScript framework (React, obviously).

We’re talking about Blitz.js — an open-source framework (last time we’re gonna use that word) that lets you harness the powers of Next.js and React to build fullstack applications.

How it works:

  • Monolithic (in a good way) — This is a slightly pretentious term which (usually) means that everything from the database to the frontend gets housed in one app, so that there’s only one thing for you to develop and deploy. Monoliths have historically struggled with scaling, but tools like serverless DB’s (Blitz uses Prisma 2 by default) and Next.js should allow Blitz apps to scale better.

  • “Zero API” data layer — Blitz killed the API 😱. Ok fine, it technically just abstracted it into a compile step so that you can import server code directly into your components. You still get client-side rendering without the dirty work of manually adding API endpoints for client-side fetching and caching.

  • (Loosely) Opinionated AF — Blitz comes with defaults and conventions that are set up by its growing community for things like routing, file structure, authentication, and more. Other tools like ESLint, Prettier, and Jest also come set up out of the box for you, but you can easily change/override the presets.

Blitz offers an exciting new way to spin up fullstack React apps simply and quickly, but it does come with a few tradeoffs (because of course it does). The biggest ones center on the lack of customization and scalability that naturally come with monoliths.

The Bottom Line

Blitz.js creator Brandon Bayer (great buy, BTW) has called his fr*mework, “Ruby on Rails for React and JavaScript,” and wants to help bring back the monolithic structure that ROR popularized in the mid-2000’s. He expounds on this idea in The Blitz.js Manifesto, which we assume is a thrilling call to arms for the oppressed, working-class monoliths to rise up and overthrow the bourgeois unbundling of web development.

And if we’re resurrecting mid-2000’s trends, could one of you work on bringing shutter shades back?

JS Tip

If you’re like me, you use one of these strategies for logging a value to the console.

const name = 'Tyler'

console.log('name', name) // name Tyler
console.log('HERE', name) // HERE Tyler
console.log('sefkjse', name) // sefkjse Tyler
console.log('wakawaka', name) // wakawaka Tyler

Believe it or not, there’s a better way and it utilizes object destructuring.

const name = 'Tyler'

console.log({ name }) // {name: 'Tyler'}

Wow.

One-Question Interview

“What does building for the web look like 5 years from now?”

Lee Robinson

As back-end services continue to be commoditized, we’ll witness the rise of the front-end developer. Expect performance (e.g. WebAssembly), 3D (e.g. WebGL + Three.js), and e-commerce to continue growing. React, TypeScript, and friends will still be very popular.

Lee will be giving a talk for ui.dev subscribers this Thursday on “How to use Next.js to improve your site’s SEO and Core Web Vitals score”.

Cool Bits

  1. The V8 team wrote one article this week on making JavaScript calls faster and another article on making super property access faster. Two letter domain name, what a flex 😏.

  2. Penpot is an open source, web-based design and prototyping platform meant for cross-domain teams. “Pen-pot” is a also a great a name for a startup idea I came up with in high school while writing my pen-pal from the Netherlands, but it turns out Silk Road already did it.

  3. Paul and Kavitha wrote about how their team at Netflix recently developed an open source Domain Graph Service (DGS) framework to simplify Netflix’s implementation of GraphQL. It’s amazing how productive Netflix developers have become now that they can’t use their free subscription to watch The Office anymore.

  4. Ahmad created an awesome visual guide on how z-index and stacking contexts work in CSS. tl;dr - always use z-index: 9999. Not sure why this needed a whole article.

  5. Trigger warning for you “don’t work too hard” folks - GitHub’s Skyline generates a 3D model of your GitHub contribution graph. The more buildings you have the better of a developer you are.

  6. Ryan Dahl was interviewed last week and discussed Deno’s progress, how it diverges from Node.js, why he likes Rust, and more. On the contrary, I was in a clubhouse this week (iPhone flex) that talked about how Deno is insecure and worthless. Please someone tell me what to do because I need a new identity now.

  7. Ray.so makes it easy to turn your code into beautiful images you can tweet to get free clout.

  8. TS.dev (another two letter domain name 👸) released an unofficial, but very comprehensive TypeScript style guide. TIL that TS.dev is just the domain for a random dev shop with a logo and domain suspiciously close to TypeScript’s. “Unofficial, but very comprehensive”, indeed. (Get that 🍞).