Svelte
![]() | |
Original author(s) | Rich Harris |
---|---|
Initial release | November 26, 2016[1] |
Stable release | 3.44.1[2] ![]() |
Repository | Svelte Repository |
Written in | TypeScript |
Platform | Web platform |
Size | 4.1 KB[3] |
Type | Web framework |
License | MIT License |
Website | svelte |
Svelte is a free and open-source front end compiler[4] created by Rich Harris and maintained by the Svelte core team members.[5] Svelte applications do not include a framework script. Instead, building a Svelte application generates the necessary code to manipulate the DOM within each component, which may reduce the size of transferred files as well as give better client startup and run-time performance. Svelte has its own compiler for converting app code into client-side JavaScript at build time. It is written in TypeScript.[6][7] Unlike the traditional frameworks (React and Vue) which carry out the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when an app is built.[8] The Svelte source code is licensed under MIT License and hosted on GitHub.[9]
History[]
The predecessor of Svelte is Ractive.js, which Rich Harris had developed earlier.[10]
Version 1 of Svelte was written in JavaScript and was released on 29 November 2016.
Version 2 of Svelte was released on 19 April 2018.
Version 3 of Svelte is written in TypeScript and was released on 21 April 2019.
The SvelteKit web framework was announced in October 2020 and entered beta in March 2021.[11][12]
Example[]
Svelte applications and components are defined in .svelte
files, which are HTML files extended with templating syntax that is similar to JSX. Svelte repurposes JavaScript's native labeled statement syntax $:
to mark reactive statements. Top-level variables become the component's state and exported variables become the properties that the component receives.
<script>
let count = 1;
$: doubled = count * 2;
</script>
<p>{count} * 2 = {doubled}</p>
<button on:click={() => count = count + 1}>Count</button>
Associated projects[]
The Svelte maintainers created SvelteKit as the official way to build projects with Svelte. The Svelte maintainers also maintain a number of integrations for popular software projects under the Svelte organization including integrations for Vite, Rollup, Webpack, TypeScript, VS Code, eslint, prettier, and more.[13]
Sapper (predecessor of SvelteKit) is a Next.js-style framework that dramatically reduces the amount of code that gets sent to the browser.[14]
Influence[]
Vue.js modeled its API and single-file components after Ractive.js, the predecessor of Svelte.[10]
Adoption[]
Svelte is widely praised by developers. Taking the top ranking in multiple large scale developer surveys, it was chosen as the Stack Overflow 2021 most loved web framework[15] and 2020 State of JS frontend framework with the most satisfied developers.[16]
Svelte has been adopted by a number of high-profile web companies including The New York Times, Apple, Spotify, Square, Rakuten, Bloomberg, Reuters, Ikea, Facebook, and Brave.[17][18][19]
A community group of non-maintainers run the Svelte Summit conference, write a Svelte newsletter, host a Svelte podcast, and host a directory of Svelte tooling, components, and templates.[20]
See also[]
- JavaScript framework
- HTML
- Cascading Style Sheets
- Comparison of JavaScript frameworks
- React (web framework)
- Vue.js
References[]
- ^ "Frameworks without the framework: why didn't we think of this sooner?". Svelte.
- ^ "Release 3.44.1". 1 November 2021. Retrieved 9 November 2021.
- ^ "Svelte@3.31.2". BundlePhobia. January 8, 2021.
- ^ "React vs. Svelte, the JavaScript build-time framework". react-etc.net.
- ^ "Svelte 3 Front-End Framework Moves Reactivity into the JavaScript Language, Q&A with Rich Harris". InfoQ.
- ^ "8 Most Interesting JavaScript Frameworks to Learn in 2019 - Developer Drive". www.developerdrive.com.
- ^ Krill, Paul (December 2, 2016). "Slim, speedy Svelte framework puts JavaScript on a diet". InfoWorld.
- ^ Apr 22 2019, Rich Harris Mon. "Svelte 3: Rethinking reactivity". svelte.dev. Retrieved 2021-08-07.
- ^ "GitHub - sveltejs/svelte: Cybernetically enhanced web apps". January 11, 2020 – via GitHub.
- ^ a b "About the Svelte JavaScript framework". ValueLogic | Blog. 2020-11-19. Retrieved 2021-06-10.
By the way, Vue’s syntax has been influenced by Ractive.js, a direct predecessor of Svelte.
- ^ Rich Harris: Futuristic Web Development, archived from the original on 2021-12-12, retrieved 2021-08-03
- ^ Mar 23 2021, Rich Harris Tue. "SvelteKit is in public beta". svelte.dev. Retrieved 2021-08-03.
- ^ "Svelte". GitHub. Retrieved 2021-08-03.
- ^ Dec 31 2017, Rich Harris Sun. "Sapper: Towards the ideal web app framework". svelte.dev. Retrieved 2021-08-15.
- ^ "Stack Overflow Developer Survey 2021". Stack Overflow. Retrieved 2021-10-26.
- ^ "State of JS 2020: Front-end Frameworks". 2020.stateofjs.com. Retrieved 2021-10-26.
- ^ "Svelte • Cybernetically enhanced web apps". svelte.dev. Retrieved 2021-08-03.
- ^ "Websites using Svelte - Wappalyzer". www.wappalyzer.com. Retrieved 2021-08-03.
- ^ "Your Profile, Your Home Experience". yourhome.fb.com. Retrieved 2021-12-01.
- ^ "Home - Svelte Society". sveltesociety.dev. Retrieved 2021-08-03.
External links[]
- Computer-related introductions in 2016
- JavaScript web frameworks
- Web development
- Software using the MIT license
- Programming language topic stubs