Svelte Web component framework

General
,
1

Svelte is a low level Web component framework that is truly reactive, fast, compact, and helps accessibility.

Svelte is a compiler so you write 40% less code (more declarative) and only ship features you use.

SvelteKit Update

Links under subsequent headings may still be useful but predate the release of SvelteKit. These relate to SvelteKit 1.0 or later:

Links

Sapper

You can create a client side web app using Svelte as is, bundled with rollup (written by Svelte’s creator), webpack, or webify etc., or you can use it within Sapper.

Sapper adds routing to the capabilities of Svelte. It runs server side but works with SAFE because you can export to a static site if you follow certain practices and don’t need to use different routes for different users (which should be fine with SAFE). It works well in SAFE Browser with hot reloading and the debugger.

Sapper is a framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing.

Unlike single-page apps, Sapper doesn’t compromise on SEO, progressive enhancement or the initial load experience — but unlike traditional server-rendered apps, navigation is instantaneous for that app-like feel. - Sapper website

Learnings

Learning Svelte is a pleasure because it seems very suitable for my uses (client side web apps on SAFE), very logical and straightforward, capable, and has excellent documentation, tutorial and examples. The community is fantastic: responsive, helpful and knowledgeable. All of this adds up to a very promising tool to learn.

SAFE Svelte Demo

I’ve created svelte project based on the SAFE Web App Tutorial, with UI taken from the 7gui’s CRUD example in svelte. The result is compact: just 32K spread across five files! (Or 96K in seven files if you include the source maps for debugging).

Download the app and see how to implement Svelte with the SAFE API: GitHub - happybeing/safetutorial-svelte: SAFE Network Tutorial App using Svelte You can use that repo as a template by following the instructions in the README, or just clone it as normal.

This demo is not intended for use so quirky rather than slick, and is live on alpha2 at safe://crud.svelte for anyone interesting in playing with it.

Note: the tutorial code it uses re-starts from scratch every time you load it, so don’t expect settings to be preserved next time you try it. They are stored on SAFE using your account balance, but the app doesn’t keep track of where they are!

svelte
svelte785×1003 104 KB

8 Likes
2

Aye, I saw this. Looks interesting!

2 Likes
3

Svelte has a very nice syntax! Intuitive and looks clean :thinking:

1 Like
4

Really wanted to look into this and see its fitness for a SAFE website.

First thing I did was looking at how larger applications would be structured and how routing could be done. At first sight it seemed like Svelte does not feature routing, as Svelte is not a fully-featured framework. But, on second look there is Sapper:

https://sapper.svelte.technology/

It includes routing, Server-side Rendering, Service Workers, state management and (important for SAFE) static exporting. The exporting is important, because I first thought it was made to be used as a Node.js/Express server. It also does hot-reloading for development and comes with a great starter template (either Webpack or Rollup).

Can’t get quite familiar with it as quickly as with Vue. Svelte syntax is cool and understandable, but Sapper as a whole is a bit more difficult to navigate. Vue’s ecosystem (routing and state management) seemed more comprehensive and intuitive.

Really curious to know if others have given Svelte/Sapper a try!

3 Likes
5

Just added to the OP, a five minute intro to Svelte 3:

2 Likes
6

Do you have anything on safe:// that uses svelte yet?

I’m playing about with it myself but seeing a worked example on the SAFE network would be good.

3 Likes
7

No sorry. I’m itching to have a go with it as [Update: there is now a Svelte demo app on SAFE - see the OP] I see lots of positive reports on twitter, but haven’t yet.

2 Likes
8

How have you got on with Svelte Willie?

I haven’t had chance to try myself yet, so just interested to hear from anyone who has. I keep reading good reports about it on twitter.

Last week, Rich Harris put up a 3D demo showing his integration of OpenGL. Really neat.

UPDATE: Hey, @southside I’ve started a svelte project. So far there is no SAFE specific code in it, but it might help get you started with something running in SAFE Browser. See: https://github.com/theWebalyst/safetutorial-svelte

UPDATE2: I’ve added the code from the SAFE Web App Tutorial and it works, although you can only see this using the debugger as there is no UI yet.

1 Like
9

@happybeing you may want to have also look at the imba language, if you are checking out new frameworks.

I find their precompiling approach very compelling. Has a tidy and short syntax.

There are some impressive projects, like:


I never used it yet, but like to get started with it.

1 Like
10

Thanks @swiesend, I’ve not heard of imba. Maybe this deserves a new topic? Suggest you post it again and it can have its own discussion.

11

sure @happybeing , here

1 Like
12

I like it, I like it a lot :slight_smile:

image
image1281×961 113 KB

6 Likes
13

SAFE Svelte Demo

I’ve created a Svelte project based on the SAFE Web App Tutorial, with UI taken from the 7gui’s CRUD svelte example.

This demo is not intended for use so quirky rather than slick, and is live on alpha2 at safe://crud.svelte for anyone interesting in playing with it:

It is compact: just 32K spread across five files! (Or 96K in seven files if you include the source maps for debugging).

svelte
svelte785×1003 104 KB

Clone the repo to see how to create an all using Svelte and the SAFE API:

5 Likes
14

Awesome! Oh man… If someone wrote a little online shop (app - enabling everyone to sell and buy) with it (maybe even using 2 party trustless escrow grabbing the public Adress data from Web ids :scream: :hugs:) that would be pretty huge!
(and if the resulting data is being exported into a file and importable again [and not only stored on safe] even if one party in the current test net runs out of puts a real online shop would be possible :thinking:)

A pity my time is so limited…

2 Likes
15

Thanks for this, im search any equal for the web, intuitive and simple.

16

Just added to the OP:

17

XSLT has been doing this for over 20 years. Svelte is just another JS framework that offers nothing new.
You should take a look at Saxon-JS: http://www.saxonica.com/saxon-js/index.xml

18

Hi Martynas,

Welcome!

I don’t know enough about sveltjs to rebut that but I’m not sure it is true. For example, how about sveltjs’ binding variables (I’m not sure it that’s the right term or if I can explain it) but it seems important in ensuring that when data changes, just the code that is needed runs to update the representation. Also Sapper etc. But I’ve yet to dig in, and it is 20 years since I was using XSLT so can’t say I know it well enough either.

I’d love to see it explored - they have a very helpful and responsive community on their discord so maybe post there?

I’ll leave your Docker post for someone else as I understand that even less! Great to see you here, it would be good to understand XSLT better and how it might solve these kind of problems.

Mark

1 Like
19

I asked Martynas about this on Twitter, hey presto a short thread. Comments anyone? (Here or our on Twitter).

20

Sveltejs just gets better. Even with my meagre knowledge I was able to demo and explain the code of a basic Sveltejs app to my local JavaScript meet last night. And today this:

20191114_114807535
20191114_114807535686×548 144 KB

It reminds me of when I discovered SAFE Network, the more I learn the better it gets.

1 Like