6

Summary: To use Svelte instead of jQuery in existing Flask apps.

Problem: We've got an existing Flask/Jinja2 server-side rendered website. It uses jQuery. I'd like to use Svelte without SPA/Sapper/Router/etc. and just as a library. Ofcourse, Svelte is a compiled preprocessor that generates optimized vanilla JS that manages state/reactivity without shadow DOM or any other tricks that React/Angular uses.

Requirements: Multipage app, cannot be SPA. Routing is not needed, we're fine with page refresh :) and no state needs to be shared between pages (except for cookies ofcourse).

Impact: Svelte is great, but vast majority of enterprise and silent majority already have websites written in Flask/Django with some JS functionality (most likely jQuery). Wouldn't be great to use a preprocessor such as Svelte to add interactivity/reactivity to existing websites? Not everyone has the luxury to build SPA apps and there are other reasons for not building one (SEO for e.g.).

Possible Ideas:

  • Webpack: Preprocess Svelte app to .js file + .html file. Serve both after rendering it through Jinja2 templating engine.

How Vue.js does this: How to render by Vue instead of Jinja

Thoughts? I am not familiar with Webpack enough but Svelte seems to be a perfect fit for taking Javascript interactivity/reactivity and precompiling it to be served in Flask/Jinja2 or Django apps. Benefits are amazing: get rid of jQuery, add component architecture, fast, vanilla JS, and small!

davidism
  • 121,510
  • 29
  • 395
  • 339
Neil
  • 775
  • 1
  • 5
  • 19
  • 1
    I also share your enthusiasm for Svelte as I have a production app written in it, driven by a Flask API. However, if you are looking to replace jQuery and add interactivity/reactivity, I would look towards something like Alpine.js or htmx, rather than Svelte. – Karl Sutt Feb 01 '21 at 11:23
  • Looking forward to see what sveltekit will bring to the table but it seems like it could solve this issue – gruvw Jul 12 '21 at 14:15
  • 1
    This is simply not how Svelte works. Vue is a JS component library, so instead of using Webpack you can just write Vue inside of HTML, add Vue.js in as a script, and it will work. Since Jinja produces HTML, it can produce HTML containing Vue components etc. But Svelte is not actually JS. As Evan You has said: it's "svelte script". It works by compiling .svelte files into html, js and css files. You could try to hook into Flask's rendering process and insert a svelte compiler into the pipeline (look at flask.render_template), but I don't know anyone who has tried that. – Marcel Besixdouze Jan 16 '22 at 20:35
  • This other answer may be useful to you: https://stackoverflow.com/a/65522522/1354641 It's possible that you could try to write a kind of component library in Svelte, and then drop those components into your Jinja templates. None of these are the expected ways to use Svelte, though: Svelte is really for building SPA's or serving with tools like SvelteKit. – Marcel Besixdouze Jan 16 '22 at 20:44

0 Answers0