Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Announcing StencilJS

269 views

Published on

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

Published in: Technology
  • Login to see the comments

  • Be the first to like this

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

×