Reactivity News #15
Repost of Reactivity News August 2021 edition, my Svelte focused newsletter
In this edition: Svelte, Svelte Native, ClojureScript and PWAs.
Svelte Trunk#
Six new releases in the past months. Incredible! I thought that summer vacations in the Northern hemisphere would slow things down, but it's actually the opposite. Maybe people don't take vacations or maybe that's what they actually do and contribute to Svelte on their vacations.
https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md
SvelteKit Trunk#
Slowly moving forward. As I am writing this there are 36 open and 96 closed issues in the 1.0 milestone.
https://github.com/sveltejs/kit/milestones
News and Interesting Links#
SveltePress
SveltePress is a documentation tool built on top of SvelteKit. It's something like VuePress, or maybe Docsify, and is an easy way to get your project or API documentation going.
https://github.com/GeopJr/SveltePress
Snel
A tool to compile Svelte to JavaScript files to create web application using Deno and Svelte. Don't know if anyone is using it in production, but interesting to see that people are building things on top of Deno runtime.
https://github.com/crewdevio/Snel
Lightweight i18n library
Internationalization is often a pain. typesafe-i18n is an opinionated, fully type-safe, lightweight localization library for TypeScript and JavaScript projects with no external dependencies that works with Svelte and SvelteKit.
https://github.com/ivanhofer/typesafe-i18n
svelte-restate
Because Svelte's store contract is so simple it's easy to create a custom store implementation. Restate is an immutable store for Svelte with full Typescript support and Redux Devtools integration. It is highly inspired by re-frame (ClojureScript) subscriptions.
https://github.com/endenwer/svelte-restate
Felte Forms Library
Felte is an ambitious forms library for Svelte and Solid. I like forms. I work with them a lot and also wrote a book[link] on the subject. I haven't had the time to play with Felte yet, but it sure looks interesting!
https://github.com/pablo-abc/felte
SvelteKit + Supabase
Supabase is an exciting alternative to Firebase. This template offers everything you need to get off the ground quickly to build apps on top of SvelteKit and Supabase.
https://github.com/one-aalam/svelte-starter-kit
Firestore Lite
One of the biggest pain points working with Firebase what its large bundle size. Well, no more! The new version of Firebase SDK is tree-shakeable and there is even leaner Firestore Lite.
https://firebase.googleblog.com/2021/07/introducing-the-new-firebase-js-sdk.html
React vs Svelte vs Solid & MicroFrontends
Interesting interview with Ryan Carniato, creator of SolidJS. Give it a listen!
https://show.nikoskatsikanis.com/episodes/ryan-carniato
3 lessons from React
Ryan is also a great teacher and is not dogmatic about any frameworks. Here are some of his thoughts on becoming a better Svelte developer by looking at how things are done in other frameworks.
Svelte Custom Elements#
I still don't know what to make with (and off), web components, but I am sure they will become more popular as the web and web development progress. Did you know that you both build web components in Svelte and also use web components built with other tools in Svelte. Confusing right? Fear not! These links will make everything clear.
Using custom elements in Svelte
Learn how to use web components build in Lit, and the gotchas that come with it, in your Svelte apps.
https://css-tricks.com/using-custom-elements-in-svelte/
svelte-custom-element-template
Sample project how to build custom elements, aka web components, in Svelte with TypeScript.
https://github.com/Dan6erbond/svelte-custom-element-template
Svelte for Web Components development: Pitfalls and workarounds
Learn some of the pitfalls and how to solve them when developing web components in Svelte.
ClojureScript#
I have a secret fascination with Lisp. Many years ago I had the chance to work with Clojure and remember that I liked the experience a lot. Then I got more involved in web development and with it came JS and Node.js. So no more Clojure.
I recently dove deep down into ClojureScript ecosystem and its funny package names. While the entry barrier is high I truly believe that teams can be 10X productive in ClojureScript than in other languages. First, it's simple, stable and doesn't change often. Second, ClojureScript is purely functional and in Lisp code is data and data is code. I urge to to research what it means for your code on your own.
Reagent
A nice guide to Reagent, a ClojureScript wrapper around React. It gives you a way to easily create React components.
https://purelyfunctional.tv/guide/reagent/
Re-frame
Re-frame is a mature framework built on top of Reagent with great documentation. Lots of takeaways and learnings even if you don't plan to build anything with it.
https://day8.github.io/re-frame/
Fulcro
Fulcro is a library for development of single-page full-stack web applications and a spiritual successor to Om.
https://fulcro.fulcrologic.com/
awesome-clojurescript
Awesome list of all things ClojureScript and its creative package names.
https://github.com/hantuzun/awesome-clojurescript
shadow-cljs
One of the biggest hurdles coming to ClojureScript is to understand how to setup the project. shadow-cljs is one of the popular tools in the ecosystem, but many people don't understand where to draw the line between ClojureScript compiler and other tools. This article explains how ClojureScript compiles the files to JavaScript.
https://code.thheller.com/blog/shadow-cljs/2019/03/01/what-shadow-cljs-is-and-isnt.html
CSS frameworks#
I think we can all agree that Tailwind CSS has become the most popular utility CSS framework and all popular things get copied. In the last issue I wrote about YoghurtCSS and UniformCSS, two SASS based utility frameworks. There is also Halfmoon and H-grid.
If you are a fan of Material Design there is Svelte Material UI, which is a collection of Svelte components.
Building native apps in Svelte#
Some people believe native apps will take off for real because the experience is so much better. Some believe it will be PWAs. Only time will tell.
I was curious if there is something like React Native for Svelte and it turns out there are a few frameworks. However, I don't know how mature it is or if anyone has built something with them in production.
Svelte Native
Svelte + NativeScript. Looks like an official framework, but not sure if it is.
https://svelte-native.technology/
svelte-capacitor
Project template to build hybrid mobile apps using Svelte and CapacitorJS with live reloading on Android and iOS.
https://github.com/drannex42/svelte-capacitor
svelte-nodegui
Build performant, native, cross-platform desktop apps with Svelte.
Framework7 + Svelte
Framework7 has bindings for Svelte that lets you build Build full featured iOS, Android & Desktop apps with it.
Building a PWA with Svelte
Some comments and notes on the experience of building a PWA with Svelte and Framework7, plus a starter project.
https://github.com/tncrazvan/svelte-f7-starter
Other interesting things#
The Future of the Web
Interesting view on the future of the Web.
https://www.hazem.cool/blog/the-future-of-the-web
Websites using Svelte
List of some of the public sites using Svelte.
https://www.wappalyzer.com/technologies/javascript-frameworks/svelte
Collection of responsive patterns
Useful list of patterns and modules for responsive designs.
https://bradfrost.github.io/this-is-responsive/patterns.html
The Future of Webdev
Personal thoughts on the future of web development. It's not TypeScript and WebAssembly, nor React and GraphQL.
https://suzdalnitski.medium.com/the-future-of-webdev-b5fe293b5f2c
How does JavaScript work?
Deep technical series on how JavaScript works internally. Start with this article.
https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf
Bad joke of the month#
What do sprinters eat before the race?
Nothing. They fast.
That's all for this month!