Vincent Ogloblinsky

Frontend software architect

SII Ouest

@vogloblinsky

Disclaimers

Agenda

Who ?

When ?

Why ?

What ?

Features

Features

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

(Dis)-Advantages

(Dis)-Advantages

State of version 1 - Improvements

https://github.com/ionic-team/stencil/tree/core-refactor

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

• Many applications : design system

• Migration : Legacy -> trendy codebase

Resources

A RealWorld Comparison of Front-End Frameworks with Benchmarks (2019 update)

https://medium.freecodecamp.org/a-realworld-comparison-of-front-end-frameworks-with-benchmarks-2019-update-4be0d3c78075

Stencil tricks

https://medium.com/stencil-tricks

Constructable Stylesheets - Chrome 73

https://developers.google.com/web/updates/2019/02/constructable-stylesheets

Thanks for listening !

Ask me anything

Slides : bit.ly/stencil-wc

@vogloblinsky