# Do we need frameworks at all?

**URL:** <https://forum.kirupa.com/t/do-we-need-frameworks-at-all/649129>\
**Category:** Uncategorized\
**Created:** [October 2, 2021, 9:47pm UTC](https://forum.kirupa.com/t/do-we-need-frameworks-at-all/649129 "2021-10-02T21:47:57Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [October 2, 2021, 9:47pm UTC](https://forum.kirupa.com/t/do-we-need-frameworks-at-all/649129/1 "2021-10-02T21:47:57Z")

</div>

I was fiddling with something yesterday, and I was really impressed with web components, the latest layout capabilities, and more. A part of me wonders why anybody wanting to build a web app from scratch today would want React, Vue, etc. as opposed to vanilla JS and so on.

The part I am more in favor of frameworks is when we get to server-side rendering, ISR, and other more complicated delivery mechanisms.

---

<div class="post-metadata">

**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\
**Post date:** [October 2, 2021, 11:55pm UTC](https://forum.kirupa.com/t/do-we-need-frameworks-at-all/649129/2 "2021-10-02T23:55:30Z")

</div>

I think a sufficiently mature platform doesn’t require additional dependencies. (Usually, as long as you’re doing something within the usual purview of the platform. )

---

<div class="post-metadata">

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\
**Post date:** [October 3, 2021, 12:34pm UTC](https://forum.kirupa.com/t/do-we-need-frameworks-at-all/649129/3 "2021-10-03T12:34:55Z")

</div>

Your a mind reader… 😄  
I do everything in web components now.

This library supports SSR for web components (I’m testing now)  
video: [Hello Worldin' Some Web Component Libraries - YouTube](https://www.youtube.com/watch?v=Y2drx-WHU8k&t=262s)  
library: [https://tonicframework.dev/](https://tonicframework.dev/)

This SSG supports multi platform component SSR BUT not WC.  
video: [AM Coder - Astro! Use React, Svelte, Vue and Web Components in one Static Site Generator! (Overview) - YouTube](https://www.youtube.com/watch?v=ncj-KwGutBc&t=953s)  
ssg: [https://astro.build/](https://astro.build/)

I think Tonic works in Node.

To get WC SSR’ing on an SSG we need to get a Tonic plugin for Astro.

The issue with SSR is that DOM methods aren’t available outside of the browser except maybe with JS DOM (no plugin for Astro). e.g` extends HTMLElement, attachShadow(), customElement.define()` but obviously Tonic has a filler class for `HTMLElement.`

I’m in the process of trying to get SSR with template literals for WC working without any frameworks (cloudflare worker). I’ll let you know when its tested.

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [October 3, 2021, 10:54pm UTC](https://forum.kirupa.com/t/do-we-need-frameworks-at-all/649129/4 "2021-10-03T22:54:51Z")

</div>

I’ve done a number of different projects with web components and they are not without their limitations. They’re better as a kind of destination format as a way to easily share a self-contained piece of functionality that anyone else can use no matter their platform. Basing a project on WC alone is cumbersome. And while lit is great and helps a lot, there are still more gaps to fill and hoops to jump through.

---

<div class="post-metadata">

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\
**Post date:** [October 4, 2021, 12:33am UTC](https://forum.kirupa.com/t/do-we-need-frameworks-at-all/649129/5 "2021-10-04T00:33:04Z")

</div>

Your right all component can be troublesome. It also depends on how you use them.

I started using the Cube CSS methodology which is easy to understand and works super well with components.

I only use shadow-dom for forms because it kills performance (maybe declarative shadow dom will improve)

JSON/ Objects/ template literal/ innerHTML I mostly use for dynamic components e.g. shopping carts.

Mostly I just use `<custom-elements>` as an alternate naming convention along with `part =` syntax for CSS .  
`connectedCallback()` is also handy for event listeners ect.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [October 8, 2021, 4:28pm UTC](https://forum.kirupa.com/t/do-we-need-frameworks-at-all/649129/6 "2021-10-08T16:28:00Z")

</div>

How do you like Cloudflare Workers? It’s been on my to-do list to try for a while, but I haven’t gotten around to it just yet.

---

<div class="post-metadata">

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\
**Post date:** [October 9, 2021, 12:18am UTC](https://forum.kirupa.com/t/do-we-need-frameworks-at-all/649129/7 "2021-10-09T00:18:49Z")

</div>

They’re great,  
I think they’re the future for a big chunk of the web.

It’s an almost identical API to service workers so you can re-use your same code with browser SW’s. They work very well together…

You can use it as a complete standalone server like node using `onfetch()` for every route. You can also configure the workers to only respond to certain routes/ urls, authentication, dynamic content ect.

When combined with the browser SW, you can reduce the time the CF worker is active.

You don’t have use the `self`keyword for event listeners, e.g. `self.addEventListener('fetch', () =>.......)`, `self.onfetch = function(){}`

Also I don’t think that you can Tee a stream to the CF cache and a client at the same time (I haven’t tried, because I use CF pages). Normal SW’s can tee streams (`response.body`) to the SW cache and return the response to the client.

Deno have even gone the same path and created Deno Deploy.  
It’s not as complete as CF workers (no KV store) though.

---

<div class="post-metadata">

**Author:** ![JohnHansenArtist](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/johnhansenartist/32/8958_2.png) [@JohnHansenArtist](https://forum.kirupa.com/u/JohnHansenArtist)\
**Post date:** [October 9, 2021, 1:20pm UTC](https://forum.kirupa.com/t/do-we-need-frameworks-at-all/649129/8 "2021-10-09T13:20:15Z")

</div>

My first awareness of components was when I tried out Grunt. Not sure if that’s still around! It was the first time I wrote and developed in Node. This led me to learn more JavaScript then React, I did a bit of Vue, then found Gatsby. I must say I love Gatsby. Could I write a full site ‘old school’ yes, though the structures one can work with in Gatsby, which sits on React, allow for what I build - gallery type websites, which work amazingly well. One can bring in components and packages galore but you can also be very bare bones and still create a great site or app. Lots of CSS possibilities too, Styled-Components lets me write basic CSS with the power of JavaScript. Now Gatsby is in beta for version 4 and their Cloud services are amazing allowing **Functions, CMS Integrations, SSR, parallel query running, Content Sync, and Deferred Static Generation.**

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [September 6, 2022, 10:33pm UTC](https://forum.kirupa.com/t/do-we-need-frameworks-at-all/649129/9 "2022-09-06T22:33:34Z")

</div>

It’s been a year since I asked this, so I went ahead and wrote a newsletter article on this topic:

> **[Do we still need Frontend Web Frameworks? 🤔](https://www.kirupa.chat/p/do-we-still-need-frontend-web-frameworks)**
>
> If HTML, CSS, JS and the underlying web runtimes are getting more powerful, do we still need to depend on frameworks like React, Vue, Angular, and more?

I feel more strongly now than before that web frameworks aren’t needed for most new web apps today!

:run_in_fear:

---

<div class="post-metadata">

**Author:** ![lunatic](https://avatars.discourse-cdn.com/v4/letter/l/73ab20/32.png) [@lunatic](https://forum.kirupa.com/u/lunatic)\
**Post date:** [September 6, 2022, 11:14pm UTC](https://forum.kirupa.com/t/do-we-need-frameworks-at-all/649129/10 "2022-09-06T23:14:27Z")

</div>

Interesting article I just shared with my team. Very timely for us! 🙃

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [September 6, 2022, 11:46pm UTC](https://forum.kirupa.com/t/do-we-need-frameworks-at-all/649129/11 "2022-09-06T23:46:04Z")

</div>

Lunatic! Hope all is well 🙂

Glad the article helped. What framework were you all considering using?

---

<div class="post-metadata">

**Author:** ![bretgeek](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bretgeek/32/18677_2.png) [@bretgeek](https://forum.kirupa.com/u/bretgeek)\
**Post date:** [September 7, 2022, 2:50am UTC](https://forum.kirupa.com/t/do-we-need-frameworks-at-all/649129/12 "2022-09-07T02:50:16Z")

</div>

You might be interested in a project I have been working on called SurfJS that can be used as a JQuery alternative with an optional **component based** syntax. Why might anyone be interested? Well it’s small, plugin extendable and the syntax is familiar. You can have the best of both worlds so to speak and ease into a component based style when needed or when working within a larger dev team. I would love to hear all of your thoughts on this project as well… it’s at [https://surf.monster](https://surf.monster)

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [September 7, 2022, 11:34am UTC](https://forum.kirupa.com/t/do-we-need-frameworks-at-all/649129/13 "2022-09-07T11:34:50Z")

</div>

I feel like this is where Svelte jumps in and says “Look at me!”

---

<div class="post-metadata">

**Author:** ![lunatic](https://avatars.discourse-cdn.com/v4/letter/l/73ab20/32.png) [@lunatic](https://forum.kirupa.com/u/lunatic)\
**Post date:** [September 7, 2022, 2:13pm UTC](https://forum.kirupa.com/t/do-we-need-frameworks-at-all/649129/14 "2022-09-07T14:13:42Z")

</div>

Hey Kirupa (and Kril! and Sen!)  
We aren’t really considering anything at the moment. Just started looking around and nothing really jumps out that fits our needs. Maybe we don’t need one at all! I think we’re moving into a new arena that is less end-to-end and more bridge and glue work, if that makes sense. The less complicated we can make it, the better. Should be an interesting time of exploration, but that’s the fun part! Hope all is well with you!

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [September 7, 2022, 9:20pm UTC](https://forum.kirupa.com/t/do-we-need-frameworks-at-all/649129/15 "2022-09-07T21:20:02Z")

</div>

Yes, as I’m finding out from the Svelte fans on social media who reminded me of this same thing haha.

---

<div class="post-metadata">

**Author:** ![Wayne](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wayne/32/16501_2.png) [@Wayne](https://forum.kirupa.com/u/Wayne)\
**Post date:** [September 8, 2022, 5:31pm UTC](https://forum.kirupa.com/t/do-we-need-frameworks-at-all/649129/16 "2022-09-08T17:31:55Z")

</div>

I noticed that kirupa is building cool applications without react. It’s very interesting to see how he write different ways to render and hold state. I miss more of that in here than just react. Please Keep going!

---

<div class="post-metadata">

**Author:** ![Wayne](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wayne/32/16501_2.png) [@Wayne](https://forum.kirupa.com/u/Wayne)\
**Post date:** [September 8, 2022, 5:50pm UTC](https://forum.kirupa.com/t/do-we-need-frameworks-at-all/649129/17 "2022-09-08T17:50:07Z")

</div>

One interesting thing I cannot drop is reacts context api! It’s not built in by default JavaScript

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [September 9, 2022, 10:54pm UTC](https://forum.kirupa.com/t/do-we-need-frameworks-at-all/649129/18 "2022-09-09T22:54:11Z")

</div>

You can get context api functionality in vanilla JS too. Its all just knowing who to listen to for updates. Here’s a quick and dirty example using web components:

> **[Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/Lqh1ew20/)**
>
> JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

Inline source for anyone not wanting to click links:

**HTML** :

```xml
<my-context id="foo">
  <div>
    <my-context id="bar">
      <div>
        <my-el>
          <output>Click button for updates</output>
        </my-el>
      </div>
    </my-context>
  </div>
</my-context>
<br>
<button data-context-id="foo">Increase foo</button>
<button data-context-id="bar">Increase bar</button>

```

**JavaScript** :

```javascript
// base class for components wanting to get context change updates
class ContextAwareHTMLElement extends HTMLElement {
  * #findContexts() {
    let context
    let target = this
    while (target && (context = target.closest('my-context'))) {
      yield context
      target = context.parentNode
    }
  }
  connectedCallback() {
    for (const context of this.#findContexts()) {
      context.addEventListener("context:change", event => {
        this.contextChangeCallback(event.target)
      })
    }
  }
  contextChangeCallback(context) {}
}

// example component getting updates from context
customElements.define('my-el', class extends ContextAwareHTMLElement {
  contextChangeCallback(context) {
    this.querySelector("output").value = `Context change: ${context.id} = ${context.value}`
  }
})

// context component which dispatches change events with value changes
customElements.define('my-context', class extends HTMLElement {
  #value = 0
  get value() {
    return this.#value
  }
  set value(value) {
    this.#value = value
    this.dispatchEvent(new Event("context:change"))
  }
})

// hook up buttons to change context values
for (const button of document.querySelectorAll("button[data-context-id]")) {
  button.addEventListener("click", () => {
    document.getElementById(button.dataset.contextId).value++
  })
}

```

---

<div class="post-metadata">

**Author:** ![Wayne](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wayne/32/16501_2.png) [@Wayne](https://forum.kirupa.com/u/Wayne)\
**Post date:** [September 10, 2022, 6:24am UTC](https://forum.kirupa.com/t/do-we-need-frameworks-at-all/649129/19 "2022-09-10T06:24:03Z")

</div>

Thank you for the example. When I started doing web components. I found that the original spec is too messy to implement compared to for example lit-element framework. A lot of things became easier with LIT even state management.

The problem is, we don’t have a super popular web components framework that people use. It is just spread differently. There’s no community standard yet.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [September 14, 2022, 4:25pm UTC](https://forum.kirupa.com/t/do-we-need-frameworks-at-all/649129/21 "2022-09-14T16:25:24Z")

</div>

Hmm! Some strong fightin’ words here 😛

> <https://twitter.com/housecor/status/1569846073228726272?s=20&t=2yc6t0znhnt9v2w2po43xQ>

[Next page](https://forum.kirupa.com/t/do-we-need-frameworks-at-all/649129.md?page=2)
