16

Atualmente, muito se fala sobre os web components e custom elements, e junto com grandes nomes, como Angular, React, Vue e Polymer, recentemente começou a surgir o nome Stencil JS.

  • O que é Stencil JS?
  • É mais um framework para disputar o mercado de componentes web?
  • Se não, qual a relação entre o Stencil JS e outros frameworks?
  • Quais são os diferenciais desta ferramenta e quais foram as necessidades que estimularam sua criação que as outras ferramentas não satisfazem?
0

2 Respostas 2

19

StencilJS é um compilador para web components, ou seja, você escreverá seu componente utilizando jsx e então o Stencil no processo de build, gerará um web component nativo com algumas funcionalidades a mais como data binding, async redering, virtual DOM que enriquecerá o funcionamento do componente.

Criar componentes utilizando puramente a API de web components é bem verboso e geralmente difícil (para componentes mais complexos). Dessa forma StencilJS vem com a proposta de facilitar o desenvolvimento de web components, trazendo tecnologias já comuns no mundo frontend como tsx para criação de componentes para facilitar o desenvolvimento.

O time do Ionic criou o StencilJS para utilizar na nova versão do Ionic que está sendo desenvolvido utilizando web components construídos com StencilJS. Dessa forma será possível utilizar StencilJS para criar aplicativos móveis usando Ionic assim como qualquer outro framework web como Angular, React, Vue, etc.

StencilJS utiliza decorators para abstrair as funcionalidades nativas de web components, trazendo mais facilidade ao desenvolvedor. Alguns decorators úteis para desenvolver um componente:

  • @Prop controla a atribuição de valores à propriedades do componente.
  • @PropWillChange e @PropDidChange observa as mudanças de estado das propriedades do componente.
  • @Event emite custom events
  • @Listen escuta eventos nativos do DOM e custom events também.

Todos os componentes construídos com Stencil são carregados de forma lazy, ou seja, os componentes podem ser separados em bundles diferentes (que serão gerados no processo de build). Assim se tivermos o componente a em um bundle e o componente b em outro bundle, ao adicionar o componente a na sua página será carregado apenas o bundle do componente a e não o bundle do componente b também. Isso diminui muito o tempo de carregamento necessário para utilizar os componentes desejados.

StencilJS não é um framework, mas sim um compilador para web components como dito antes.

StencilJS também adiciona polyfills de web components necessários para que seus componentes funcionem corretamente. Note que os polyfills serão adicionados na medida que necessários, conforme o suporte de cada browser a web components.

Veja a documentação oficial que pode ser acessada no site oficial.

Veja também o GitHub do projeto.

3
  • 5
    Algumas informações que julgaria interessante são quais seriam esses polyfills adicionados e como é gerenciado internamente esse "na medida que necessário" acerca destes polyfills. Também cita que o Stencil gera um web component com funcionalidades a mais; seria interessante listar quais seriam essas funcionalidades. Qualquer coisa, te convido a entrar no chat Estouro de Pilha, onde podemos conversar melhor.
    – Woss
    Commented 10/10/2017 às 20:33
  • 3
    Oi @AndersonCarlosWoss, melhorei a explicação e adicionei alguns detalhes a mais também. Commented 10/10/2017 às 21:37
  • ps: compiler é compilador, o termo em inglês no sentido da tal tecnologia tem o mesmo sentido. Se discordarem usem o botão/link "Reverter" que fica na tela de edições.
    – Syzoth
    Commented 10/10/2017 às 22:35
-4

Fonte: https://stenciljs.com/

O que é Stencil JS? O Stencil combina alguns dos melhores recursos das estruturas tradicionais, mas fornece elementos personalizados compatíveis com padrões 100%, parte da especificação do componente Web.


É mais um framework para disputar o mercado de componentes web?

SIM

Se não, qual a relação entre o Stencil JS e outros frameworks?

É sim.

Quais são os diferenciais desta ferramenta e quais foram as necessidades que estimularam sua criação que as outras ferramentas não satisfazem?

O Stencil foi criado pela equipe do Ionic Framework para criar aplicativos móveis e web mais rápidos e poderosos. O Stencil é a base para a próxima geração do Ionic Framework, mas é completamente independente da estrutura Ionic ou de qualquer outro interface de usuário.

8
  • 6
    Com qual base você afirma que ele é um framework?
    – Woss
    Commented 10/10/2017 às 19:45
  • 2
    Definição de framework: "Um framework em desenvolvimento de software, é uma abstração que une códigos comuns entre vários projetos de software provendo uma funcionalidade genérica. Um framework pode atingir uma funcionalidade específica, por configuração, durante a programação de uma aplicação" Commented 10/10/2017 às 19:47
  • 3
    Posso estar falando merda, mas acho que ele não é um Framework, se não me engano, ele é a forma de desenvolver em IONIC e escolher o seu Framework, seja Angular, Vue, React e etc. Mas como falei, posso estar errado, mas lembro de ter lido algo do tipo. Se estiver errado, desculpem meu comentario. Commented 10/10/2017 às 19:47
  • 3
    Durante a Cúpula de Polímeros de 2017, Max Lynch e Adam Bradley da Ionic (Framework) apresentaram seu novo esforço na Web Components, o compilador Stencil.js. Usando o Stencil, os desenvolvedores podem desenvolver componentes de estrutura-agnostic (Web). Como tal, podemos esperar que a biblioteca IONIC esteja disponível como Componentes da Web, portanto, livre de dependências Angulares. Vale ressaltar que o Stencil não é uma estrutura, e sim um compilador que produz componentes web da vanilla. Commented 10/10/2017 às 19:54
  • 10
    Em quase todas as fontes é comentado que o Stencil não é um framework. No site oficial, em nenhum momento é dito que é também. Fora isso, o próprio site oficial traz que ele não é uma ferramenta que veio para bater com os frameworks atuais, tanto que uma de suas vantagens é que o Stencil pode ser utilizado sem nenhuma dificuldade em conjunto com esses frameworks. Ao meu entender, sua resposta é insuficiente perante os questionamentos da pergunta.
    – Woss
    Commented 10/10/2017 às 19:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .