A place where you can compare common task syntax between top web component JavaScript frameworks. Why is that useful?

We all know how fragmented the JavaScript frameworks landscape is. In a sense you could draw the line between two eras, pre-React and after React.

Before the introduction of React :

• jQuery was the most popular way to build for the web. It embraced websites for what they truly were, a tree of DOM nodes.
• Backbone.js invented the Model-View-Controller pattern. Whenever a Model changed, all the Views that cared about that Model’s state would re-render.
• AngularJS, for good and for bad, embraced two-way data binding. In practice, well, implicit state changes usually led to code that is both hard to follow and hard to debug.

After React, well there's not just React. A myriad of frameworks flood the JavaScript ecosystem; Vue, Qwik, Million.js, Astro, Remix, SvelteKit, you name it.

Each does something different and each promises better performance than the next of kin. It's like that whenever a developer is not happy with how a framework does something and does not agrees with, the solution is to make a new one! That's how the state of things have always been.

Of course, adoption varies therefore many JS developers don't have a good overview of every existing JS framework with its own syntax and features.

Something that would show them how to perform the same task in different settings would be highly beneficial when trying to
compare frameworks for the cause of adopting the best for the case at hand, or wanting to transfer knowledge from one to an other by mapping their syntaxes.

Well fear not, here's the Component Party! A website that simplifies complex overviews of different JS frameworks for easy understanding.

The list of the frameworks comprises of:

• React
• Vue 3
• Angular
• Angular Renaissance
• Lit
• Vue 2
• Ember Octane
• Solid.js
• Alpine
• Svelte 5
• Ember Polaris (preview)
• Mithril
• Aurelia 2
• Qwik
• Marko
• Aurelia 1

A sample of the common tasks looked at from each framework's perspective are :

• Reactivity:Declare state, Update state, Computed state
• Templating:Minimal template, Styling, Loop, Event click
• Lifecycle: On mount, On unmount
• Component composition:Props,Emit to parent,Slot,Slot fallback,Context

The interface of the site is built with Vite and Svelte and aside from good looking it's also user friendly; by just picking frameworks from the toolbar you get to see how the task is done in each of them. For example, picking React, Svelte3 and Vue and then Reactivity/Declare state, you get:

something that gives a very quick overview of what you're aiming to do. Very useful.

The online playground aside, you can also self-host the Part by forking its Github repository.

So if you want to jump frameworks or just educate yourself then welcome to the party!

More Information

JS Component Party

JS Component Party- Github 

Related Articles

Introducing The LiveCodes Code Playground

JSNation 2024 Sessions Now Available Online  

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info