MAKE WEB COMPONENTS GREAT AGAIN !

Vincent Ogloblinsky

Frontend software architect

Disclaimers

Some feedbacks need context

I love frameworks (not too much)

Not a Trump fan

You should know Web Components

Agenda

2.

Features

3.

Tools

4.

(Dis)-Advantages

5.

Conclusion

1.

4W : who ? when ? why ? what ?

Who ?

 

When ?

 

Why ?

 

What ?

Who ?

Ionic team

When ?

After one Ionic codebase rewrite (thanks Angular), stop that shit !

Start in 2017

What ?

Compiler for Web Components

Not a framework

Why ?

Stop marrying with a framework, #UseThePlatform

Performance, stability, interoprability, familiarity

Features

Features

Virtual DOM/JSX

Lazy Loading

Reactivity

Server side rendering

Code ! Code ! Code !

> npm init stencil

Code ! Code ! Code !

> npm run build

- Lazy loaded polyfills (once for multiple components)

- load component main JavaScript file

main entry point

Code ! Code ! Code !

Démo

Tools

Tools

Jest

open-wc

Unit testing

E2E testing

Dynamic documentation

Cross-browsers

testing

(Dis)-Advantages

(Dis)-Advantages

JSX

Inheritance ?

TypeScript

Polyfills loading

Bundle size

Documentation / APIs

Build system

State of version 1 - Improvements

Runtime performance

Bundle size

Freeze API

Hello world : 17 ko -> 10 ko | -45%

SSR Shadow DOM

@stencil/core dependencies :

typescript, jsdom, chokidar -> typescript

Faster compilation

Updates for WC

Most exciting proposals for the web platform related to Web Components

https://blog.angularindepth.com/developments-in-web-components-im-excited-about-in-2019-3ae7751c2f64

  • Template Instantiation
  • CSS Shadow Parts
  • Constructable Stylesheet Objects
  • HTML Modules & CSS Modules
  • Scoped Custom Element Definitions

Conclusion

Use it for/when :

  • Many applications : design system

  • Migration : Legacy -> trendy codebase

Resources

Thanks for listening !

Ask me anything

Stencil - Make Web Components great again

By Vincent Ogloblinsky

Stencil - Make Web Components great again

  • 3,031