February 2, 2022
  • Perspectives
  • Angular
  • Svelte

An Angular Dev Tries Svelte

Mike Hartington

Director of Developer Relation...

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!


Mike Hartington

Director of Developer Relation...