Re:Web Components could replace frontend frameworks?
by ernsheong on Friday April 12, 2019 @02:42AM
(#19642536)
Just to elaborate a bit further to help fellow sojourners:
1) I use Webpack to bundle, still practically indispensable.
2) Redux state management. I use Redux-ORM to denormalize data but it has its own quirks.
3) Shadow DOM is on by default (both a curse and a great thing), which can be a problem with styling because your global CSS can't penetrate everywhere. What I do is have lots of CSS utils files (ala TailwindCSS), and import the utils as I need on demand. Drawback: Browser is parsing a lot more CSS than it needs to, as each component imports it's own CSS utils. Happy to hear about other approaches, but the browser really didn't break a sweat.
4) With Shadow DOM, you can use <slot></slot> to compose components.
5) Routing, see the starter kit for patterns, essentially it's a router pattern, not a router library.
6) DOM event bubbling is very useful (CustomEvent), I even threw in a small Pub/Sub library somewhere for sibling communication
7) You could use some sort of DI (dependency injection), currently using di-ninja which seems a bit overkill
Essentially, nothing much changed. Use the browser. Use JS. Use patterns. Use libraries as you see fit (watch that bloat).
1) I use Webpack to bundle, still practically indispensable.
2) Redux state management. I use Redux-ORM to denormalize data but it has its own quirks.
3) Shadow DOM is on by default (both a curse and a great thing), which can be a problem with styling because your global CSS can't penetrate everywhere. What I do is have lots of CSS utils files (ala TailwindCSS), and import the utils as I need on demand. Drawback: Browser is parsing a lot more CSS than it needs to, as each component imports it's own CSS utils. Happy to hear about other approaches, but the browser really didn't break a sweat.
4) With Shadow DOM, you can use <slot></slot> to compose components.
5) Routing, see the starter kit for patterns, essentially it's a router pattern, not a router library.
6) DOM event bubbling is very useful (CustomEvent), I even threw in a small Pub/Sub library somewhere for sibling communication
7) You could use some sort of DI (dependency injection), currently using di-ninja which seems a bit overkill
Essentially, nothing much changed. Use the browser. Use JS. Use patterns. Use libraries as you see fit (watch that bloat).