Reactivity News #13

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

· 3 min

In this edition: Svelte, Solid, Web Components and other interesting stuff.

Svelte Trunkpermalink

Two releases in the past month ... or maybe none? Not sure. For in-depth details see Svelte's official blog post.

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

SvelteKit Trunkpermalink

From 77% to 65% complete in a month. I predicted at the end of June in the last newsletter, but the odds are getting lower. This is no surprise. The more you fix the more you discover.

https://github.com/sveltejs/kit/milestone/2

Newspermalink

How is Svelte different than React?

Josh Nuss teaches us history of JS and shares his thoughts on how Svelte is different from React.

https://dev.to/joshnuss/why-svelte-59a5

SvelteKit Theme Switch

How to use Svelte stores and TypeScript to implement CSS theme switcher

https://dev.to/nico_bachner/sveltekit-theme-switch-a58

Simple Page Transitions with SvelteKit

How to implement nice page transitions using Svelte HOC and key property

https://dev.to/evanwinter/page-transitions-with-svelte-kit-35o6

Shadow Generator built in Svelte

Nice shadow generator built with Svelte and Tailwind

https://pagereview.io/css-shadow

Modular Synthesizer

Very cool app built with Svelte and Tone.js. Just don't get stuck playing around!

https://patch.cab/

SvelteKit Authentication with Magic Links

This is a demo application for using Magic auth with SvelteKit. Magic provides secure, passwordless authentication for your application.

https://github.com/srmullen/sveltekit-magic

SvelteKitAuth

One thing SvelteKit hasn't officially solved yet in authentication. Hopefully this lib will be the goto solution.

https://github.com/Dan6erbond/sk-auth

IBM Carbon components in Svelte

Seems like IBM is one of the bigger companies that is betting on Svelte. Nice!

https://carbon-svelte.vercel.app/

Deep Space Network

App showcasing Carbon Components and Svelte

https://dsn-live.netlify.app/

svelte-starter-kit

Neat SvelteKit boilerplate with all common bells and whistles

https://github.com/one-aalam/svelte-starter-kit

Svelte Motion

Cool new animation library for Svelte

https://svelte-motion.gradientdescent.de/

pluma-svelte-forms

Another forms library for Svelte

https://github.com/plumacloud/pluma-svelte-forms

Solid.js

In the past month I've been reading up on Solid.js. Very interesting reading! Ryan Carniato has really thought everything through when designing Solid taking the best parts and inspiration from number of different frameworks.

If there is one thing I can recommend in this edition s to read all the articles by him! You can find the links in Solid's Github repo.

Feels like Solid.js is gaining a lot of traction at the moment. This is a framework to watch!

https://github.com/solidjs/solid

A Look at Compilation in JavaScript Frameworks

Ryan's latest article where he dives deep down into the compilation step in some of the JavaScript frameworks

https://dev.to/this-is-learning/a-look-at-compilation-in-javascript-frameworks-3caj

Awesome Forms with Solidjs

A simple example of building a simple address form with Solid and RxJS.

https://dev.to/johncarroll/awesome-forms-with-solidjs-18gi

SolidJS - React meets Svelte?

"SolidJS is a frontend UI framework whose syntax is very similar to React but is compiled to modern javascript like Svelte is allowing people to get the speed and bundle sizes of Svelte but use the React syntax they are used to"

https://dev.to/alexmercedcoder/solidjs-react-meets-svelte-4fmm

The Rest

Feels like PWAs are on the rise. Here is a good starting point to learn more about them.

https://web.dev/progressive-web-apps/

PureScript Flame

A re-implementation of Elm architecture in PureScript.

https://github.com/easafe/purescript-flame

HTMX

Cool library that makes a lot of hard things easy by only using HTML attributes

https://htmx.org/

Quicklink

Quicklink is a tiny library that prefetches page resources for you. It's kind of SvelteKit's prefetch attribute.

https://getquick.link/

instant.page

Library with almost on par functionality with Quicklink. A direct competitor?
https://instant.page/

Aurelia Web Framework

A really interesting framework with great documentation. Weird that I haven't seen it before. I wonder if it's popular?

http://aurelia.io/

CSS Bed

Sometimes you have to throw together an app really quickly. Classless CSS frameworks can be really useful in such cases.

https://www.cssbed.com/

Yjs

Building next Google Docs or Figma? Then check out this library

https://docs.yjs.dev/

SPA vs Phoenix LiveView

Lately I've been playing with Phoenix LiveView. It's a totally different approach to regular frontend apps. In LiveView you keep state on the server. Here is a short and easy-read article that teaches us the differences. Maybe it will arouse your interest to learn more about LiveView.

https://rafaelantunes.com.br/how-liveview-differs-from-a-traditional-spa

Surface UI

A library built on top of Phoenix LiveView that lets you build rich interactive user-interfaces, writing minimal custom Javascript. Still in early development, but looks very promising.

https://surface-ui.org/

Web Componentspermalink

I am not sure what I think about web components yet, I've never needed to write one, but the idea of having framework agnostic components is certainly appealing. There are many use cases for web components, but where do you draw the line?

How we use Web Components at GitHub

An interesting read about how Github builds and thinks about web components

https://github.blog/2021-05-04-how-we-use-web-components-at-github/

Custom Elements Everywhere

A summary site that checks custom element support in many frontend frameworks.

https://custom-elements-everywhere.com/

Shoelace

A nice style library of web components. How to use it together with Svelte is yet to figure out.

https://shoelace.style/

Bad Joke of the Monthpermalink

Q: How does a farmer count all his animals in the barn?
A: With a cowculator

That's all for this month. Godspeed!


If you liked what you read, it would make me really happy if you could share it on Twitter.