3 ms·

Web Components did replace frameworks for me. I built KanRails (https://www.kanrails.com/ https://www.kanrails.com/) with LitElement, without React/Vue/etc. Th

Web Components did replace frameworks for me. I built KanRails (https://www.kanrails.com/ https://www.kanrails.com/) with LitElement, without React/Vue/etc. The alpha is at https://app.kanrails.com/signup https://app.kanrails.com/signup. Again, it's in alpha. It is essentially a Trello + Google Forms + Workflow wannable. How? Stick to patterns, not libraries. Check out https://pwa-starter-kit.polymer-project.org/ https://pwa-starter-kit.polymer-project.org/ for LitElement starter kits. And just use Webpack, rip out the Polymer CLI. Oh, I also use Redux.

benforreal 8y ago
"Stick to patterns, not libraries" - Such a simple statement, but concise as hell. It's whats been my mindset, but I haven't put it to words. Like normal DOM event bubbling is going to cover lots of use cases. When it doesn't, an event bus is crazy simple to write. A centralized data model can just be a static module. Need observables? Easy to write a simple one - otherwise there's likely a bazillion of them on npm. Not that I've used it, but it's not like Redux or MobX are restricted to React either
ernsheong 8y ago
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).
kansface 8y ago
Right... why use an existing framework when you can just build your own!

benforreal 8y ago

"Stick to patterns, not libraries" - Such a simple statement, but concise as hell. It's whats been my mindset, but I haven't put it to words. Like normal DOM event bubbling is going to cover lots of use cases. When it doesn't, an event bus is crazy simple to write. A centralized data model can just be a static module. Need observables? Easy to write a simple one - otherwise there's likely a bazillion of them on npm. Not that I've used it, but it's not like Redux or MobX are restricted to React either

ernsheong 8y ago

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).

kansface 8y ago

Right... why use an existing framework when you can just build your own!