The best Vue comes after t̶h̶e̶ ̶l̶o̶n̶g̶e̶s̶t̶ ̶c̶l̶i̶m̶b̶ 37 RFCs
This week, we’ve been thinking about how large, slower JavaScript libraries deserve their own classification and nickname. Our vote: thicc-libs.
Vue 3 is finally here
#MondayMotivation
This is not a drill… After 2 years and 2,600 commits Vue 3.0 was actually released last Friday. It’s not another beta, or alpha, or any of the other 4 Greek letters you (might) know.
The highlights:
Big performance boost: Vue is now significantly smaller and faster thanks to newly introduced tree-shaking and a complete re-write of Vue’s virtual DOM, which features a new diffing algorithm with compiler-based optimizations.
Composition API: This new set of APIs is explicitly designed to make Vue easier to use in large scale applications, and features an alternate syntax for managing features and functionality across components.
Teleport: A new component that provides native support for portals and simplifies working with elements like modals and popups.
Fragments: Like React, Vue 3 now has official support for fragments (AKA multi-root node components).
Vue 3.0 is written entirely in TypeScript and includes enhanced support for TS users. Check out Evan’s keynote from the Vue.JS Amsterdam Conference last Friday for a deeper dive into v3.
The bottom line
Vue has always (rightfully) received a lot of love from the developers who use it. But the new features in this release should help the framework start to position itself as an attractive option for large-scale applications.
Important note: Evan said that if Vue 3 gets over 100,000 npm downloads in the first week, he’ll legally change his name to Evan Vue (k fine, we made that up).
Deno releases v1.4.0
It’s growing right before our eyes!
Runtime, fun-time… Last week, the Node turncoats Deno team released v1.4.0, and called it “our largest feature release yet.” Deno’s only been around since May, so that’s not saying a ton, but this is still a pretty significant release and a big step forward for the new JavaScript/TypeScript runtime.
The highlights:
Web Standard WebSocket API: Newly added support for the WebSocket API allows you to communicate with remote servers over the WebSocket protocol, which is available in all modern browsers.
Automatic restarts on file change: A new, integrated file watcher lets you restart a script when any dependencies change.
Integrated test coverage: If you run tests in deno test with the --coverage flag, you’ll be able to find code that isn’t covered by your tests. Once your tests finish, Deno will print you a summary of your code coverage per file. (You may want to hide this from the developer on your team who is obsessed with 100% test coverage at the expense of everything else…)
The bottom line
Deno is still a baby, but like, one of those babies whose parent’s are super smart. Ryan Dahl has been upfront with his goals to make Deno more “simple, modern, and secure” than Node.js (Ryan’s first-born runtime). Will these early releases provide enough unique functionality to start convincing developers to jump ship from Node.js? I guess we’ll see.
“DEE-NO” still sounds more like the name of that big dog in your neighborhood than a super modern JavaScript runtime, but we don’t make the rules.
JS Quiz - Answer Below
In what order will the logs below show up in the console?
console.log('First')
setTimeout(function () {
console.log('Second')
}, 0)
new Promise(function (res) {
res('Third')
}).then(console.log)
console.log('Fourth')
Cool bits
-
Moment.js says that it will shift into legacy mode, choosing to prioritize stability over new features. It’s telling developers to stop using it for new projects because it’s big and slow (#ThiccLib), but so far, no one’s listening. It still got 12 million downloads last week.
-
Jane wrote an in-depth article on 10 helpful Tailwind CSS resources that will help you better utilize the design framework, whether you’re just starting out or have been using it for a while.
-
You could spend $10 per month for a Netflix subscription, or you could spend 10 hours building a Netflix clone by following this video tutorial. (Note: Trying to clone Tiger King will take longer than 10 hours. And a lot more drugs).
-
Everyone who uses Rust is legally obligated to preach the Gospel of Rust at all times. In this article, Alan does that by describing his attempts to incorporate some of his favorite Rust patterns and practices into TypeScript. It’s a great read if you’re interested in Rust as a JavaScript developer.
-
Amanda wrote a comprehensive guide to end to end testing that is genuinely helpful.
-
BGJar is a free SVG background generator that gives you a bunch of ways to make your site look pretty without using the same Bootstrap/WordPress theme you’ve been using since 2015.
-
Terrible interview question someone has probably been asked: “Can you name the top 4 most common JavaScript security vulnerabilities and the best ways to address them?” Luckily, this post covers that exact topic in detail. Congrats on getting hired at Google.
-
Halfmoon is a new bootstrap alternative with built-in dark mode that’s fully customizable with CSS variables. And it uses vanilla JavaScript instead of JQuery. Apparently, everyone decided to release design tools this week. 🤷♀️
One Question Interview
What does building for the web look like 5 years from now?
“In 5 years, the browser will increasingly become a compiler target, to such an extent that HTML and CSS will become comparable to writing in Assembly. There will be an increasing number of mature abstractions (WebAssembly among them) that will open entire new categories of web applications (e.g. graphically intensive games). Notably these new applications of the browser will live alongside - and not replace - web apps as we currently know them. The total effect is one where the web can do almost everything native applications can do today.”
Harry will be giving a talk titled “The 1 Hour Crash Course to React Hooks” this Thursday for ui.dev subscribers. (calm down, we’ve got kids to feed!).
JS Quiz - Answer
In what order will the logs below show up in the console?
console.log('First')
setTimeout(function () {
console.log('Second')
}, 0)
new Promise(function (res) {
res('Third')
}).then(console.log)
console.log('Fourth')
First, Fourth, Third, Second.
To fully understand this one you need an understanding of JavaScript’s event loop, specifically, the Call Stack, Task Queue, Web APIs (for setTimeout), and the Job Queue.
We’ll publish a post sometime this week that goes over all of those and we’ll include it in next week’s Bytes. If you don’t want to wait until next week, we’ll tweet about it from @uidotdev when it’s out.