im

Reactivity News #16

Repost of Reactivity News September 2021 edition, my Svelte focused newsletter

· 4 min

In this edition: Svelte, CSS Transitions, FoTW and other interesting things.

Svelte Trunk#

Svelte development shows no signs of slowing down. Four new releases in August. Boom!

https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md

SvelteKit Trunk#

Although SvelteKit is moving forward they need your help to get to 1.0. Doesn't matter if you are a total beginner. I am sure there is something for everyone.

https://github.com/sveltejs/kit/issues/2100

https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md

How to build a decentralized chat dapp
Build a decentralized chat app using the GUN JavaScript library and Svelte. Learn how to use web3 and blockchain. This video is from Fireship so you know it's good.

Create a PWA with SvelteKit
SvelteKit is a hybrid framework meaning you can have dynamic pages and you can have statically generated pages. This article is a good starting point for understanding how to build a PWA in SvelteKit.

https://dev.to/100lvlmaster/create-a-pwa-with-sveltekit-svelte-a36

The Truth About Svelte
Oldie but goodie. Written in 2019 before the releases of Svelte 3. Tech moves fast!

https://gist.github.com/Rich-Harris/0f910048478c2a6505d1c32185b61934

Philosophy of Svelte
Personal reflection on Svelte. I agree with most of the things in the article, but it's not all roses. There are some cases where other frameworks would make more sense to use.

https://blog.scottlogic.com/2021/01/18/philosophy-of-svelte.html

Evidence - a YC backeed company is betting on Svelte and SvelteKit
I've read about startups betting on Svelte before, but they all faded away after the initial hype. My guess that it wasn't Svelte's fault. Evidence, a startup backed by Y Combinator bet on Svelte too. Vey cool and let's hope that they will do well.

https://news.ycombinator.com/item?id=28304781

Cool App: Thread Bare
I was blown away after watching this Youtube video I saw in this tweet. If you want to build highly interactive apps Svelte is your friend.

https://thread-bare.app/

SvelteKit and Prisma

SvelteKit is all the rage. Prisma is all the hotness. Here is a short and sweet tutorial from Mike Nikles on how to use them together.

https://www.mikenikles.com/blog/svelte-kit-prisma-a-match-made-in-digital-heaven

Svelte developers are happier and get paid more
StackOverflow's Developer Survey is always a fun read. Svelte did really good in 2021 and Svelte developers are getting paid more that React developers according to results. If you are still hesitating if Svelte is something you should bet on here is your answer.

https://insights.stackoverflow.com/survey/2021#most-loved-dreaded-and-wanted-webframe-love-dread
https://insights.stackoverflow.com/survey/2021#top-paying-technologies-web-frameworks

JavaScript vs JavaScript. Fight!
Interesting article from Ryan Carniato that tries to clear up many confusions in today's frontend world. Did you know that SvelteKit, Nuxt.js and Next.js are SPAs? No? Go read the article!

https://dev.to/this-is-learning/javascript-vs-javascript-fight-53fa

Svelte Summit Fall 2021
Want to speak at the Svelte Summit in November? Go and submit your talk!

https://sessionize.com/svelte-summit-fall-2021/

HTML-over-the-Wire#

Fragments over the Wire, HTML over the Wire, HTML over Websockets I don't know what the official name is, but I know for sure that this is one of the possible futures of Web development and I really dig it.

The reasons for this are plenty, but here are a flew of them according to me.

No need to write JavaScript
Writing pure frontend code can be daunting and take a lot of time. Write everything in the backend and outsource the rest to the framework.

Write everything in one language
Everyone knows that context switching is a real productivity killer. Writing everything in one language improves your focus on the business domain problems and not on the framework ceremonies.

Faster time to market
From my own experience these frameworks let you go faster and thus reduce time to market. Perfect for SME, POCs and side-projects.

Just as there are pros there are cons. Here are some of the reasons where they might not make sense.

Different teams for frontend and backend
If you work in a bigger company where you have different frontend and backend teams. The frontend devs will not have anything to do unless they are on the UX side of the frontend spectrum.

Highly interactive apps
Because the state is usually managed on the server these apps can introduce some network lag. If high interactivity is a requirement you will be better off if you offload that to custom written frontend app.

Offline support
Many of these frameworks rely on Websockets. Don't use them if you offline support is a must.

Here are some interesting articles on the topic.

The Future of Web Software Is HTML-over-WebSockets
The article that started it all and got me really excited about the concept. I guess that I read it in the middle of one of my frontend fatigues.

https://alistapart.com/article/the-future-of-web-software-is-html-over-websockets/

FrOW: HTML Fragments over the Wire
Explains the history of how we got here and has a few interesting links that can take you down the rabbit hole.

https://github.com/guettli/frow--fragments-over-the-wire

Blazor
Microsoft doesn't want to missout on all the fun. Blazor is their contibution to this space that sits on top of ASP.NET. I haven't explored it myself in depth yet, but that page contains many buzzwords. WebAssembly, SignalR, JS iterop. Well, what can I say? Microsoft.

https://github.com/AdrienTorris/awesome-blazor

Kweb
No, Kweb is not K-Pop. Sorry! Kweb is a new way to create beautiful, efficient, and scalable websites in Kotlin, where server-browser communication is handled automatically.

https://github.com/kwebio/kweb-core/

Other FROW frameworks
There are a few other frameworks out there. The most well-known are.

CSS animations and transitions#

One thing that sets Svelte apart from other frameworks is that it has CSS transitions built-in. Overall, working with CSS and animations in Svelte is so much easier than in other frameworks. At least that I've worked with earlier.

Svelte is cool, but if you don't use Svelte for your project yet here a some nice libraries that can make your pages more interactive without doing that much work.

Transition.js
Simple JS library that provides a convenient way to create CSS transitions pragmatically.

http://www.transitionjs.org/

Highway.js
A lightweight, easy-to-use, flexible and modern library that help you create AJAX navigations with animations on a website.

https://highway.js.org/

Swup.js
Another transition library that it ridiculously easy to use. Just add it to you page and choose among different animation themes.

https://swup.js.org/

Barba.js
A progressive enhancement library to create fluid and smooth transitions between your website's pages. Mighty impressive website!

https://barba.js.org/

Bad Joke of the Month#

Q: How do you make holy water?
A: You boil the hell out of it.

That's it for this month!