context : https://twitter.com/nhoizey/status/1169577744650428417
The next version of Vue will have some Svelte inspired improvements, it seems.
I don't know much more, beside some quickly viewed screenshots of new syntax (I didn't practised Vue since ~1 year)
Svelte really shines on code simplicity/lightness. Developping a component really feels like writing a small HTML fragment (beside the templating directives) Particularities : mostly 2 syntaxes twists,
- the
exportkeyword is used to declare the props of a component. It may feel weird at first to some people. - the
$symbol, used to define reactive computations/functions.
Classic architecture patterns used in React/Vue will still apply (component trees with descending data flow, using props).
Some (powerful) particularities :
Reactive stores – https://svelte.dev/docs#svelte_store
Very simple and powerful. You can easily build upon to fit complex needs.
Take a look at the examples: https://svelte.dev/examples#writable-stores
SetContext/Getcontext – https://svelte.dev/docs#setContext
Used to share a live object instance on a whole component tree (from a root component to all its children tree)
- useful to interface with libs with a stateful instance like leaflet or mapbox. Example : https://svelte.dev/examples#context-api
- useful to share a live store instance over a whole app
use directive – https://svelte.dev/docs#use_action
Used to share behaviors (functions) across components, in a composable way.
Module context – https://svelte.dev/docs#script_context_module
An 'advanced' feature that you can use to define a "singleton" element over many component instances.
Example : https://svelte.dev/examples#module-exports
SVG feels like native to svelte.
SVG components are composable and natively dynamic/reactive. No differences from HTML (beside the markup you write).
Examples :
- quick sketch, showing svg components composition (simple, not very perf) https://svelte.dev/repl/3a599be7061549d9a79ac0458ea786ce?version=3.11.0
- Official examples : https://svelte.dev/examples#svg-transitions
I would eventually consider using sapper. The sapper boilerplate gives you a nice configured project structure with a little server, a configured bundler and really nice SSR+PWA capabilities out of the box.
However, a lot of the sapper boilerplate (the server part) would be useless for esviji, as it's only a client-side PWA. The export command would easily generate the final files (https://sapper.svelte.dev/docs#Exporting).
I filed an issue about this subject (sveltejs/sapper-template#78)
Thank you so much, I'll dive into that ASAP!