Reactivity News #13
Repost of Reactivity News June 2021 edition, my Svelte focused newsletter
In this edition: Svelte, Solid, Web Components and other interesting stuff.
Svelte Trunk#
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 Trunk#
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
News#
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!
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
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
Quicklink
Quicklink is a tiny library that prefetches page resources for you. It's kind of SvelteKit's prefetch attribute.
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?
CSS Bed
Sometimes you have to throw together an app really quickly. Classless CSS frameworks can be really useful in such cases.
Yjs
Building next Google Docs or Figma? Then check out this library
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.
Web Components#
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.
Bad Joke of the Month#
Q: How does a farmer count all his animals in the barn?
A: With a cowculator
That's all for this month. Godspeed!