Web component JS frameworks overview by their syntax and features

by React

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.

? 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
    • Fetch data
    • Router link
    • Routing
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
    • Fetch data
    • Router link
    • Routing
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
    • Fetch data
    • Router link
    • Routing
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
    • Fetch data
    • Router link
    • Routing
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
    • Fetch data
    • Router link
    • Routing
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
    • Fetch data
    • Router link
    • Routing
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
    • Fetch data
    • Router link
    • Routing
Alpine
  • 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
    • Fetch data
    • Router link
    • Routing
Qwik
  • 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
    • Fetch data
    • Router link
    • Routing

? 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

?‍? Contributors

This project exists thanks to all the people who contribute. [Contribute].

⚖️ License

MIT. Made with ?

GitHub

View Github