Overview

Why Svelte?

In every app, we have at least one feature that is special and requires complex front-end logic. This is where Svelte gives us and our customers so much pleasure.

Compared to React, which clearly has a larger ecosystem, Svelte is leaner, faster, better integrated, and in my opinion, simply the better technology. To understand the idea of Svelte in comparison to React, please take a look at this entertaining video from Rich Harris, the founder of Svelte, starting at minute 4:13 rethinking reactivity.

Combined with solid system testing (we use Playwright), this is a powerful and reliable framework.

Setup Svelte

For make work svelte fluently we built the gem svelte-on-rails with the related node-package. Please follow the instructions there.

But, first we must make svelte running:

Installation

npm i svelte@latest @sveltejs/vite-plugin-svelte@latest 

vite.config.ts

 import { defineConfig } from 'vite' import RubyPlugin from 'vite-plugin-ruby' + import { svelte } from '@sveltejs/vite-plugin-svelte'; export default defineConfig({ plugins: [ RubyPlugin(), + svelte({}) ] }) 

package.json

{ ... "type": "module" // => otherwise @sveltejs/vite-plugin-svelte would break } 

example component frontend/javascript/HelloWorld.svelte

<h1>Hello World from Svelte</h1> 

Restart server.

Example Code, from above, should work.

Overview