How Stencil is different from React and Angular?

Question

I am familiar with Angular and know basics of React. I was exploring stencil docs, I found stencil component has both @Component decorator and render() method -

component.tsx

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

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

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

Help me to understand that how Stencil is different from angular and react and how it works?

Answer 1

Stencil is not a framework, its just a compiler that turns classes with decorators into standards-based Web Components. This means that you can generate a collection of stencil components and use them in Angular, React, Vue or Polymer without any problem.

Basically, Stencil combines some of the best features from traditional frameworks, but outputs 100% standards-compliant Custom Elements, thats why you have @Component (Angular), render method (React)...

To make your first component i suggest to read the docs about your first component. You have everything explained there :)

Answer 2

Watch the talk of the Ionic team members at Polymer Summit, it explains the purpose of Stencil pretty good.

Basically it is not a framework like Angular or React, it is a compiler which helps you creating spec conform web components which run in every browser that supports web components (or almost any browser using polyfills).
You do not need any framework for using these components, but you can use them also with any framework, which is the huge advantage of web components.
You can't use an Angular component in React but you can use a component created with Stencil with Angular or React or Vue or with no framework at all.

Answer 3

First of all stencil is a compiler which compile the stencil web component (tsx) to the vanilla javascript without any dependency.

The curious question is does we don't use angular , vue etc.

Even it is possible to make whole app with stencil , the idea is to make individual component independent of framework . You can use them in any framework or can use independently .

So that you don't have to take a pain for switching framework(angular, vue etc.) from an version to higher version.

Answer 4

Stencil is a compiler developed by Ionic Developers which creates custom web components.

• Stencil uses the standard technologies behind the name web components (HTML Templates, Custom Elements and Shadow DOM).
• Contains the best features of Angular, React, Vue and Polymer.

Stencil compiler produces vanilla JavaScript, without any dependencies and still provides following features.

1. A tiny virtual DOM layer
2. Efficient one-way data binding
3. Lazy Loading
4. Server-side rendering

So Idea Behind Stencil is basically not focusing on the framework part like Angular or React but to create collections of components that can be used independently from a framework.