A Concise Introduction to Svelte JavaScript

We're shipping too much code to our users. Like a lot of front-end developers, I've been in denial about that fact, thinking that it was fine to serve 100kb of JavaScript on page load – just use one less .jpg! – and that what really mattered was performance once your app was already interactive.

But I was wrong. 100kb of .js isn't equivalent to 100kb of .jpg. It's not just the network time that'll kill your app's startup performance, but the time spent parsing and evaluating your script, during which time the browser becomes completely unresponsive. On mobile, those milliseconds rack up very quickly.

If you're not convinced that this is a problem, follow Alex Russell on Twitter. Alex hasn't been making many friends in the framework community lately, but he's not wrong. But the proposed alternative to using frameworks like Angular, React and Ember – Polymer – hasn't yet gained traction in the front end world, and it's certainly not for a lack of marketing.

Perhaps we need to rethink the whole thing.

What problem do frameworks really solve?permalink

The common view is that frameworks make it easier to manage the complexity of your code: the framework abstracts away all the fussy implementation details with techniques like virtual DOM diffing. But that's not really true. At best, frameworks move the complexity around, away from code that you had to write and into code you didn't.

Instead, the reason that ideas like React are so wildly and deservedly successful is that they make it easier to manage the complexity of your concepts. Frameworks are primarily a tool for structuring your thoughts, not your code.

Given that, what if the framework didn't actually run in the browser? What if, instead, it converted your application into pure vanilla JavaScript, just like Babel converts ES2016+ to ES5? You'd pay no upfront cost of shipping a hefty runtime, and your app would get seriously fast, because there'd be no layers of abstraction between your app and the browser.

Introducing Sveltepermalink

Svelte is a new framework that does exactly that. You write your components using HTML, CSS and JavaScript (plus a few extra bits you can learn in under 5 minutes), and during your build process Svelte compiles them into tiny standalone JavaScript modules. By statically analysing the component template, we can make sure that the browser does as little work as possible.

The Svelte implementation of TodoMVC weighs 3.6kb zipped. For comparison, React plus ReactDOM without any app code weighs about 45kb zipped. It takes about 10x as long for the browser just to evaluate React as it does for Svelte to be up and running with an interactive TodoMVC.

And once your app is up and running, according to js-framework-benchmark Svelte is fast as heck. It's faster than React. It's faster than Vue. It's faster than Angular, or Ember, or Ractive, or Preact, or Riot, or Mithril. It's competitive with Inferno, which is probably the fastest UI framework in the world, for now, because Dominic Gannaway is a wizard. (Svelte is slower at removing elements. We're working on it.)

It's basically as fast as vanilla JS, which makes sense because it is vanilla JS – just vanilla JS that you didn't have to write.

Above references is taken from their first blog in 2016 and now in last 7 years there are many changes from 1.00 to 4.0.0 Version.

Svelte is a modern JavaScript framework that offers a fresh approach to building web applications. Unlike traditional frameworks, Svelte shifts much of the heavy lifting from runtime to compile time, resulting in faster and leaner applications. In this blog post, we will explore the key features and benefits of Svelte, making it an excellent choice for web developers.

Key highlights:

1. Compiler-Based Approach: Svelte's standout feature is its compiler-based approach. During the build process, Svelte compiles the application code into highly efficient and optimized vanilla JavaScript, HTML, and CSS. This leads to smaller bundle sizes and better performance compared to traditional frameworks that rely on runtime libraries.

2. Reactive Declarations: Svelte introduces a reactive paradigm where variables can be declared with the $ symbol, automatically updating the user interface whenever their values change. This simplifies state management and reduces boilerplate code typically seen in other frameworks.

3. Component-based Architecture: Like other popular frameworks, Svelte is based on a component-based architecture. Components encapsulate logic and UI, promoting code reusability and maintainability. Svelte components are easy to create, and their syntax is clear and concise.

4. No Virtual DOM: Unlike some frameworks, Svelte does not use a virtual DOM to update the UI. Instead, it generates code that directly manipulates the DOM during the compilation process. This approach eliminates the performance overhead associated with virtual DOM diffing.

5. Built-in Animations: Svelte comes with built-in support for animations, making it effortless to create smooth and visually appealing user interfaces. Animations are declarative and can be easily added to components using the animate directive.

6. Minimal Learning Curve: Svelte's straightforward syntax and concepts lead to a minimal learning curve. Developers with knowledge of HTML, CSS, and JavaScript can quickly grasp Svelte and start building applications.

7. Favorable Performance: Thanks to its compiler-based approach and minimal runtime overhead, Svelte applications offer excellent performance. Smaller bundles, efficient updates, and reduced memory usage contribute to faster load times and a smoother user experience.

8. Active Community and Ecosystem: Though relatively newer compared to some other frameworks, Svelte has garnered a growing community and a vibrant ecosystem. Numerous plugins, libraries, and tools are available to extend and enhance Svelte applications.

   If you compare Svelte with ReactJS or Angular JS, then the quick difference is that Both ReactJS and Angular put HTML code inside the javascript whereas Svelte do this oppositely by placing JavaScript in HTML code.

• Ref: Svelte • Cybernetically enhanced web apps

• Documentation - Introduction • Docs • Svelte

• YouTube Learning - Sveltekit Tutorial for Beginners - YouTube

Conclusion: Svelte brings a refreshing approach to web development with its compiler-based strategy, reactivity, and performance-oriented design. Its ease of use, small bundle sizes, and seamless animations make it a compelling choice for modern web applications. As Svelte continues to evolve and gain popularity, it's worth exploring for developers looking to streamline their development workflow and deliver exceptional user experiences.