Skip to content

Web component JS frameworks overview by their syntax and features

Notifications You must be signed in to change notification settings

marko-js/component-party

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

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.

πŸ”₯ 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
    • Context
  • Form input
    • Input text
    • Checkbox
    • Radio
    • Select
  • Webapp features
    • Render app
    • 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
    • Context
  • Form input
    • Input text
    • Checkbox
    • Radio
    • Select
  • Webapp features
    • Render app
    • 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
    • Context
  • Form input
    • Input text
    • Checkbox
    • Radio
    • Select
  • Webapp features
    • Render app
    • 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
    • Context
  • Form input
    • Input text
    • Checkbox
    • Radio
    • Select
  • Webapp features
    • Render app
    • 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
    • Context
  • Form input
    • Input text
    • Checkbox
    • Radio
    • Select
  • Webapp features
    • Render app
    • 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
    • Context
  • Form input
    • Input text
    • Checkbox
    • Radio
    • Select
  • Webapp features
    • Render app
    • 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
    • Context
  • Form input
    • Input text
    • Checkbox
    • Radio
    • Select
  • Webapp features
    • Render app
    • Fetch data
    • Router link
    • Routing
Vue 2
  • 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
    • Context
  • Form input
    • Input text
    • Checkbox
    • Radio
    • Select
  • Webapp features
    • Render app
    • 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
    • Context
  • Form input
    • Input text
    • Checkbox
    • Radio
    • Select
  • Webapp features
    • Render app
    • 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
    • Context
  • Form input
    • Input text
    • Checkbox
    • Radio
    • Select
  • Webapp features
    • Render app
    • Fetch data
    • Router link
    • Routing
Aurelia 1
  • 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
    • Context
  • Form input
    • Input text
    • Checkbox
    • Radio
    • Select
  • Webapp features
    • Render app
    • Fetch data
    • Router link
    • Routing

🀝 Contributing

This site is built with Vite and Svelte. 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 v16.0.0 or higher.

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 frameworks.mjs, add a new entry with SVG link and ESLint configuration

πŸ§‘β€πŸ’» Contributors

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

βš–οΈ License

MIT. Made with πŸ’–

About

Web component JS frameworks overview by their syntax and features

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 58.7%
  • Svelte 12.9%
  • TypeScript 12.4%
  • Vue 7.5%
  • HTML 6.3%
  • Handlebars 1.7%
  • Other 0.5%