JS Roundup: Episode 02
This is JS Roundup, our new monthly series where we gather together the most interesting news from the world of JavaScript.
The official releases of Vue 3.2 and TypeScript 4.4, Shadow DOM support in Svelte, and an exciting new way to visualize GitHub repositories – we’ll cover all that and more in this episode of JS Roundup.
Below you’ll find the transcript of the video. We’ve added it here for those of you who would prefer to read about the roundup instead of watching. It also contains links to additional information.
As usual, a lot has happened in the month of August, but there is only time to talk about a few things. So, what do we have for you today? There’s news about Vue 3.2, TypeScript 4.4, Svelte, RedwoodJS, Chakra UI, GitHub repo visualization, and React Native.
And as a little surprise, my colleague Paul Everitt, WebStorm Developer Advocate, will join as a guest on this episode!
Vue 3.2
There are lots of new features and performance improvements in the new Vue 3.2 “Quintessential Quintuplets” release! Firstly, there are two new features for single file components that are now considered stable:
There’s the <script setup>, which, to a very good extent, simplifies the process of using the Composition API inside Single File Components (SFCs). If you’re a React developer, you can think of single file components and the composition API as working with functional components and Hooks instead of classes.
With the Vue 3.2 release, there’s also the <style> v-bind syntax that enables component state-driven dynamic CSS values in single file component <style> tags. This simply means that with the v-bind feature, we can bind state values to tag attributes, just like in this snippet from the Vue release post, where v-bind is being used to connect the color attribute to the color state:
<script setup>
import { ref } from ‘vue’
const color = ref(‘red’)
</script>
<template>
<button @click=”color = color === ‘red’ ? ‘green’ : ‘red'”>
Color is: {{ color }}
</button>
</template>
<style scoped>
button {
color: v-bind(color);
}
</style>
Vue 3.2 also introduces the defineCustomElement method for easily creating native custom elements using Vue component APIs. This simplifies working with web components. And if you’re wondering what web components are, well, they’ve been around for quite a while. They are a set of different web technologies that enable you to create your own custom HTML tags that can be reused. With the defineCustomElement method, you can develop Vue-powered UI component libraries that can be used with any framework or no framework at all.
There are also some significant performance improvements to Vue’s reactive system with the Version 3.2 release. Along with that, there’s a new v-memo directive that provides the ability to memorize part of the template tree. You’ll find more information about this, and all the other new features in Evan You’s Vue 3.2 release notes.
Shadow DOM support in Svelte
What’s new in Svelte in August of 2021? Well, you can now specify a ShadowRoot as the target when creating a component, making it possible to render Svelte components inside the shadow DOM. Never heard of the shadow DOM before? It’s like a DOM inside the DOM. It has its own DOM tree, which is different from the original DOM. It has its own elements, and it has its own styles. In Svelte, you can now create elements and render components inside the shadow DOM.
There’s also the new svelte/ssr package to support work on improving SvelteKit server-side rendering, the trusted event modifier that allows you to check if an event is trusted before it’s called, and a new errorMode compiler option to support improved preprocessing of TypeScript files.
Last but not least, the export { ... } from (#2214), export let { ... } = (#5612), and {#await ... then/catch} (#6270) syntaxes are all now supported in Svelte components.
You’ll find more information in the What’s new in Svelte: August 2021 blog post by Daniel Sandoval.
RedwoodJS 0.36
Imagine a React frontend, statically delivered by CDN, that talks via GraphQL to your backend running on AWS Lambdas around the world, all deployable with just a git push.
Let’s go over that again. Do you know the kind of server-side rendered apps you build with frameworks like Gatsby and NextJS? Yes, the JamStack web apps. What if you need direct access to, and total control over, your data but don’t want to store it in your frontend codebase, or in any codebase for that matter? What if you want your own database instead of a third-party content management service?
Well, it’s Redwood to the rescue. Redwood is built on React, GraphQL, and Prisma, so it works with the components and development workflow you love, but with simple conventions and helpers to make your experience even better.
On August 20, Redwood released its version 0.36, a minor version release with major additions and improvements. Included in this version, we’re getting performance, stability, and SEO improvements. We are also getting built-in testing for functions and Webhooks. That’s right! As of this version, Redwood includes API testing utilities to make testing serverless functions and Webhooks, in their words, “a breeze!”.
There’s also Auth updates and a new Clerk provider. Wait, what’s Clerk? Well, it’s basically a user management service that can help you add user auth and profile management to your application in minutes. I know, most of us are just hearing about Redwood for the first time, so let’s go easy on the terms.
With version 0.36, there’s a new loginHandler() for dbAuth, Magic.link, and Firebase updates. There’s also Supabase providers for Twitch and SMS one-time-passwords with Twilio. You’ll find information about all these, and more, in the Redwood 0.36 release notes.
TypeScript 4.4
TypeScript, the JavaScript with syntax for types, is not backing down on its mission to provide safety at scale and results you can trust when building JavaScript apps. On August 26, TypeScript announced the release of its version 4.4 which introduces some really interesting features and updates.
One of the major highlights of TypeScript 4.4 is its ability to detect aliased type guards. What this means is that we can now assign type guards to constant variables and then use and reuse those variables in conditional statements.
Other major highlights of TypeScript 4.4 are:
- Symbol and Template String Pattern Index Signatures
- Defaulting to the unknown Type in Catch Variables (
--useUnknownInCatchVariables) - Exact Optional Property Types (
--exactOptionalPropertyTypes) - Class
staticBlocks - tsc –help Updates and Improvements
- Performance Improvements
- Spelling Suggestions for JavaScript
- Inlay Hints
- Breaking Changes
As with every TypeScript version, declarations for lib.d.ts have changed. Also, with TypeScript 4.4, the “this” value is no longer regarded when calling imported functions. In earlier versions of TypeScript, calling an import from CommonJS, AMD, or other non-ES module systems would set the “this” value of the called function. To align with the ECMAScript module specification, this will no longer be the case.
We also get improvements to promise checks along with this version. And one more thing, abstract properties will no longer allow initializers. Daniel Rosenwasser did a great job of explaining all the major highlights in the TypeScript 4.4 release blog post.
Оkay, the next segment will be covered by Paul Everitt. Paul, take it away.
Ryan Carniato’s articles
Thanks Ebenezer! What did I see in JavaScript in August? Well, JS Roundup is mostly about JavaScript software. Instead of software though, I’m going to cover a series of articles.
Let me explain. In August, I was actually on vacation. For vacation reading, I put a bunch of articles on my iPad. Mainly, a long series by Ryan Carniato, creator of SolidJS, about design topics in modern frontends. These were fascinating deep dives on topics like immutability, components, reactivity, and such.
Ryan has a framework that learns from all of these design ideas, but Ryan is also very even-handed as a storyteller. He gives praise freely. And he gives a “you were there” style account of chasing dead-ends, with real code topics.
And in fact, as I started recording, he must have read my mind as he published an article, The Unhealthy Obsession with JavaScript Bundle Size. Let’s not obsess about bundle sizes!
Give Ryan a follow on Twitter and especially Medium, and take a look at SolidJS as a “life after the virtual DOM” exemplar.
Back to you, Ebenezer.
Repo visualization
How can we “fingerprint” a codebase to see its structure at a glance? Here’s a project named repo visualization, created by GitHub’s Amelia Wattenberger. On August 5, Amelia announced the release of this really nice tool for understanding and searching through a codebase without going through so many files and folders. The visualization might take a minute to wrap your head around, but once you do, you can learn a lot from just a glance. Give it a try!
React Native in H2 2021
On August 19, React Native released its plans for the second half of 2021.
In the first half of this year, the React native team successfully rolled out its new architecture to React Native mobile products in the Facebook app – like the Dating profile and Marketplace tab. Now they’ve put together a playbook that shows how to migrate libraries and applications to this new architecture. One of the new architectural capabilities is the support for concurrent rendering in React Native.
The team also plans to resolve a large backlog of contributions in the React Native repository and build sustainable practices for handling incoming contributions. This should help give developers a nice healthy impression of the repository.
They’ve partnered with Microsoft to accelerate React Native development on Windows and macOS, and Oculus to bring new exciting experiences to VR. Check out the React Native in H2 2021 blog post for a more detailed read.
Chakra UI
In the month of August, Chakra UI hit 20,000 stars on GitHub. Chakra, a UI library for building accessible React apps quickly, is an awesome piece of work by Segun Adebayo. Really incredible that the library has come this far. Give it a try!
Tweet of the month
Before WebStorm became WebStorm, it used to be called Web IDE. That’s why the logo says WI instead of WS. If you think that’s an interesting piece of information, we’ve put together a blog post with 10 things you didn’t know about WebStorm, many of which are going to be quite surprising. Go check it out!
That’s it for today’s episode of JS Roundup. How do you like this new format? Let us know what you think here or drop a line to Ebenezer or the WebStorm team on Twitter!
The WebStorm team
Subscribe to WebStorm Blog updates
