Reactivity News #12
Repost of Reactivity News May 2021 edition, my Svelte focused newsletter
It's May and it's Monday and it's also one year anniversary edition! Time flies! This issue's topics are a mix of alternative frameworks and languages, but first let's see what happened in Svelteverse.
Svelte Trunk#
One release in the past month. Lots of fixes and new feature Support passing CSS custom properties to component.
https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md
SvelteKit Trunk#
Feels like a lot of energy is going into SvelteKit right now. The logo on its website is stunning. It also has a very smooth setup experience and minimal amount of dependencies. I encourage you to create a new project. I guarantee you will be pleasantly surprised.
Overall it's still a little shaky and rough around the edges, but we are off to a good start! You can tell that SvelteKit is gaining popularity by the increased number of YT videos and all the SvelteKit related questions being asked on Svelte subreddit.
According to Github it's 77% complete. I predicted at the end of June in the last newsletter. Let's see if my predictions hold up!
Sapper Trunk#
I guess we can now officially proclaim Sapper dead. Its development has stalled and for a good reason. Good luck with the migration to SvelteKit! Should be smooth as butter.
https://github.com/sveltejs/sapper/blob/master/CHANGELOG.md
News#
svelte-restate
Fresh out the oven another Svelte state management solution. Immutable store for Svelte with full Typescript support and Redux Devtools integration. BOOM!
The cool thing about Svelte stores is that as long as you fulfill its contract you can pretty much do anything on the inside. No wonder there are so many new solutions popping up. It's fun and easy!
https://github.com/endenwer/svelte-restate
sveltekit-stripe
An example of how to integrate Stripe into a SvelteKit project. You have no good excuse left to not to charge for your app anymore.
https://github.com/srmullen/sveltekit-stripe
State Of JavaScript Libraries and Tools
These kind of posts are always super-fun to read. Svelte is (of course) gaining on every front, but it's cool to see Solid.js and Alpine.js get more attention.
https://moiva.io/blog/2021-q1-state-of-js-frameworks
auth-supabase
Supabase (open-source Firebase alternative) is cool, SvelteKit is cool and auth is hard. Learn how to put everything together by studying this code.
https://github.com/one-aalam/svelte-starter-kit/tree/auth-supabase
1000 experiments
Mad scientist Joshua Nussbaum is doing something crazy mad. He is doing a 1000 experiments experiment. One a day. They are not only code experiments, but still! That's like 3 years in total! Currently on #170.
Gitpod's New Site
Gitpod converted their site to SvelteKit. 200 pages. It's snappy and fast. Check it out with network tab open in Dev Tools!
Webstone
Talking about Gitpod. Mike Nikles, who recently joined the company, has started a project called Webstone. He mentioned it on Twitter after I said that Svelte is currently missing a generator for CRUD. Like forms, DB access and other useful things that some frameworks have. Hopefully this project will make it easier to get started. Contribute!
https://github.com/WebstoneHQ/webstone
Svelte Summit
A week ago this year's Svelte Summit was held. I haven't watched it yet, but maybe I will find some time to catch up.
Svelte vs React
This is not a comparison of the frameworks. Well, actually it is, but not which one is better than the other. After working with Svelte and using external libraries I've noticed that some of the libraries on NPM work better with React that with Svelte.
Why is that? Because Svelte is stateful and React is stateless. React is declarative. Every time you change state it will re-render itself, allowing you to call some library function in the process. Svelte, on the other hand, will not do anything when you modify state unless you explicitly tell it to.
One way to fix this is to use a computed variable. Every time the variable changes Svelte will call some function, but I must admit that it feels a little "hacky" to me.
SolidJS
I've mentioned above that Solid.js is gaining ground. It's a really cool and well designed framework with a React-like API. One good thing is that it, like Svelte, does not use virtual DOM. It also claims to be the fastest framework, but I doubt that it matters unless you are building games or something else requiring high FPS. I bet that your users won't complement you on your form field validations feeling snappy.
I recommend that you check out the FAQ and read through the articles. Lots of knowledge there.
Elm
My recent frustration with TypeScript and its complex, and fake types, made me re-evaluate Elm. I've mentioned in the latest issue that it feels like Elm's development has stagnated. Turns out that's not the case. The Elm community is thriving and everyone who started using Elm say that they can't go back to writing JavaScript again.
For those of you who don't know what Elm is: it's a strongly typed functional language that compiles to JavaScript. It's famous for its "no runtime errors" guarantee and "if it compiles, it runs" motto. It's also known for CDD (Compiler Driven Development) as Elm's compiler has the best errors messages. It tells you exactly what you did wrong and how to fix it.
I've played with Elm a couple of years ago and liked it, but I've abandoned it because tooling (editor support) was not that great. Things have significantly improved since.
One thing I never liked (and still kind of don't) is the way you write HTML in Elm. It's lists all the way down and if you what to use an SVG icon you have to convert it to an Elm type first. There are CLI tools for that or you can do it with Webpack.
Even if you feel that Elm is not for you I recommend that you take a look at it. I guarantee it will influence how you write and structure your normal projects. In a good way.
Start by reading Elm at Rakuten. It's a long article (40 minute reading time!) evaluating Elm after two years in production with many interesting pointers to other places, not only Elm related.
One of the articles mentioned in the article above is TypeScript's Blind Spots that highlights some of the TypeScript type gotchas.
Read also Elm vs. Svelte if you are curious how the two differ.
The Rest#
Svelte with Webpack 5
Webpack might be old (I prefer mature), but it won't go anywhere soon. Many companies and projects around the world rely on it. You can't go wrong on betting on Webpack. Here is an article that shows how to setup a Svelte project using the newest Webpack 5.
https://codechips.me/svelte-and-webpack-5/
Calculator fields in Svelte forms
In some situations Svelte's bidirectional bindings won't cut it and you have to reach for React-line unidirectional (one-way) bindings.
https://codechips.me/svelte-forms-calculator-fields/
RxJS 7
Version 7 of RxJS was finally released. 50% smaller, better typings and more consistent APIs.
JSONBIN
Never heard of it before, but feels like I am a little late to the party. Neat service if you need to store some JSON in your app. And who doesn't, right?
Firebase SDK 9
Finally! Firebase has listened to its users and is releasing version 9 of the SDK which is tree-shakeable. Personally, I am very excited as Firebase SDK (Firestore and Auth) are a hefty (700kb!!) chunk of my app bundle. The app itself is around 150kb. The SDK is currently in beta.
https://firebase.google.com/docs/web/learn-more#modular-version
Litestream
If you don't want to use modern NoSQL solutions plain old SQL will get you far. There is this one project I've been keeping an eye on called Litestream. It's replication of SQLite database. You are probably rolling your eyes, but SQLite will take you far especially if you are on a budget or tinkering with a hobby app. Wrap it in a Hapi or Express server, add Prisma ORM, put it on some PaaS and you've just got yourself a nice and cheap API.
Here is an article that shows just how cheap it is https://mtlynch.io/litestream/
And finally ...
Bad Joke of the Month#
Q: How do you generate a random string?
A: Put a Windows user in front of Vim and ask him to exit
That's it for this month. Thank you for reading!