Should I use Stencil or Angular for Ionic development?

First Published: 6 August 2019
Updated on: 6 August 2019

As always with anything technology related the answer is it depends, both Angular and Stencil are very different, so my goal here is to share my experiences with you and help you make a more informed decision.

First of all, if you don’t know what Stencil is, go watch this short video by Josh Morony, he does a great job giving you an intro.

Go ahead, I’ll wait right here.

Ok, now that you have a better idea about Stencil, let’s go through some of the things I look at when picking a technology.

Do I know how to use it? Or at least is easy to pick up

This is one of the most important things right here, a lot of times people do Hype Driven Development and spend a lot of times learning new tools and technologies that they’re never going to use instead of picking the things that they know and that deliver the results.

In my case, I know Angular, and have been working with it for several years, so that’s almost always my go-to.

That said, Stencil isn’t hard to understand, it follows the “everything is a component” approach I use in Angular, for example, this is a component:

import { Component, Prop, h } from '@stencil/core';

@Component({
  tag: 'my-first-component'
})
export class MyComponent {
  // Indicate that name should be a public property on the component
  @Prop() name: string;

  render() {
    return <p>My name is {this.name}</p>;
  }
}

And then to call it you add it to your HTML:

<my-first-component name="Max"></my-first-component>

It’s a simple example but illustrates a component that takes on an argument as an input and then displays it in the HTML.

Notice that the syntax is a bit different, that’s because stencil uses JSX with TypeScript.

What I’m going to use it for

This is another important point for me, it all depends on what I need to build.

After playing with Stencil for a bit I don’t see a reason why they wouldn’t be my go-to tool for building web components.

For example, this site is built with Hugo which is a static site generator, basically my site is a bunch of HTML pages displaying content.

But let’s say I wanted to create a special widget where you can answer 2 or 3 questions and then it sends you to a bonus page based on those answers.

For something like that (or any other component I need) I’d definitely build a web component with Stencil and then add it to my site.

For bigger projects I almost always default to Angular, the main reason is because angular is highly opinionated, so all those opinions are decisions I don’t need to make myself.

Batteries Included vs Build it yourself

I guess this could also depend on the type of project, but I thought it would be worth to mention.

Stencil let’s you keep everything lightweight/small/optimized all the time by only doing as little as you need it to do.

Angular is more of a batteries included kind of framework that has convinience features built-in for almost anything you can think of.

Community & Guides

Last but not least, make sure that the tools you end up picking have a welcoming and active community.

Both Angular and Stencil do a good job here, there’s nothing more frustrating when building things with a new tool that not finding proper documentation, or not having places where you can ask questions.

What do you think, am I missing something important to you?

Drop a comment below and let me know!