Hello Coders,
This article presents a curated list with resources (starters, blog articles ..) related to the new wonderboy Javascript Framework - Svelte JS.
I must say from the beginning that I'm not a JavaScript guru and I'm using the starters as a knowledge base for AppSeed, a platform that uses flat/lifeless HTML to generate stable UI-ready Web Apps in different patterns and programming languages.Thanks for reading!
What is Svelte JS
Svelte is a JS Framework that provides a new approach to code user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.
Svelte provides a different approach to building web apps than some of the other frameworks covered in this module. While frameworks like React and Vue do the bulk of their work in the user's browser while the app is running, Svelte shifts that work into a compile step that happens only when you build your app, producing highly-optimized vanilla JavaScript.
I will not insist on Svelte being super documented in many places. Some Svelte-related links that might help you get started:
- Svelte JS - the official website
- Getting started with Svelte - hosted by Mozilla
- What is Svelte - a short introduction provided by AppSeed
Svelte JS Starters
Being such a young technology is quite hard at this moment to find usable starters to play with or to accelerate your learning curve. The list will be updated periodically with new items discovered by me or suggested in the comments by the Dev community.
Svelte Notus Admin Template
Notus Admin Template is an open-source product provided by Creative-Tim on top of Svelte and Tailwind CSS. It features multiple HTML and Svelte elements and it comes with dynamic components for Svelte. It is based on Tailwind Starter Kit by Creative Tim, and it is built with both presentation pages, and pages for an admin dashboard.
- 👉 Svelte Admin Template - Notus - product page
- 👉 Svelte Admin Template - Notus Demo
Svelte Digital Agency
Open-source web app made by using Svelte and Sapper.
Features & Links
- JS Framework: Svelte, Sapper
- Design Credit: Nixalar
- MIT License
- Svelte Digital Agency - Souce Code
- Svelte Digital Agency - LIVE Demo
Build from sources
To see the app running locally, we need a stable Node.js environment and GIT command tool.
$ # Clone the source code
$ git clone https://github.com/app-generator/svelte-digital-agency.git
$ cd svelte-digital-agency
$
$ # Install modules
$ yarn
$
$ # Start the app in development mode
$ yarn dev
$
$ # Production build
$ yarn build
Svelte Coderstats
Open-source web app made by using Svelte and Sapper.
Features & Links
- JS Framework: Svelte, Sapper
- UI Kit: Bulma CSS
- Design Credit: Robert C. Soriano
- MIT License
- Svelte Coderstats - Souce Code
- Svelte Coderstats - LIVE Demo
Build from sources
$ # Clone the source code
$ git clone https://github.com/app-generator/svelte-coderstats.git
$ cd svelte-coderstats
$
$ # Install modules
$ yarn
$
$ # Start the app in development mode
$ yarn dev
$
$ # Production build
$ yarn build
Svelte Dashboard SB Admin
Open-source admin dashboard made by using Svelte and Sapper, inspired from SB-Admin Dashboard.
Features & Links
- JS Framework: Svelte, Sapper
- UI Kit: SvelteStrap - Bootstrap4 components for Svelte v3
- Design Credit: SB Admin by StartBootstrap
- MIT License
- Svelte Dashboard SB Admin - Souce Code
- Svelte Dashboard SB Admin - LIVE Demo
Build from sources
$ # Clone the source code
$ git clone https://github.com/app-generator/svelte-dashboard-sb-admin.git
$ cd svelte-dashboard-sb-admin
$
$ # Install modules
$ yarn
$
$ # Start the app in development mode
$ yarn dev
$
$ # Production build
$ yarn build
Blog Articles
- I created the exact same app in React and Svelte. Here are the differences.
- Why SvelteJS may be the best framework for new web devs
- Svelte 3 Tutorial: A JS App with That Magic Framework You Heard About
- Exploring Sapper + Svelte: A quick tutorial
Links & Resources
- Svelte JS - the official website
- Svelte JS - the public repository (Github)
- What is Svelte JS - a comprehensive tutorial
- Sapper - Sapper is a framework for building web applications, based on Svelte.
Thank you! <('_')>
Top comments (3)
It is very instructive, I see that slender is not too far from the others. It seems a little better besides I speak about it in the top 4 of the best frontend JavaScript frameworks.
Its a misconception, svelte have not a good documentaion, and there is not fully stable uikits and plugins.Yes, svelte have few inspirational ideas, but for real and serious projects its so far from ok, maybe after few years but not in 2020...
For example you can look at github.com/CalvinWalzel/awesome-sv...
And compare it with vue or react awesome
Yep, Svelte is a super young .. but promising tech. The article gives credit from this perspective.
Let's hope, Svelte will get more traction and reach soon the production level .
P.S. Thanks for reading the article!