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]

For a definition of the word "svelte", see the Wiktionary entry svelte.
Svelte
Original author(s)Rich Harris
Initial releaseNovember 26, 2016 (2016-11-26)[1]
Stable release
3.44.1[2]  / 1 November 2021 (1 November 2021)
RepositorySvelte Repository
Written inTypeScript
PlatformWeb platform
Size4.1 KB[3]
TypeWeb framework
LicenseMIT License
Websitesvelte.dev

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

References
  1. "Frameworks without the framework: why didn't we think of this sooner?". Svelte.
  2. "Release 3.44.1". 1 November 2021. Retrieved 9 November 2021.
  3. "Svelte@3.31.2". BundlePhobia. January 8, 2021.
  4. "React vs. Svelte, the JavaScript build-time framework". react-etc.net.
  5. "Svelte 3 Front-End Framework Moves Reactivity into the JavaScript Language, Q&A with Rich Harris". InfoQ.
  6. "8 Most Interesting JavaScript Frameworks to Learn in 2019 - Developer Drive". www.developerdrive.com.
  7. Krill, Paul (December 2, 2016). "Slim, speedy Svelte framework puts JavaScript on a diet". InfoWorld.
  8. Apr 22 2019, Rich Harris Mon. "Svelte 3: Rethinking reactivity". svelte.dev. Retrieved 2021-08-07.
  9. "GitHub - sveltejs/svelte: Cybernetically enhanced web apps". January 11, 2020 – via GitHub.
  10. "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.
  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.
  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.
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.