🖼️I made an image viewer for locally AI-generated images by Easy Diffusion

Pazu — Wed, 04 Oct 2023 15:21:51 +0000

Easy Diffusion is a web UI for using Stable Diffusion models and generate image locally using your CPU or GPU.

You can save your images locally with its metadata. But they are stored inside many folders and it's hard to browse them.

I made a node.js server + Svelte UI to browse all your images with a search bar searching for specific keywords in the prompt.

Code here

Github repo.

Put the repo inside your Easy Diffusion image destination folder
Simply click the bat file (Windows) and server should serve images

More details in readme file. Thx for reading. ✅

Which JS Framework is the smallest?

Pazu — Thu, 13 Jul 2023 10:09:20 +0000

Which JS Framework build the smallest minified JS bundle? And which one has the smallest development folder?

Probably the most complete study about benchmarking JS Front-end Frameworks is the Benchmark by Krausest.

This study focuses on the time execution, CPU performances, lighthouse metrics as well as memory allocation.

But There's no indication about those criteria:

The syntax quality for developers
The size of the development folder (all node modules included)
The size of the built webapp and distributed to browsers
The size of the JS minified bundle in the built app

It is to rank most known Front-ent JS Frameworks that I build the exact same app with several frameworks and compared them.

Frameworks tested

As I already know Angular, React and Svelte, I was able to also try modern frameworks, that are often simple to get started because they are often very similar to react : components are functions returning JSX elements (tsx in my case, I only used TypeScript).

React Tested with create-react-app and vite
Angular Introduce good practices such as OOP, TS, testing
Vue.js With composition API
Svelte With vite, cleanest and simplest syntax in my opinion
Solid JS Very promising for the future
Qwik Behave differently from others because of resumability
Preact Excellent alternative to React
Vanilla Remains the smallest, but exponentially hard syntax

App built

I built a simple SPA app in all of the frameworks, the app:

Displays a constant name of the app as well as a SVG logo
Has an incrementing reactive variable
Has a text input pushing its content into an array when focused is lost or when enter is pressed.
Displays the the content of the list, where each element calls another component (called MessageComponent and displaying the message and the date time of it's creation)
Save into localhost the list content
Has a button to empty the list

All the apps works similar and has the same CSS parts.

All the apps use a main component that call in a for loop the message component.

GitHub repository

You can find more information about the project as well as the source code of all apps in this repo

Results

Size of minified JS bundle in KB

Here I compare the size of the minified JS bundle (built by npm run build, or ng build --configuration=production, etc.).

Lower is better

Here we can observe that React has the largest bundle size, exceeding half a megabyte of JavaScript code. Although this may seem relatively small, it is important to consider that each time the page is refreshed, the entire bundle needs to be transmitted over the network and interpreted by the browser. Therefore, we aim to make the JS bundle as lightweight as possible.

The React app built with Vite is nearly four times smaller, around 140 KB, and is comparable to Angular. However, both of these apps still have a significant size.

Next, we have Qwik and Vue, which are approximately 50 KB in size, even smaller than the previous frameworks. In this comparison between the three major frameworks, Vue emerges as the winner. It is worth noting that Qwik differs from other frameworks because it utilizes resumability, which means that only a small portion of the JS bundle is loaded and interpreted by the browser when necessary.

Now, let's talk about the winners: Preact, Solid.js, and Svelte. These frameworks have incredibly small JS bundles, measuring at 13.7 KB, 10 KB, and 6.7 KB respectively. This is significantly smaller compared to the other frameworks! Both Preact and Solid serve as excellent alternatives to React, as they employ similar (or very close) syntax. In my opinion, Svelte is the best among them all due to its clean, easy-to-understand, and expressive syntax.

Lastly, it's important to mention that there is no "minified JS bundle" in Vanilla JS since it does not involve any specific framework. Even with minimal DOM manipulation, a Vanilla JS file can still reach a size of 1.1 KB (which is not far off from the Svelte JS bundle...).

Size of development folder in MB

In this second part, I take a look at the total size of the development folder including all the node modules dependencies.

Lower is better

The heaviest framework for the development phase is Angular, climbing up to almost half a giga byte of data. That's pretty huge considering the app builded is a simple page with a reactive button and a reactive list.

React and Qwik are smaller, respectively 293 and 169 MB.

Then comes all the other frameworks that are close to each other, around 100 MB.

Of course Vanilla JS doesn't require any dependency, because there's no difference between the development and the production code.

Expressiveness

In my opinion:

Svelte and Vue (using Components API) wins the battle, they provides the simplest and most declarative syntax.
Angular has also a nice declarative syntax on top of a great organisation of components. Though, it can result in a lot of src files to handle. And is a bit hard to start with.
React, Qwik and Solid components return JSX that contains JavaScript expressions, this focus on more and smaller reusable components (especially compared to the heavy Angular components), but have the drawback to mix HTML and JS code together, so it can be confusing, and the MVC is hard to achieve.

In any case, vanilla JS is to be avoided for any kind of projects.

Thank you for reading, I would love to hear your thoughts on this project :)

📈 More Statistics 📉 for Stack Overflow 2023 survey

Pazu — Wed, 12 Jul 2023 11:30:49 +0000

So recently, I gathered data from the 2023 developer survey of Stack Overflow, and I decided to create an account here to share my project.

In the survey's results, on the Desired/Admired part, technologies are sorted by "Desired" only, it's not possible to sort them by "Admired". Also, it would be interesting to rank and compare them with the average between "Desired" and "Admired", as well as the width between the two dots.

It's for these reasons I build a simple display based on the data.

Browse results
Github repo

DEV Community: Pazu