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.
- Learn sveltejs in ten tweets
- Why Svelte may be the best framework for new devs is actually a really nice intro to Svelte and how to try it out.
- Svelte home page
- Svelte 3 Documentation (beta)
- Svelte3: Announcement - Presentation by Rich Harris
- Live Example (REPL)
- Community (helpful, responsive) Discord chat
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
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!