Software:Svelte

From HandWiki
Short description: JavaScript framework
For a definition of the word "svelte", see the Wiktionary entry svelte.
Svelte
Svelte Logo.svg
Original author(s)Rich Harris
Developer(s)The Svelte contributors. Key contributors include Rich Harris, Alan Faubert, Tan Li Hau, Ben McCann, and Simon Holthausen
Initial releaseNovember 26, 2016; 7 years ago (2016-11-26)[1]
Repositorygithub.com/sveltejs/svelte
Written inJavaScript
PlatformWeb platform
TypeWeb framework
LicenseMIT License
Websitesvelte.dev

Svelte is a free and open-source front-end component framework[2] and language[3] 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 specialized 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[2] and re-render UI elements when the data they depend on is modified.[6] This also avoids the overhead associated with runtime intermediate representations, such as virtual DOM,[7] unlike traditional frameworks (such as React and Vue) which carry out the bulk of their work at runtime, i.e. in the browser.[5][6][4][8][2][7]

The compiler itself is written in JavaScript.[9][8] Its source code is licensed under MIT License and hosted on GitHub.[8] Among comparable frontend libraries, Svelte has one of the smallest bundle footprint at merely 2KB.[10]

History

The predecessor of Svelte is Ractive.js, which Rich Harris had developed earlier.[11]

Version 1 of Svelte was written in JavaScript and was released on 29 November 2016. It was basically Ractive with a compiler.[12] The name Svelte was chosen by Rich Harris and his coworkers at The Guardian .[12]

Version 2 of Svelte was released on 19 April 2018. It set out to correct what the maintainers viewed as mistakes in the earlier version such as replacing double curly braces with single curly braces.[12]

Version 3 of Svelte was written in TypeScript and was released on 21 April 2019. It rethought reactivity by using the compiler to instrument assignments behind the scenes.[2]

The SvelteKit web framework was announced in October 2020 and entered beta in March 2021.[13][14]

Version 4 of Svelte was released on 22 June 2023. It's a maintenance release, smaller and faster than version 3.[15] A part of this release was an internal rewrite from TypeScript back to JavaScript, with JSDoc annotations.[9] This was met with a confusion from the developer community, which was addressed by the creator of Svelte, Rich Harris.[16][17]

Key early contributors became involved with Conduitry joining with the release of Svelte 1, Tan Li Hau joining in 2019, and Ben McCann joining in 2020.[12] Rich Harris and Simon Holthausen joined Vercel to work on Svelte fulltime in 2022.[18] Dominic Gannaway joined Vercel from the React core team to work on Svelte fulltime in 2023.[19]

SvelteKit 1.0 was released in December 2022 after two years in development.[20]

Syntax

Svelte applications and components are defined in .svelte files, which are HTML files extended with templating syntax that is based on JavaScript and 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. Additionally, the { JavaScript code } syntax can be used for templating in HTML elements and components,[21] which is shown below: 

<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. It is a Next.js-style framework that dramatically reduces the amount of code that gets sent to the browser. The maintainers had previously created Sapper, which was the predecessor of SvelteKit.[22]

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, Chrome Developer Tools, ESLint, and prettier.[23] A number of external projects such as Storybook have also created integrations with Svelte and SvelteKit.

Influence

Vue.js modeled its API and single-file components after Ractive.js, the predecessor of Svelte.[11]

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[24] and 2020 State of JS frontend framework with the most satisfied developers.[25]

Svelte has been adopted by a number of high-profile web companies including The New York Times , Apple, Spotify, Square, Yahoo, ByteDance, Rakuten, Bloomberg, Reuters , Ikea, Facebook, and Brave.[26][27][28]

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.[29]

See also

