JS Roundup: Episode 01
This is JS Roundup, our new monthly series where we gather the most interesting news from the world of JavaScript.
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.
Another day, another JavaScript framework has joined the scene. Oh, wait! This time it’s HTML. Yeah, the creator of Angular, Misko Hevery, has released a new framework that’s very different from Angular. It’s HTML-first and JavaScript last. There’s also a framework called htmx, which hit 4000 stars on GitHub in July. There’s news about Astro for shipping less JavaScript, and Hotwire for more HTML. Are we entering into the era of HTML-first frameworks? Who knows. The web world is overwhelming and sometimes difficult to predict.
As you’ve already noticed, a lot has happened lately so let’s get straight to it!
Qwik framework
Let’s talk about the release of the Qwik framework. Here’s this article from Qwik’s founder, Misko Hevery “The first look at Qwik, the HTML-first framework.”
What makes Qwik different from the rest? Websites are becoming slower as we add more and more JavaScript to them, but at the same time, we need JavaScript to provide rich interactions for our users. This is where Qwik comes in. With the Qwik framework, we can serve just static HTML for super-fast and efficient websites without sacrificing interactivity.
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.
esbuild
Have you heard of esbuild? It’s an extremely fast JavaScript bundler. It’s been out for over a year and is currently on version 0.12.16, which was released this month. As stated on their official website, the main goal of the esbuild bundler project is to “bring about a new era of build tool performance, and create an easy-to-use modern bundler along the way”. Its major features are:
- Extreme speed without needing a cache
- ES6 and CommonJS modules
- Tree shaking of ES6 modules
- An API for JavaScript and Go
- TypeScript and JSX syntax
- Source maps
- Minification
- Plugins
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.
SolidJS 1.0
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.
Astro v0.18.0
The first public beta for Astro was released in June, and this July version 0.18 was released. What is Astro and what does it bring to the table? Well, Astro is not just another framework. It’s a new kind of static builder that works with other popular frameworks like React, Svelte, and Vue, but it renders everything to static HTML. So you have the freedom to build interactive sites with JavaScript and some of your favorite frameworks, along with the ability to ship 0 bytes of JavaScript by default and still get the same functionality. Now that sounds interesting!
But let’s face it, you can’t completely avoid JavaScript on the client side. So, even with all of the default help that Astro has to offer, you’d still have to ship JavaScript along with your static HTML if you need interactive UI components running in the browser, like an image carousel or a mobile sidebar open and close button. Do you see why they used the tricky phrase “by default”?
Well, the good news is that Astro still has a way to make your website super fast even with JavaScript, and that’s through partial hydration. Partial hydration means that instead of hydrating all your components, Astro is only going to hydrate the individual components that require JavaScript, leaving the rest of your site as static HTML. With version 0.18, you don’t just have partial hydration, you have responsive partial hydration, allowing you to hydrate components with CSS media queries.
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
- There’s
<style global>support, GitHub syntax highlighting, and a shiny new docs site
You’ll find more information on the Astro 0.18 release page.
AWS Infinidash
“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
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.1.5
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
Finally, did you know that JavaScript is the most popular programming language? JavaScript topped the language popularity charts in the State of Developer Ecosystem 2021 survey of nearly 32,000 developers with 69 percent usage, and 39 percent when developers were asked to specify their “primary programming language.” If you’ve ever wondered whether you chose the right programming language to learn, this is enough validation. Now it’s clear that JavaScript is taking over the world.
Tweet of the month
Which JavaScript framework will be the most popular by 2025? Out of 1,430 total votes, the React community won this poll with 49.1%. What do you think? Do you think it’s going to be Notinventedyet.js?
One of the new frameworks we talked about today, something else, or still React? Let’s have another poll in the comments section.
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 me or the entire team on Twitter!
The WebStorm team
Subscribe to WebStorm Blog updates
