Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
What "is" Stencil
• A compiler for web components
• Based on TypeScript, uses JSX
• Builds optimized Custom Elements
• Vir...
Built for PWAs
• Blazin' fast startup
• Focused on first-paint and Time-To-Interactive (TTI)
• Tiny file sizes (faster sta...
Encouraging results (sample app data)
• 3G TTI: 4x faster (2.78s vs 11s, moto g)
• LTE TTI: 6.2x faster (0.8s vs 5s, Galax...
Lazy Loading (without Webpack)
• All components are lazy loaded by default
• Webpack overhead is not needed
• Does not use...
import { Component, Prop } from '@stencil/core';
@Component({
tag: 'my-first-component',
styleUrl: 'my-first-component.scs...
Don't take my word for it…
• Stencil Starter:
• https://github.com/ionic-team/stencil-starter
• HackerNews App:
• https://...
Announcing StencilJS
Announcing StencilJS
Próxima SlideShare
Cargando en…5
×

Announcing StencilJS

The magical, reusable web component compiler from the folks who built the Ionic Framework!

  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Announcing StencilJS

  1. 1. What "is" Stencil • A compiler for web components • Based on TypeScript, uses JSX • Builds optimized Custom Elements • Virtual DOM, Server Side, Pre-compilation, Async Rendering, One-way data- binding, JSX • Inspired by the best parts of Angular, React, Vue, Preact, Polymer, etc. • Driven entirely to take full advantage of the browser.
  2. 2. Built for PWAs • Blazin' fast startup • Focused on first-paint and Time-To-Interactive (TTI) • Tiny file sizes (faster startup) • Instead of sending runtime code to client, let the browser do the work • Animations and gestures not required for first paint • (What's good for PWAs, is just as good for Cordova apps, too)
  3. 3. Encouraging results (sample app data) • 3G TTI: 4x faster (2.78s vs 11s, moto g) • LTE TTI: 6.2x faster (0.8s vs 5s, Galaxy S7) • Bundle size: 10x smaller (gzipped/minified) • Bundle for first view: 10x smaller (39KB vs 422KB) • Build time (full prod): ~13x faster (3.87s vs 50s)
  4. 4. Lazy Loading (without Webpack) • All components are lazy loaded by default • Webpack overhead is not needed • Does not use HTML imports • Stencil registers known components tags, and no more • The browser decides exactly which components it needs • User download core component code for only what they need • Filenames are hashed by default to enable 'forever' caching
  5. 5. 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() name: string; render() { return ( <p> My name is {this.name} </p> ); } }
  6. 6. Don't take my word for it… • Stencil Starter: • https://github.com/ionic-team/stencil-starter • HackerNews App: • https://corehacker-10883.firebaseapp.com/ • Async Queue Performance Demo: • https://stencil-fiber-demo.firebaseapp.com/ • https://github.com/ionic-team/stencil-fiber-demo

×