Component Party 🎉

Web component JS frameworks quick overview by their syntax and features

Website: https://component-party.dev

Why ?

Many JS developers don't have a good overview of every existing JS framework with their own syntax and features. How do we solve this ? Developers love having framework overview by examples. It's a quick introduction before going deeper.

Roadmap

• Add Preact
• Add Stencil
• Add native JS ?

Progression

Svelte

• Reactivity
  • Declare state
  • Update state
  • Computed state
• Templating
  • Minimal template
  • Styling
  • Loop
  • Event click
  • Dom ref
  • Conditional
• Lifecycle
  • On mount
  • On unmount
• Component composition
  • Props
  • Emit to parent
  • Slot
  • Slot fallback
• Form input
  • Input text
  • Checkbox
  • Radio
  • Select
• Webapp features
  • Routing
  • Router link

React

• Reactivity
  • Declare state
  • Update state
  • Computed state
• Templating
  • Minimal template
  • Styling
  • Loop
  • Event click
  • Dom ref
  • Conditional
• Lifecycle
  • On mount
  • On unmount
• Component composition
  • Props
  • Emit to parent
  • Slot
  • Slot fallback
• Form input
  • Input text
  • Checkbox
  • Radio
  • Select
• Webapp features
  • Routing
  • Router link

Vue 3

• Reactivity
  • Declare state
  • Update state
  • Computed state
• Templating
  • Minimal template
  • Styling
  • Loop
  • Event click
  • Dom ref
  • Conditional
• Lifecycle
  • On mount
  • On unmount
• Component composition
  • Props
  • Emit to parent
  • Slot
  • Slot fallback
• Form input
  • Input text
  • Checkbox
  • Radio
  • Select
• Webapp features
  • Routing
  • Router link

Angular

• Reactivity
  • Declare state
  • Update state
  • Computed state
• Templating
  • Minimal template
  • Styling
  • Loop
  • Event click
  • Dom ref
  • Conditional
• Lifecycle
  • On mount
  • On unmount
• Component composition
  • Props
  • Emit to parent
  • Slot
  • Slot fallback
• Form input
  • Input text
  • Checkbox
  • Radio
  • Select
• Webapp features
  • Routing
  • Router link

SolidJS

• Reactivity
  • Declare state
  • Update state
  • Computed state
• Templating
  • Minimal template
  • Styling
  • Loop
  • Event click
  • Dom ref
  • Conditional
• Lifecycle
  • On mount
  • On unmount
• Component composition
  • Props
  • Emit to parent
  • Slot
  • Slot fallback
• Form input
  • Input text
  • Checkbox
  • Radio
  • Select
• Webapp features
  • Routing
  • Router link

Lit

• Reactivity
  • Declare state
  • Update state
  • Computed state
• Templating
  • Minimal template
  • Styling
  • Loop
  • Event click
  • Dom ref
  • Conditional
• Lifecycle
  • On mount
  • On unmount
• Component composition
  • Props
  • Emit to parent
  • Slot
  • Slot fallback
• Form input
  • Input text
  • Checkbox
  • Radio
  • Select
• Webapp features
  • Routing
  • Router link

Ember

• Reactivity
  • Declare state
  • Update state
  • Computed state
• Templating
  • Minimal template
  • Styling
  • Loop
  • Event click
  • Dom ref
  • Conditional
• Lifecycle
  • On mount
  • On unmount
• Component composition
  • Props
  • Emit to parent
  • Slot
  • Slot fallback
• Form input
  • Input text
  • Checkbox
  • Radio
  • Select
• Webapp features
  • Routing
  • Router link

Alpine.js

• Reactivity
  • Declare state
  • Update state
  • Computed state
• Templating
  • Minimal template
  • Styling
  • Loop
  • Event click
  • Dom ref
  • Conditional
• Lifecycle
  • On mount
  • On unmount
• Component composition
  • Props
  • Emit to parent
  • Slot
  • Slot fallback
• Form input
  • Input text
  • Checkbox
  • Radio
  • Select
• Webapp features
  • Routing
  • Router link

Contributing

This site is built with Astro. Site content is written in Markdown format located in content. For simple edits, you can directly edit the file on GitHub and generate a Pull Request.

For local development, pnpm is preferred as package manager:

pnpm i
pnpm run dev

This project requires Node.js to be v14.0.0 or higher, because we use new JavaScript features in our code, such as optional chaining.

Add a framework

1. Fork the project and create a new branch
2. Add the new framework SVG logo in public/framework
3. Install the ESLint plugin associated to the framework
4. In src/frameworks.mjs, add a new entry with SVG link and ESLint configuration