Svelte

From Wikipedia, the free encyclopedia
  (Redirected from )
For a definition of the word "svelte", see the Wiktionary entry svelte.
Svelte
Svelte Logo.svg
Original author(s)Rich Harris
Initial releaseNovember 26, 2016; 5 years ago (2016-11-26)[1]
Stable release
3.46.4[2] Edit this on Wikidata / 3 February 2022; 36 days ago (3 February 2022)
RepositorySvelte Repository
Written inTypeScript
PlatformWeb platform
Size4.1 KB[3]
TypeWeb framework
LicenseMIT License
Websitesvelte.dev

Svelte is a free and open-source front end compiler created by Rich Harris and maintained by the Svelte core team members.[4] Svelte is not a monolithic Javascript library imported by applications: instead, Svelte compiles HTML templates to specialised code that manipulates the DOM directly, which may reduce the size of transferred files and give better client performance;[5] application code is also processed by the compiler, inserting calls to automatically recompute data[6] and re-render UI elements when the data they depend on is modified.[7] This also avoids the overhead associated with runtime intermediate representations, such as virtual DOM,[8] unlike traditional frameworks (such as React and Vue) which carry out the bulk of their work at runtime, i.e in the browser. The compiler itself is written in TypeScript, its 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
  • JavaScript library

References[]

  1. ^ "Frameworks without the framework: why didn't we think of this sooner?". Svelte.
  2. ^ https://github.com/sveltejs/svelte/releases/tag/v3.46.4.
  3. ^ "Svelte@3.31.2". BundlePhobia. January 8, 2021.
  4. ^ a b Krill, Paul (December 2, 2016). "Slim, speedy Svelte framework puts JavaScript on a diet". InfoWorld.
  5. ^ a b "React vs. Svelte, the JavaScript build-time framework". react-etc.net.
  6. ^ a b Rich Harris (2019-04-22). "Svelte 3: Rethinking reactivity". svelte.dev. Retrieved 2021-08-07.
  7. ^ a b "Svelte 3 Front-End Framework Moves Reactivity into the JavaScript Language, Q&A with Rich Harris". InfoQ.
  8. ^ a b Rich Harris (2018-12-27). "Virtual DOM is pure overhead". svelte.dev.
  9. ^ a b "GitHub - sveltejs/svelte: Cybernetically enhanced web apps". January 11, 2020 – via GitHub.
  10. ^ 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.{{cite web}}: CS1 maint: url-status (link)
  11. ^ Rich Harris: Futuristic Web Development, archived from the original on 2021-12-12, retrieved 2021-08-03
  12. ^ Mar 23 2021, Rich Harris Tue. "SvelteKit is in public beta". svelte.dev. Retrieved 2021-08-03.
  13. ^ "Svelte". GitHub. Retrieved 2021-08-03.
  14. ^ Dec 31 2017, Rich Harris Sun. "Sapper: Towards the ideal web app framework". svelte.dev. Retrieved 2021-08-15.
  15. ^ "Stack Overflow Developer Survey 2021". Stack Overflow. Retrieved 2021-10-26.{{cite web}}: CS1 maint: url-status (link)
  16. ^ "State of JS 2020: Front-end Frameworks". 2020.stateofjs.com. Retrieved 2021-10-26.
  17. ^ "Svelte • Cybernetically enhanced web apps". svelte.dev. Retrieved 2021-08-03.
  18. ^ "Websites using Svelte - Wappalyzer". www.wappalyzer.com. Retrieved 2021-08-03.
  19. ^ "Your Profile, Your Home Experience". yourhome.fb.com. Retrieved 2021-12-01.
  20. ^ "Home - Svelte Society". sveltesociety.dev. Retrieved 2021-08-03.

External links[]

Stub icon

This programming-language-related article is a stub. You can help Wikipedia by .

  • v
  • t
Retrieved from ""