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
A RealWorld Comparison of Front-End Frameworks with Benchmarks (2019 update)
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