Svelte Web component framework

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.

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: https://github.com/theWebalyst/safetutorial-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!

8 Likes

Aye, I saw this. Looks interesting!

2 Likes

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

1 Like

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:

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

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

2 Likes

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

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

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

@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

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.

sure @happybeing , here

1 Like

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

6 Likes

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).

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

5 Likes

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

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