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?

score 46 · Answer 1 · answered Sep 01 '17 at 10:20

46

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 :)

answered Sep 01 '17 at 10:20

Fernando Del Olmo

1,440
17
32

1

If I had a complicated Angular component e.g. one that makes data calls, might have inner components etc, could this still be exported as a Stencil web component so that another team using React, Vue etc would be able to use it? – GFoley83 Oct 03 '18 at 18:41
@GFoley83 if you create that component using stencil you can use them every where – Fernando Del Olmo Oct 05 '18 at 06:49
@GFoley83 It's not a best-practice to tightly couple presentation logic with service logic. Components should be "dumb". – Jefftopia May 05 '20 at 13:53
I'm aware of that @Jefftopia. That wasn't my question. – GFoley83 May 06 '20 at 20:33
A framework that has a compilation phase is still a framework, see, for example, Svelte. – sesm Jan 24 '21 at 20:55

score 24 · Answer 2 · answered Jan 25 '18 at 20:37

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.

A tiny virtual DOM layer
Efficient one-way data binding
Lazy Loading
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.

React is no framework, and compilers/transpilers have been there since at least the early days of babel and webpack. React's JSX is also transpiled to JS before it is delivered to the client. But you're right with the runtime part, the Stencil footprint is smaller. — John Goofy, May 13 '20 at 14:10

score 12 · Answer 3 · edited Aug 23 '17 at 15:16

12

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.

edited Aug 23 '17 at 15:16

Jeff Huijsmans

1,388
1
14
35

answered Aug 23 '17 at 15:05

David

7,387
3
22
39

3

Also, using polyfills, it's possible to use Stencil on virtually any browser. – Jeff Huijsmans Aug 23 '17 at 15:12
1

React is no framework, and compilers/transpilers have been there since at least the early days of babel and webpack. React's JSX is also transpiled to JS before it is delivered to the client. But you're right with the runtime part, the Stencil footprint is smaller. – John Goofy May 13 '20 at 14:10

Himanshu sharma · Answer 4 · 2017-12-18T07:56:39.687

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.

edited Dec 18 '17 at 07:56

answered Nov 17 '17 at 10:56

Himanshu sharma

7,487
4
42
75

How does stencil deffer from what polymer does? – krv Dec 24 '17 at 14:12
1

THe one difference is stencil is in typescript and polymer in javascript . and stencil is design for ionic. – Himanshu sharma Jan 07 '18 at 09:09
True but all of that can be achieved with polymer. Why create yet another tool? – krv Jan 09 '18 at 13:34
Stencil is created by ionic team for ionic mobile development , on that they have include what they need right for ionic . As this is a javascript component compiler can be use with web site to . But generally for ionic mobile development. – Himanshu sharma Jan 09 '18 at 13:46
2

Yes I agree with you and know that as well. But, why create another thing when you already have a framework for it. This is kind of a rant, because people in the JS world just keep on creating package managers and frameworks rather than improving or modifying the existing one. Thanks – krv Jan 10 '18 at 03:19

How Stencil is different from React and Angular?

4 Answers4