how does svelte compare to angular

If you ask anyone who knows me, they would say my favorite framework for building apps is Angular. While I do like React and Vue as well, Angular to me has always felt like home. I feel the most productive when working in Angular and the most confident in the code I write. But it’s always good to explore other technologies and expand your knowledge. With that in mind, I wanted to try and learn SvelteJS as I build a new app using Capacitor. So, what does an Angular dev think of Svelte?

Getting Started Process

When getting started with Angular, you’re encouraged to make use of the Angular CLI in starting new projects. The Angular CLI is an all-in-one toolkit for starting apps, building apps, and adding new features as you develop your apps. This toolkit provides a solid cornerstone for any developer. Svelte (as far as I know) doesn’t provide this. Instead, they provide a simple starter template with a Rollup config. Based on their site, if you want to get started, you can simply use the sveltjs/template and clone the project via degit:

npx degit sveltejs/template my-svelte-project
cd my-svelte-project
npm install
npm run dev

By running this code, you get a bare-bones project with a single “hello world” component.

This isn’t necessarily a 1:1 comparison, as the scope of Svelte is very different compared to something like Angular. While Angular is clearly an app framework, Svelte is more closely aligned to a UI toolkit, something like React. While you can build an app with Svelte, you are pulling together different libraries, packages, and more to get something similar to Angular. Contently, the Svelte team has put together SvelteKit, a framework for building apps powered by Svelte. SvelteKit, while interesting, is not what I’m going to focus on for my app, so I won’t be covering it here.

Regardless of the differences between Angular/Svelte, comparing the two shows some significant differences. With Svelte, once you get the template cloned and set up, you are free to customize the tools as much as you’d like. Want to swap out a Rollup plugin with something different? Want to customize the output and bundling process? Svelte will give you the full Rollup config, and you are expected to know how to configure that.

Angular on the other hand abstracts that away, so you aren’t really dealing with the underlying tools directly. Angular does this to provide an optimal experience for all users. If you wanted to swap out a tool that gets used in the build chain, it’s not something that can be done without diving into the Angular build process.

Both of these approaches have their value, but it is nice to know that I could mess around with the build process pretty easily.

Syntax and Semantics

With Angular, there is a simple syntax for working with events and props for components:

  • [prop]: props can have dynamic bindings by surrounding the prop name with square brackets.
  • (event): event bindings can be made by wrapping the event name with parentheses

Svelte has a similar syntax for this as well

  • prop={val}: props can have dynamic values by wrapping the value with curly braces.
  • on:eventname={func}: event bindings can be made by using the on: prefix followed by the event name.

This made it very easy for me to understand how things date gets passed around.

What was a change was working with dynamic markup or content. For example, if you want to dynamically render some content in Angular, the syntax uses this *ngIf syntax.

<div *ngIf="condition">
  I will only render if "condition" evaluates to true.
</div>

In Svelte, the syntax is a bit different

{#if condition}
<div>I will only render if "condition" evaluates to true.</div>
{/if}

This “block” syntax, while different, is pretty easy to pick up once you work with it a few times.

The big takeaway here is that the syntax between Angular and Svelte is different, they have the same semantics. Meaning that there is one way to do property bindings, one way to event binding. So if you’re looking to get into Svelte from Angular, once you know the syntax, you’ll feel right at home.

Component Structure

Wrapping up this comparison, let’s look at how components are structured. For Angular developers, we pretty used to seeing something like this:

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor() {}
}

For Angular, a component is basically just a class. Where it gets interesting is the @Component decorator that tells the Angular compiler to take the template and styles pass, create a component, and use the class as the logic. Svelte has similar concepts, but uses a different syntax based on tags.

For our AppComponent, in Svelte, we’d write this as:

<!-- App.svelte -->
<script>
  let name = 'World';
</script>

<div>Hello {name}!</div>

<style>
  div {
    text-align: center;
    padding: 1em;
    max-width: 240px;
    margin: 0 auto;
  }
</style>

This approach is pretty similar to how Vue components are built, and this single file component pattern is super popular in other frameworks. Instead of having multiple files for the template, the styles, and the JavaScript, we just have a single file that holds all the pieces we need. I’m still on the fence with single file components, but I can see why people like them. It’s super nice to be able to stay in one place when you need to build out a component and not have to jump around to multiple files.

Want to use a component inside another component? With Angular, we have this selector key in the @Component decorator, which we use in our templates. For Svelte, though, we can just import the component and use the file name as the tag name.

<!-- App.svelte -->
<script>
  import Item from './Item.svelte';
  let name = "World";
</script>

<Item user={name}/>

I really like this as it makes composing things super quick. Instead of having to discover the component tags, I just import the file and use its name as the tag!

Diving Deeper

While we haven’t gone over all the differences between Angular and Svelte, it’s pretty clear that Svelte has a lot of unique features that can make it compelling for certain projects. I’ll be following up on this as I build out my new app, so be on the lookout for more in this series. Until next time, happy coding!

Sign up for the Ionic Newsletter to get the latest news and updates!

Notable Replies

  1. Hi @mhartington

    Cool stuff. And I did the same way trying to integrate svelte with Ionic using their starter. I used CDN - which seemed the easiest way and indeed with barebone svelte this works nicely. But of course, doing import might be better.

    And another user made some integration happening - especially on the initialisation code for registering components. Check his stuff out - GitHub - raymondboswel/ionic-modal-reproduction . Especially App.svelte.

    The comparison may not need to be just on the syntax. I guess, we don’t want to do a framework discussion on the coolness of syntax of A vs B.

    As an Angular guy, I believe the scaffolding using Angular CLI is really cool and makes the difference in terms of productivity. Here svelte kit kicks in as well. If that works well for some of the projects I have in mind, I will definitely consider switching, because the svelte syntax is almost too easy.

    A series on svelte kit as “to become the new productivity suite for svelte” (also powered by vite) combined with Ionic, will be great.

    For starters, I already bumped into SSR integration not working immediately, so only with SPA mode, svelte kit & seems ionic to work nicely. Maybe working on the global styles will be needed to cascade the ripple effects etc into other components.

    Next it will be good to see how the svelte-kit router works with Tabs and other router related stuff in Ionic. In Sapper, this did not go well. And even in plain svelte, there are some minor tweaks needed to make it work.

    Looking forward how the Ionic experts will go in setting the HOWTO for sveltekit & Ionic!

    Tom

  2. I will say, I’m not targeting Svelte + Ionic, just Svelte + capacitor. :smile:

  3. Nice move! :grinning:

    Looking forward

  4. Small edit… I meant, not targeting svelte + ionic.

  5. At my org we use Single-Spa to allow distributed development, mostly in Angular. The problem for us was that many microfront ends brought all of Angular into simple things like headers, navigation, footers, etc. An engineer brought in Svelte and it significantly reduced our bundle size. Got us thinking about the right tool for jobs instead of “We use X framework”. In many ways, I enjoy svelte because it just gets out of your way like Vue 2 did. I’m interested in seeing how it evolves, seems like as framework mature, so do their embedded opinions and with it, we fight the framework again.

Join the discussion on the Ionic Forum

5 more replies

Participants