{"id":17746,"date":"2022-05-19T09:30:00","date_gmt":"2022-05-19T07:30:00","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=17746"},"modified":"2023-07-24T13:25:35","modified_gmt":"2023-07-24T11:25:35","slug":"svelte-why-is-it-an-innovation-to-javascript-frameworks","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/svelte-why-is-it-an-innovation-to-javascript-frameworks\/","title":{"rendered":"Svelte: Why Is It an Innovation to Javascript Frameworks?"},"content":{"rendered":"\t\t\t\t<div class=\"wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-1  uagb-block-50da5a7c      \"\n\t\t\t\t\tdata-scroll= \"1\"\n\t\t\t\t\tdata-offset= \"30\"\n\t\t\t\t\tstyle=\"\"\n\t\t\t\t>\n\t\t\t\t<div class=\"uagb-toc__wrap\">\n\t\t\t\t\t\t<div class=\"uagb-toc__title\">\n\t\t\t\t\t\t\tTable Of Contents\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"uagb-toc__list-wrap \">\n\t\t\t\t\t\t<ol class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#the-need-for-svelte-how-svelte-differs-from-common-front-end-frameworks\" class=\"uagb-toc-link__trigger\">The need for Svelte: how Svelte differs from common front-end frameworks<\/a><ul class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#1-a-library-you-mean-a-compiler-right\" class=\"uagb-toc-link__trigger\">1- A library? You mean a compiler, right?<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#2-a-real-reactivity-mechanism-within-the-language\" class=\"uagb-toc-link__trigger\">2- A real \u201creactivity\u201d mechanism within the language<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#3-upstanding-development-experience-and-growing-ecosystem\" class=\"uagb-toc-link__trigger\">3- Upstanding development experience and growing ecosystem<\/a><\/ul><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\n\n<p>There are always a lot of choices in the dev world, especially when establishing a production environment, and <a href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/5-javascript-frameworks-to-use-in-2022\/\" target=\"_blank\" aria-label=\"Javascript frameworks (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">Javascript frameworks<\/a> are no exception. And now there&#8217;s a new kid on the block: Svelte.<br><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><br>We all know <strong>React, Vue, and Angular<\/strong> and how good they are for modern web development, but Svelte \u2013 a new challenger in this field &#8211; may not be familiar to everyone.<br><\/p>\n<\/blockquote>\n\n\n\n<p>All the development tools available in today\u2019s market are high-quality tools, and sometimes the choice to use one tool over another is more a matter of personal taste and passion than the result of an objective \u201cthis is better than that\u201d assessment. However, <strong>Svelte\u2019s potential is very impressive, leading some users to switch systems for previous projects written in React and Vue<\/strong>. Svelte is a top choice for developing SPAs and web projects; here are three fundamental features that explain why:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-the-need-for-svelte-how-svelte-differs-from-common-front-end-frameworks\">The need for Svelte: how Svelte differs from common front-end frameworks<\/h2>\n\n\n\n<p>If Svelte were simply an alternative to the big three libraries, it probably would have been short-lived. The genius of Svelte lies primarily in its innovation \u2013 let\u2019s take a closer look at what this means in practice.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-a-library-you-mean-a-compiler-right\">1- A library? You mean a compiler, right?<\/h3>\n\n\n\n<p>Although Svelte is officially defined as a \u2018component framework\u2019, the words \u2018library\u2019 and \u2018framework\u2019 are perhaps not the most accurate terms to use in this context. Rather, <strong>Svelte is a true compiler that takes a combination of enhanced Javascript+CSS+HTML code input and outputs native code<\/strong>, which in turn interacts with the Document Object Model (DOM) without intermediaries. <br><br>In a common <a href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/javascript-guide\/\" target=\"_blank\" aria-label=\"Javascript  (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">Javascript <\/a>framework context, <strong>developers build declarative state-driven code<\/strong>. In this strategy, the browser must handle conversions of this declarative code into DOM structure and actions. A common technique used to achieve this is the Virtual DOM. This behaves like a layer between the declarative code and the browser production. When the \u2018reactive\u2019 data changes state, the engine makes a comparison between the newly updated Virtual DOM and the real DOM in the browser to determine which data has changed. It then updates only these necessary parts of the onscreen UI. <br><br>Of course, this \u2018diffing\u2019 technique within the Virtual DOM is brilliant, but the browser still has to take additional steps to update the final DOM, a process that can tax the garbage collector and rankle the frame budget. <strong>Svelte, on the other hand, is a compiler that already knows at build-time how things might change in an app, rather than waiting to do the work at run-time<\/strong>. Here, the tool converts Svelte files\/components into highly efficient imperative code (highly optimised vanilla JavaScript) that surgically updates the DOM without the need for diffing techniques. The outcome is blazing fast results with an excellent improvement in overall performance.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-a-real-reactivity-mechanism-within-the-language\">2- A real \u201creactivity\u201d mechanism within the language<\/h3>\n\n\n\n<p>Although all major Javascript frameworks can be considered \u2018responsive\u2019, since they have the ability to automatically update the DOM when part of the app is updated, <strong>this mechanism depends on a specific API that the developer must use to notify the system of changes<\/strong>. For example, notifying the app to update the DOM by changing its state in React demands the use of a specific API (the setState method in class-based components and set hooks in functional components).<\/p>\n\n\n\n<figure class=\"wp-block-embed alignwide is-type-wp-embed is-provider-codemotion-magazine wp-block-embed-codemotion-magazine\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"SPKLvcGsrr\"><a href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/5-javascript-frameworks-to-use-in-2022\/\">5 JavaScript Frameworks to Follow in 2023<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;5 JavaScript Frameworks to Follow in 2023&#8221; &#8212; Codemotion Magazine\" src=\"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/5-javascript-frameworks-to-use-in-2022\/embed\/#?secret=1cZIOcvtyx#?secret=SPKLvcGsrr\" data-secret=\"SPKLvcGsrr\" width=\"500\" height=\"282\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><br>Even in Vue, which may feel more reactive because the state is updated directly using the properties\u2019 names, in reality this process involves calling a setter in the background, generated and controlled by the library. <strong>Without using this API, the framework cannot update the Virtual DOM and consequently the final page<\/strong>. The approach taken by Svelte, as a compiler, is to execute the code in topological order, rather than top-down. The Svelte compiler generates a sort of dependency graph in which a variable\u2019s value will be updated when one of its dependencies updates, reacting to its own data changes. <br><br>Every time an assignment to a variable occurs, the compiler will explicitly compute the dependencies and update the real DOM &#8211; as a compiler, <strong>Svelte can compute the dependencies in the build-time.<\/strong> This brings true reactivity into a core part of the Javascript language rather than depending on a particular external technique or API.<\/p>\n\n\n\n<p><br>Here\u2019s a very simple comparison between state updating in a React class component, Vue component and finally, a Svelte file:<\/p>\n\n\n\n<p><strong>\/\/ React state with class component<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">Counter<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">React<\/span>.<span class=\"hljs-title\">Component<\/span> <\/span>{\n  <span class=\"hljs-keyword\">constructor<\/span>(props) {\n    <span class=\"hljs-keyword\">super<\/span>(props);\n    <span class=\"hljs-keyword\">this<\/span>.state = {<span class=\"hljs-attr\">counter<\/span>: <span class=\"hljs-number\">0<\/span>};\n  }\n\n  updateCounter() {\n    <span class=\"hljs-keyword\">this<\/span>.setState(<span class=\"hljs-function\">(<span class=\"hljs-params\">{ counter }<\/span>) =&gt;<\/span> ({\n      <span class=\"hljs-attr\">counter<\/span>: counter + <span class=\"hljs-number\">1<\/span>\n    }));\n  }\n\n  render() {\n    <span class=\"hljs-keyword\">return<\/span> (\n      <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n     \tThe counter is: {this.state.counter}\n\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{this.updateCounter}<\/span>&gt;<\/span>Increase<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n    );\n  }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>\/\/ Vue state<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n  data () {\n    <span class=\"hljs-keyword\">return<\/span> {\n      <span class=\"hljs-attr\">counter<\/span>: <span class=\"hljs-number\">0<\/span>\n    }\n  },\n  <span class=\"hljs-attr\">methods<\/span>: {\n    updateCounter () {\n      <span class=\"hljs-keyword\">this<\/span>.counter += <span class=\"hljs-number\">1<\/span>\n    }\n  }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>\/\/ Svelte state<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">let<\/span> counter = <span class=\"hljs-number\">0<\/span>\ncounter++\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>What is clear is that Svelte controls reactivity directly into vanilla Javascript statements thanks to its internal mechanism and compilation. No API, method, or mechanism is needed to trigger reactivity, but <strong>instead a value is assigned to a variable using the assignment operator<\/strong> (=).&nbsp; Using the REPL environment provided on the Svelte website (<a href=\"https:\/\/svelte.dev\/repl\">https:\/\/svelte.dev\/repl<\/a>) displays not only the final output of a Svelte code but the compiled version of the code as well. The Svelte compiler will produce something like:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">counter += 1; $$invalidate('counter', counter)<\/pre>\n\n\n\n<p>in which the call to $$invalidate reports the state variable as changed\/updated and checks (in the previously mentioned topographic manner) the dependency graph before surgically updating the DOM &#8211; that is, the page in the browser. As stated by Rich Harris, the creator of Svelte: \u201cSvelte 3.0 moves reactivity out of the component API and into the language\u201d.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3- Upstanding development experience and growing ecosystem<\/h3>\n\n\n\n<p>Apart from being super-fast and offering excellent performance, code in Svelte is significantly smaller when compared to that of React or Vue. <strong>In Svelte, abstraction isn\u2019t necessary: plain Javascript is all that\u2019s required, which is, at the end of the day, leaner, cleaner, and more compact. <\/strong>Apart from performance and benchmarking considerations, fans of Vanilla Javascript will really appreciate this feature because it gives the feeling of writing an enhanced version of a Javascript code rather than using a framework.<br><br>Furthermore, in addition to the quality of the code and the development experience, another very important factor in choosing a development tool is its ecosystem: <strong>the size and activity of the community<\/strong>, the production of bug fixes and new versions, the presence of tools that can assist in the production of code. <\/p>\n\n\n\n<figure class=\"wp-block-embed alignwide is-type-wp-embed is-provider-codemotion-magazine wp-block-embed-codemotion-magazine\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"A2SEigYJWX\"><a href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/a-quick-guide-to-nextjs\/\">A Quick Guide to NextJS<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;A Quick Guide to NextJS&#8221; &#8212; Codemotion Magazine\" src=\"https:\/\/www.codemotion.com\/magazine\/frontend\/a-quick-guide-to-nextjs\/embed\/#?secret=gEsiov8ing#?secret=A2SEigYJWX\" data-secret=\"A2SEigYJWX\" width=\"500\" height=\"282\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Obviously Svelte does not enjoy the same qualities as React, Vue, and Angular in this respect, as it is significantly younger, and does not currently enjoy the support of a top brand. <strong>However, the Svelte ecosystem still features an active community<\/strong>, and is supported by two high-quality tools: SvelteKit and Svelte Native. SvelteKit is the counterpart of Next.js for React and Nuxt.js for Vue: a full-stack framework that exploits the potential of Svelte to produce SPAs and complete web applications in a server-side Javascript model. Svelte Native is a new approach to building mobile applications using NativeScript.<br><br>Here, unlike some other mobile development frameworks which do the bulk of their work on the mobile device, <strong>Svelte Native shifts that work into a compile step that takes place when building the app<\/strong>. Svelte Native offers the same mechanism highlighted previously; instead of using techniques like virtual DOM diffing, Svelte Native code surgically updates the native view widgets when the state of the app changes.<\/p>\n\n\n\n<p>These are just a few features that make Svelte and its related tools amazing. Their presence will also help in further improving more popular tools such as React and Vue.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are always a lot of choices in the dev world, especially when establishing a production environment, and Javascript frameworks are no exception. And now there&#8217;s a new kid on the block: Svelte. We all know React, Vue, and Angular and how good they are for modern web development, but Svelte \u2013 a new challenger&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/svelte-why-is-it-an-innovation-to-javascript-frameworks\/\">Read more<\/a><\/p>\n","protected":false},"author":94,"featured_media":17749,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":4,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[8],"tags":[9907,6236],"collections":[],"class_list":{"0":"post-17746","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"tag-frameworks","9":"tag-web-developer","10":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Why You Should Try Out Svelte, the New Javascript Framework<\/title>\n<meta name=\"description\" content=\"If you have never tried Svelte out, this article will show you why it is a good alternative to other, more famous brands.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/svelte-why-is-it-an-innovation-to-javascript-frameworks\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Svelte: Why Is It an Innovation to Javascript Frameworks?\" \/>\n<meta property=\"og:description\" content=\"If you have never tried Svelte out, this article will show you why it is a good alternative to other, more famous brands.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/svelte-why-is-it-an-innovation-to-javascript-frameworks\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-19T07:30:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-24T11:25:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/05\/ferenc-almasi-vetW6Y89T3w-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1919\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Riccardo Degni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Riccardo Degni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/javascript\\\/svelte-why-is-it-an-innovation-to-javascript-frameworks\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/javascript\\\/svelte-why-is-it-an-innovation-to-javascript-frameworks\\\/\"},\"author\":{\"name\":\"Riccardo Degni\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/6912e00a94efa41fb20e92ba1bb050fb\"},\"headline\":\"Svelte: Why Is It an Innovation to Javascript Frameworks?\",\"datePublished\":\"2022-05-19T07:30:00+00:00\",\"dateModified\":\"2023-07-24T11:25:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/javascript\\\/svelte-why-is-it-an-innovation-to-javascript-frameworks\\\/\"},\"wordCount\":1234,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/javascript\\\/svelte-why-is-it-an-innovation-to-javascript-frameworks\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/ferenc-almasi-vetW6Y89T3w-unsplash.jpg\",\"keywords\":[\"Frameworks\",\"Web Developer\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/javascript\\\/svelte-why-is-it-an-innovation-to-javascript-frameworks\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/javascript\\\/svelte-why-is-it-an-innovation-to-javascript-frameworks\\\/\",\"name\":\"Why You Should Try Out Svelte, the New Javascript Framework\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/javascript\\\/svelte-why-is-it-an-innovation-to-javascript-frameworks\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/javascript\\\/svelte-why-is-it-an-innovation-to-javascript-frameworks\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/ferenc-almasi-vetW6Y89T3w-unsplash.jpg\",\"datePublished\":\"2022-05-19T07:30:00+00:00\",\"dateModified\":\"2023-07-24T11:25:35+00:00\",\"description\":\"If you have never tried Svelte out, this article will show you why it is a good alternative to other, more famous brands.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/javascript\\\/svelte-why-is-it-an-innovation-to-javascript-frameworks\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/javascript\\\/svelte-why-is-it-an-innovation-to-javascript-frameworks\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/javascript\\\/svelte-why-is-it-an-innovation-to-javascript-frameworks\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/ferenc-almasi-vetW6Y89T3w-unsplash.jpg\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/ferenc-almasi-vetW6Y89T3w-unsplash.jpg\",\"width\":1919,\"height\":1080,\"caption\":\"Svelte has many advantages over the older traditional Javascript Frameworks.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/javascript\\\/svelte-why-is-it-an-innovation-to-javascript-frameworks\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/javascript\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Svelte: Why Is It an Innovation to Javascript Frameworks?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/codemotionlogo.png\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Codemotion.Italy\\\/\",\"https:\\\/\\\/x.com\\\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/6912e00a94efa41fb20e92ba1bb050fb\",\"name\":\"Riccardo Degni\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/rd-image-book-pic-e1697717445644-150x150.jpg\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/rd-image-book-pic-e1697717445644-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/rd-image-book-pic-e1697717445644-150x150.jpg\",\"caption\":\"Riccardo Degni\"},\"description\":\"I am a senior web developer, active both on front-end and back-end, a teacher focused on modern programming, a Research Consultant for IT research, and a writer who creates programming articles and guides. I am both a developer with a strong foundation in new technologies such as full Javascript-based environments and object-oriented programming on the server-side (PHP, Node, and Java), and a designer who makes powerful, modern, fully-responsive, and WordPress-free templates.\",\"sameAs\":[\"http:\\\/\\\/www.riccardodegni.com\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/riccardodegni\\\/\"],\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/author\\\/riccardo-degni\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Why You Should Try Out Svelte, the New Javascript Framework","description":"If you have never tried Svelte out, this article will show you why it is a good alternative to other, more famous brands.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/svelte-why-is-it-an-innovation-to-javascript-frameworks\/","og_locale":"en_US","og_type":"article","og_title":"Svelte: Why Is It an Innovation to Javascript Frameworks?","og_description":"If you have never tried Svelte out, this article will show you why it is a good alternative to other, more famous brands.","og_url":"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/svelte-why-is-it-an-innovation-to-javascript-frameworks\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2022-05-19T07:30:00+00:00","article_modified_time":"2023-07-24T11:25:35+00:00","og_image":[{"width":1919,"height":1080,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/05\/ferenc-almasi-vetW6Y89T3w-unsplash.jpg","type":"image\/jpeg"}],"author":"Riccardo Degni","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Riccardo Degni","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/svelte-why-is-it-an-innovation-to-javascript-frameworks\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/svelte-why-is-it-an-innovation-to-javascript-frameworks\/"},"author":{"name":"Riccardo Degni","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/6912e00a94efa41fb20e92ba1bb050fb"},"headline":"Svelte: Why Is It an Innovation to Javascript Frameworks?","datePublished":"2022-05-19T07:30:00+00:00","dateModified":"2023-07-24T11:25:35+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/svelte-why-is-it-an-innovation-to-javascript-frameworks\/"},"wordCount":1234,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/svelte-why-is-it-an-innovation-to-javascript-frameworks\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/05\/ferenc-almasi-vetW6Y89T3w-unsplash.jpg","keywords":["Frameworks","Web Developer"],"articleSection":["JavaScript"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/svelte-why-is-it-an-innovation-to-javascript-frameworks\/","url":"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/svelte-why-is-it-an-innovation-to-javascript-frameworks\/","name":"Why You Should Try Out Svelte, the New Javascript Framework","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/svelte-why-is-it-an-innovation-to-javascript-frameworks\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/svelte-why-is-it-an-innovation-to-javascript-frameworks\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/05\/ferenc-almasi-vetW6Y89T3w-unsplash.jpg","datePublished":"2022-05-19T07:30:00+00:00","dateModified":"2023-07-24T11:25:35+00:00","description":"If you have never tried Svelte out, this article will show you why it is a good alternative to other, more famous brands.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/svelte-why-is-it-an-innovation-to-javascript-frameworks\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/svelte-why-is-it-an-innovation-to-javascript-frameworks\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/svelte-why-is-it-an-innovation-to-javascript-frameworks\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/05\/ferenc-almasi-vetW6Y89T3w-unsplash.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/05\/ferenc-almasi-vetW6Y89T3w-unsplash.jpg","width":1919,"height":1080,"caption":"Svelte has many advantages over the older traditional Javascript Frameworks."},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/svelte-why-is-it-an-innovation-to-javascript-frameworks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/"},{"@type":"ListItem","position":3,"name":"JavaScript","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/"},{"@type":"ListItem","position":4,"name":"Svelte: Why Is It an Innovation to Javascript Frameworks?"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/6912e00a94efa41fb20e92ba1bb050fb","name":"Riccardo Degni","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/10\/rd-image-book-pic-e1697717445644-150x150.jpg","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/10\/rd-image-book-pic-e1697717445644-150x150.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/10\/rd-image-book-pic-e1697717445644-150x150.jpg","caption":"Riccardo Degni"},"description":"I am a senior web developer, active both on front-end and back-end, a teacher focused on modern programming, a Research Consultant for IT research, and a writer who creates programming articles and guides. I am both a developer with a strong foundation in new technologies such as full Javascript-based environments and object-oriented programming on the server-side (PHP, Node, and Java), and a designer who makes powerful, modern, fully-responsive, and WordPress-free templates.","sameAs":["http:\/\/www.riccardodegni.com\/","https:\/\/www.linkedin.com\/in\/riccardodegni\/"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/riccardo-degni\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/05\/ferenc-almasi-vetW6Y89T3w-unsplash-600x400.jpg","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/05\/ferenc-almasi-vetW6Y89T3w-unsplash-600x600.jpg","author_info":{"display_name":"Riccardo Degni","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/riccardo-degni\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/05\/ferenc-almasi-vetW6Y89T3w-unsplash.jpg",1919,1080,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/05\/ferenc-almasi-vetW6Y89T3w-unsplash-150x150.jpg",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/05\/ferenc-almasi-vetW6Y89T3w-unsplash-300x169.jpg",300,169,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/05\/ferenc-almasi-vetW6Y89T3w-unsplash-768x432.jpg",768,432,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/05\/ferenc-almasi-vetW6Y89T3w-unsplash-1024x576.jpg",1024,576,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/05\/ferenc-almasi-vetW6Y89T3w-unsplash-1536x864.jpg",1536,864,true],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/05\/ferenc-almasi-vetW6Y89T3w-unsplash.jpg",1919,1080,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/05\/ferenc-almasi-vetW6Y89T3w-unsplash.jpg",100,56,false],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/05\/ferenc-almasi-vetW6Y89T3w-unsplash-180x128.jpg",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/05\/ferenc-almasi-vetW6Y89T3w-unsplash-896x504.jpg",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/05\/ferenc-almasi-vetW6Y89T3w-unsplash-400x225.jpg",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/05\/ferenc-almasi-vetW6Y89T3w-unsplash-600x400.jpg",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/05\/ferenc-almasi-vetW6Y89T3w-unsplash-600x600.jpg",600,600,true]},"uagb_author_info":{"display_name":"Riccardo Degni","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/riccardo-degni\/"},"uagb_comment_info":0,"uagb_excerpt":"There are always a lot of choices in the dev world, especially when establishing a production environment, and Javascript frameworks are no exception. And now there&#8217;s a new kid on the block: Svelte. We all know React, Vue, and Angular and how good they are for modern web development, but Svelte \u2013 a new challenger&#8230;&hellip;","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/17746","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/94"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=17746"}],"version-history":[{"count":9,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/17746\/revisions"}],"predecessor-version":[{"id":22023,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/17746\/revisions\/22023"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/17749"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=17746"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=17746"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=17746"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=17746"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}