JS Roundup: Episode 01
The Qwik framework, the new Vue.js release, and official releases of Astro and SolidJS – we’ll cover all that and more in our first episode of JS Roundup.
Below you’ll find the transcript of the video. We’ve added it here for those of you who prefer reading instead of watching, as well as to give you links to additional information.
As you’ve already noticed, a lot has happened lately so let’s get straight to it!
Qwik’s resumability makes this possible, as it can continue where the server left off. You don’t really have much code to execute on the client. It says in the article that “the qwikloader, which takes the static HTML generated from server-side-rendering and resumes it, is less than 1kb and will execute in under 1ms.” That’s a really small amount of code. And a very short time too.
It also says “The best part is that this code will stay constant no matter how big your application becomes.”
I have to admit that I haven’t tried it out myself yet, but it does look really promising and I’ll definitely give it a try.
React 18 Alpha
I know React 18 Alpha is kind of old news, but it’s worth mentioning for our first edition while we wait for the main release of React 18. According to the React team, the Alpha version was published so that library authors can try it and provide feedback. They also set up a working group to provide support to the React community through the release.
We’ve waited long enough for Suspense, and with React 18 it’s finally coming out with full support! I think this is really awesome. If you haven’t heard of Suspense before, it’s a way to tell React that you don’t want to load a particular component until a certain condition has been met, like data fetching.
There’s also the new root API that eases the React 18 upgrade process. Check out The Plan for React 18 blog post for more information. By the way, Cassidy Williams did a really good job of explaining the React 18 new features on the Netlify blog.
- Extreme speed without needing a cache
- ES6 and CommonJS modules
- Tree shaking of ES6 modules
- TypeScript and JSX syntax
- Source maps
Whew! That’s a long list. Interestingly, esbuild is already bundled with some frameworks like Hugo, a static site generator that’s similar to Gatsby but written in Go. So, you’re probably using it without even knowing.
To quickly test out esbuild, you can install it via npm with this command:
npm install esbuild
And then, bundle, for example, a JSX file with a command that looks like this:
.\node_modules\.bin\esbuild app.jsx --bundle --outfile=out.js
You’ll find more information in the Getting Started section of the esbuild documentation.
What happens when you combine JSX, the flexibility of React, and the simple mental model of Svelte? You get a reactive and virtual DOM-less library named SolidJS. On June 28, SolidJS announced the official release of version 1.0. According to Ryan Carniato, its creator, SolidJS had been in the works since August 21, 2016, before finally getting to this stable 1.0 release.
SolidJS looks very familiar to functional React, so if you’ve developed with React Hooks before, you shouldn’t have much of a problem getting used to the framework. Since SolidJS has no Virtual DOM, you have complete control over what gets updated and when, even at the DOM binding level. So the framework never does more work than you want it to.
Currently, SolidJS has close to ten thousand stars on GitHub. That’s a lot for a framework that’s officially one month old.
To quickly get started with SolidJS on your local computer, you can run this command on your terminal:
npx degit solidjs/templates/js my-app
That’ll generate a new SolidJS app which you can then navigate to. Then you should:
- Open up WebStorm
- You get a prompt to install the packages
- Click install
- Then, head over to the npm section and double click start
For a more detailed overview, SolidJS has extensive documentation, and I can already tell it’s going to be a widely adopted framework.
Other updates that come with Astro 0.18 are:
- Named slots for supporting multiple content entry points inside of Astro components
- Solid.js support. Remember SolidJS, which I just mentioned? Now you can use Solid.js components in Astro
- There’s also Lit support for using Lit SSR to get server-side rendering for web components
<style global>support, GitHub syntax highlighting, and a shiny new docs site
You’ll find more information on the Astro 0.18 release page.
“Infinidash, a new AWS service that brings to perfection that concept of data transmission that could not only provide reactive encryption to use in several cipher multiplexers, but that could also be capable of automatically synchronizing hexadecimal transpilers”. Okay, that doesn’t make any sense. I know. This explanation was given by Ellen Korbes, the head of product at Tilt. And the gist is, AWS Infinidash is an imaginary AWS service that solves just about any problem. Infinidash trended for a while on Tech Twitter in July.
It all started with this Tweet from Joe Nash:
The first time I saw a Tweet about Infinidash myself, I thought it was a real thing. But, yeah, it turned out to be a joke – the most popular AWS service in July. I wonder if they or anyone else is going to ride the hype and create an actual service named Infinidash. What do you think?
GitHub Сopilot trended for 2 weeks in July. I remember tweeting about it during that period and saying:
Yeah, tech Twitter didn’t disappoint. Personally, I don’t think it’s that big of a deal. I don’t think it’s going to disrupt anything – certainly not taking anyone’s job away.
But do I like GitHub Copilot? I think it’s cool, and useful. There have been concerns about the legality and morality of using open source code to train the copilot ML. So right now, I don’t know what the future’s going to be like for the tool. Let’s watch and see how it goes.
Vue 3.2.0-beta released. On July 16, Vue released stable version 3.1.5 with script setup bug fixes, and a beta 3.2.0 version with tons of features and performance improvements. While we wait for a stable version, you can view the changelog for more detailed information.
The State of Developer Ecosystem 2021 report
Tweet of the month
One of the new frameworks we talked about today, something else, or still React? Let’s have another poll in the comments section.
The WebStorm team
Subscribe to Blog updates
Thanks, we've got you!
Exploring the Power of CSS Nesting: Simplifying Styling and Enhancing Readability
Let's look at CSS Nesting, how it works, and how it enables you to get more expressive in how you write your CSS code.
Learn about how you can leverage our EduTools plugin to create your own courses in WebStorm.
Using Storybook With 11ty
Storybook is great for component-driven development. This blog post shows you how to use Storybook with 11ty.