[discussion] Lazy loaded SPA experiment (code included)

[alshdavid]

I wasn't able to find a subreddit for discussing the framework so here we are!

First off, I'm loving Svelte so far. I can see a lot of room for improvement (mainly surrounding tools and TypeScript), but the core is lit.

What I like is that it mostly concerns itself with view rendering. You're not doing dependency injection, or routing, or anything additional.

I created a very simple experiment where I attempt to separate a project into multiple, lazy-loaded routes which have shared dependencies (an in memory items list).

I am using a dependency injection technique I got from Go (Golang). Where there is no magic framework that injects dependencies into your things (Angular I'm looking at you), but instead your project dependencies are declared, instantiated at bootstrap, then references passed into your views as they render.

This means 80% of your application is purely JavaScript, concerning itself with fetching/processing data, providing a stream which the view subscribes to as needed.

This keeps the concerns & responsibilities of the view rendering framework minimal and focused.

It also means that my React applications that use this pattern can nearly trivially be replaced with Svelte because I only have to modify the view layer ;)

I have attached the repo to this post, the entry point is ./main/src/app/main.js

Anyway! It might be garbage and I might not know what I am talking about. In any case, I'd love to hear feedback.

https://github.com/alshdavid-sandbox/svelte3-lazy-loaded-spa

[alshdavid]

I have published a clientside router for Svelte. Features:

• Built in animations
• ExpressJS-like syntax.
• Middleware via familiar app.use()

Github https://github.com/alshdavid/crayon

Animated example https://github.com/alshdavid/crayon/tree/master/examples/svelte-animated

Non-animated example https://github.com/alshdavid/crayon/tree/master/examples/svelte

Basic syntax sample

import crayon from 'crayon'
import svelte from 'crayon/svelte'
import MyView from './MyView.svelte'

const app = crayon.create()

app.use(svelte.router())
app.use(crayon.animate({
    name: 'fade',  
    duration: 300
}))

app.path('/', (req, res) => res.mount(MyView))

app.load()

The router also supports Vue and React, you just need to app.use the middleware for that framework. Let me know your thoughts!

[Ryuno-Ki]

Hi, @alshdavid, maybe you want to comment on https://github.com/sveltejs/svelte/issues/172 ?

[alshdavid]

Thanks, just did!