References

  1. ↑ "Frameworks without the framework: why didn't we think of this sooner?". https://svelte.dev/blog/frameworks-without-the-framework. 
  2. ↑ 2.0 2.1 2.2 2.3 Rich Harris (2019-04-22). "Svelte 3: Rethinking reactivity" (in en). https://svelte.dev/blog/svelte-3-rethinking-reactivity. 
  3. ↑ Harris, Rich (2018-11-26). "The truth about Svelte" (in en-US). https://gist.github.com/Rich-Harris/0f910048478c2a6505d1c32185b61934. 
  4. ↑ 4.0 4.1 Krill, Paul (December 2, 2016). "Slim, speedy Svelte framework puts JavaScript on a diet". https://www.infoworld.com/article/3146966/slim-speedy-svelte-framework-puts-javascript-on-a-diet.html. 
  5. ↑ 5.0 5.1 "React vs. Svelte, the JavaScript build-time framework". https://react-etc.net/entry/react-vs-svelte-the-javascript-build-time-framework. 
  6. ↑ 6.0 6.1 "Svelte 3 Front-End Framework Moves Reactivity into the JavaScript Language, Q&A with Rich Harris". https://www.infoq.com/news/2019/05/svelte-3-interview-rich-harris/. 
  7. ↑ 7.0 7.1 Rich Harris (2018-12-27). "Virtual DOM is pure overhead" (in en). https://svelte.dev/blog/virtual-dom-is-pure-overhead. 
  8. ↑ 8.0 8.1 8.2 "GitHub - sveltejs/svelte: Cybernetically enhanced web apps". January 11, 2020. https://github.com/sveltejs/svelte. 
  9. ↑ 9.0 9.1 "TS to JSDoc Conversion #8569". https://github.com/sveltejs/svelte/pull/8569. 
  10. ↑ Frontendeng.dev (2023-08-01). "Svelte vs React: Which framework is better ?" (in en). https://www.frontendeng.dev/blog/11-svelte-and-react#svelte-bundle-size-is-much-smaller-than-react. 
  11. ↑ 11.0 11.1 "About the Svelte JavaScript framework" (in en-US). 2020-11-19. https://valuelogic.one/blog/the-rise-of-the-svelte-javascript-framework/. "By the way, Vue’s syntax has been influenced by Ractive.js, a direct predecessor of Svelte." 
  12. ↑ 12.0 12.1 12.2 12.3 (in en) Svelte Origins: A JavaScript Documentary, https://www.youtube.com/watch?v=kMlkCYL9qo0, retrieved 2022-07-09 
  13. ↑ (in en) Rich Harris: Futuristic Web Development, https://www.youtube.com/watch?v=qSfdtmcZ4d0, retrieved 2021-08-03 
  14. ↑ Harris, Rich (2021-03-23). "SvelteKit is in public beta" (in en-US). https://svelte.dev/blog/sveltekit-beta. 
  15. ↑ team, The Svelte (2023-06-22). "Announcing Svelte 4" (in en). https://svelte.dev/blog/svelte-4. 
  16. ↑ "TS to JSDoc Conversion". 2023-05-10. https://news.ycombinator.com/item?id=35891259. 
  17. ↑ "Lordy, I did not expect an internal refactoring PR to end up #1 on Hacker News. ...". 2023-05-10. https://news.ycombinator.com/item?id=35892250. 
  18. ↑ Harris, Rich (Nov 11, 2021). "today is a big day for @sveltejs: i've joined @vercel to work on it full time!" (in en-US). https://twitter.com/rich_harris/status/1458822051263823875?lang=en. 
  19. ↑ "https://twitter.com/trueadm/status/1640761270566633472" (in en). https://twitter.com/trueadm/status/1640761270566633472. 
  20. ↑ "Accouncing SvelteKit 1.0". 2022-12-14. https://svelte.dev/blog/announcing-sveltekit-1.0. 
  21. ↑ Svelte tutorial page, https://svelte.dev/tutorial/adding-data, retrieved 2022-07-06 
  22. ↑ Harris, Rich (December 31, 2017). "Sapper: Towards the ideal web app framework" (in en-US). https://svelte.dev/blog/sapper-towards-the-ideal-web-app-framework. 
  23. ↑ "Svelte" (in en-US). https://github.com/sveltejs. 
  24. ↑ "Stack Overflow Developer Survey 2021" (in en-US). https://insights.stackoverflow.com/survey/2021/. 
  25. ↑ "State of JS 2020: Front-end Frameworks" (in en). https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/. 
  26. ↑ "Svelte • Cybernetically enhanced web apps" (in en-US). https://svelte.dev/. 
  27. ↑ "Websites using Svelte - Wappalyzer". https://www.wappalyzer.com/technologies/javascript-frameworks/svelte/. 
  28. ↑ "Your Profile, Your Home Experience" (in en-US). https://yourhome.fb.com/. 
  29. ↑ "Home - Svelte Society" (in en). https://sveltesociety.dev/. 





Retrieved from "https://handwiki.org/wiki/index.php?title=Software:Svelte&oldid=3691308"