Svelte is among the fastest libraries to build user interfaces. Contrary to React, Vue, Inferno — Svelte has no runtime. Components are written using HTML, CSS and JavaScript (plus a few extra bits you can learn in under 5 minutes). During your build process Svelte compiles them into tiny, standalone/deduplicated JavaScript modules. With static analysis, Svelte makes sure that the browser does as little work as possible. Other than being fast and weightless, Svelte has the lowest memory footprint after hand-written vanilla JavaScript. Svelte can render on both client and server.
- Svelte HN - An Hacker News clone that “is designed to test Svelte's ideas and see if there are any essential features that we're missing, and to act as an example for people looking to build their own Svelte apps.”
- TodoMVC
- Home Assistant
- Notepad
- Markdown Editor
- Server-Side Rendering with Rollup
- State Management with Redux
- With TypeScript
- Routing by Andorbal
- Routing by Franksey
- Routing by Oren
- Accessors (a là Vue) - (StackOverflow Question)
Rather than interpreting your application code at run time, your app is converted into ideal JavaScript at build time.
Components with a Simple API and Lifecycle Hooks
Small number of methods you can use to control a component, in addition to any custom methods you add.
Components are built on HTML, CSS and JavaScript. There's very little extra stuff to learn.
Components are self-contained and reusable in different contexts. CSS is scoped by default.
Often, your program will use values that depend on other values – for example, you might have a filtered list, which depends on both the list and the filter. Svelte allows you to express these dependencies in computed properties, which are recalculated whenever those dependencies change.
Simple way to use functions within a component.
Customize a component with your own methods.
Components are assumed to be in the HTML namespace. Svelte allows to specify the namespace so that you can nest SVG-based components.
Svelte components can contain other Svelte components.
Embed a component within itself.
A convenient way to declaratively add event listeners to window.
Tag-based event handlers with the on:[event] syntax.
Add custom event handlers like longpress.
An excellent way for nested components to communicate with their parents.
Store a reference to particular DOM nodes or components with ref:[name] and access it with this.refs.[name].
Render Svelte components in Node.
Bindings are declared with bind:[attribute]. As well as DOM elements, you can bind to component data properties. It
is optional.
First-class SVG support, including SSR.
Makes it easy to build custom controls for <audio> and <video>.
Allows for non-standalone components to prevent duplication.
- Frameworks without the framework: why didn't we think of this sooner? - by Rich Harris, Svelte creator
- Interview with Rich Harris
- My First Svelte Component
- svelte-cli
- svelte-loader - Webpack loader
- svelte-rollup-plugin
- sveltify - Browserify transform
- gulp-svelte
- metalsmith-svelte
- system-svelte - System.js plugin
- meteor-svelte
- svelte-ruby - Ruby Gem wrapper for the compiler
- svelte-rack - Rack middleware to compile components to Javascript
- svelte-extras - Extra methods for components
- svelte-custom-elements - Turn components into web components
- single-spa-svelte
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent