Jump to content

Svelte: Difference between revisions

From Wikipedia, the free encyclopedia
Browse history interactively
← Previous editNext edit →
Content deleted Content added
VisualWikitext
mention of developer surveys
Anshul81 (talk | contribs)
94 edits
m Difference between svelte and traditional frameworks
Line 34: Line 34:
}}
}}


'''Svelte''' is a [[free and open-source]] [[Front end and back end|front end]] compiler<ref>{{Cite web|url=https://react-etc.net/entry/react-vs-svelte-the-javascript-build-time-framework|title=React vs. Svelte, the JavaScript build-time framework|website=react-etc.net}}</ref> created by Rich Harris and maintained by the Svelte core team members.<ref>{{Cite web|url=https://www.infoq.com/news/2019/05/svelte-3-interview-rich-harris/|title=Svelte 3 Front-End Framework Moves Reactivity into the JavaScript Language, Q&A with Rich Harris|website=InfoQ}}</ref> Svelte applications do not include framework references. Instead, building a Svelte application generates code to manipulate the [[Document Object Model|DOM]], 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 [[Compile time|build time]]. It is written in [[TypeScript]].<ref>{{Cite web|url=https://www.developerdrive.com/best-javascript-frameworks-learn/|title=8 Most Interesting JavaScript Frameworks to Learn in 2019 - Developer Drive|website=www.developerdrive.com}}</ref><ref>{{Cite web|url=https://www.infoworld.com/article/3146966/slim-speedy-svelte-framework-puts-javascript-on-a-diet.html|title=Slim, speedy Svelte framework puts JavaScript on a diet|first=Paul|last=Krill|date=December 2, 2016|website=InfoWorld}}</ref> The Svelte [[source code]] is licensed under [[MIT License]] and hosted on [[GitHub]].<ref>{{Cite web|url=https://github.com/sveltejs/svelte|title=GitHub - sveltejs/svelte: Cybernetically enhanced web apps|date=January 11, 2020|via=GitHub}}</ref>
'''Svelte''' is a [[free and open-source]] [[Front end and back end|front end]] compiler<ref>{{Cite web|url=https://react-etc.net/entry/react-vs-svelte-the-javascript-build-time-framework|title=React vs. Svelte, the JavaScript build-time framework|website=react-etc.net}}</ref> created by Rich Harris and maintained by the Svelte core team members.<ref>{{Cite web|url=https://www.infoq.com/news/2019/05/svelte-3-interview-rich-harris/|title=Svelte 3 Front-End Framework Moves Reactivity into the JavaScript Language, Q&A with Rich Harris|website=InfoQ}}</ref> Svelte applications do not include framework references. Instead, building a Svelte application generates code to manipulate the [[Document Object Model|DOM]], 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 [[Compile time|build time]]. It is written in [[TypeScript]].<ref>{{Cite web|url=https://www.developerdrive.com/best-javascript-frameworks-learn/|title=8 Most Interesting JavaScript Frameworks to Learn in 2019 - Developer Drive|website=www.developerdrive.com}}</ref><ref>{{Cite web|url=https://www.infoworld.com/article/3146966/slim-speedy-svelte-framework-puts-javascript-on-a-diet.html|title=Slim, speedy Svelte framework puts JavaScript on a diet|first=Paul|last=Krill|date=December 2, 2016|website=InfoWorld}}</ref> 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 you build your app.<ref>{{Cite web|last=Apr 22 2019|first=Rich Harris Mon|title=Svelte 3: Rethinking reactivity|url=https://svelte.dev/blog/svelte-3-rethinking-reactivity|access-date=2021-08-07|website=svelte.dev|language=en}}</ref> The Svelte [[source code]] is licensed under [[MIT License]] and hosted on [[GitHub]].<ref>{{Cite web|url=https://github.com/sveltejs/svelte|title=GitHub - sveltejs/svelte: Cybernetically enhanced web apps|date=January 11, 2020|via=GitHub}}</ref>


== History ==
== History ==

Revision as of 20:18, 7 August 2021

For a definition of the term "svelte", see the Wiktionary entry svelte.
Svelte
Original author(s)Rich Harris
Initial releaseNovember 26, 2016; 7 years ago (2016-11-26)[1]
Stable release
3.59.2[2] Edit this on Wikidata / 20 June 2023; 15 February 2024; Error: first parameter cannot be parsed as a date or time. (20 June 2023; 15 February 2024)
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[4] created by Rich Harris and maintained by the Svelte core team members.[5] Svelte applications do not include framework references. Instead, building a Svelte application generates code to manipulate the DOM, 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 you build your app.[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 label 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]

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 StackOverflow 2021 most loved web framework and 2020 State of JS frontend framework with the most satisfied developers.

Svelte has been adopted by a number of high-profile web companies including The New York Times, Apple, Spotify, Square, Rakuten, Ikea, and Brave.[14][15]

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

See also

References

  1. ^ "Frameworks without the framework: why didn't we think of this sooner?". Svelte.
  2. ^ "Release 3.59.2". 20 June 2023. Retrieved 6 July 2023.
  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.{{cite web}}: CS1 maint: numeric names: authors list (link)
  9. ^ "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, retrieved 2021-08-03
  12. ^ Mar 23 2021, Rich Harris Tue. "SvelteKit is in public beta". svelte.dev. Retrieved 2021-08-03.{{cite web}}: CS1 maint: numeric names: authors list (link)
  13. ^ "Svelte". GitHub. Retrieved 2021-08-03.
  14. ^ "Svelte • Cybernetically enhanced web apps". svelte.dev. Retrieved 2021-08-03.
  15. ^ "Websites using Svelte - Wappalyzer". www.wappalyzer.com. Retrieved 2021-08-03.
  16. ^ "Home - Svelte Society". sveltesociety.dev. Retrieved 2021-08-03.
Stub icon

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

Retrieved from "https://en.wikipedia.org/w/index.php?title=Svelte&oldid=1037641220"