Svelte

Last updated
Svelte
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 release26 November 2016;7 years ago (26 November 2016)
Stable release
4.2.11 [1]   OOjs UI icon edit-ltr-progressive.svg / 15 February 2024;11 days ago (15 February 2024)
Repository github.com/sveltejs/svelte
Written in JavaScript , TypeScript
Platform Web platform
Type Web framework
License MIT License
Website https://svelte.dev/

Svelte is a free and open-source component-based front-end software framework, [2] and language [3] created by Rich Harris and maintained by the Svelte core team members. [4]

Contents

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 created in 2013. [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>letcount=1;$:doubled=count*2;</script><p>{count} * 2 = {doubled}</p><buttonon: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

Related Research Articles

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app.

<span class="mw-page-title-main">Vaadin</span>

Vaadin is an open-source web application development platform for Java. Vaadin includes a set of Web Components, a Java web framework, and a set of tools that enable developers to implement modern web graphical user interfaces (GUI) using the Java programming language only, TypeScript only, or a combination of both.

<span class="mw-page-title-main">Google Closure Tools</span> JavaScript developer toolkit

Google Closure Tools is a set of tools to help developers build rich web applications with JavaScript. It was developed by Google for use in their web applications such as Gmail, Google Docs and Google Maps. As of 2023, the project had over 230K LOCs not counting the embedded Mozilla Rhino compiler.

Dart is a programming language designed by Lars Bak and Kasper Lund and developed by Google. It can be used to develop web and mobile apps as well as server and desktop applications.

AngularJS is a discontinued free and open-source JavaScript-based web framework for developing single-page applications. It was maintained mainly by Google and a community of individuals and corporations. It aimed to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in web applications and progressive web applications.

Meteor, or MeteorJS, is a partly proprietary, mostly free and open-source isomorphic JavaScript web framework written using Node.js. Meteor allows for rapid prototyping and produces cross-platform code. The server-side MongoDB program is the only proprietary component of Meteor and is part of the Meteor download bundle. It is possible to use Meteor without using the server-side MongoDB. It uses the Distributed Data Protocol and a publish–subscribe pattern to automatically propagate data changes to clients without requiring the developer to write any synchronization code. On the client, Meteor can be used with any popular front-end JS framework, Vue, React, Svelte, Angular, or Bazel.

<span class="mw-page-title-main">WinJS</span> Open-source JavaScript library

The Windows Library for JavaScript is an open-source JavaScript library developed by Microsoft. It has been designed with the primary goal of easing development of Windows Store apps for Windows 8 and Windows 10, as well as Windows Phone apps for Windows Phone 8.1, Windows 10 Mobile and Xbox One applications using HTML5 and JavaScript, as an alternative to using WinRT XAML and C#, VB.NET or C++ (CX).

Web Components are a set of features that provide a standard component model for the web allowing for encapsulation and interoperability of individual HTML elements. Web Components are popular approach to build microfrontends.

A headless browser is a web browser without a graphical user interface.

<span class="mw-page-title-main">React (software)</span> JavaScript library for building user interfaces

React is a free and open-source front-end JavaScript library for building user interfaces based on components. It is maintained by Meta and a community of individual developers and companies.

<span class="mw-page-title-main">React Native</span> Open-source mobile application framework

React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use the React framework along with native platform capabilities. It is used to develop the Android and iOS applications at Facebook, Microsoft, and Shopify. It is also being used to develop virtual reality applications at Oculus.

<span class="mw-page-title-main">Vue.js</span> Open-source JavaScript library for building user interfaces

Vue.js is an open-source model–view–viewmodel front end JavaScript library for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members.

Angular is a TypeScript-based, free and open-source single-page web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS.

This is a list of articles related to the JavaScript programming language.

<span class="mw-page-title-main">Babel (transcompiler)</span> Backwards compatible JavaScript compiler

Babel is a free and open-source JavaScript transcompiler that is mainly used to convert ECMAScript 2015+ (ES6+) code into backwards-compatible JavaScript code that can be run by older JavaScript engines. It allows web developers to take advantage of the newest features of the language.

Next.js is an open-source web development framework created by the private company Vercel providing React-based web applications with server-side rendering and static website generation.

<span class="mw-page-title-main">Reason (programming language)</span> Syntax extension and toolchain for OCaml

Reason, also known as ReasonML, is a syntax extension and toolchain for OCaml created by Jordan Walke, who also created the React framework, at Facebook. Reason offers a syntax familiar to JavaScript programmers, and compiles to native code using OCaml's compiler toolchain. Reason code may also be compiled to JavaScript using the ReScript compiler.

Carbon Design System is a free and open-source design system and library created by IBM, which implements the IBM Design Language, and licensed under Apache License 2.0. Its public development initially started on June 10, 2015. Their components have multiple implementations, which includes a vanilla JS and CSS implementation and React, while the community maintains the frameworks developed in Svelte, Vue.js, and Web Components. The official typeface to be used according to the guidelines is the IBM Plex typeface, with alternative typefaces for CJK scripts are Noto Sans CJK SC, Noto Sans CJK TC, and Noto Sans JP.

Vercel Inc., formerly ZEIT, is an American cloud platform as a service company. The company maintains the Next.js web development framework.

References

  1. ↑ Error: Unable to display the reference properly. See the documentation for details.
  2. 1 2 3 4 Rich Harris (2019-04-22). "Svelte 3: Rethinking reactivity". svelte.dev. Retrieved 2021-08-07.
  3. ↑ Harris, Rich (2018-11-26). "The truth about Svelte". GitHub Gist. Retrieved 2022-12-21.
  4. 1 2 Krill, Paul (December 2, 2016). "Slim, speedy Svelte framework puts JavaScript on a diet". InfoWorld.
  5. 1 2 "React vs. Svelte, the JavaScript build-time framework". react-etc.net.
  6. 1 2 "Svelte 3 Front-End Framework Moves Reactivity into the JavaScript Language, Q&A with Rich Harris". InfoQ.
  7. 1 2 Rich Harris (2018-12-27). "Virtual DOM is pure overhead". svelte.dev.
  8. 1 2 3 "GitHub - sveltejs/svelte: Cybernetically enhanced web apps". January 11, 2020 – via GitHub.
  9. 1 2 "TS to JSDoc Conversion #8569". GitHub.com.
  10. ↑ Frontendeng.dev (2023-08-01). "Svelte vs React: Which framework is better ?". frontendeng.dev.
  11. 1 2 Świstak, Tomasz (2020-11-19). "About the Svelte JavaScript framework". ValueLogic | Blog. Archived from the original on 2022-03-27. Retrieved 2021-06-10. By the way, Vue's syntax has been influenced by Ractive.js, a direct predecessor of Svelte.
  12. 1 2 3 4 Svelte Origins: A JavaScript Documentary , retrieved 2022-07-09
  13. ↑ Rich Harris: Futuristic Web Development, archived from the original on 2021-12-12, retrieved 2021-08-03
  14. ↑ Harris, Rich (2021-03-23). "SvelteKit is in public beta". svelte.dev. Retrieved 2021-08-03.
  15. ↑ team, The Svelte (2023-06-22). "Announcing Svelte 4". svelte.dev. Retrieved 2023-08-08.
  16. ↑ "TS to JSDoc Conversion". Hacker News (news.ycombinator.com). 2023-05-10.
  17. ↑ "Lordy, I did not expect an internal refactoring PR to end up #1 on Hacker News. ..." Hacker News (news.ycombinator.com). 2023-05-10.
  18. ↑ Harris, Rich (Nov 11, 2021). "today is a big day for @sveltejs: i've joined @vercel to work on it full time!". Twitter. Retrieved 2022-09-04.
  19. ↑ "https://twitter.com/trueadm/status/1640761270566633472". X (formerly Twitter). Retrieved 2023-09-30.{{cite web}}: External link in |title= (help)
  20. ↑ "Accouncing SvelteKit 1.0". 2022-12-14. Retrieved 2022-12-16.
  21. ↑ "Svelte tutorial page", svelte.dev, retrieved 2022-07-06
  22. ↑ Harris, Rich (December 31, 2017). "Sapper: Towards the ideal web app framework". svelte.dev. Retrieved 2022-11-29.
  23. ↑ "Svelte". GitHub. Retrieved 2021-08-03.
  24. ↑ "Stack Overflow Developer Survey 2021". Stack Overflow . Retrieved 2021-10-26.
  25. ↑ "State of JS 2020: Front-end Frameworks". 2020.stateofjs.com. Retrieved 2021-10-26.
  26. ↑ "Svelte • Cybernetically enhanced web apps". svelte.dev. Retrieved 2021-08-03.
  27. ↑ "Websites using Svelte - Wappalyzer". www.wappalyzer.com. Retrieved 2021-08-03.
  28. ↑ "Your Profile, Your Home Experience". yourhome.fb.com. Retrieved 2021-12-01.
  29. ↑ "Home - Svelte Society". sveltesociety.dev. Retrieved 2021-08-03.


This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.